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

feat: 动态时钟样式优化

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

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

@ -1,5 +1,5 @@
<template> <template>
<view class="clock-box"> <view class="clock-box mt-10">
<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>
@ -22,6 +22,12 @@ const dh = ref(h + m / 60 + s / 3600)
</script> </script>
<style lang="scss"> <style lang="scss">
.clock-box {
display: flex;
align-items: center;
justify-content: center;
}
.clock { .clock {
position: relative; position: relative;
display: flex; display: flex;
@ -112,9 +118,4 @@ const dh = ref(h + m / 60 + s / 3600)
transform: translateY(-50%) rotate(360deg); transform: translateY(-50%) rotate(360deg);
} }
} }
a {
width: 8px;
height: 9px;
}
</style> </style>