导航页

src/pages/login/Home.vue

@@ -12,10 +12,24 @@
           <span class="exit-text">退出</span>
         </div>
       </div>
+      <div class="zd-row relative jcflexstart tab-wrap">
+        <div class="zd-col-6 tab-active" :style="{'left': tab === 2 ? '25%' : '0'}">
+          <div class="tab-line-active"></div>
+        </div>
+        <div class="zd-col-6 tab-item" :class="{'tab_item_active': tab === 1}" @click="changeTab(1)">自动</div>
+        <div class="zd-col-6 tab-item" :class="{'tab_item_active': tab === 2}" @click="changeTab(2)">人工</div>
+      </div>
+      <div class="zd-row flexwrap menu_wrap">
+        <div class="zd-col-8 zd-row jccenter" v-for="(e, i) in menu" :key="`menu_${i}`">
+          <div class="zd-col-20" @click="toPage(e)">
+            <div class="menu_icon" :style="{'background-image': 'url(' + require('../../images/icon/' + e.icon + '.png') + ')'}"></div>
+            <div class="menu_name">{{e.title}}</div>
+          </div>
+        </div>
+      </div>
     </section>
-    <div class="con">
+    <!-- <div class="con">
       <ul>
-        <!-- <li v-for="e in menuList" :key="e.menu_id" @click="toPage(e)">{{e.name}}</li> -->
         <li @click="goInner('/zlmanage')">指令管理</li>
         <li @click="goInner('/taskmanage')">任务管理</li>
         <li @click="goInner('/belowgradereport')">不合格品上报</li>
@@ -30,45 +44,39 @@
         <li @click="goInner('/CallDefective')">呼叫次品料</li>
         <li @click="goInner('/CreateChargingTask')">AGV充电</li>
       </ul>
-    </div>
+    </div> -->
   </section>
 </template>
 
 <script>
-import {authority} from '@config/getData2.js'
 export default {
   name: 'Home',
   data () {
     return {
-      menuList: [],
-      show: false,
-      secM: []
+      tab: 1,
+      menu: [],
+      menuList: {
+        menu1: [{title: '指令管理', path: 'zlmanage', icon: 'RF1'}, {title: '任务管理', path: 'taskmanage', icon: 'RF2'}, {title: '不合格品上报', path: 'belowgradereport', icon: 'RF3'}, {title: '送料', path: 'sendmater', icon: 'RF4'}, {title: '叫料', path: 'callmater', icon: 'RF5'}, {title: '送空', path: 'sendempty', icon: 'RF6'}, {title: '叫空', path: 'callempty', icon: 'RF7'}, {title: '困料管理', path: 'KunliaoManage', icon: 'RF8'}, {title: '入窑管理', path: 'RuyaoManage', icon: 'RF9'}, {title: '载具绑定', path: 'VehicleBind', icon: 'RF10'}, {title: '载具解绑', path: 'VehicleUnbind', icon: 'RF11'}, {title: '呼叫次品料', path: 'CallDefective', icon: 'RF12'}, {title: 'AGV充电', path: 'CreateChargingTask', icon: 'RF13'}],
+        menu2: [{title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}, {title: '', path: ''}]
+      }
     }
   },
   mounted () {
-    document.getElementsByTagName('body')[0].className = 'bgwhite'
-    this.$store.dispatch('receiveMaterObj', {})
-  },
-  created () {
-    // this._authority()
+    this.menu = [...this.menuList.menu1]
   },
   methods: {
-    toPage (e) {
-      let name = e.path.substr(2)
-      if (name === 'CheckManage' || name === 'PressCallMater') {
-        this.$store.dispatch('setKeepAlive', [name])
-      }
-      this.$router.push(e.path.substr(2))
-    },
-    /** 获取菜单 */
-    async _authority () {
-      let accountId = this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).account_id : ''
-      let res = await authority(accountId)
-      if (res.code === '1') {
-        this.menuList = [...res.result.sonTree]
+    changeTab (type) {
+      if (type === 1) {
+        this.menu = [...this.menuList.menu1]
+        this.tab = 1
       } else {
-        this.Dialog(res.desc)
+        this.menu = [...this.menuList.menu2]
+        this.tab = 2
       }
+      // this.$store.dispatch('setNavTab', type)
+    },
+    toPage (e) {
+      this.$router.push(`/${e.path}`)
     },
     Quit () {
       this.$store.dispatch('setSignOut')
@@ -88,9 +96,14 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 >>>header
-  background-color #ffffff
+  background-color #f5f5f5
   span
     color #444444
+.content
+  height calc(100% - .86rem)
+  background-color #f5f5f5
+  padding-bottom .4rem
+  overflow-y auto
 .userInfo
   _fj()
   padding .46rem .31rem .41rem .31rem
@@ -118,23 +131,55 @@ export default {
 .exit-text
   flex 1
   _font(.24rem,.47rem,#fff,,right)
-.con
-  display flex
-  font-size .3rem
-  text-align center
-  justify-content center
-  align-items flex-start
-  height 6rem
-  ul
-    width 7rem
-    li
-      color #e74f1a
-      width 1.9rem
-      height 1.2rem
-      line-height 1.2rem
-      float left
-      font-size 0.26rem
-      margin 0.2rem
-      border 1px solid #e74f1a
-      border-radius 5px
+.tab-wrap
+  border-top-left-radius .08rem
+  border-top-right-radius .08rem
+  background-color #ecedef
+  margin-top .6rem
+.tab-active
+  position absolute
+  bottom -0.04rem
+  height .9rem
+  border-radius .1rem .1rem 0 0
+  background-color #fff
+  box-shadow -2px -2px 2px rgba(180,182,186,0.4)
+.tab-line-active
+  position absolute
+  left 35%
+  bottom 0
+  width 30%
+  height .06rem
+  background-color #6798ef
+  &:before
+    position absolute
+    top -.06rem
+    left 50%
+    -webkit-transform translateX(-50%)
+    transform translateX(-50%)
+    content ''
+    width 0
+    height 0
+    border-left .06rem solid transparent
+    border-right .06rem solid transparent
+    border-bottom .06rem solid #6798ef
+.tab-item
+  z-index 1
+  _font(.26rem, .6rem, #666,,center)
+.tab_item_active
+  _font(.3rem, .6rem, #000, 700, center)
+.menu_wrap
+  background-color #fff
+  padding .2rem 0
+.menu_icon
+  _wh(60%, auto)
+  padding-top 60%
+  margin 0 auto
+  border-radius 50%
+  background-color #f3f5f8
+  box-shadow 4px 3px 5px 0px rgba(0,0,0,0.1)
+  background-size 80% 80%
+  background-position center center
+  background-repeat no-repeat
+.menu_name
+  _font(.26rem, .8rem, #444,,center)
 </style>

src/pages/login/Login.vue

@@ -40,9 +40,6 @@ export default {
       this.memberName = this.loginname !== ''
     }
   },
-  mounted () {
-    document.getElementsByTagName('body')[0].className = 'login-bg'
-  },
   methods: {
     changeType () {
       this.type = this.type === 'password' ? 'text' : 'password'
@@ -91,6 +88,9 @@ export default {
 
 <style lang="stylus" scoped>
 @import '~@style/mixin'
+.content
+  height 100vh
+  background #ffffff center bottom / 100% auto no-repeat url(../../images/bg.png)
 .p1
   _font(.6rem,1,#444)
   padding-top: 0.9rem