导航页

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: [],
+      tab: 1,
-      show: false,
+      menu: [],
-      secM: []
+      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.menu = [...this.menuList.menu1]
-    this.$store.dispatch('receiveMaterObj', {})
-  },
-  created () {
-    // this._authority()
   },
   methods: {
-    toPage (e) {
+    changeTab (type) {
-      let name = e.path.substr(2)
+      if (type === 1) {
-      if (name === 'CheckManage' || name === 'PressCallMater') {
+        this.menu = [...this.menuList.menu1]
-        this.$store.dispatch('setKeepAlive', [name])
+        this.tab = 1
-      }
-      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]
       } 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
+.tab-wrap
-  display flex
+  border-top-left-radius .08rem
-  font-size .3rem
+  border-top-right-radius .08rem
-  text-align center
+  background-color #ecedef
-  justify-content center
+  margin-top .6rem
-  align-items flex-start
+.tab-active
-  height 6rem
+  position absolute
-  ul
+  bottom -0.04rem
-    width 7rem
+  height .9rem
-    li
+  border-radius .1rem .1rem 0 0
-      color #e74f1a
+  background-color #fff
-      width 1.9rem
+  box-shadow -2px -2px 2px rgba(180,182,186,0.4)
-      height 1.2rem
+.tab-line-active
-      line-height 1.2rem
+  position absolute
-      float left
+  left 35%
-      font-size 0.26rem
+  bottom 0
-      margin 0.2rem
+  width 30%
-      border 1px solid #e74f1a
+  height .06rem
-      border-radius 5px
+  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

src/style/common.styl

@@ -26,7 +26,7 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
 html,body
   height: auto
   width: 100%
-  background-color: #F5F5F5
+  background-color: #fff
 
 .clear:after
   content: ''
@@ -128,6 +128,96 @@ html,body
   display: inline-block
   height: inherit
 
+.flexstart {
+	align-items: flex-start !important;
+}
+.jcflexstart {
+	justify-content: flex-start !important;
+}
+.jccenter {
+	justify-content: center !important;
+}
+.flexwrap {
+  flex-wrap: wrap !important;
+}
+.zd-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.zd-col-24 {
+	width: 100%;
+}
+.zd-col-23 {
+    width: 95.83333%
+}
+.zd-col-22 {
+    width: 91.66667%
+}
+.zd-col-21 {
+    width: 87.5%
+}
+.zd-col-20 {
+    width: 83.33333%
+}
+.zd-col-19 {
+    width: 79.16667%
+}
+.zd-col-18 {
+    width: 75%
+}
+.zd-col-17 {
+    width: 70.83333%
+}
+.zd-col-16 {
+    width: 66.66667%
+}
+.zd-col-15 {
+    width: 62.5%
+}
+.zd-col-14 {
+    width: 58.33333%
+}
+.zd-col-13 {
+    width: 54.16667%
+}
+.zd-col-12 {
+	width: 50%;
+}
+.zd-col-11 {
+    width: 45.83333%
+}
+.zd-col-10 {
+    width: 41.66667%
+}
+.zd-col-9 {
+    width: 37.5%
+}
+.zd-col-8 {
+    width: 33.33333%
+}
+.zd-col-7 {
+    width: 29.16667%
+}
+.zd-col-6 {
+    width: 25%
+}
+.zd-col-5 {
+    width: 20.83333%
+}
+.zd-col-4 {
+    width: 16.66667%
+}
+.zd-col-3 {
+    width: 12.5%
+}
+.zd-col-2 {
+    width: 8.33333%
+}
+.zd-col-1 {
+    width: 4.16667%
+}
+
 /** 公共样式 **/
 header
   _fj()
@@ -139,8 +229,6 @@ header
 .content
   position: relative
   padding: 0 0.24rem
-.login-bg
-  background: #ffffff center bottom / 100% auto no-repeat url(./images/bg.png)
 .loading-tips
   _font(.28rem,.53rem,#929292,,center)
   margin-bottom 1.2rem