smsb-web-develop/src/views/device/detail/dashboard/Header.vue

<template>
  <div class="c-device-dashboard-header">
    <img
      class="c-device-dashboard-header__logo"
      src="/logo.png"
    >
    <div class="u-bold">{{ title }}</div>
    <div class="l-flex c-device-dashboard-header__wrapper">
      <div class="c-device-dashboard-header__time">{{ now }}</div>
      <div
        class="c-device-dashboard-header__exit u-pointer"
        @click="onExit"
      >
        退出
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  data () {
    return {
      title: process.env.VUE_APP_NAME,
      now: ''
    }
  },
  created () {
    this.getCurrentTime()
    this.$timer = setInterval(this.getCurrentTime, 500)
  },
  beforeDestroy () {
    clearInterval(this.$timer)
  },
  methods: {
    getCurrentTime () {
      this.now = parseTime(new Date(), '{y}/{m}/{d}   {h}:{i}')
    },
    onExit () {
      this.$router.replace({
        name: 'device-detail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-dashboard-header {
  position: relative;
  height: 54px;
  padding-top: 4px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  background: url("~@/assets/line.png") 0 16px / 100% 38px no-repeat;

  &__logo {
    position: absolute;
    top: 8px;
    left: 16px;
    height: 24px;
  }

  &__wrapper {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 16px;
    line-height: 24px;
  }

  &__time {
    margin-right: 32px;
    white-space: pre;
  }

  &__exit {
    color: #2956f0;
  }
}
</style>