Feat: ClockCard Style2

frontend/src/components/time/Style2.vue

@@ -1,36 +1,52 @@
 <script setup lang="ts">
-defineProps<{
-  time: string;
-  date: string;
-}>();
+import dayjs from "dayjs";
+import { onUnmounted } from "vue";
+import { onMounted } from "vue";
+import { ref } from "vue";
+
+const time = ref("");
+
+let timer: NodeJS.Timer | null = null;
+
+onMounted(() => {
+  timer = setInterval(() => {
+    time.value = dayjs().format("HHmmss");
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer);
+  timer = null;
+});
 </script>
 
 <template>
   <div class="h-100 flex-center overflow-hidden">
     <div class="time">
       <div class="h">
-        <div class="left">
-          <span v-for="i in 10" :key="i">{{ i - 1 }}</span>
+        <div class="left" :style="{ '--n': Number(time[0]) - 1 }">
+          <span>1</span>
+          <span>2</span>
         </div>
-        <div class="right">
-          <span v-for="i in 10" :key="i">{{ i - 1 }}</span>
+        <div class="right" :style="{ '--n': Number(time[1]) }">
+          <span v-for="i in 9" :key="i">{{ i }}</span>
         </div>
       </div>
       :
       <div class="m">
-        <div class="left">
-          <span v-for="i in 10" :key="i">{{ i - 1 }}</span>
+        <div class="left" :style="{ '--n': Number(time[2]) }">
+          <span v-for="i in 7" :key="i">{{ i - 1 }}</span>
         </div>
-        <div class="right">
+        <div class="right" :style="{ '--n': Number(time[3]) }">
           <span v-for="i in 10" :key="i">{{ i - 1 }}</span>
         </div>
       </div>
       :
       <div class="s">
-        <div class="left">
-          <span v-for="i in 10" :key="i">{{ i - 1 }}</span>
+        <div class="left" :style="{ '--n': Number(time[4]) }">
+          <span v-for="i in 7" :key="i">{{ i - 1 }}</span>
         </div>
-        <div class="right">
+        <div class="right" :style="{ '--n': Number(time[5]) }">
           <span v-for="i in 10" :key="i">{{ i - 1 }}</span>
         </div>
       </div>
@@ -38,62 +54,31 @@ defineProps<{
   </div>
 </template>
 
-<style lang="scss" scoped>
-.value {
-  font-weight: bolder;
-}
-@keyframes time {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-100%);
-  }
-}
-
+<style lang="less" scoped>
 .time {
   display: flex;
   font-size: 20px;
   align-items: flex-start;
+
   .h,
   .m,
   .s {
     display: flex;
     margin: 0 10px;
     align-items: flex-start;
+
     .left,
     .right {
       margin: 0 10px;
       display: flex;
       align-items: flex-start;
       flex-direction: column;
-    }
-  }
-}
+      transition: all 0.3s;
+      transform: translateY(calc(var(--n) * -22px));
 
-.time {
-  .h {
-    .left {
-      animation: time 60 * 60 * 60s linear infinite;
+      span {
+        height: 20px;
       }
-    .right {
-      animation: time 60 * 60 * 10s linear infinite;
-    }
-  }
-  .m {
-    .left {
-      animation: time 60 * 60s linear infinite;
-    }
-    .right {
-      animation: time 60 * 10s linear infinite;
-    }
-  }
-  .s {
-    .left {
-      animation: time 60s linear infinite;
-    }
-    .right {
-      animation: time 10s linear infinite;
     }
   }
 }

frontend/src/widgets/others/ClockCard.vue

@@ -6,6 +6,7 @@ import { onMounted, onUnmounted, ref } from "vue";
 import { UndoOutlined } from "@ant-design/icons-vue";
 import dayjs from "dayjs";
 import { useLayoutCardTools } from "@/hooks/useCardTools";
+
 import Style1 from "@/components/time/Style1.vue";
 import Style2 from "@/components/time/Style2.vue";