From 8dd0e3c9ab4340bbc6ef4fef19de87f9522116f1 Mon Sep 17 00:00:00 2001
From: zhangzhiyi <zhangzhiyi@birantech.com>
Date: Thu, 25 May 2023 13:21:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A4=B4=E9=83=A8=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/home-screen/backups@2x.png | Bin 0 -> 1457 bytes
 src/assets/imgs/home-screen/message@2x.png | Bin 0 -> 1786 bytes
 src/view/tabs/home-screen.vue              |  81 +++++++++++++++++++--
 3 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/imgs/home-screen/backups@2x.png
 create mode 100644 src/assets/imgs/home-screen/message@2x.png

diff --git a/src/assets/imgs/home-screen/backups@2x.png b/src/assets/imgs/home-screen/backups@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..657366428718b38e23f35f5d36029a884c9cd7bb
GIT binary patch
literal 1457
zcmeAS@N?(olHy`uVBq!ia0vp^6F``Q4M;wBd$a>cF%}28J29*~C-ahlfi>IH#WAEJ
z?(JOr)iR+H?e+R%nz?IoS`s)ol(L*o)pR!WCZw~x{gSLQw`m#o4VFJbn$9LdERH-)
zy;FNry9%B>IcNIX%6y*X{_=O{-q_r}_qn?Kx#fA=&)@Izer#%RROrzO<ltzWa6qZS
zLCo$DM+>tUBg>`_f^G^j8#ojuwDub?J#27gXw<1`5#(UkVd6-6sNCaVks#=xz%8H1
za)_~;fhqC_hq3@)1dG6lL+%od1vD_qq?vi?l<g{em0x~c_(y({ocodU#(VBMdMgD8
z{R=w9>N(%@m&>Ku=~HTzUS@m7yB)c_WV>C4B#YO9c(0vmFXt^Wmpc7d?`3mG#RZGH
zjfVwJ%$XH*ir4eL*DCD`Q^I2#?Rq-iFKd}*Cf3*^DH%5Jx9q1m`?9CL_%$nBiRG0@
zhQ+g=PkZiO+gx=)=jHE(f2KZM@N4SC?W=chKAml==Cq)$(QbN4w#vWBOZt@_9lyJO
zYS6u@CE=HDE6>zddQ|q@-7<rx(dy&$pgLL0+p9js*k+qbhOKQ^7P9T^@SZFGbiu}>
z93ftnTj$Mu6Ju?uG2?&b=j$r9yUdrp+qTN)e^lkS*F4&RQ#0zzzfE0YFKxCfE_j!?
zV7+P2+}aaLEK*M@RbD=N6K!)}+NP`Hd-N%wH50zXoxWjw>`&Nd?+F>2Otm^MrI}v{
zEh<-fly;h3bLo}bwYT5w$#Xj*yWGJ|tkFng-W7)hHq$O^ZRDPP%v)&phKbGIe2XkQ
z=KYz!<rc&8kLtnOJCYZeMum7ibW&pay8855p0EXV)om)~!8cn|J&rt<F+18T{-AMF
zFZYCvKW#3}a-1l2p7TS1t&+oni44~pr5p`&<}ffNwn0)+f6xM5*&}jM4;Kq&tX_VR
zV~Rt<Y4J}&A0k!5_A}+~HNG<IZ_9^OtdG*tni$hMuW}uEEb{D(`qAq;0{kVao)4x(
zZgwbXvofAPCAP;w*gBa1rsS-aeY<()uKfLC(ygj<n~k?rf1BL2<?EX!ouw%y%jT6Q
z$4}zEoBG1X*0tRsR!H$epTpLb7ycHpmL<l@RVnf<ivN)Pw@S2s$NXmsx6*(7*%;{e
z*w|r~sn}*F-@ANP&dY^nr~jG7x+;G4?w|TQ=eT!&TeVtrMV^v*@NM;~brV;MWlYGp
zJa=Jn=f$Y<uS{>(xXk{uvhiByyzD!H93~!HPRd))^zON~%U$`xy|ok1{<#zM+U30I
zI}O%Z++wBwy%`!e974@`z3tntNOn7TGUaYH7Hbq@xmA>|!!#2VGGdK9jXP$ZzW%4|
zwR8F#POGp5eytS?cpI&*T6TW)czcLt){U82zI9GNCd}Pv6SCjF(R1!f&bSEGbDP(8
zoV#*&rB{~DmNa|CntO9MnuyKwlVU1;+3jG>lv=W^?5tB#M{I=BnUhN`I>NHkb=WUX
zejAn0aQR2;+++F|CQh$Y(Nj^H@Kk5Jk-!O|j2%+7zL#n}w=P}r{A<XiufSX-9Ou+l
zo%l@WgGD>%gdg^{zh=MbNoDo=#s6U9HI)fd9-0RiGBBNGxzTF6IO%}|Bg-Lfx)d8E
e6=o0jGge-8Tfbf8gfFlRX7F_Nb6Mw<&;$T-6L(+$

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/home-screen/message@2x.png b/src/assets/imgs/home-screen/message@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..463f1bd146ccce593bffc84f7b33abafa5d6293a
GIT binary patch
literal 1786
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
SB|EkA%m9Kb$)(mgIQ1W%S5;;J

literal 0
HcmV?d00001

diff --git a/src/view/tabs/home-screen.vue b/src/view/tabs/home-screen.vue
index 0b3360c..8fb136f 100644
--- a/src/view/tabs/home-screen.vue
+++ b/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;
     }