| src/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/assets/main.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter001.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter002.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter003.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/choice/choice.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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; 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"; 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 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: { 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" 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() { 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 {
