diff options
Diffstat (limited to 'packages/frontend/src')
| -rw-r--r-- | packages/frontend/src/components/MkDigitalClock.vue | 24 |
1 files changed, 11 insertions, 13 deletions
diff --git a/packages/frontend/src/components/MkDigitalClock.vue b/packages/frontend/src/components/MkDigitalClock.vue index 9ed8d63d19..278dc8a5e7 100644 --- a/packages/frontend/src/components/MkDigitalClock.vue +++ b/packages/frontend/src/components/MkDigitalClock.vue @@ -1,11 +1,11 @@ <template> -<span class="zjobosdg"> +<span> <span v-text="hh"></span> - <span class="colon" :class="{ showColon }">:</span> + <span :class="[$style.colon, { [$style.showColon]: showColon }]">:</span> <span v-text="mm"></span> - <span v-if="showS" class="colon" :class="{ showColon }">:</span> + <span v-if="showS" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span> <span v-if="showS" v-text="ss"></span> - <span v-if="showMs" class="colon" :class="{ showColon }">:</span> + <span v-if="showMs" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span> <span v-if="showMs" v-text="ms"></span> </span> </template> @@ -62,16 +62,14 @@ onUnmounted(() => { }); </script> -<style lang="scss" scoped> -.zjobosdg { - > .colon { - opacity: 0; - transition: opacity 1s ease; +<style lang="scss" module> +.colon { + opacity: 0; + transition: opacity 1s ease; - &.showColon { - opacity: 1; - transition: opacity 0s; - } + &.showColon { + opacity: 1; + transition: opacity 0s; } } </style> |