From 8ce5acd0a7a61de43cbd2d3d1ece2c6c9287779a Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期一, 24 六月 2024 11:15:05 +0800
Subject: [PATCH] 艺术戏剧（选择题完成）
---
src/books/artAndDrama/assets/main.less | 8 +++
src/books/artAndDrama/view/components/chapter003.vue | 12 +++---
src/books/artAndDrama/view/components/chapter002.vue | 3 +
src/books/artAndDrama/view/components/chapter001.vue | 2
src/App.vue | 2
src/components/choice/choice.vue | 59 ++++++++++++++++++++++-------
src/books/artAndDrama/view/components/index.vue | 6 +-
7 files changed, 65 insertions(+), 27 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 58ee2a9..77be6ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
? process.env.VUE_APP_BOOK_ID
- : "mathBook")
+ : "artAndDrama")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 7449260..8f055c3 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -409,7 +409,6 @@
font-size:1.1em;
padding-left: 1em;
}
-
// 鑷畾涔�
.page-box {
position: relative;
@@ -425,6 +424,7 @@
// font-weight: bold;
// font-size: 18px;
// }
+
.folder{
color: brown;
font-size: 18px;
@@ -453,6 +453,12 @@
font-family: "STkaiti";
font-size: 22px;
}
+ .text2{
+ margin: 0 8%;
+ font-family: "STkaiti";
+ font-size: 19px;
+ text-align: left;
+ }
//搴曢儴鍙傝�冩枃鐚殑鏍峰紡
.references{
font-family: "STkaiti";
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index bb34338..0dd86a0 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -66,7 +66,7 @@
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
</p>
- <choice class="text" :questions="questions"></choice>
+ <choice class="text" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="#F58200" hoverColor="white"></choice>
<p class="center text">
<video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 49800fa..ccb3aaf 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -97,7 +97,7 @@
<h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
<p class="text"><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p>
- <choice class="text" :questions="questions"></choice>
+ <choice class="text" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="green" hoverColor="white"></choice>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -355,6 +355,7 @@
type: 'sort'
},
],
+ accentColor:'green',
};
},
methods: {
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index cd6c46f..010c51b 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -116,17 +116,17 @@
<h2 id="b014" class="problem">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
<h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
<p class="text"><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
- <p class="text">鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
+ <p class="text2">鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
- <p class="text">鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
+ <p class="text2">鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
- <p class="text">浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
+ <p class="text2">浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
- <p class="text">璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
+ <p class="text2">璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
- <p class="text">缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
+ <p class="text2">缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
- <p class="text">缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
+ <p class="text2">缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
<p class="text" style="margin-top: 7%;"><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
<p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 0dc4326..289799e 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -155,8 +155,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- setTimeout(() => {
- this.gotoPage(3,16);
+ //setTimeout(() => {
+ //this.gotoPage(3,16);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -184,7 +184,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- }, 500);
+ //}, 500);
},
methods: {
// setZoom1() {
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
index 9e45271..ae0c421 100644
--- a/src/components/choice/choice.vue
+++ b/src/components/choice/choice.vue
@@ -12,16 +12,16 @@
xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170">
<path
d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
- fill="rgb(245, 130, 32)" p-id="87383"></path>
+ fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87383"></path>
</svg>
<svg v-else t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink"
width="170" height="170">
<path
d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
- fill="rgb(245, 130, 32)" p-id="87530"></path>
+ fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87530"></path>
</svg>
- <span class="option-text">{{ option.value }}銆亄{option.txt }}</span>
+ <span class="option-text">{{ option.value }}銆亄{ option.txt }}</span>
</span>
</div>
</div>
@@ -42,10 +42,10 @@
</div>
<!-- 棰樼洰鎸夐挳閮ㄥ垎 -->
<div class="btn-button">
- <button v-if="currentIndex > 0" @click="prevQuestion">涓婁竴棰�</button>
- <button v-if="currentIndex < questions.length - 1" @click="nextQuestion">涓嬩竴棰�</button>
- <button @click="resetQuestion">閲嶅仛</button>
- <button @click="submitQuestion">鎻愪氦</button>
+ <button v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">涓婁竴棰�</button>
+ <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">涓嬩竴棰�</button>
+ <button @click="resetQuestion" :style="mergedStyles">閲嶅仛</button>
+ <button @click="submitQuestion" :style="mergedStyles">鎻愪氦</button>
</div>
</div>
</template>
@@ -196,6 +196,7 @@
choiceData: {
isCorrect: false,
},
+ isPrimary: true,
};
},
props: {
@@ -203,11 +204,36 @@
type: Array,
required: true
},
+ primaryColor: {
+ type: String,
+ default: "#F58220",
+ },
+ hoverBackgroundColor: {
+ type: String,
+ default: 'rgb(245, 130, 32)' // 榛樿鍊�
+ },
+ hoverColor: {
+ type: String,
+ default: 'white' // 榛樿鍊�
+ }
},
computed: {
currentQuestion() {
return this.questions[this.currentIndex];
},
+ setHoverStyles() {
+ return {
+ '--hover-bg-color': this.hoverBackgroundColor,
+ '--hover-color': this.hoverColor
+ };
+ },
+ mergedStyles() {
+ // 鍚堝苟鐩存帴鏍峰紡鍜岃绠楀睘鎬ф牱寮�
+ return {
+ borderColor: this.primaryColor,
+ ...this.setHoverStyles
+ };
+ }
},
methods: {
toggleOption(index) {
@@ -217,14 +243,17 @@
// 澶氶�夋椂鍒囨崲閫変腑鐘舵��
console.log(this.selectedOptions, index)
const isAlreadySelected = this.selectedOptions.includes(index);
-
if (isAlreadySelected) {
this.selectedOptions = this.selectedOptions.filter(i => i !== index);
} else {
this.selectedOptions.push(index);
}
-
+
}
+ },
+ getOptionColor(index) {
+ // 鏍规嵁閫夐」鏄惁琚�変腑杩斿洖鐩稿簲鐨勯鑹�
+ return this.optionColors[index] || this.defaultColor; // 濡傛灉娌℃湁璁剧疆棰滆壊锛屽垯杩斿洖榛樿棰滆壊
},
getSelectedOptions() {
return this.selectedOptions.map(index => {
@@ -386,11 +415,13 @@
}
.btn-button>button:hover {
- background-color: rgb(245, 130, 32);
- /* 榧犳爣鎮仠鏃惰儗鏅壊鍙樹负绾㈣壊 */
- color: white;
- /* 榧犳爣鎮仠鏃跺瓧浣撻鑹插彉涓虹櫧鑹� */
- /* 鍏朵粬浣犳兂瑕佺殑鎮仠鏍峰紡... */
+ // background-color: rgb(245, 130, 32);
+ // /* 榧犳爣鎮仠鏃惰儗鏅壊鍙樹负绾㈣壊 */
+ // color: white;
+ // /* 榧犳爣鎮仠鏃跺瓧浣撻鑹插彉涓虹櫧鑹� */
+ // /* 鍏朵粬浣犳兂瑕佺殑鎮仠鏍峰紡... */
+ background-color: var(--hover-bg-color);
+ color: var(--hover-color);
}
.active {
--
Gitblit v1.9.1