screenkb-gaoce/src/components/header3.vue

<template>
  <header>
    <div class="exit_btn" :style="expand ? {opacity: 1} : {opacity: 0.1}">
      <div class="exit_txt" @click="$router.push('/setup')" :style="expand ? {width: '70px'} : {width: '0px'}">退出</div>
      <div class="exit_arrow" v-text="!expand ? '&gt;&gt;' : '&lt;&lt;'" @click.stop="expand = !expand"></div>
    </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 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 {
      expand: false,
      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: {
    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>
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 26px
    line-height 45px
    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 4px
  height 26px
.date, .week
  padding-right 10px
.time
  width 80px
  text-align center
.date_item
  float left
  font-size 14px
  line-height 26px
  color #fff
.tiem_item
  float left
  font-size 14px
  line-height 26px
  color #fff
.colon
  float left
  font-size 14px
  line-height 26px
  color #fff
.exit_btn
  position: absolute;
  left: 0;
  top: 30px;
  height 50px;
  display: flex;
  justify-content: space-between;
.exit_txt
  font-size: 20px;
  line-height: 50px;
  color: #e6e7e1;
  text-align: center;
  font-weight: bold;
  transition width .3s ease
  overflow hidden
  background-color: rgba(30, 182, 203, 80%);
.exit_arrow
  width: 46px;
  font-size: 20px;
  line-height: 50px;
  color: #e6e7e1;
  text-align: center;
  background-color: rgba(30, 182, 203, 60%);
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px
</style>