Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-14 12:45:20 +09:00
parent 5da74897ae
commit e3c39d4b52
1 changed files with 11 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/components/MkDigitalClock.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<span class="zjobosdg"> <span>
<span v-text="hh"></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-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="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 v-if="showMs" v-text="ms"></span>
</span> </span>
</template> </template>
@ -62,9 +62,8 @@ onUnmounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.zjobosdg { .colon {
> .colon {
opacity: 0; opacity: 0;
transition: opacity 1s ease; transition: opacity 1s ease;
@ -72,6 +71,5 @@ onUnmounted(() => {
opacity: 1; opacity: 1;
transition: opacity 0s; transition: opacity 0s;
} }
}
} }
</style> </style>