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中的，下面是背景图