顶部导航栏

src/App.vue

@@ -21,7 +21,7 @@ import { mapGetters } from 'vuex'
 import toast from '@/components/toast'
 import alert from '@/components/alert'
 import loading from '@/components/loading'
-import { isOperateFun } from '@/config/isOperate.js'
+// import { isOperateFun } from '@/config/isOperate.js'
 export default {
   name: 'App',
   components: {
@@ -37,7 +37,7 @@ export default {
     ...mapGetters(['showToast', 'showAlert', 'loading'])
   },
   created () {
-    isOperateFun()
+    // isOperateFun()
   },
   methods: {
     _exit () {

src/components/time.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="data_box">
+    <div class="date-wraper">{{date}}</div>
+    <div class="time-wraper">{{hours}}:{{minutes}}:{{seconds}}&nbsp;&nbsp;{{week}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Time',
+  data () {
+    return {
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: ''
+    }
+  },
+  mounted () {
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.hours = `${hh}`
+      this.minutes = `${mm}`
+      this.seconds = `${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    }
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.data_box
+  _fj(center,flex-end)
+  flex-direction column
+  height 61px
+  padding-left 10px
+.date-wraper
+  _font(14px, 20px, #909399,,)
+.time-wraper
+  _font(14px, 20px, #909399,,)
+</style>

src/pages/shells/management/index/index.vue

@@ -23,6 +23,7 @@
         <div class="elec-txt">90%</div>
         <div class="iconfont icon_admin"></div>
         <div class="elec-txt">admin</div>
+        <v-time/>
       </div>
     </div>
     <div class="body-conatiner">
@@ -33,7 +34,11 @@
 </template>
 
 <script>
+import time from '@components/time.vue'
 export default {
+  components: {
+    vTime: time
+  },
   data () {
     return {
       activeIndex: '1',
@@ -79,25 +84,21 @@ export default {
   flex-direction: column;
   width: 100%;
 .header-container
-  display: flex;
+  _fj()
-  flex-shrink: 0;
+  _wh(100%, 61px)
-  height: 61px;
+  padding 0 10px
-  justify-content: space-between;
+  border-bottom 2px solid #f1f1f1
-  border-bottom: 2px solid #f1f1f1;
 .title-container
-  display: flex;
+  _fj(center)
-  align-items: center;
+  _wh(130px, 61px)
-  justify-content: center;
-  margin: 0 20px;
-  height 61px
 .company-logo
   display block
-  _wh(150px, 61px)
+  _wh(100%, 100%)
   background url(../../../../images/aio/logo_1.png) left center / 100% auto no-repeat
 .horizontal-menu-container
   height 61px
 >>>.el-menu-item
-  padding 0 10px
+  padding 0 9px
 .user-container
   _fj()
 .state-item
@@ -106,6 +107,8 @@ export default {
   _font(15px,25px,#54C0B3,,center)
   padding 0 7px
   margin 0 10px
+  &:nth-child(1)
+    margin-left 0
 .state-line
   _wh(2px,20px)
   opacity 0.3