From 3085935fbdc96b23d8852c35daa8e1a398ba442d Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 17 十月 2024 10:37:44 +0800
Subject: [PATCH] bug优化
---
src/books/artAndDrama/view/components/chapter001.vue | 4
src/books/botany/view/components/header.vue | 98 ++++++++++++++++++--------------
src/books/botany/assets/main.less | 27 +++++++++
src/books/civilAviation/view/index.vue | 0
src/App.vue | 2
5 files changed, 86 insertions(+), 45 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 28a3f4f..e956ce5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,7 +66,7 @@
// process.env.VUE_APP_RESOURCE_CTX +
// (process.env.VUE_APP_ENV == "product"
// ? process.env.VUE_APP_BOOK_ID
- // : "mathBook")
+ // : "artAndDrama")
// );
this.activeBook = await this.config.getBookConfig(
'http://182.92.203.7:3007/books/resource/'+
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index cee59a7..391ad8d 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -202,13 +202,13 @@
</p>
<p class="text t-l">姝ｄ箟闃熼暱锛�
<textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
+ style="margin-left: 40px; width: 92%" @change="setBookQuestion"
:class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
@blur="handleBlur('one')"></textarea>
</p>
<p class="text t-l">榛戞殫闃熼暱锛�
<textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
+ style="margin-left: 40px; width: 92%" @change="setBookQuestion"
:class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
@blur="handleBlur('two')"></textarea>
</p>
diff --git a/src/books/botany/assets/main.less b/src/books/botany/assets/main.less
index f8f2fb9..7983f41 100644
--- a/src/books/botany/assets/main.less
+++ b/src/books/botany/assets/main.less
@@ -563,4 +563,31 @@
padding-left: 5px;
}
}
+
+.textarea-focused {
+ border-color: #42b983 !important;
+ box-shadow: 0 0 5px rgba(66, 185, 131, 0.5) !important;
+}
+
+.select-border {
+ width: 60px;
+ border: 0;
+ border-bottom: 1px solid #767676;
+
+ &:focus {
+ outline: none;
+ }
+}
+
+
+.input-bottom-border {
+ font-size: 17px;
+ border: 0;
+ border-bottom: 1px solid #000000;
+
+ &:focus {
+ outline: none;
+ }
+}
+
\ No newline at end of file
diff --git a/src/books/botany/view/components/header.vue b/src/books/botany/view/components/header.vue
index ffb8418..6b2f403 100644
--- a/src/books/botany/view/components/header.vue
+++ b/src/books/botany/view/components/header.vue
@@ -800,14 +800,17 @@
</svg><span class="ff-s f-18 fw-800 span-c " style="margin-left: 5px">鎬濊�冧笌璁ㄨ</span></p>
<div style="background-color: rgba(55, 201, 111, 0.06); padding: 10px 20px;">
<p><span class="ff-s">1.濡備綍鍖哄垎姊撴爲銆佹ジ鏍戝拰榛勯噾鏍戯紵</span></p>
- <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
+ <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" class="textarea-box"
+ @change="setBookQuestion" :class="{ 'textarea-focused': isFocused == 'one' }" @focus="handleFocus('one')"
+ @blur="handleBlur()"></textarea>
<p><span class="ff-s">2.濡備綍鍖哄垎楦＄埅妲拰鍏冨疂鏋紵</span></p>
- <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
+ <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" class="textarea-box"
+ @change="setBookQuestion" :class="{ 'textarea-focused': isFocused == 'two' }" @focus="handleFocus('two')"
+ @blur="handleBlur()"></textarea>
<p><span class="ff-s">3.璇曠潃鍒╃敤鏈湴鍖烘槬瀛ｃ�佸瀛ｃ�佺瀛ｃ�佸啲瀛ｅ父瑙佺殑瑙傚彾鏍戞湪鍙婅繘琛屽涵闄㈡鐗╅厤缃紝骞惰揪鍒颁笁瀛ｆ湁鑺便�佸洓瀛ｆ湁鏅殑鏁堟灉銆�</span></p>
- <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
+ <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" class="textarea-box"
+ @change="setBookQuestion" :class="{ 'textarea-focused': isFocused == 'three' }"
+ @focus="handleFocus('three')" @blur="handleBlur()"></textarea>
</div>
<p class="fl al-c"><svg t="1728866427323" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="24341" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
@@ -820,42 +823,41 @@
<p><span class="fw-800">1.鍒ゆ柇棰�</span></p>
<p v-for="(item, index) in questionData.judge[0].value" :key="index">
<span>{{ index + 1 }}</span>.<span>{{ item.stem }}銆�</span>
- <span>锛�
+ <span>
<select class="select-border" v-model="questionData.judge[0].value[index].userAnswer"
@change="saveListenTwo" :disabled="questionData.judge[0].isComplete">
<option v-for="(citem, cindex) in questionData.judge[0].option" :key="cindex" :value="citem">
{{ citem }}
</option>
- </select>锛�
+ </select>
</span>
</p>
<p><span class="fw-800">2.濉┖棰�</span></p>
<p><span class="ff-s">锛�1锛変綘鐢熸椿鐨勫煄甯備腑锛屽父瑙佸僵鍙舵爲绉嶆湁<input :disabled="questionData.isComplete"
- v-model="questionData.cm.one" type="text" class="input-bottom-border" style="width: 60px"
+ v-model="questionData.cm.one" type="text" class="input-bottom-border" style="width: 80px"
@change="setTestData" />銆�
<input :disabled="questionData.isComplete" v-model="questionData.cm.two" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆� <input
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆� <input
:disabled="questionData.isComplete" v-model="questionData.cm.three" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆� <input
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆� <input
:disabled="questionData.isComplete" v-model="questionData.cm.four" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆�
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆�
<input :disabled="questionData.isComplete" v-model="questionData.cm.five" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆�</span></p>
- <p><span class="ff-s">锛�2锛夊洯鏋椾腑甯歌鐨勬槬鑹插彾鏍戠鏈� <input :disabled="questionData.isComplete"
- v-model="questionData.am.one" type="text" class="input-bottom-border" style="width: 60px"
- @change="setTestData" />銆�
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆�</span></p>
+ <p><span class="ff-s">锛�2锛夊洯鏋椾腑甯歌鐨勬槬鑹插彾鏍戠鏈� <input :disabled="questionData.isComplete" v-model="questionData.am.one"
+ type="text" class="input-bottom-border" style="width: 80px" @change="setTestData" />銆�
<input :disabled="questionData.isComplete" v-model="questionData.am.two" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆� <input
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆� <input
:disabled="questionData.isComplete" v-model="questionData.am.three" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />锛岀鑹插彾鏍戠鏈�
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />锛岀鑹插彾鏍戠鏈�
<input :disabled="questionData.isComplete" v-model="questionData.am.four" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆�<input
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆�<input
:disabled="questionData.isComplete" v-model="questionData.am.five" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆� <input
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆� <input
:disabled="questionData.isComplete" v-model="questionData.am.six" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆�
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆�
<input :disabled="questionData.isComplete" v-model="questionData.am.seven" type="text"
- class="input-bottom-border" style="width: 60px" @change="setTestData" />銆�</span></p>
+ class="input-bottom-border" style="width: 80px" @change="setTestData" />銆�</span></p>
</div>
</div>
</div>
@@ -894,7 +896,7 @@
</div>
</div>
<div class="title-text">
- <div class="title-text-box">
+ <div class="title-text-main">
鎬濇兂鍔犳补绔�
</div>
<div class="title-text-triangle"></div>
@@ -928,6 +930,7 @@
},
data() {
return {
+ isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
questionData: {
isComplete: false,
reading: {
@@ -991,8 +994,8 @@
three: "",
four: "",
five: "",
- six:"",
- seven:"",
+ six: "",
+ seven: "",
},
}
}
@@ -1015,6 +1018,13 @@
},
setTestData() {
localStorage.setItem("botany-book-chapter01-question-one", JSON.stringify(this.questionData));
+ },
+ handleFocus(id) {
+ this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue
+
+ },
+ handleBlur() {
+ this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse
},
}
};
@@ -1100,7 +1110,7 @@
}
.cover {
-
+
min-height: 1150px;
}
@@ -1234,6 +1244,20 @@
padding-left: 20px;
}
+.title-text-main {
+ padding: 3px 0 3px 0;
+ min-width: 100px;
+ font-weight: 400;
+ font-size: 20px;
+ color: #FFFFFF;
+ line-height: 27px;
+ background-color: #0E932E;
+ padding-left: 20px;
+}
+
+
+
+
.title-text-triangle {
width: 0;
height: 0;
@@ -1265,21 +1289,11 @@
}
-.select-border {
- border: 0;
- border-bottom: 1px solid #767676;
-
- &:focus {
- outline: none;
- }
-}
-
-.input-bottom-border {
- border: 0;
- border-bottom: 1px solid #000000;
-
- &:focus {
- outline: none;
- }
+.textarea-box {
+ background-color: transparent;
+ margin-left: 20px;
+ max-width: 92%;
+ min-width: 92%;
+ outline:none;
}
</style>
\ No newline at end of file
diff --git a/src/books/civilAviation/view/index.vue b/src/books/civilAviation/view/index.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/books/civilAviation/view/index.vue
--
Gitblit v1.9.1