教材详情页移动端样式调整

src/views/courseView.vue

@@ -30,13 +30,13 @@
         ]"
       >
         <template v-if="isPhone">
-          <div
-            style="text-align: right; color: black; padding: 10px 10px 10px 0"
-          >
+          <div style="text-align: right; color: black" @click="toggleMenu">
             <i
-              @click="toggleMenu"
               :class="[showMenu ? 'el-icon-s-fold' : 'el-icon-s-unfold']"
+              v-if="showMenu"
+              style="padding: 10px"
             ></i>
+            <img src="../assets/menu-phone.png" v-else style="width: 20px" />
           </div>
         </template>
         <TreeView
@@ -293,13 +293,14 @@ export default {
       isAnswerItemShow: false,
       pictureUrl: "",
       isPhone: false, // 是否是移动端打开
-      showMenu: true, //是否展开菜单
+      showMenu: false, //是否展开菜单
     };
   },
   created() {
     console.log("2024-04-23");
     const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
     this.isPhone = regExp.test(navigator.userAgent);
+    this.showMenu = !regExp.test(navigator.userAgent);
     const _this = this;
     if (
       _this.$route.query.encryption &&
@@ -377,27 +378,31 @@ export default {
     },
     changeTreeData(val) {
       const _this = this;
-      this.FatherTreeData = JSON.parse(JSON.stringify(val));
+      if (_this.$route.query.nodeId) {
+        _this.changeId(_this.$route.query.nodeId, "");
+      } else {
+        this.FatherTreeData = JSON.parse(JSON.stringify(val));
 
-      let nodes = this.FatherTreeData;
-      for (let i = 0; i < nodes.length; i++) {
-        if (nodes[i].is_courseware == "true") {
-          _this.changeId(nodes[i].id, "");
-          return false;
-        } else {
-          if (nodes[i].children) {
-            let nodesC = nodes[i].children;
-            for (let j = 0; j < nodesC.length; j++) {
-              if (nodesC[j].is_courseware == "true") {
-                _this.changeId(nodesC[j].id, "");
-                return false;
-              } else {
-                if (nodesC[j].children) {
-                  let nodesCs = nodesC[j].children;
-                  for (let l = 0; j < nodesCs.length; l++) {
-                    if (nodesCs[l].is_courseware == "true") {
-                      _this.changeId(nodesCs[l].id, "");
-                      return false;
+        let nodes = this.FatherTreeData;
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].is_courseware == "true") {
+            _this.changeId(nodes[i].id, "");
+            return false;
+          } else {
+            if (nodes[i].children) {
+              let nodesC = nodes[i].children;
+              for (let j = 0; j < nodesC.length; j++) {
+                if (nodesC[j].is_courseware == "true") {
+                  _this.changeId(nodesC[j].id, "");
+                  return false;
+                } else {
+                  if (nodesC[j].children) {
+                    let nodesCs = nodesC[j].children;
+                    for (let l = 0; j < nodesCs.length; l++) {
+                      if (nodesCs[l].is_courseware == "true") {
+                        _this.changeId(nodesCs[l].id, "");
+                        return false;
+                      }
                     }
                   }
                 }
@@ -420,6 +425,9 @@ export default {
       if (document.getElementById("content-scroll")) {
         document.getElementById("content-scroll").scrollTop = 0;
       }
+      if (_this.isPhone) {
+        _this.showMenu = false;
+      }
     },
     // 点击全屏展示 隐藏tree
     fullScreen() {
@@ -560,7 +568,7 @@ export default {
       }
       &-unfold {
         width: 40px;
-        height: 50px;
+        height: 40px;
         border: none;
         overflow: hidden;
         background: none;
@@ -606,6 +614,7 @@ export default {
       }
       &-phone {
         margin-left: 0;
+        padding: 0;
       }
       .title-box {
         display: flex;