导航样式

src/pages/login/Home.vue

@@ -15,7 +15,10 @@
     </section>
     <div class="nemu_wrap">
       <ul>
-        <li v-for="e in menuList" :key="e.menu_id" @click="toPage(e)">{{e.title}}</li>
+        <li v-for="e in menuList" :key="e.menu_id" @click="toPage(e)">
+          <img :src="require('../../images/xinrui/menu/' + e.icon + '.png')" alt="">
+          <p>{{e.title}}</p>
+        </li>
         <!-- <li @click="goInner('/taskmanage')">任务管理</li>
         <li @click="goInner('/zlmanage')">指令管理</li>
         <li @click="goInner('/sendmater')">送料</li>
@@ -31,9 +34,9 @@
       </ul>
     </div>
     <div class="sec_menu_wrap" :class="show ? 'nemu_show' : 'nemu_hidden'">
-      <div class="nemu_wrap nemu_wrap_1">
+      <div class="nemu_wrap_1">
         <ul>
-          <li class="menu-name_inner bgc_1" v-for="e in secM" :key="e.sec_menu_id" @click="goInner(e)">{{e.title}}</li>
+          <li class="menu-name_inner" v-for="e in secM" :key="e.sec_menu_id" @click="goInner(e)"><div class="menu-name_inner_c" :class="'bgc_' + e.sec_menu_id">{{e.title}}</div></li>
         </ul>
       </div>
     </div>
@@ -49,24 +52,24 @@ export default {
       menuList: [
         {menu_id: 1, path: '/taskmanage', title: '任务管理', icon: 'FR01', sonTree: []},
         {menu_id: 2, path: '/zlmanage', title: '指令管理', icon: 'FR02', sonTree: []},
-        {menu_id: 3, path: '/sendmater', title: '送料', icon: 'FR01', sonTree: []},
+        {menu_id: 3, path: '/sendmater', title: '送料', icon: 'FR03', sonTree: []},
-        {menu_id: 4, path: '/callmater', title: '叫料', icon: 'FR01', sonTree: []},
+        {menu_id: 4, path: '/callmater', title: '叫料', icon: 'FR04', sonTree: []},
-        {menu_id: 5, path: '/sendempty', title: '送空', icon: 'FR01', sonTree: []},
+        {menu_id: 5, path: '/sendempty', title: '送空', icon: 'FR05', sonTree: []},
-        {menu_id: 6, path: '/callempty', title: '叫空', icon: 'FR01', sonTree: []},
+        {menu_id: 6, path: '/callempty', title: '叫空', icon: 'FR06', sonTree: []},
-        {menu_id: 7, path: '/KunliaoManage', title: '困料管理', icon: 'FR01', sonTree: []},
+        {menu_id: 7, path: '/KunliaoManage', title: '困料管理', icon: 'FR07', sonTree: []},
-        {menu_id: 8, path: '/VehicleBind', title: '载具绑定', icon: 'FR01', sonTree: []},
+        {menu_id: 8, path: '/VehicleBind', title: '载具绑定', icon: 'FR08', sonTree: []},
-        {menu_id: 9, path: '/VehicleUnbind', title: '载具解绑', icon: 'FR01', sonTree: []},
+        {menu_id: 9, path: '/VehicleUnbind', title: '载具解绑', icon: 'FR09', sonTree: []},
-        {menu_id: 10, path: '/ManualUnstack', title: '人工拆垛', icon: 'FR01', sonTree: []},
+        {menu_id: 10, path: '/ManualUnstack', title: '人工拆垛', icon: 'FR10', sonTree: []},
         {menu_id: 11,
           path: '',
           title: '点位管理',
-          icon: 'FR01',
+          icon: 'FR11',
           sonTree: [
             {sec_menu_id: 1, path: '/PointManage?query', title: '困料货架', query: 'KLHJ'},
             {sec_menu_id: 2, path: '/PointManage', title: '窑前货架', query: 'YQHJ'},
             {sec_menu_id: 3, path: '/PointManage', title: '窑后货架', query: 'YHHJ'}
           ]},
-        {menu_id: 12, path: '/CallCarry', title: '呼叫搬运', icon: 'FR01', sonTree: []}
+        {menu_id: 12, path: '/CallCarry', title: '呼叫搬运', icon: 'FR12', sonTree: []}
       ],
       show: false,
       secM: []
@@ -157,20 +160,26 @@ export default {
   ul
     width 100%
     li
-      color #333
       width 30%
-      height 1.2rem
-      line-height 1.2rem
       float left
-      font-size 14px
       text-align center
       margin-bottom 15px
       border-radius 5px
-      background-color #fff
-      box-shadow 0 2px 6px 0 rgba(0,0,0,.2)
       &:nth-child(3n+2)
         margin-left 5%
         margin-right 5%
+      img
+        _wh(0.7rem, auto)
+        background-color rgba(255, 255, 255, 0.3)
+        box-shadow 8px 6px 9px 0px rgba(0,0,0,0.1)
+        padding .1rem
+        border-radius 50%
+        margin-bottom .1rem
+      p
+        font-size 14px
+        line-height 20px
+        text-align center
+        color #333
 .sec_menu_wrap
   position fixed
   bottom 0
@@ -190,20 +199,36 @@ export default {
   background-color rgba(0,0,0,0.8)
   z-index 2010
 .nemu_wrap_1
-  background-color transparent
+  width 100%
-  box-shadow none
+  padding 15px .48rem 0
-  padding-bottom 0
   ul
+    width 100%
     li
+      float left
+      width 30%
+      height 1.2rem
+      margin-bottom 15px
+      border-radius 6px
+      _bis('../../images/hj.png',auto,80%,right,bottom)
+      &:nth-child(3n+2)
+        margin-left 5%
+        margin-right 5%
+      .menu-name_inner_c
+        width 100%
+        height 100%
+        font-size 14px
         color #fff
+        text-align center
+        line-height 1.2rem
+        border-radius 6px
 .nemu_show
   transform: translateY(0)
 .nemu_hidden
   transform: translateY(100%)
 .bgc_1
-  background linear-gradient(to right, #4966ff 0%, #758eff 100%)
+  background linear-gradient(to right, rgba(73,102,255,0.8) 0%, rgba(117,142,255,0.8) 100%)
 .bgc_2
-  background linear-gradient(to right, #fea814 0%, #ffb101 100%)
+  background linear-gradient(to right, rgba(254, 168, 20,0.8) 0%, rgba(255, 177, 1,0.8) 100%)
 .bgc_3
-  background linear-gradient(to right, #9946ff 0%, #c6a5fb 100%)
+  background linear-gradient(to right, rgba(0, 228, 153,0.8) 0%, rgba(0, 241, 197,0.8) 100%)
 </style>