uniapp 时钟

<template>
	<view class="clock-view">
		<view class="clock-container u-m-b-66">
			<!-- 表盘背景 -->
			<view class="clock-face"></view>
			<!-- 时针 -->
			<view class="hand hour-hand" :style="{ transform: `rotate(${hourDeg}deg)` }">
				<view class="hand-inner hour-inner"></view>
			</view>
			<!-- 分针 -->
			<view class="hand minute-hand" :style="{ transform: `rotate(${minuteDeg}deg)` }">
				<view class="hand-inner minute-inner"></view>
			</view>
			<!-- 秒针 -->
			<view class="hand second-hand" :style="{ transform: `rotate(${secondDeg}deg)` }">
				<view class="hand-inner second-inner"></view>
			</view>
			<!-- 中心圆点 -->
			<view class="center-dot"></view>
		</view>
		<view class="time-font u-text-center time-text u-m-b-30 w-s-color-f u-f-52">{{ formattedDate }}</view>
		<view class="time-font u-text-center time-text w-s-color-f u-f-52">{{ formattedTime }}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			hourDeg: 0,
			minuteDeg: 0,
			secondDeg: 0,
			timer: null,
			timerText: null,
			formattedDate: '',
			formattedTime: '',
		};
	},
	onLoad() {
		this.updateTime();
		this.startTimer();
		this.timer = setInterval(() => this.updateTime(), 1000);
	},
	onUnload() {
		this.stopTimer();
		// 屏保页面卸载时停止监听
		clearInterval(this.timer);
	},
	onHide() {
		// 页面隐藏时停止计时器节省资源
		this.stopTimer();
		clearInterval(this.timer);
	},
	methods: {
		updateTime() {
			const now = new Date();
			const hours = now.getHours() % 12;
			const minutes = now.getMinutes();
			const seconds = now.getSeconds();
			this.secondDeg = seconds * 6;
			this.minuteDeg = minutes * 6 + seconds * 0.1;
			this.hourDeg = hours * 30 + minutes * 0.5;
		},
		updateDisplay() {
			const now = new Date();

			// 格式化日期部分
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');

			// 格式化时间部分
			const hour = String(now.getHours()).padStart(2, '0');
			const minute = String(now.getMinutes()).padStart(2, '0');
			const second = String(now.getSeconds()).padStart(2, '0');

			// 更新显示
			this.formattedDate = `${year}-${month}-${day}`;
			this.formattedTime = `${hour}:${minute}:${second}`;
		},
		startTimer() {
			// 立即更新一次避免延迟
			this.updateDisplay();
			this.timerText = setInterval(() => {
				this.updateDisplay();
			}, 1000);
		},
		stopTimer() {
			if (this.timerText) {
				clearInterval(this.timerText);
				this.timerText = null;
			}
		}
	}
};
</script>

<style>
	page{
		background: rgba(0, 0, 0, 0.81);
	}
</style>
<style scoped lang="scss">
.clock-view {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.81)
	// 容器
	.clock-container {
		position: relative;
		width: 640rpx;
		height: 640rpx;
		margin: 0 auto;
		border-radius: 50%;
		transform-origin: center center;
		background-image: url('@/static/icon/8.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// 表盘背景
		.clock-face {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		// 指针外层容器
		.hand {
			position: absolute;
			left: 50%;
			bottom: 50%;
			transform-origin: bottom center;
			border-radius: 50%;
			// 指针阴影效果
			filter: drop-shadow(0 0 4px rgba(51, 51, 51, 0.15));
			// 指针内层 - 中心粗两头细
			.hand-inner {
				width: 100%;
				height: 100%;
				background: currentColor;
				// 调整为类似参考图的梯形，宽端朝内（连接中心），窄端朝外
				clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
				// 添加渐变立体感
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 25%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.2) 100%);
					clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
					pointer-events: none;
				}
			}
		}

		// 时针
		.hour-hand {
			width: 24rpx; // 调整宽度，模拟参考图时针粗细
			height: 22%; // 调整长度，按需微调
			margin-left: -(24rpx / 2);
			color: #2f3031; // 黑色，匹配参考图
			// 时针阴影可以稍淡
			filter: drop-shadow(0 0 3px rgba(51, 51, 51, 0.15));
		}

		// 分针
		.minute-hand {
			width: 18rpx; // 调整宽度，模拟参考图分针粗细
			height: 30%; // 调整长度，按需微调
			margin-left: -(18rpx / 2);
			color: #2f3031; // 黑色，匹配参考图
			filter: drop-shadow(0 0 4px rgba(51, 51, 51, 0.15));
		}

		// 秒针
		.second-hand {
			width: 10rpx; // 调整宽度，模拟参考图秒针粗细
			height: 34%; // 调整长度，按需微调
			margin-left: -(10rpx / 2);
			color: #aa2c2d; // 黑色，匹配参考图
			.hand-inner {
				&::before {
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.3) 100%);
				}
			}

			filter: drop-shadow(0 0 4px rgba(51, 51, 51, 0.15));
		}

		// 中心圆点
		.center-dot {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 20rpx;
			height: 20rpx;
			margin-left: -(20rpx / 2);
			margin-top: -(20rpx / 2);
			background: #fff;
			border-radius: 50%;
			z-index: 10;
		}
	}
	.time-text {
		letter-spacing: 14rpx;
	}
}
</style>

 一部分样式用到了uview1.0中的，下面是背景图