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