菜单

src/components/inputModules/common/TreeView.vue

@@ -7,10 +7,19 @@
     <el-tree
       :data="treeData"
       :props="defaultProps"
+      highlight-current
       @node-click="handleNodeClick"
+      :default-checked-keys="[activeIndex]"
     >
       <div class="custom-tree-node" slot-scope="{ node }">
-        <div>
+        <div
+          :class="[
+            activeIndex == node.data.id
+              ? 'tree_box_item_active'
+              : 'tree_box_item',
+            node.data.children ? 'tree_box_item_father' : '',
+          ]"
+        >
           <span style="margin-right: 10px">{{ node.label }}</span>
         </div>
       </div></el-tree
@@ -128,6 +137,8 @@ export default {
       defaultProps: {
         children: "children",
         label: "label",
+        nodeKey: "id",
+
         isLeaf: (data, node) => {
           if (data.is_leaf === "true") {
             // 实体门店 叶子结点 不展示icon
@@ -135,6 +146,7 @@ export default {
           }
         },
       },
+      isPhone: false, // 是否是移动端打开
     };
   },
   watch: {
@@ -231,6 +243,9 @@ export default {
     },
   },
   created() {
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
+
     this.getList();
     console.log(this.bookId);
     //this.$refs.tree.foldAllAfterMounted = true;
@@ -333,4 +348,35 @@ export default {
     font-weight: normal !important;
   }
 }
+.he_tree_view {
+  .tree_box_item_active {
+    color: #ff9900;
+  }
+  .custom-tree-node {
+    color: #2c2c2c;
+    height: 44px;
+    display: block !important;
+  }
+  .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background: none;
+  }
+  .tree_box_item {
+    font-weight: 400;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    line-height: 44px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    &_father {
+      font-weight: bold;
+    }
+  }
+  .el-tree-node__content {
+    height: 44px;
+  }
+}
 </style>

src/views/courseView.vue

@@ -23,8 +23,20 @@
     >
       <div
         id="content-tree"
-        :class="[fullTree ? 'content-tree-full' : 'content-tree']"
+        :class="[
+          fullTree ? 'content-tree-full' : 'content-tree',
+          isPhone ? 'content-tree-phone' : '',
+          showMenu ? '' : 'content-tree-unfold',
+        ]"
       >
+        <template v-if="isPhone">
+          <div style="text-align: center; color: black; padding: 10px 0">
+            <i
+              @click="toggleMenu"
+              :class="[showMenu ? 'el-icon-s-fold' : 'el-icon-s-unfold']"
+            ></i>
+          </div>
+        </template>
         <TreeView
           ref="treeView"
           :book-id="bookId"
@@ -36,7 +48,11 @@
       </div>
       <div
         id="data-screen"
-        :class="['inner', fullscreen ? 'inner-full' : '']"
+        :class="[
+          'inner',
+          fullscreen ? 'inner-full' : '',
+          isPhone ? 'inner-phone' : '',
+        ]"
         v-loading="loading"
       >
         <el-image
@@ -140,7 +156,11 @@
     </div>
     <!-- <Preview :context="context" :queIndex="queIndex" /> -->
 
-    <a v-if="chapterId && treeFlag" class="screen-full" @click="fullScreen()" />
+    <a
+      v-if="chapterId && treeFlag && !isPhone"
+      class="screen-full"
+      @click="fullScreen()"
+    />
   </div>
 </template>
 
@@ -263,6 +283,7 @@ export default {
       isAnswerItemShow: false,
       pictureUrl: "",
       isPhone: false, // 是否是移动端打开
+      showMenu: true, //是否展开菜单
     };
   },
   created() {
@@ -338,6 +359,9 @@ export default {
   },
   mounted() {},
   methods: {
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    },
     back() {
       this.$router.go(-1);
     },
@@ -520,6 +544,12 @@ export default {
       position: fixed;
       left: 0;
       z-index: 2;
+      &-unfold {
+        width: 20px;
+        height: 50px;
+        border: none;
+        overflow: hidden;
+      }
     }
     .content-tree-full {
       position: fixed !important;
@@ -556,6 +586,9 @@ export default {
       &.inner-full {
         margin-left: 0;
       }
+      &-phone {
+        margin-left: 0;
+      }
       .title-box {
         display: flex;
         align-items: center;