chore: 完成底部时间线

app.vue

@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:35:10
- * @LastEditTime: 2024-02-19 22:17:10
+ * @LastEditTime: 2024-02-19 23:08:26
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: /timeNow/app.vue
@@ -16,7 +16,7 @@
         <div
             class="bg-white/5 w-full flex flex-col items-center justify-center py-[4vw]"
         >
-            <div>
+            <div class="select-none">
                 <ClockWeek></ClockWeek>
                 <ClockBoard></ClockBoard>
                 <ClockDate></ClockDate>
@@ -41,6 +41,12 @@ onBeforeUnmount(() => {
 })
 </script>
 <style lang="scss">
+html,
+body,
+#__nuxt {
+    background-color: #000;
+}
+
 @font-face {
     font-family: 'DigitalDismay';
     src: url('/fonts/DigitalDismay.otf') format('opentype');

components/time/line.vue

@@ -1,28 +1,43 @@
-
 <!--
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 22:03:42
- * @LastEditTime: 2024-02-18 22:23:21
+ * @LastEditTime: 2024-02-19 23:18:32
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: \timeNow\components\time\line.vue
+ * @FilePath: /timeNow/components/time/line.vue
 -->
 <template>
-    <div class="flex items-end justify-between w-full">
+    <div class="flex items-end justify-between w-full relative select-none">
         <template v-for="hour in 25">
-            <div class="flex flex-col items-center ">
-                <div class="font-digital-dismay">{{ hour - 1 }}</div>
-                <div class="w-[2px] h-[32px] bg-gray-400"></div>
+            <div class="flex flex-col items-center relative">
+                <div class="font-digital-dismay text-zinc-700 absolute -top-6">
+                    {{ hour - 1 }}
+                </div>
+                <div class="w-[1px] h-[32px] bg-zinc-800"></div>
             </div>
             <template v-if="hour !== 25" v-for="m in 3">
-                <div class="w-[1px] h-[18px] bg-gray-400"></div>
+                <div class="w-[1px] h-[18px] bg-zinc-800"></div>
             </template>
         </template>
+        <div
+            class="absolute bottom-0 w-[1px] h-[52px] bg-red-500"
+            :style="progressStyle"
+        ></div>
     </div>
 </template>
 <script setup>
+const dateStore = useDateStore()
+
+const progressStyle = computed(() => {
+    const second =
+        dateStore.hour * 3600 + dateStore.minute * 60 + dateStore.second
+    const oneDaySecond = 24 * 3600
+    // round会导致时间线的秒针位置不准确
+    // const left = Math.round(second / oneDaySecond).toFixed(2)
+    const left = second / oneDaySecond
+    return {
+        left: left + '%'
+    }
+})
 </script>
-<style lang="scss" scoped>
-.hour {}
-</style>

stores/date.ts

@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-19 22:13:33
- * @LastEditTime: 2024-02-19 22:25:25
+ * @LastEditTime: 2024-02-19 23:06:51
  * @LastEditors: NMTuan
  * @Description:
  * @FilePath: /timeNow/stores/date.ts