<div class="dateBox">
? ? ? <div class="time">{{ time }}</div>
? ? ? <div class="date">{{ date }}</div>
</div>

.dateBox {
? background: #121747;
? background-image: url("~@/assets/images/時(shí)間.png");
? background-repeat: no-repeat;
? display: flex;
? align-items: flex-end;
? justify-content: flex-end;
? position: absolute;
? top: 70px;
? right: 50px;
? width: 400px;
? height: 88px;
}

.date {
? font-size: 28px;
? color: #8ac9ff;
? margin-left: 15px;
}

.time {
? font-size: 48px;
? color: #ffffff;
}

data() {
? ? return {
? ? ? date: null,
? ? ? time: null,
? ? };
? },

mounted() {
? ? const clock = setInterval(() => {
? ? ? this.date = getToday().date;
? ? ? this.time = getToday().time;
? ? }, 1000);
? ? // 通過$once來(lái)監(jiān)聽定時(shí)器，在beforeDestroy鉤子可以被清除。
? ? this.$once("hook:beforeDestroy", () => {
? ? ? clearInterval(clock);
? ? });
? },

// 日期時(shí)間格式化——獲取當(dāng)前日期時(shí)間，格式化為 2021/08/30 和 15:35:06
function getToday() {
? var datas = new Date();
? var on1 = "/";
? var on2 = ":";
? var onY = datas.getFullYear(); //年
? var onM = datas.getMonth() + 1; //月
? var onD = datas.getDate(); //日
? var onS = datas.getHours(); //時(shí)
? var onF = datas.getMinutes(); //分
? var onN = datas.getSeconds(); //秒

? if (onM >= 1 && onM <= 9) {
? ? //月
? ? onM = "0" + onM;
? }
? if (onD >= 1 && onD <= 9) {
? ? //日
? ? onD = "0" + onD;
? }
? if (onS >= 0 && onS <= 9) {
? ? //時(shí)
? ? onS = "0" + onS;
? }
? if (onF >= 0 && onF <= 9) {
? ? //分
? ? onF = "0" + onF;
? }
? if (onN >= 0 && onN <= 9) {
? ? //秒
? ? onN = "0" + onN;
? }

? return {
? ? date: onY + on1 + onM + on1 + onD,
? ? time: onS + on2 + onF + on2 + onN,
? };
}