移动端切换背景色

src/components/Adult/Preview.vue

@@ -180,11 +180,13 @@
             class="btn-prev"
             :class="[preClick ? '' : 'btn-prev-disabled']"
             @click="handleNNPEprev"
+            :style="{ top: 84 + (baseSizePhone - 14) + 'px' }"
           />
           <a
             class="btn-next"
             :class="[nextClick ? '' : 'btn-next-disabled']"
             @click="handleNNPEnext"
+            :style="{ top: 84 + (baseSizePhone - 14) + 'px' }"
           />
         </div>
         <div
@@ -213,8 +215,6 @@
         @change="handleCheckAllChangeNPC"
         >全选</el-checkbox
       >
-      <a @click="baseSizePhone = baseSizePhone + 2">da</a
-      ><a @click="baseSizePhone = baseSizePhone - 2">xiao</a>
       <div v-if="cur" class="NNPE-Book-content-inner">
         <div
           v-for="(item, index) in cur.cur_fn_data"
@@ -1008,6 +1008,43 @@
           >提交</a
         >
       </div>
+      <div class="size-setting">
+        <div class="size-show" v-if="sizeSettingFlag">
+          <i class="el-icon-arrow-right" @click="sizeSettingFlag = false"></i>
+          <span
+            :class="[
+              'font-jian-black',
+              baseSizePhone === 12 ? 'font-jian-white-disabled' : ''
+            ]"
+            @click="setFontSize('-')"
+          ></span>
+          <span :class="['font-img-black']"></span
+          ><span
+            :class="[
+              'font-jia-black',
+              baseSizePhone === 22 ? 'font-jia-white-disabled' : ''
+            ]"
+            @click="setFontSize('+')"
+          ></span>
+          <span
+            class="theme-color-phone"
+            :style="{ background: themeColorPhone[themeColorPhoneIndex] }"
+            @click="themeColorPhoneFlag = true"
+          ></span>
+          <div class="theme-color-phone-list" v-if="themeColorPhoneFlag">
+            <span
+              :style="{ background: itemColor }"
+              v-for="(itemColor, indexColor) in themeColorPhone"
+              :key="indexColor"
+              :class="[indexColor === themeColorPhoneIndex ? 'active' : '']"
+              @click="changeThemeColorPhone(itemColor, indexColor)"
+            ></span>
+          </div>
+        </div>
+        <div v-else>
+          <i class="el-icon-arrow-left" @click="sizeSettingFlag = true"></i>
+        </div>
+      </div>
     </template>
     <template v-else>
       <div class="NNPE-title NNPE-title-top">
@@ -2315,7 +2352,22 @@ export default {
       isIndeterminate: false,
       NpcNewWordMp3: "",
       isPhone: false, // 是否是移动端打开
-      baseSizePhone: 14 // 移动端基础字号大小
+      baseSizePhone: localStorage.getItem("baseSizePhone")
+        ? localStorage.getItem("baseSizePhone") * 1
+        : 14, // 移动端基础字号大小
+      sizeSettingFlag: false, // 设置字号大小显示
+      themeColorPhone: [
+        "#D8E4F0",
+        "#FDE6E0",
+        "#FFFFFF",
+        "#E4F0D8",
+        "#E8E3CF",
+        "rgb(234, 234, 239)"
+      ], // 移动端主题色
+      themeColorPhoneIndex: localStorage.getItem("themeColorPhoneIndex")
+        ? localStorage.getItem("themeColorPhoneIndex") * 1
+        : 2, // 移动端主题色索引
+      themeColorPhoneFlag: false
     };
   },
   computed: {
@@ -2371,7 +2423,6 @@ export default {
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    console.log("2024-05-27");
     const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
     this.isPhone = regExp.test(navigator.userAgent);
   },
@@ -2920,6 +2971,27 @@ export default {
         this.groupIndexList = [];
         this.isIndeterminate = false;
       }
+    },
+    setFontSize(type) {
+      let _this = this;
+      if (type == "-") {
+        if (_this.baseSizePhone >= 14) {
+          this.baseSizePhone = this.baseSizePhone - 2;
+        }
+      } else if (type == "+") {
+        if (_this.baseSizePhone <= 20) {
+          this.baseSizePhone = this.baseSizePhone + 2;
+        }
+      }
+
+      localStorage.setItem("baseSizePhone", this.baseSizePhone);
+    },
+    changeThemeColorPhone(color, index) {
+      this.themeColorPhoneIndex = index;
+      this.themeColorPhoneFlag = false;
+      localStorage.setItem("themeColorPhoneIndex", index);
+      localStorage.setItem("themeColorPhone", color);
+      this.$emit("changeThemeColorPhone", color);
     }
   } // 如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -3222,6 +3294,7 @@ export default {
   }
   &-phone {
     width: 100%;
+    height: 100vh;
     padding-bottom: 10px;
     // transform-origin: 0 0; /* 设置变换的原点为元素的左上角 */
     // transform: scale(0.6);
@@ -3299,6 +3372,86 @@ export default {
       padding: 6px 12px;
       line-height: 1.2;
     }
+    .size-setting {
+      position: fixed;
+      right: 0;
+      top: 40%;
+      z-index: 1;
+      width: auto;
+      padding: 6px 0 6px 2px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 1);
+      border-radius: 50px 0 0 50px;
+      background: #fff;
+      opacity: 0.9;
+      .el-icon-arrow-right,
+      .el-icon-arrow-left {
+        font-size: 20px;
+        color: #666666;
+        padding: 2px 0;
+      }
+      .size-show {
+        display: flex;
+        column-gap: 4px;
+        padding: 0 11px 0 6px;
+        span {
+          width: 24px;
+          height: 24px;
+          display: block;
+        }
+      }
+      .font-jian-black {
+        background: url("../../assets/NPC/jian-black.png") no-repeat left top;
+        background-size: 100% 100%;
+        &.font-jian-white-disabled {
+          background: url("../../assets/NPC/jian-white-disabled.png") no-repeat
+            left top;
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+      }
+      .font-img-black {
+        background: url("../../assets/NPC/fontSize-black.png") no-repeat left
+          top;
+        background-size: 100% 100%;
+      }
+      .font-jia-black {
+        background: url("../../assets/NPC/jia-black.png") no-repeat left top;
+        background-size: 100% 100%;
+        &.font-jia-white-disabled {
+          background: url("../../assets/NPC/jia-white-disabled.png") no-repeat
+            left top;
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+      }
+      .theme-color-phone {
+        border-radius: 50%;
+        border: 1px solid #666666;
+        width: 20px !important;
+        height: 20px !important;
+        margin-top: 2px;
+      }
+      .theme-color-phone-list {
+        position: absolute;
+        top: 50%;
+        right: 7px;
+        margin-top: -66px;
+        background: rgba(229, 229, 229, 0.5);
+        padding: 4px;
+        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 28px;
+        span {
+          width: 20px;
+          height: 20px;
+          border: 1px solid #fff;
+          border-radius: 50%;
+          margin: 4px 0;
+          &.active {
+            border-color: rgba(102, 102, 102, 1);
+          }
+        }
+      }
+    }
   }
 }
 .submitLookAnswer {

src/components/Adult/phonePreview/DialogueArticleViewChs/AnswerModel.vue

@@ -21,7 +21,13 @@
     </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
-        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <p
+          class="notice"
+          v-if="curQue.notice"
+          :style="{ fontSize: baseSizePhone + 'px' }"
+        >
+          {{ curQue.notice }}
+        </p>
         <div
           :class="[
             'NNPE-detail',
@@ -42,12 +48,16 @@
                 class="roleDetail"
                 v-if="item.roleDetail.detail.wordsList.length > 0"
               >
-                <span class="pinyin">{{
-                  item.roleDetail.detail.wordsList | handlePinyin
-                }}</span>
-                <span class="chs">{{
-                  item.roleDetail.detail.wordsList | handleChs
-                }}</span>
+                <span
+                  class="pinyin"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
+                >
+                <span
+                  class="chs"
+                  :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handleChs }}</span
+                >
               </div>
               <div
                 class="para-con"
@@ -56,6 +66,7 @@
                 <div
                   v-if="item.enwords && enPosition && enPosition == 'top'"
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -108,6 +119,7 @@
                                 ? 'NNPE-pinyin-underline'
                                 : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin | handlePY }}</span
                           >
                           <template v-if="!pItem.isHeng">
@@ -214,6 +226,7 @@
                                 ? 'NNPE-pinyin-underline'
                                 : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ pItem.pinyin | handlePY }}</span
                           >
                         </span>
@@ -241,6 +254,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{
                               item.wordsList[pIndex + 1].pinyin | handlePY
                             }}</span
@@ -279,6 +293,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{
                               item.wordsList[pIndex + 1].pinyin | handlePY
                             }}</span
@@ -318,6 +333,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -362,6 +378,7 @@
                                 : ''
                             ]"
                             style="text-align: left"
+                            :style="{ fontSize: baseSizePhone + 'px' }"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -380,6 +397,7 @@
                               ? 'NNPE-pinyin-underline'
                               : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin | handlePY }}</span
                         >
                         <template v-if="!pItem.isHeng">
@@ -391,6 +409,7 @@
                                 ? 'padding'
                                 : ''
                             ]"
+                            :style="{ fontSize: baseSizePhone + 6 + 'px' }"
                           >
                             <template>
                               <span
@@ -503,6 +522,7 @@
                               ? 'NNPE-pinyin-underline'
                               : ''
                           ]"
+                          :style="{ fontSize: baseSizePhone + 'px' }"
                           >{{ pItem.pinyin | handlePY }}</span
                         >
                       </template>
@@ -523,6 +543,7 @@
                     item.enwords &&
                       (!enPosition || (enPosition && enPosition == 'bottom'))
                   "
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                   class="enwords"
                 >
                   {{ item.enwords }}
@@ -607,12 +628,16 @@
                 class="roleDetail"
                 v-if="item.roleDetail.detail.wordsList.length > 0"
               >
-                <span class="pinyin">{{
-                  item.roleDetail.detail.wordsList | handlePinyin
-                }}</span>
-                <span class="chs">{{
-                  item.roleDetail.detail.wordsList | handleChs
-                }}</span>
+                <span
+                  class="pinyin"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
+                >
+                <span
+                  class="chs"
+                  :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+                  >{{ item.roleDetail.detail.wordsList | handleChs }}</span
+                >
               </div>
               <div
                 class="para-con"
@@ -621,6 +646,7 @@
                 <div
                   v-if="item.enwords && enPosition && enPosition == 'top'"
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -631,9 +657,11 @@
                   :key="'wordsList' + pIndex"
                 >
                   <template v-if="!pItem.isHeng">
-                    <span class="NNPE-para-pinyin padding">{{
-                      pItem.con
-                    }}</span>
+                    <span
+                      class="NNPE-para-pinyin padding"
+                      :style="{ fontSize: baseSizePhone + 'px' }"
+                      >{{ pItem.con }}</span
+                    >
                   </template>
                   <template v-else>
                     <template v-if="judgeAnswer == 'standardAnswer'">
@@ -696,6 +724,7 @@
                       (!enPosition || (enPosition && enPosition == 'bottom'))
                   "
                   class="enwords"
+                  :style="{ fontSize: baseSizePhone + 'px' }"
                 >
                   {{ item.enwords }}
                 </div>
@@ -785,7 +814,8 @@ export default {
     "TaskModel",
     "judgeAnswer",
     "audioWidth",
-    "enPosition"
+    "enPosition",
+    "baseSizePhone"
   ],
   components: {
     AudioLine,
@@ -881,12 +911,11 @@ export default {
     },
     hengStyle() {
       return function(config) {
-        let sizeVal =
-          config && config.fontSize ? config.fontSize.replace("px", "") : 20;
+        let sizeVal = this.baseSizePhone + 6;
         return {
           minHeight: Number(sizeVal) + 13 + "px",
           lineHeight: Number(sizeVal) + 12 + "px",
-          fontSize: config ? config.fontSize : "20px",
+          fontSize: sizeVal + "px",
           fontFamily: config ? config.fontFamily : "FZJCGFKTK",
           textAlign:
             config && config.DiaTextAlign ? config.DiaTextAlign : "left",
@@ -899,8 +928,7 @@ export default {
     },
     boxStyle() {
       return function(config, isHasPY) {
-        let sizeVal =
-          config && config.fontSize ? config.fontSize.replace("px", "") : 20;
+        let sizeVal = this.baseSizePhone;
         return {
           minHeight: Number(sizeVal) + 13 + (isHasPY ? 18 : 0) + "px"
         };
@@ -1323,7 +1351,7 @@ export default {
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
             font-size: 20px;
-            line-height: 32px;
+            // line-height: 1.6;
             min-height: 33px;
             color: #000000;
             &.active {
@@ -1385,7 +1413,7 @@ export default {
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
           font-size: 20px;
-          line-height: 32px;
+          // line-height: 1.6;
           min-height: 33px;
           color: #000000;
           &.active {
@@ -1452,14 +1480,14 @@ export default {
         .pinyin {
           font-family: "GB-PINYINOK-B";
           font-size: 14px;
-          line-height: 18px;
+          line-height: 1.4;
           color: rgba(0, 0, 0, 0.85);
           margin-right: 4px;
         }
         .chs {
           font-family: "FZJCGFKTK";
           font-size: 20px;
-          line-height: 24px;
+          line-height: 1.2;
           color: rgba(0, 0, 0, 0.85);
         }
       }
@@ -1525,7 +1553,7 @@ export default {
     padding: 0 10px;
     box-sizing: border-box;
     color: #000000;
-    line-height: 26px;
+    line-height: 1.3;
   }
 }
 .NPC-ArticleAnswerView {

src/components/Adult/phonePreview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

@@ -1,8 +1,7 @@
 <!--  -->
 <template>
   <div
-    class="dialogue-answer-view NPC-zhedie"
-    :class="[isPhone ? 'dialogue-answer-view-phone' : '']"
+    class="dialogue-answer-view NPC-zhedie dialogue-answer-view-phone"
     v-if="isShowTemp"
   >
     <!-- 标题 -->
@@ -27,7 +26,13 @@
 
       <el-collapse-transition>
         <div :class="['dialogue-answer-content']" v-show="wordShow">
-          <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
+          <div
+            class="guide"
+            v-if="curQue.guide"
+            :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+          >
+            {{ curQue.guide }}
+          </div>
           <div
             :class="[
               'dialogue-answer-inner',
@@ -43,9 +48,12 @@
             v-for="(item, index) in curQue.list"
             :key="'list' + index"
           >
-            <span class="number" v-if="item.number && !isPhone">{{
-              item.number
-            }}</span>
+            <span
+              class="number"
+              v-if="item.number"
+              :style="{ fontSize: baseSizePhone + 'px' }"
+              >{{ item.number }}</span
+            >
             <div class="dialogue-item">
               <div
                 class="dialogue-img"
@@ -53,8 +61,8 @@
               >
                 <el-image
                   :style="{
-                    width: isPhone ? '110px' : '196px',
-                    height: isPhone ? '120px' : '164px'
+                    width: '110px',
+                    height: '120px'
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
@@ -72,6 +80,7 @@
                   :listIndex="index"
                   :judgeAnswer="judgeAnswer"
                   :audioWidth="item.number ? 592 : 620"
+                  :baseSizePhone="baseSizePhone"
                 />
               </div>
               <template
@@ -83,7 +92,11 @@
                     curQue.option[index].detail.length > 0
                 "
               >
-                <OptionModel :curOption="curQue.option[index]" :index="index" />
+                <OptionModel
+                  :curOption="curQue.option[index]"
+                  :index="index"
+                  :baseSizePhone="baseSizePhone"
+                />
               </template>
             </div>
           </div>
@@ -92,14 +105,25 @@
     </template>
     <template v-else>
       <div class="dialogue-answer-content">
-        <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
+        <div
+          class="guide"
+          :style="{ fontSize: baseSizePhone - 2 + 'px' }"
+          v-if="curQue.guide"
+        >
+          {{ curQue.guide }}
+        </div>
         <div
           class="dialogue-answer-inner"
           v-for="(item, index) in curQue.list"
           :key="'list' + index"
         >
           <template v-if="isShowQue(index)">
-            <span class="number" v-if="item.number">{{ item.number }}</span>
+            <span
+              class="number"
+              v-if="item.number"
+              :style="{ fontSize: baseSizePhone + 'px' }"
+              >{{ item.number }}</span
+            >
             <div class="dialogue-item">
               <div
                 class="dialogue-img"
@@ -107,8 +131,8 @@
               >
                 <el-image
                   :style="{
-                    width: isPhone ? '110px' : '196px',
-                    height: isPhone ? '120px' : '164px'
+                    width: '110px',
+                    height: '120px'
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
@@ -126,6 +150,7 @@
                   :TaskModel="TaskModel"
                   :judgeAnswer="judgeAnswer"
                   :audioWidth="item.number ? 592 : 620"
+                  :baseSizePhone="baseSizePhone"
                 />
               </div>
               <template
@@ -137,7 +162,11 @@
                     curQue.option[index].detail.length > 0
                 "
               >
-                <OptionModel :curOption="curQue.option[index]" :index="index" />
+                <OptionModel
+                  :curOption="curQue.option[index]"
+                  :index="index"
+                  :baseSizePhone="baseSizePhone"
+                />
               </template>
               <template
                 v-if="
@@ -180,7 +209,7 @@ export default {
     OptionModel,
     WordcardModel
   },
-  props: ["curQue", "colorBox", "TaskModel", "judgeAnswer", "isPhone"],
+  props: ["curQue", "colorBox", "TaskModel", "judgeAnswer", "baseSizePhone"],
   data() {
     return {
       wordShow: true,
@@ -362,7 +391,7 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
-    padding: 16px 0 0px 0;
+    padding: 5px 0;
     &.hasoption {
       border-bottom: 1px solid rgba(0, 0, 0, 0.1);
       padding-bottom: 24px;
@@ -429,6 +458,7 @@ export default {
           width: 120px;
           height: 130px;
           padding: 5px;
+          flex-shrink: 0;
         }
       }
     }

src/components/Adult/phonePreview/DialogueArticleViewChs/OptionModel.vue

@@ -17,8 +17,16 @@
         v-for="(wItem, wIndex) in item"
         :key="'curOption_word' + wIndex"
       >
-        <span class="NNPE-pinyin padding">{{ wItem.pinyin }}</span>
-        <span class="NNPE-chs padding">{{ wItem.chs }}</span>
+        <span
+          class="NNPE-pinyin padding"
+          :style="{ fontSize: baseSizePhone + 'px' }"
+          >{{ wItem.pinyin }}</span
+        >
+        <span
+          class="NNPE-chs padding"
+          :style="{ fontSize: baseSizePhone + 6 + 'px' }"
+          >{{ wItem.chs }}</span
+        >
       </span>
     </div>
   </div>
@@ -27,20 +35,20 @@
 <script>
 export default {
   components: {},
-  props: ["curOption", "index"],
+  props: ["curOption", "index", "baseSizePhone"],
   data() {
     return {
       bgList: [
         {
           bg: require("../../../../assets/NPC/op-pink-bg.png"),
-          bgLeft: require("../../../../assets/NPC/op-pink-left.png"),
+          bgLeft: require("../../../../assets/NPC/op-pink-left.png")
         },
         {
           bg: require("../../../../assets/NPC/op-blue-bg.png"),
-          bgLeft: require("../../../../assets/NPC/op-blue-left.png"),
-        },
+          bgLeft: require("../../../../assets/NPC/op-blue-left.png")
+        }
       ],
-      resArr: [],
+      resArr: []
     };
   },
   computed: {},
@@ -49,13 +57,13 @@ export default {
   methods: {
     handleData() {
       let resArr = [];
-      this.curOption.detail.forEach((dItem) => {
-        dItem.wordsList.forEach((sItem) => {
+      this.curOption.detail.forEach(dItem => {
+        dItem.wordsList.forEach(sItem => {
           let sentArr = [];
-          sItem.forEach((wItem) => {
+          sItem.forEach(wItem => {
             let obj = {
               chs: wItem.chs,
-              pinyin: wItem.pinyin,
+              pinyin: wItem.pinyin
             };
             sentArr.push(obj);
           });
@@ -64,7 +72,7 @@ export default {
       });
       this.resArr = resArr;
       console.log(this.resArr);
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -82,10 +90,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .dialogue-option {
   position: relative;
@@ -164,4 +172,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/Adult/phonePreview/components/FreewriteWord.vue

@@ -182,7 +182,7 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 999;
+  z-index: 1;
   width: 84px;
   height: 84px;
   background: url("../../../../assets/NPC/strock-play-red-click.png");

src/components/Adult/phonePreview/components/Strockplayredline.vue

@@ -11,7 +11,7 @@
           ? 'red-border'
           : themeColor == 'brown'
           ? 'brown-border'
-          : 'red-border',
+          : 'red-border'
       ]"
       v-if="playStorkes"
     ></div>
@@ -31,17 +31,17 @@ export default {
     "playStorkes",
     "strokeColor",
     "wordNum",
-    "themeColor",
+    "themeColor"
   ],
   data() {
     return {
-      writer: null,
+      writer: null
     };
   },
   computed: {},
   watch: {
     targetDiv: {
-      handler: function (val, oldVal) {
+      handler: function(val, oldVal) {
         if (val != oldVal) {
           let _this = this;
           _this.$nextTick(() => {
@@ -50,8 +50,8 @@ export default {
         }
       },
       // 深度观察监听
-      deep: true,
-    },
+      deep: true
+    }
   },
   //方法集合
   methods: {
@@ -63,18 +63,18 @@ export default {
         _this.targetDiv,
         _this.Book_text,
         {
-          charDataLoader: function (char, onComplete) {
+          charDataLoader: function(char, onComplete) {
             let MethodName = "hz_resource_manager-GetHZStrokesContent";
             let data = {
-              hz: char,
+              hz: char
             };
-            getLogin(MethodName, data).then((res) => {
+            getLogin(MethodName, data).then(res => {
               onComplete(res);
             });
           },
           padding: 5,
           showOutline: true,
-          strokeColor: _this.strokeColor ? _this.strokeColor : "#000",
+          strokeColor: _this.strokeColor ? _this.strokeColor : "#000"
         }
       );
     },
@@ -82,7 +82,7 @@ export default {
       let _this = this;
       _this.writer.animateCharacter();
       event.stopPropagation();
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -99,10 +99,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .strockplayRedInner {
   position: relative;
@@ -127,7 +127,7 @@ export default {
   position: absolute;
   right: -2px;
   top: 0px;
-  z-index: 999;
+  z-index: 1;
   width: 22px !important;
   height: 22px !important;
   display: flex;
@@ -178,4 +178,4 @@ export default {
     background-size: 100%;
   }
 }
-</style>
+</style>

src/components/Adult/preview/components/FreewriteWord.vue

@@ -182,7 +182,7 @@ export default {
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 999;
+  z-index: 1;
   width: 84px;
   height: 84px;
   background: url("../../../../assets/NPC/strock-play-red-click.png");

src/components/Adult/preview/components/Strockplayredline.vue

@@ -11,7 +11,7 @@
           ? 'red-border'
           : themeColor == 'brown'
           ? 'brown-border'
-          : 'red-border',
+          : 'red-border'
       ]"
       v-if="playStorkes"
     ></div>
@@ -31,17 +31,17 @@ export default {
     "playStorkes",
     "strokeColor",
     "wordNum",
-    "themeColor",
+    "themeColor"
   ],
   data() {
     return {
-      writer: null,
+      writer: null
     };
   },
   computed: {},
   watch: {
     targetDiv: {
-      handler: function (val, oldVal) {
+      handler: function(val, oldVal) {
         if (val != oldVal) {
           let _this = this;
           _this.$nextTick(() => {
@@ -50,8 +50,8 @@ export default {
         }
       },
       // 深度观察监听
-      deep: true,
-    },
+      deep: true
+    }
   },
   //方法集合
   methods: {
@@ -63,18 +63,18 @@ export default {
         _this.targetDiv,
         _this.Book_text,
         {
-          charDataLoader: function (char, onComplete) {
+          charDataLoader: function(char, onComplete) {
             let MethodName = "hz_resource_manager-GetHZStrokesContent";
             let data = {
-              hz: char,
+              hz: char
             };
-            getLogin(MethodName, data).then((res) => {
+            getLogin(MethodName, data).then(res => {
               onComplete(res);
             });
           },
           padding: 5,
           showOutline: true,
-          strokeColor: _this.strokeColor ? _this.strokeColor : "#000",
+          strokeColor: _this.strokeColor ? _this.strokeColor : "#000"
         }
       );
     },
@@ -82,7 +82,7 @@ export default {
       let _this = this;
       _this.writer.animateCharacter();
       event.stopPropagation();
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -99,10 +99,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .strockplayRedInner {
   position: relative;
@@ -127,7 +127,7 @@ export default {
   position: absolute;
   right: -2px;
   top: 0px;
-  z-index: 999;
+  z-index: 1;
   width: 22px !important;
   height: 22px !important;
   display: flex;
@@ -178,4 +178,4 @@ export default {
     background-size: 100%;
   }
 }
-</style>
+</style>

src/components/TreeView.vue

@@ -369,4 +369,7 @@ export default {
     }
   }
 }
+.el-tree {
+  background: transparent;
+}
 </style>

src/views/courseView.vue

@@ -9,6 +9,7 @@
           isPhone ? 'content-tree-phone' : '',
           showMenu ? '' : 'content-tree-unfold'
         ]"
+        :style="{ background: isPhone && showMenu ? themeColorPhone : '' }"
       >
         <template v-if="isPhone">
           <div style="text-align: right;color: black;padding: 10px;">
@@ -35,6 +36,7 @@
           fullscreen ? 'inner-full' : '',
           isPhone ? 'inner-phone' : ''
         ]"
+        :style="{ background: isPhone ? themeColorPhone : '' }"
       >
         <el-image
           :src="pictureUrl"
@@ -86,6 +88,7 @@
           :is-show-save="false"
           :isAnswerItemShow="isAnswerItemShow"
           @finishTaskMaterial="finishTaskMaterial"
+          @changeThemeColorPhone="changeThemeColorPhone"
         />
       </div>
       <a
@@ -150,7 +153,8 @@ export default {
       pictureUrl: "",
       isPhone: false, // 是否是移动端打开
 
-      showMenu: true //是否展开菜单
+      showMenu: true, //是否展开菜单
+      themeColorPhone: "" // 移动端护眼色
     };
   },
   created() {
@@ -167,6 +171,9 @@ export default {
     } else {
       _this.isAnswerItemShow = false;
     }
+    this.themeColorPhone = localStorage.getItem("themeColorPhone")
+      ? localStorage.getItem("themeColorPhone")
+      : "";
   },
   mounted() {},
   methods: {
@@ -297,7 +304,7 @@ export default {
               };
             } else if (this.category == "NPC") {
               _this.context = JSON.parse(res.content);
-              console.log(_this.context);
+              // console.log(_this.context);
             }
           } else {
             _this.context = null;
@@ -339,6 +346,9 @@ export default {
       console.log("答题时间" + time);
       console.log("答对个数" + rightNumber);
       console.log("答错个数" + errorNumber);
+    },
+    changeThemeColorPhone(color) {
+      this.themeColorPhone = color;
     }
   }
 };
@@ -370,6 +380,7 @@ export default {
       &-phone {
         width: 50%;
         padding-top: 20px;
+        z-index: 3;
       }
       &-unfold {
         width: 40px;
@@ -525,6 +536,7 @@ export default {
       background-size: 32px;
     }
     .inner-phone {
+      height: 100vh;
       .title-box {
         margin-bottom: 0;
       }
@@ -560,6 +572,9 @@ export default {
   height: 700px;
   margin: 0 auto;
 }
+:deep .el-tree {
+  background: transparent;
+}
 </style>
 <style lang="scss">
 .title-box {