JT-CIM-ZHNY/src/views/Map3d/components/DataTime.vue

<template>
	<div class="box">
		<p class="boxDate">{{ dateYear }}
			<br>
		<div class="boxTime"> {{ dateDay }}
		</div>
		</p>
	</div>
</template>

<script>
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				dateDay: null,
				dateYear: null,
				dateWeek: null,
				weekday: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
				timer: null,
			};
		},
		mounted() {
			this.timer = setInterval(() => {
				const date = dayjs(new Date());
				this.dateDay = date.format("HH:mm:ss");
				this.dateYear = date.format("YYYY-MM-DD");
				this.dateWeek = date.format(this.weekday[date.day()]);
			}, 1000);
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
	};
</script>

<style scoped>
	@charset "UTF-8";
	
	@font-face {
		font-family: "TTTGB-Medium";
		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
		font-weight: normal;
		font-style: normal;
	}
	.box {
		height: 100%;
		width: 100%;
		color: #fff;
		display: flex;
		align-items: center;
		font-family: "TTTGB-Medium", sans-serif !important;
	}

	.boxDay {
		font-size: 16rem;
	}

	.boxTime {
		font-size: 18rem;
		margin: 0 16rem;
	}

	.boxDate {
		font-size: 12rem;
	}
</style>