minman-tv/components/topBox/topBox.vue

<template>
	<view>
		<view class="top">
			<view class="img_logo" :style="{ width: width, height: height }">
				<image class="img" :src="img"></image>
			</view>
			<view class="time">
				<view class="">
					{{ today }}
				</view>
				<view style="margin-left: 2%">
					{{ currentTime }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'topBox',
	props: {
		img: {
			type: String,
			default: '/static/img/img_logo.png'
		},
		width: {
			type: [String, Number] // 可以是字符串或数字类型
		},
		height: {
			type: [String, Number] // 可以是字符串或数字类型
		}
	},
	data() {
		return { currentTime: '', today: '' };
	},
	watch: {
		currentTime(newVal, oldVal) {
			if (newVal === oldVal) return;
			this.currentTime = newVal;
		},
		today(newVal, oldVal) {
			if (newVal === oldVal) return;
			this.today = newVal;
		}
	},
	mounted() {
		this.updateTime();
		setInterval(() => {
			this.updateTime();
		}, 1000);
	},
	methods: {
		// 获取时间
		updateTime() {
			const now = new Date();
			let hours = now.getHours();
			let minutes = now.getMinutes();
			minutes = ('0' + minutes).slice(-2);
			this.currentTime = hours + ':' + minutes;
			let month = now.getMonth() + 1;
			let day = now.getDate();
			month = ('0' + month).slice(-2);
			this.today = month + '月' + day + '日';
		}
	}
};
</script>

<style>
.top {
	width: 100%;
	height: 20vh;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
}
.img {
	width: 100%;
	height: 100%;
}
.img_logo {
	position: absolute;
	width: 10%;
	height: 38%;
	margin: 3% 0 0 5%;
	/* background: url('/static/img/img_logo.png') no-repeat; */
	/* background-size: 100% 100%; */
}
.time {
	width: 25%;
	display: flex;
	align-items: center;
	position: absolute;
	right: -1%;
	top: 30%;
	color: #ffffff;
	z-index: 100;
	font-size: 14px;
}
</style>