From 30d147c4c92dbfd5ca1b2f8c24a617dc82d2d25b Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 18:34:51 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/botany/view/components/header.vue | 109 ++++++++++++++++++++++++++++++------------------------
1 files changed, 61 insertions(+), 48 deletions(-)
diff --git a/src/books/botany/view/components/header.vue b/src/books/botany/view/components/header.vue
index d99201e..6ecbea0 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: "",
},
}
}
@@ -1016,11 +1019,18 @@
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
+ },
}
};
</script>
-<style scoped>
+<style lang="less" scoped>
.ti-2 {
text-indent: 2em
}
@@ -1100,7 +1110,8 @@
}
.cover {
- max-width: 816px;
+
+ min-height: 1150px;
}
.header-img {
@@ -1152,7 +1163,7 @@
.main-box {
position: absolute;
top: 250px;
- right: 98px;
+ right: 12%;
}
.main-text {
@@ -1168,7 +1179,7 @@
.text-box {
position: absolute;
top: 500px;
- right: 98px;
+ right: 12%;
}
.text-box-bottom {
@@ -1178,7 +1189,7 @@
}
.text-top {
- /* width: 611px; */
+ width: 520px;
padding: 37px 36px 25px 33px;
background: rgba(55, 201, 111, 0.06);
border-radius: 0px 29px 0px 29px;
@@ -1233,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;
@@ -1242,8 +1267,6 @@
}
.block {
- max-width: 542px;
- min-width: 542px;
text-indent: 0em;
font-family: KaiTi, KaiTi;
font-weight: 400;
@@ -1266,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
--
Gitblit v1.9.1