Yinux/unibest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine动态时钟

Browse Source
This commit is contained in:
Burt 2024-01-10 15:47:04 +08:00
parent 02778be13f
commit 7ffed1a18c
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/demo/clock.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<view class="clock-box mt-10"> <view class="mt-4 h-10 text-center">动态时钟</view>
<view class="clock-box">
<view class="clock" :style="{ '--ds': ds, '--dm': dm, '--dh': dh }"> <view class="clock" :style="{ '--ds': ds, '--dm': dm, '--dh': dh }">
<view class="clock-pane"> <view class="clock-pane">
<text class="clock-num" :style="{ '--i': n }" v-for="n in 12" :key="n">{{ n }}</text> <text class="clock-num" :style="{ '--i': n }" v-for="n in 12" :key="n">{{ n }}</text>
@ -33,8 +34,8 @@ const dh = ref(h + m / 60 + s / 3600)
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 380px; width: 350px;
height: 380px; height: 350px;
font-size: 24px; font-size: 24px;
border-radius: 20px; border-radius: 20px;
box-shadow: 2px 2px 20px #0000001a; box-shadow: 2px 2px 20px #0000001a;