bigScreen/src/components/comHeader/index.vue

<template>
  <Header>
    <dv-decoration-8 class="left" />
    <dv-decoration-5 class="center" />
    <dv-decoration-8 class="right" :reverse="true" />
    <div class="centerTitle">{{ $route.meta.title }}</div>
    <dv-decoration-7 class="dateBox"
      ><span>{{ curTime }}</span></dv-decoration-7
    >
  </Header>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      curTime: '',
      dayOfWeekText: '',
    };
  },
  methods: {
    // 获取星期
    getWeek() {
      const dayOfWeek = dayjs().day();
      switch (dayOfWeek) {
        case 0:
          this.dayOfWeekText = '星期日';
          break;
        case 1:
          this.dayOfWeekText = '星期一';
          break;
        case 2:
          this.dayOfWeekText = '星期二';
          break;
        case 3:
          this.dayOfWeekText = '星期三';
          break;
        case 4:
          this.dayOfWeekText = '星期四';
          break;
        case 5:
          this.dayOfWeekText = '星期五';
          break;
        case 6:
          this.dayOfWeekText = '星期六';
          break;
      }
    },
    // 更新当前时间
    updateTime() {
      this.curTime = dayjs().format(`YYYY-MM-DD HH:mm:ss ${this.dayOfWeekText}`);
    },
  },
  created() {
    this.getWeek();
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
Header {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  height: 8.6vh;
  position: relative;
  .left {
    width: 25%;
    height: 6vh;
  }
  .center {
    width: 40%;
    height: 6vh;
    margin-top: 2.2vh;
  }
  .right {
    width: 25%;
    height: 6vh;
  }
  .centerTitle {
    position: absolute;
    font-size: 3.4vh;
    font-weight: 700;
    left: 50%;
    top: 0.6vh;
    transform: translateX(-50%);
  }
  .dateBox {
    position: absolute;
    width: 32vh;
    height: 3vh;
    font-size: 1.8vh;
    font-weight: 400;
    right: 19vh;
    top: 4.2vh;
    span {
      margin: 0 8px;
    }
  }
}
</style>