退出按钮

src/components/header.vue

@@ -1,20 +1,19 @@
 <template>
   <header>
-    <div class="center_text">晟华大屏监控</div>
-    <div class="tag_block">
-      <div class="tag_left">
-        <!-- <div v-if="index == '0'" class="tag cur_tag">首页</div>
-        <router-link v-else to="/homepage" class="tag">首页</router-link> -->
-        <div v-if="index == '1'" class="tag cur_tag">生产统计</div>
-        <router-link v-else to="/prodcount" class="tag">生产统计</router-link>
-      </div>
-      <div class="tag_right">
-        <div v-if="index == '2'" class="tag cur_tag">仓储监控</div>
-        <router-link v-else to="/storagemonitor" class="tag">仓储监控</router-link>
-        <div v-if="index == '3'" class="tag cur_tag">设备监控</div>
-        <router-link v-else to="/devicemonitor" class="tag">设备监控</router-link>
+    <div class="exit_btn iconfont" @click.stop="$router.push('/setup')">&#xe85b;</div>
+    <p>{{title}}</p>
+    <div class="data_box clearfix">
+      <div class="date_item date">{{date}}</div>
+      <div class="date_item week">{{week}}</div>
+      <div class="date_item clearfix">
+        <div class="tiem_item hours">{{hours}}</div>
+        <div class="colon">:</div>
+        <div class="tiem_item minutes">{{minutes}}</div>
+        <div class="colon">:</div>
+        <div class="tiem_item seconds">{{seconds}}</div>
       </div>
     </div>
+    <slot></slot>
   </header>
 </template>
 
@@ -22,54 +21,102 @@
 export default {
   name: 'Header',
   data () {
-    return {}
+    return {
+      expand: false,
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: ''
+    }
   },
   props: {
-    index: String
+    title: String
+  },
+  created () {
+    this.updateTime()
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  methods: {
+    expandTooltip () {
+      this.expand = !this.expand
+    },
+    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}`
+    }
   }
 }
 </script>
 
 <style lang="stylus" scoped>
-@import '~@style/mixin'
-header
-  _wh(100%, 84px)
-  overflow hidden
-  position relative
-  _bis('../assets/images/top.png',auto, 84px)
-.center_text
-  _wh(400px, 40px)
+.exit_btn
   position absolute
-  _font(36px, 40px, #fff,,center)
-  font-family "阿里妈妈数黑体" !important
-  left 50%
-  top 8px
-  margin-left -200px
-  letter-spacing 6px
-.tag_block
-  _wh(100%, 100%)
-  _fj(row)
-  padding 25px 15px 0
-.tag_left
-  _wh(50%, 100%)
-  _fj(row, flex-start)
-  .tag
-    margin-right 20px
-.tag_right
-  _wh(50%, 100%)
-  _fj(row, flex-end)
-  .tag
-    margin-left 20px
-.tag
-  display inline-block
-  _wh(132px, 36px)
-  _font(16px, 36px)
-  _bis('../assets/images/tag_1.png')
-  cursor pointer
-  &:hover
-    color #32C5FF
-    _bis('../assets/images/tag_2.png')
-.cur_tag
-  color #32C5FF
-  _bis('../assets/images/tag_2.png')
+  left 25px
+  top 14px
+  height 37px
+  width 37px
+  line-height 37px
+  font-size 20px
+  color #fff
+  background-color transparent
+header
+  position relative
+  width 100%
+  height 8%
+  position relative
+  background center center / 100% 100% url(../images/screen1/header.png) no-repeat
+  p
+    // font-family "PangMenZhengDao"
+    font-family "YouSheBiaoTiHei"
+    font-size 50px
+    line-height 100px
+    color #fff
+    font-weight lighter
+    text-align center
+    letter-spacing 5px
+    text-shadow 0 8px 8px rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  right 25px
+  top 14px
+  height 37px
+.date, .week
+  padding-right 20px
+.date_item
+  float left
+  font-size 20px
+  line-height 37px
+  color #fff
+.tiem_item
+  float left
+  font-size 32px
+  line-height 37px
+  color #fff
+.colon
+  float left
+  font-size 32px
+  line-height 37px
+  color #fff
 </style>