周历完成

src/views/regime/week.vue

@@ -39,7 +39,7 @@
         </div>
         <div class="body">
             <div class="row" v-for="item in 24" :key="item">
-                <div class="day date">
+                <div class="day date" :style="{'background-color': item - 1 == xs ? '#0DBBA4' : '', 'color':  item - 1 == xs ? '#fff' : ''}">
                     {{ item > 10 ? item - 1 : "0" + (item - 1) }}:00-{{
                     item > 9 ? item : "0" + item
                     }}:00
@@ -55,6 +55,13 @@
                     </div>
                 </div>
             </div>
+            <div class="lien" :style="{'top': top + 'rem'}">
+                <div class="heng">
+                    <div class="dian"></div>
+                    <div class="xian"></div>
+                </div>
+                <div class="times">{{times}}</div>
+            </div>
         </div>
         </div>
     </div>
@@ -146,6 +153,7 @@
         .body {
             width: 100%;
             overflow: hidden;
+            position: relative;
             .row {
                 background-color: #fff;
                 height: 63px;
@@ -205,6 +213,32 @@
                     border: unset;
                 }
             }
+            .lien{
+                width: 100%;
+                position: absolute;
+                top: 0;
+                left: 128px;
+                .heng{
+                    display: flex;
+                    align-items: center;
+                }
+                .dian{
+                    width: 6px;
+                    height: 6px;
+                    flex-shrink: 0;
+                    background-color: #FFFA18;
+                    border-radius: 50%;
+                }
+                .xian{
+                    width: 100%;
+                    height: 2px;
+                    background: linear-gradient(90deg, #FFFA18, #D0EB3D, #87E062, #42DE9D, #00DAC2);
+                }
+            }
+            .times{
+                font-size: 11px;
+                color: #FFFA18;
+            }
         }
     }
 }
@@ -215,6 +249,7 @@ import { getDay, gethour, getminute, gettime, getweek } from "@/utils/date";
 import store from '@/store';
 import { getdatelist, userinfo } from '@/api';
 import router from '@/router';
+import dayjs from 'dayjs';
 
 export default defineComponent({
     props: {},
@@ -247,6 +282,18 @@ export default defineComponent({
 
         getdates(userid);
         
+        const top = ref(0);
+        const times = ref('');
+        const xs = ref(0);
+        setInterval(()=>{
+            const now = dayjs();
+            const xiaoshi = now.month()
+            const fenzhong = now.minute()
+            top.value = (xiaoshi + (fenzhong / 60)) * 0.63;
+            times.value = (xiaoshi > 10 ? xiaoshi : '0' + xiaoshi) + ":" + (fenzhong > 10 ? fenzhong : '0' + fenzhong);
+            xs.value = xiaoshi;
+        }, 2000)
+
         watch(zhou, (value) => {
             week.value = getweek(value);
             console.log(week.value);
@@ -272,7 +319,10 @@ export default defineComponent({
             zhou,
             week,
             navto,
-            zhuangtai
+            zhuangtai,
+            top,
+            times,
+            xs
         };
     },
 });