Project_yhfu/src/components/clock.vue

<template>
	<div class="header-left">
		<!-- 时间-->
		<div class="date">
			<div class="day m-r-10">
				<span>{{today}}</span>
				<span>{{time}}</span>
			</div>
			<div class="week m-r-10">{{weekC}}</div>
			<!-- <div class="line m-r-10"></div>
			<div class="day m-r-10">
				<span>{{weatherInfo.weather}} {{weatherInfo.wind}}</span>
				<span>{{weatherInfo.fireTit}} {{weatherInfo.fireLevel}}</span>
			</div> -->
		</div>
	</div>
</template>

<script>
	let aDate = new Date();
	let month = aDate.getMonth() < 9 ? "0" + (aDate.getMonth() + 1) : aDate.getMonth() + 1;
	let date = aDate.getDate() <= 9 ? "0" + aDate.getDate() : aDate.getDate();
	let day = aDate.getDay();
	let weekCh = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
	let weekEn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
		"Saturday");

	export default {
		created() {
			// this.$watch("open", function(newValue, oldValue) {
			// 	this.outOpen();
			// })
		},
		data() {
			return {
				// 右上时钟
				today: aDate.getFullYear() + "." + month + "." + date,
				weekE: weekEn[day].toUpperCase(),
				weekC: weekCh[day],
				time: aDate.toTimeString().substring(0, 8),
				// 天气
				weatherInfo:{
					weather:'阴',
					wind:'东北风',
					fireTit:'火险等级',
					fireLevel:'一级'
				}
				
			}
		},
		mounted() {
			this.init();

		},
		methods: {

			init() {
				// 右上时钟
				this.interval = setInterval(() => {
					let aDate = new Date();
					let month = aDate.getMonth() < 9 ? "0" + (aDate.getMonth() + 1) : aDate.getMonth() + 1;
					let date = aDate.getDate() <= 9 ? "0" + aDate.getDate() : aDate.getDate();
					let day = aDate.getDay();
					let weekCh = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
					let weekEn = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",
						"Saturday");
					this.today = aDate.getFullYear() + "." + month + "." + date;
					this.weekC = weekCh[day];
					this.weekE = weekEn[day].toUpperCase();
					this.time = aDate.toTimeString().substring(0, 8);
					// console.log(this.today, this.weekC, this.weekE ,this.time);
				}, 1000)
			},
		},
		beforeDestroy() {
			// 右上时钟
			clearInterval(this.interval);
		},
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import '@/assets/styles/base.scss';
	.header-left {
		height: 5vh;
		position: absolute;
		left: 10px;
		display: flex;
		font-size: 1rem;
		align-items: center;
		color: $inBlue;
	
		.date {
			flex: 1;
			display: flex;
			align-items: center;
	
			.day {
				display: flex;
				flex-direction: column;
				font-size: 14px;
			}
	
			.day span:nth-child(2) {
				font-size: 10px;
				text-align: right;
			}
	
			.week {
				font-size: 13px;
				writing-mode: tb-rl;
	
			}
	
			.time {
				font-size: 2rem;
	
			}
	
			.line {
				width: 1px;
				height: 1.5rem;
				background: $inBlue;
				margin: 0 .4rem;
			}
		}
	
	}
</style>