菜单

src/components/TreeView.vue

@@ -3,10 +3,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
@@ -17,7 +26,7 @@
           paddingLeft:
             node.is_courseware === 'false'
               ? node.nodexIndex * 22 + 8 + 'px'
-              : '0px',
+              : '0px'
         }"
         class="tree_box"
         slot-scope="{ node, path, tree }"
@@ -48,7 +57,7 @@
             'tree_box_' + node.nodexIndex,
             activeIndex !== '' && JSON.stringify(node).indexOf(activeIndex) > -1
               ? 'tree_box_item_light'
-              : '',
+              : ''
           ]"
           @click="tree.toggleFold(node, path)"
           v-if="node.is_courseware === 'false'"
@@ -59,7 +68,7 @@
           :class="[
             'tree_box_item',
             'tree_box_leaf',
-            activeIndex == node.id ? 'tree_box_item_active' : '',
+            activeIndex == node.id ? 'tree_box_item_active' : ''
           ]"
           :style="{ paddingLeft: node.nodexIndex * 22 + 12 + 'px' }"
           @click="handleNodeClick(node, path)"
@@ -119,13 +128,15 @@ export default {
       defaultProps: {
         children: "children",
         label: "label",
+        nodeKey: "id",
         isLeaf: (data, node) => {
           if (data.is_leaf === "true") {
             // 实体门店 叶子结点 不展示icon
             return true;
           }
         }
-      }
+      },
+      isPhone: false // 是否是移动端打开
     };
   },
   watch: {
@@ -219,6 +230,8 @@ export default {
     }
   },
   created() {
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
     this.getList();
     //this.$refs.tree.foldAllAfterMounted = true;
   }
@@ -328,4 +341,32 @@ export default {
     font-weight: normal !important;
   }
 }
+.he_tree_view {
+  .tree_box_item_active {
+    color: #ff9900;
+  }
+  .custom-tree-node {
+    color: #2c2c2c;
+    height: 100%;
+    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;
+    }
+  }
+}
 </style>

src/views/courseView.vue

@@ -4,8 +4,20 @@
     <div class="content">
       <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"
@@ -18,7 +30,11 @@
       <div
         id="data-screen"
         v-loading="loading"
-        :class="['inner', fullscreen ? 'inner-full' : '']"
+        :class="[
+          'inner',
+          fullscreen ? 'inner-full' : '',
+          isPhone ? 'inner-phone' : ''
+        ]"
       >
         <el-image
           :src="pictureUrl"
@@ -73,7 +89,7 @@
         />
       </div>
       <a
-        v-if="chapterId && treeFlag"
+        v-if="chapterId && treeFlag && !isPhone"
         class="screen-full"
         @click="fullScreen()"
       />
@@ -131,11 +147,16 @@ export default {
       fullTree: false, // 全屏模式下树是否显示
       isAnswerItemShow: false,
       previewType: "previewCheck",
-      pictureUrl: ""
+      pictureUrl: "",
+      isPhone: false, // 是否是移动端打开
+
+      showMenu: true //是否展开菜单
     };
   },
   created() {
     const _this = this;
+    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
+    this.isPhone = regExp.test(navigator.userAgent);
     _this.bookId = this.$route.query.bookId;
     // if (localStorage.getItem("Bookanswer")) {
     //   this.TaskModel = "ANSWER";
@@ -149,6 +170,9 @@ export default {
   },
   mounted() {},
   methods: {
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    },
     getdetail() {
       let MethodName = "book-book_manager-GetBookChapterStruct";
       let data = {
@@ -326,14 +350,22 @@ export default {
       width: 340px;
       height: 100%;
       overflow: auto;
+      -webkit-overflow-scrolling: touch;
       padding: 20px 0px;
       border-right: 1px solid #d9d9d9;
       position: fixed;
       top: 0px;
       left: 0;
+      transform: translate(0, 0);
       padding-top: 64px;
       z-index: 2;
       background: #fff;
+      &-unfold {
+        width: 40px;
+        height: 90px;
+        border: none;
+        overflow: hidden;
+      }
     }
     .content-tree-full {
       position: fixed;
@@ -359,6 +391,9 @@ export default {
       &.inner-full {
         margin-left: 0;
       }
+      &-phone {
+        margin-left: 0;
+      }
       .title-box {
         display: flex;
         align-items: center;