chore: 时间线增加日期和月的进度显示

app.vue

@@ -2,28 +2,28 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 11:35:10
- * @LastEditTime: 2024-02-19 23:08:26
+ * @LastEditTime: 2024-02-20 15:25:07
  * @LastEditors: NMTuan
  * @Description: 
- * @FilePath: /timeNow/app.vue
+ * @FilePath: \timeNow\app.vue
 -->
 <template>
-    <div
-        class="w-full h-screen overflow-hidden flex flex-col items-center justify-between"
-    >
+    <div class="w-full h-screen overflow-hidden flex flex-col items-center justify-between">
         <div></div>
-        <!-- <ClientOnly> -->
-        <div
-            class="bg-white/5 w-full flex flex-col items-center justify-center py-[4vw]"
-        >
+        <div class="bg-white/5 w-full flex flex-col items-center justify-center py-[4vw]">
             <div class="select-none">
                 <ClockWeek></ClockWeek>
                 <ClockBoard></ClockBoard>
                 <ClockDate></ClockDate>
             </div>
         </div>
-        <!-- </ClientOnly> -->
-        <TimeLine></TimeLine>
+        <div class="w-full  px-[2px]">
+            <TimeLine></TimeLine>
+            <div class="my-[4px]">
+                <DayLine></DayLine>
+                <MonthLine></MonthLine>
+            </div>
+        </div>
     </div>
 </template>
 <script setup>

components/com/line.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="flex justify-between w-full my-[1px] text-xs text-center font-digital-dismay cursor-default select-none">
+        <div v-for="part in parts"
+            class="flex-1 h-[16px] border-[2px] leading-none border-black hover:text-zinc-400 transition-all rounded"
+            :class="[highLight === part ? 'bg-zinc-700 text-zinc-700' : 'bg-zinc-900 text-zinc-900']">
+            {{ part }}
+        </div>
+    </div>
+</template>
+<script setup>
+const props = defineProps({
+    parts: 30,
+    highLight: 0
+})
+</script>

components/day/line.vue

@@ -0,0 +1,18 @@
+<template>
+    <ComLine :parts="days" :highLight="Number(dateStore.date)"></ComLine>
+</template>
+<script setup>
+const dateStore = useDateStore()
+const days = computed(() => {
+    // 获取当前日期
+    const currentDate = new Date();
+
+    // 获取当前月份
+    const currentMonth = currentDate.getMonth();
+
+    // 获取这个月的天数
+    const daysInMonth = new Date(currentDate.getFullYear(), currentMonth + 1, 0).getDate();
+
+    return daysInMonth
+})
+</script>

components/month/line.vue

@@ -0,0 +1,6 @@
+<template>
+    <ComLine :parts="12" :highLight="Number(dateStore.month)"></ComLine>
+</template>
+<script setup>
+const dateStore = useDateStore()
+</script>

components/time/line.vue

@@ -2,16 +2,16 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2024-02-18 22:03:42
- * @LastEditTime: 2024-02-19 23:18:32
+ * @LastEditTime: 2024-02-20 15:06:58
  * @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 relative select-none">
+    <div class="flex items-end justify-between w-full relative select-none px-[4px]">
         <template v-for="hour in 25">
             <div class="flex flex-col items-center relative">
-                <div class="font-digital-dismay text-zinc-700 absolute -top-6">
+                <div class="font-digital-dismay text-zinc-700 bg-black absolute -top-6 z-10">
                     {{ hour - 1 }}
                 </div>
                 <div class="w-[1px] h-[32px] bg-zinc-800"></div>
@@ -20,10 +20,7 @@
                 <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 class="absolute bottom-0 w-[1px] h-[52px] bg-red-900 z-1" :style="progressStyle"></div>
     </div>
 </template>
 <script setup>