From e3c39d4b5212150409c308abbcc02e3b86a0b6b8 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 14 Jan 2023 12:45:20 +0900 Subject: [PATCH] refactor(client): use css modules --- .../src/components/MkDigitalClock.vue | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/components/MkDigitalClock.vue b/packages/frontend/src/components/MkDigitalClock.vue index 9ed8d63d1..278dc8a5e 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>