移动端

package.json

@@ -17,7 +17,7 @@
     "@tinymce/tinymce-vue": "^3.2.8",
     "awe-dnd": "^0.3.4",
     "axios": "0.18.1",
-    "book-ui": "file:../GCLS-Book-UI/book-ui-0.3.130.tgz",
+    "book-ui": "file:../GCLS-Book-UI/book-ui-0.4.1.tgz",
     "cnchar": "^3.0.1",
     "cnchar-all": "^3.0.1",
     "cnchar-order": "^3.0.1",

src/components/inputModules/common/TreeView.vue

@@ -392,4 +392,7 @@ export default {
     line-height: 44px;
   }
 }
+.el-tree {
+  background: transparent;
+}
 </style>

src/views/courseView.vue

@@ -28,6 +28,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" @click="toggleMenu">
@@ -56,6 +57,7 @@
           fullscreen ? 'inner-full' : '',
           isPhone ? 'inner-phone' : '',
         ]"
+        :style="{ background: isPhone ? themeColorPhone : '' }"
         v-loading="loading"
       >
         <el-image
@@ -118,6 +120,7 @@
             @finishTaskMaterial="finishTaskMaterial"
             :bookAnswerContent="bookAnswerContent"
             :isAnswerItemShow="isAnswerItemShow"
+            @changeThemeColorPhone="changeThemeColorPhone"
           />
         </template>
         <template v-if="category == 'NNPE'">
@@ -295,6 +298,7 @@ export default {
       pictureUrl: "",
       isPhone: false, // 是否是移动端打开
       showMenu: false, //是否展开菜单
+      themeColorPhone: "", // 移动端护眼色
     };
   },
   created() {
@@ -378,6 +382,9 @@ export default {
     } else {
       _this.isAnswerItemShow = false;
     }
+    this.themeColorPhone = localStorage.getItem("themeColorPhone")
+      ? localStorage.getItem("themeColorPhone")
+      : "";
   },
   mounted() {},
   methods: {
@@ -519,6 +526,9 @@ export default {
       console.log(data);
       console.log(duration);
     },
+    changeThemeColorPhone(color) {
+      this.themeColorPhone = color;
+    },
   },
 };
 </script>
@@ -578,6 +588,8 @@ export default {
         width: 50%;
         height: 100%;
         padding-top: 20px;
+        z-index: 4;
+        overflow-x: hidden;
       }
       &-unfold {
         width: 40px;