页面修改

src/components/mall.vue

@@ -125,7 +125,7 @@
     border-bottom: 1px solid #E6E6E6;
     height: 59px;
     line-height: 59px;
-    padding-left:28px;
+    padding-left: 28px;
   }
 
   .leftMenu2 .el-submenu__title span {
@@ -201,6 +201,7 @@
     padding: 0 !important;
     text-align: center;
   }
+
   .mainContainer .mainRightContent {
     width: 100%;
     height: 100%;
@@ -270,10 +271,12 @@
     padding: 20px;
     overflow-y: scroll;
   }
-  .mainContainer .firstActive{
-    background-color: #fff!important;
-    color:#000000!important;
+
+  .mainContainer .firstActive {
+    background-color: #fff !important;
+    color: #000000 !important;
   }
+
 </style>
 <template>
   <div class="mainContainer">
@@ -284,7 +287,8 @@
           <div class="asideInner">{{currentUser.MallName}}</div>
         </div>
         <ul>
-          <li class="menu-item" @mouseover="mouseOver(item)" v-for="(item,index) in MenuList" :class="{'firstActive':firstCked==item.MenuId}" @click="firstCked=item.MenuId" :key="index">
+          <li class="menu-item" @mouseover="mouseOver(item)" @mouseout="mouseOutMenu()" v-for="(item,index) in MenuList"
+            :class="{'firstActive':firstCked==item.MenuId}" @click="firstCked=item.MenuId" :key="index">
             <i class="iconfont" :class="item.IconClass"></i>
             <div class="vue-line-clamp">{{item.MenuName}}</div>
           </li>
@@ -293,24 +297,28 @@
       <div class="leftMenu2" v-if="showTwo">
         <div class="is-show-menu-1" @click="hideTwo()">
           <<</div> <div class="menu-item-2-title">
-            {{secondList.MenuName}}
+            {{secondItem.MenuName}}
         </div>
         <div>
           <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo">
-            <template v-for="(childItem,childIndex) in secondList.SubList">
+            <template v-for="(childItem,childIndex) in secondItem.SubList">
               <el-submenu v-if="childItem.ThirdList.length>0" :index="childItem.MenuId+''" :key="childIndex">
                 <template slot="title">
                   <span>{{childItem.MenuName}}</span>
                 </template>
                 <el-menu-item-group>
-                  <el-menu-item :index="thirdChild.MenuId+''" @click.native="clickMenu(thirdChild)" v-for="(thirdChild,thirdIndex) in childItem.ThirdList" :key="thirdIndex">
-                    <div class="checkBlock" :class="defaultActive==thirdChild.MenuId?'isActive':''">{{thirdChild.MenuName}}</div>
+                  <el-menu-item :index="thirdChild.MenuId+''" @click.native="clickMenu(thirdChild,secondItem)"
+                    v-for="(thirdChild,thirdIndex) in childItem.ThirdList" :key="thirdIndex">
+                    <div class="checkBlock" :class="defaultActive==thirdChild.MenuId?'isActive':''">
+                      {{thirdChild.MenuName}}</div>
                   </el-menu-item>
                 </el-menu-item-group>
               </el-submenu>
               <template v-else>
-                <el-menu-item :index="childItem.MenuId+''" @click.native="clickMenu(childItem)" :key="childItem.MenuId">
-                    <div class="checkBlock" style="margin-left:-7px;" :class="defaultActive==childItem.MenuId?'isActive':''">{{childItem.MenuName}}</div>
+                <el-menu-item :index="childItem.MenuId+''" @click.native="clickMenu(childItem,secondItem)"
+                  :key="childItem.MenuId">
+                  <div class="checkBlock" style="margin-left:-7px;"
+                    :class="defaultActive==childItem.MenuId?'isActive':''">{{childItem.MenuName}}</div>
                 </el-menu-item>
               </template>
             </template>
@@ -364,10 +372,10 @@
         showTwo: false,
         defaultActive: '9',
         currentUser: {},
-        Height:0,
+        Height: 0,
         MenuList: [], //菜单列表
-        secondList:{},
-        firstCked:0
+        secondItem: {},
+        firstCked: 0
       };
     },
     created() {
@@ -383,7 +391,6 @@
         this.apipost("/api/Tenant/GetMenuList", {}, res => {
           if (res.data.resultCode == 1) {
             this.MenuList = res.data.data;
-            console.log("this.MenuList",this.MenuList);
           } else {
             this.Info(res.data.message);
           }
@@ -398,12 +405,22 @@
       mouseOver(item) {
         this.showTwo = true;
         this.isShowOne = false;
-        this.secondList=item;
+        this.secondItem = item;
+      },
+      //鼠标移除
+      mouseOutMenu() {
+        this.MenuList.forEach(item => {
+          if (item.MenuId == firstCked) {
+            this.secondItem = item;
+          }
+        })
       },
       //菜单点击
-      clickMenu(item){
-        this.defaultActive=item.MenuId+'';
-        if(item.MenuUrl&&item.MenuUrl!=''){
+      clickMenu(item, secondItem) {
+        //选中当前大类
+        this.firstCked = secondItem.MenuId;
+        this.defaultActive = item.MenuId + '';
+        if (item.MenuUrl && item.MenuUrl != '') {
           this.$router.push({
             path: item.MenuUrl
           });