Merge branch 'master' of http://gitlab.oytour.com/huangyuanyuan/electricitysheep

src/components/mall.vue

@@ -123,9 +123,9 @@
     width: 100%;
     color: #909399;
     border-bottom: 1px solid #E6E6E6;
-    text-align: center;
     height: 59px;
     line-height: 59px;
+    padding-left:28px;
   }
 
   .leftMenu2 .el-submenu__title span {
@@ -180,17 +180,17 @@
     z-index: 10;
   }
 
-  .mainContainer .isaa {
+  .mainContainer .checkBlock {
     width: 104px;
     height: 42px;
     line-height: 42px;
-    text-indent: 22px;
+    text-indent: 20px;
     display: inline-block;
     text-align: left;
 
   }
 
-  .el-submenu.is-active .isActive {
+  .isActive {
     background: #ebedf0 !important;
     border-radius: 4px;
   }
@@ -271,7 +271,10 @@
     padding: 20px;
     overflow-y: scroll;
   }
-
+  .mainContainer .firstActive{
+    background-color: #fff!important;
+    color:#000000!important;
+  }
 </style>
 <template>
   <div class="mainContainer">
@@ -282,67 +285,27 @@
           <div class="asideInner">{{currentUser.MallName}}</div>
         </div>
         <ul>
-          <li class="menu-item" @mouseover="mouseOver">
-            <i class="iconfont icon-dianpuguanli"></i>
-            <div class="vue-line-clamp">店铺管理</div>
-          </li>
-          <li class="menu-item" @mouseover="mouseOver">
-            <i class="iconfont icon-shangpinguanli"></i>
-            <div class="vue-line-clamp">商品管理</div>
-          </li>
-          <li class="menu-item" @mouseover="mouseOver">
-            <i class="iconfont icon-dingdanguanli"></i>
-            <div class="vue-line-clamp">订单管理</div>
-          </li>
-          <li class="menu-item" @mouseover="mouseOver">
-            <i class="iconfont icon-yonghuguanli"></i>
-            <div class="vue-line-clamp">用户管理</div>
-          </li>
-          <li class="menu-item" @mouseover="mouseOver">
-            <i class="iconfont icon-shujutongji"></i>
-            <div class="vue-line-clamp">数据统计</div>
-          </li>
-          <li class="menu-item" @mouseover="mouseOver">
-            <img src="../assets/img/plugins.png" />
-            <div class="vue-line-clamp">营销中心</div>
-          </li>
-          <li class="menu-item" @mouseover="mouseOver">
-            <i class="iconfont icon-shezhi"></i>
-            <div class="vue-line-clamp">设置</div>
+          <li class="menu-item" @mouseover="mouseOver(item)" 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>
         </ul>
       </div>
       <div class="leftMenu2" v-if="showTwo">
         <div class="is-show-menu-1" @click="hideTwo()">
           <<</div> <div class="menu-item-2-title">
-            店铺管理
+            {{secondList.MenuName}}
         </div>
         <div>
           <el-menu :default-active="defaultActive" :unique-opened="true" class="el-menu-vertical-demo">
-            <el-submenu index="1">
+            <el-submenu :index="childItem.MenuId+''" v-for="(childItem,childIndex) in secondList.SubList" :key="childIndex">
               <template slot="title">
-                <span>店铺设计</span>
+                <span>{{childItem.MenuName}}</span>
               </template>
               <el-menu-item-group>
-                <el-menu-item index="1-1">
-                  <div class="isaa" :class="defaultActive=='1-1'?'isActive':''">轮播图</div>
-                </el-menu-item>
-                <el-menu-item index="1-2">
-                  <div class="isaa" :class="defaultActive=='1-2'?'isActive':''">导航图标</div>
+                <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>
-                <el-menu-item index="1-3">商城风格</el-menu-item>
-                <el-menu-item index="1-4">图片魔方</el-menu-item>
-              </el-menu-item-group>
-            </el-submenu>
-            <el-submenu index="2">
-              <template slot="title">
-                <span>店铺设计</span>
-              </template>
-              <el-menu-item-group>
-                <el-menu-item index="2-1">轮播图</el-menu-item>
-                <el-menu-item index="2-2">导航图标</el-menu-item>
-                <el-menu-item index="2-3">商城风格</el-menu-item>
-                <el-menu-item index="2-4">图片魔方</el-menu-item>
               </el-menu-item-group>
             </el-submenu>
           </el-menu>
@@ -393,10 +356,12 @@
         //是否显示关闭后的箭头
         isShowOne: false,
         showTwo: false,
-        defaultActive: '1-1',
+        defaultActive: '9',
         currentUser: {},
         Height:0,
         MenuList: [], //菜单列表
+        secondList:{},
+        firstCked:0
       };
     },
     created() {
@@ -420,15 +385,19 @@
         this.isShowOne = true;
       },
       //鼠标移入
-      mouseOver() {
+      mouseOver(item) {
         this.showTwo = true;
         this.isShowOne = false;
+        this.secondList=item;
       },
       //菜单点击
       clickMenu(item){
-        this.$router.push({
-          path: 'Register'
-        });
+        this.defaultActive=item.MenuId+'';
+        if(item.MenuUrl&&item.MenuUrl!=''){
+          this.$router.push({
+            path: item.MenuUrl
+          });
+        }
       }
     },
     mounted() {

src/components/zanIndex.vue

@@ -56,7 +56,7 @@
         height:32px;
         line-height: 32px;
     }
-    .number_info{
+    .num-info{
         display: flex;
         width: 100%;
         height: 60px;
@@ -73,6 +73,11 @@
         font-size: 16px;
         color: #92959B;
     }
+    .num-info .num-info-item {
+        text-align: center;
+        width: 20%;
+        border-left: 1px dashed #EFF1F7;
+    }
 </style>
 <template>
     <div class="zanIndex">