head

src/components/header3.vue

@@ -0,0 +1,110 @@
+<template>
+  <header>
+    <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 time 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>
+
+<script>
+export default {
+  name: 'Header',
+  data () {
+    return {
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: ''
+    }
+  },
+  props: {
+    title: String
+  },
+  created () {
+    this.updateTime()
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  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}`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+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 0
+  top 14px
+  height 37px
+.date, .week
+  padding-right 20px
+.time
+  width 170px
+  text-align center
+.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>