首页头部开发

src/view/tabs/home-screen.vue

@@ -8,8 +8,21 @@
             <div class="temp">-26℃</div>
         </div>
         <div class="content">
-            <div class="content-left"></div>
-            <div class="content-right"></div>
+            <div class="content-left">
+                <div class="time">
+                    {{ hour }}<span>:</span>{{ minutes }}
+                </div>
+            </div>
+            <div class="content-right">
+                <div class="message">
+                    <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
+                    <!-- 消息数量提醒 -->
+                    <div></div>
+                </div>
+                <div class="backups">
+                    <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img">
+                </div>
+            </div>
         </div>
         <div class="ceshi">
             <img id="imgs" src="" width="100%">
@@ -18,12 +31,21 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
+import router from "@/router";
 
 const aniImgs: any = ref([]);
 const timer: any = ref();
 const imgs: any = ref();
-const index = ref(0)
+const index = ref(0);
+/** 小时 */
+const hour = ref('--');
+/** 分钟 */
+const minutes = ref('--');
+/** 获取时间的定时器 */
+const getTimeTimer = ref();
+/** 信息的数量 */
+const messageNum = ref(0);
 
 onMounted(() => {
     imgs.value = document.getElementById('imgs');
@@ -31,7 +53,16 @@ onMounted(() => {
     //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
     // }
     // run();
-    console.log(aniImgs.value);
+    getTimeTimer.value = setInterval(() => {
+        const date = new Date();
+        hour.value = date.getHours() < 10? ('0' + date.getHours()): ('' + date.getHours());
+        minutes.value = date.getMinutes() < 10? ('0' + date.getMinutes()): ('' + date.getMinutes());
+    }, 1000);
+})
+
+onUnmounted(() => {
+    // 清除定时器
+    clearInterval(getTimeTimer.value);
 })
 
 const run = () => {
@@ -55,6 +86,11 @@ const change = () => {
         imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10? '0' + index.value: index.value}.png`;
     }
 }
+
+/** 跳转消息页面 */
+const goMessagePage = () => {
+    router.push("/message");
+}
 </script>
 
 <style lang="scss" scoped>
@@ -91,6 +127,41 @@ const change = () => {
         }
     }
 
+    .content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .content-left {
+            margin-left: 24px;
+
+            .time {
+                color: #FFF;
+                font-size: 57px;
+                font-family: Roboto-Light, Roboto;
+
+                span {
+                    font-size: 48px;
+                }
+            }
+        }
+
+        .content-right {
+            margin-right: 25px;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 72px;
+                height: 72px;
+            }
+
+            .message-img {
+                margin-right: 34px;
+            }
+        }
+    }
+
     .ceshi {
         width: 100vw;
     }