JG-ADMIN-TEMP/src/views/report/statistics/screens/common-headerB.vue

<template>
  <div style="position: relative">
    <div class="screen-header">{{ title }}</div>
    <div class="right">
      <div class="show-time">
        <div class="time">
          {{ times.date }}
        </div>
        <div class="date">
          <span>
            {{ times.week }}
          </span>
        </div>
      </div>
      <div class="temperature">32<span style="font-size: 1vw">℃</span></div>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
defineProps({
  title: {
    type: String,
    default: "",
  },
});
const times = ref({ time: "", date: "", week: "" });
const timer = ref(null);
const getTime = () => {
  timer.value = setInterval(() => {
    times.value.time = moment().format("HH:mm:ss");
    times.value.date = moment().format("YYYY/MM/DD");
    times.value.week = "星期" + "日一二三四五六".charAt(new Date().getDay());
  }, 1000);
};
onMounted(() => {
  getTime();
});
</script>

<style lang="scss" scoped>
.screen-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh;
  font-weight: 600;
  font-size: 4vh;
  color: #ffffff;
  line-height: 4.6vh;
  background-image: url("@/assets/images/top.png");
  background-size: 100% 30%;
  background-position: bottom;
  background-repeat: no-repeat;
}
.right {
  position: absolute;
  right: 1.042vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-family: "Furore";
  .temperature {
    margin-right: 0.78125vw;
    font-size: 1.25vw;
    font-weight: 500;
    color: white;
    span {
      color: #babebe;
      font-size: 0.625vw;
      vertical-align: super;
    }
  }
  .show-time {
    margin-right: 1vw;
    .time {
      font-size: 1.25vw;
      font-weight: 500;
      color: white;
    }
    .date {
      color: #babebe;
      & span:nth-child(1) {
        margin-right: 0.26vw;
      }
    }
  }
}
</style>