From 80ed4c8697acc50489330ec7d3ae19ff9a6812c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E8=B6=85?= <943480861@qq.com>
Date: Fri, 26 May 2023 15:03:06 +0800
Subject: [PATCH] =?UTF-8?q?=EF=BB=BF=E5=86=B2=E7=AA=81=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/tabs/home-screen.vue | 441 ++++++++++++++++------------------
 1 file changed, 213 insertions(+), 228 deletions(-)

diff --git a/src/view/tabs/home-screen.vue b/src/view/tabs/home-screen.vue
index 93f8449..73c50eb 100644
--- a/src/view/tabs/home-screen.vue
+++ b/src/view/tabs/home-screen.vue
@@ -1,43 +1,42 @@
 <template>
-<<<<<<< HEAD
-    <div id="home-screen-wrapper">
-        <div class="bg-video" @click="changeAnimation()">
-            <!-- 关机动画循环 -->
-            <video
-                src="@/assets/imgs/home-screen/shutdown_loop.mp4"
-                autoplay
-                loop
-                muted
-                v-show="currentAnimation === 0"
-                ref="animationShutdown"
-            ></video>
-            <!-- 开机进场动画 -->
-            <video
-                src="@/assets/imgs/home-screen/approach.mp4"
-                muted
-                autoplay
-                v-show="currentAnimation === 1"
-                ref="animationApproach"
-            ></video>
-            <!-- 开机循环动画 -->
-            <video
-                src="@/assets/imgs/home-screen/power_on_loop.mp4"
-                autoplay
-                loop
-                muted
-                v-show="currentAnimation === 2"
-                ref="animationPower"
-            ></video>
-            <!-- 关机退场动画 -->
-             <video
-                src="@/assets/imgs/home-screen/exit.mp4"
-                muted
-                autoplay
-                v-show="currentAnimation === 3"
-                ref="animationExit"
-            ></video>
-=======
   <div id="home-screen-wrapper">
+    <div class="bg-video" @click="changeAnimation()">
+      <!-- 关机动画循环 -->
+      <video
+        src="@/assets/imgs/home-screen/shutdown_loop.mp4"
+        autoplay
+        loop
+        muted
+        v-show="currentAnimation === 0"
+        ref="animationShutdown"
+      ></video>
+      <!-- 开机进场动画 -->
+      <video
+        src="@/assets/imgs/home-screen/approach.mp4"
+        muted
+        autoplay
+        v-show="currentAnimation === 1"
+        ref="animationApproach"
+      ></video>
+      <!-- 开机循环动画 -->
+      <video
+        src="@/assets/imgs/home-screen/power_on_loop.mp4"
+        autoplay
+        loop
+        muted
+        v-show="currentAnimation === 2"
+        ref="animationPower"
+      ></video>
+      <!-- 关机退场动画 -->
+      <video
+        src="@/assets/imgs/home-screen/exit.mp4"
+        muted
+        autoplay
+        v-show="currentAnimation === 3"
+        ref="animationExit"
+      ></video>
+    </div>
+
     <div class="nav-top">
       <div class="wifi-icon">
         <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
@@ -47,53 +46,39 @@
     </div>
     <div class="content">
       <div class="content-left">
-        <div class="time" @c="envSelect">
+        <div class="time disabled-scroll" @touchstart="timeTouchStart" @touchend="timeTouchEnd">
           {{ hour }}<span>:</span>{{ minutes }}
->>>>>>> 267250d (定时添加)
         </div>
-
-        <div class="nav-top">
-            <div class="wifi-icon">
-                <img src="@/assets/imgs/home-screen/WIFI@2x.png" alt="">
-            </div>
-            <div class="weather">雪天</div>
-            <div class="temp">-26℃</div>
+      </div>
+      <div class="content-right">
+        <div class="message">
+          <img src="@/assets/imgs/home-screen/message@2x.png" class="message-img" @click="goMessagePage()">
+          <!-- 消息数量提醒 -->
+          <div class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
         </div>
-        <div class="content">
-            <div class="content-left">
-                <div class="time disabled-scroll" @touchstart="timeTouchStart" @touchend="timeTouchEnd">
-                    {{ 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 class="message-confim" v-show="messageNum > 0">{{ messageNum }}</div>
-                </div>
-                <div class="backups">
-                    <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img" @click="wholeSetting">
-                </div>
-            </div>
+        <div class="backups">
+          <img src="@/assets/imgs/home-screen/backups@2x.png" class="backups-img" @click="wholeSetting">
         </div>
+      </div>
+    </div>
 
-        <!-- 温湿度数值展示 -->
-        <div class="indoor-value" v-if="showNumScoll" ref="indoorValue">
-            <div class="indoor-temp">
-                <count-to :startVal="90" :endVal="26" :duration="3000" class="indoor-temp-value"></count-to>
-            </div>
-            <div class="indoor-humi">
-                <count-to :startVal="1" :endVal="58" :duration="3000" class="indoor-humi-value"></count-to>
-            </div>
-        </div>
+    <!-- 温湿度数值展示 -->
+    <div class="indoor-value" v-if="showNumScoll" ref="indoorValue">
+      <div class="indoor-temp">
+        <count-to :startVal="90" :endVal="26" :duration="3000" class="indoor-temp-value"></count-to>
+      </div>
+      <div class="indoor-humi">
+        <count-to :startVal="1" :endVal="58" :duration="3000" class="indoor-humi-value"></count-to>
+      </div>
+    </div>
 
-        <!-- 室内环境 -->
-        <div class="indoor-setting" ref="indoorSetting">
-            <div class="tovc-value">2</div>
-            <div class="pm25-value">500</div>
-            <div class="co2-value">400</div>
-        </div>
+    <!-- 室内环境 -->
+    <div class="indoor-setting" ref="indoorSetting">
+      <div class="tovc-value">2</div>
+      <div class="pm25-value">500</div>
+      <div class="co2-value">400</div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -139,16 +124,16 @@ const showNumScoll = ref(false);
 const timePushTimer: any = ref(null);
 
 onActivated(() => {
-    animationShutdown.value && animationShutdown.value.play();
-    animationPower.animationPower && animationPower.value.play();
+  animationShutdown.value && animationShutdown.value.play();
+  animationPower.animationPower && animationPower.value.play();
 })
 
 onMounted(() => {
-    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);
+  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(() => {
@@ -171,111 +156,111 @@ const wholeSetting = () => {
  * 环境模拟选择
  */
 const envSelect = () => {
-    clearTimeout(timePushTimer.value);
-    timePushTimer.value = null;
+  clearTimeout(timePushTimer.value);
+  timePushTimer.value = null;
   router.push("/envSelect");
 };
 
 /** 跳转消息页面 */
 const goMessagePage = () => {
-    router.push("/message");
+  router.push("/message");
 }
 
 /** 动画切换 */
 const changeAnimation = () => {
-    if (currentAnimation.value === 0) {
-        if (animationApproach.value) {
-            animationApproach.value.play();
-            setTimeout(() => {
-                currentAnimation.value = 1;
-            }, 100);
-        }
-        // 6s后数字滚动效果
-        setTimeout(() => {
-            showNumScoll.value = true;
-        }, 7.5 * 1000);
-        // 初始化室内环境位置
-        if (indoorSetting.value) {
-            indoorSetting.value.style.transform = "translateY(15px)";
-        }
-        // 室内环境动画淡入，从下向上动画
-        setTimeout(() => {
-            if (indoorSetting.value) {
-                indoorSetting.value.style.transition = "2s";
-                indoorSetting.value.style.opacity = "1";
-                indoorSetting.value.style.transform = "translateY(0)";
-            }
-        }, 9.5 * 1000)
-        setTimeout(() => {
-            currentAnimation.value = 2;
-        }, 10.6 * 1000);
-    } else if (currentAnimation.value === 1 || currentAnimation.value === 3) {
-        return;
-    } else if (currentAnimation.value === 2) {
-        if (animationExit.value) {
-            animationExit.value.play();
-            setTimeout(() => {
-                currentAnimation.value = 3;
-            }, 100);
-            // 室内环境动画淡出效果
-            if (indoorSetting.value) {
-                indoorSetting.value.style.transition = "2s";
-                indoorSetting.value.style.opacity = "0";
-            }
-            // 温湿度淡出效果
-            if (indoorValue.value) {
-                indoorValue.value.style.transition = "2s";
-                indoorValue.value.style.opacity = "0";
-            }
-        }
-        setTimeout(() => {
-            currentAnimation.value = 0;
-            showNumScoll.value = false;
-            if (indoorValue.value) {
-                indoorValue.value.style.opacity = "1";
-            }
-        }, 4.6 * 1000);
+  if (currentAnimation.value === 0) {
+    if (animationApproach.value) {
+      animationApproach.value.play();
+      setTimeout(() => {
+        currentAnimation.value = 1;
+      }, 100);
+    }
+    // 6s后数字滚动效果
+    setTimeout(() => {
+      showNumScoll.value = true;
+    }, 7.5 * 1000);
+    // 初始化室内环境位置
+    if (indoorSetting.value) {
+      indoorSetting.value.style.transform = "translateY(15px)";
     }
+    // 室内环境动画淡入，从下向上动画
+    setTimeout(() => {
+      if (indoorSetting.value) {
+        indoorSetting.value.style.transition = "2s";
+        indoorSetting.value.style.opacity = "1";
+        indoorSetting.value.style.transform = "translateY(0)";
+      }
+    }, 9.5 * 1000)
+    setTimeout(() => {
+      currentAnimation.value = 2;
+    }, 10.6 * 1000);
+  } else if (currentAnimation.value === 1 || currentAnimation.value === 3) {
+    return;
+  } else if (currentAnimation.value === 2) {
+    if (animationExit.value) {
+      animationExit.value.play();
+      setTimeout(() => {
+        currentAnimation.value = 3;
+      }, 100);
+      // 室内环境动画淡出效果
+      if (indoorSetting.value) {
+        indoorSetting.value.style.transition = "2s";
+        indoorSetting.value.style.opacity = "0";
+      }
+      // 温湿度淡出效果
+      if (indoorValue.value) {
+        indoorValue.value.style.transition = "2s";
+        indoorValue.value.style.opacity = "0";
+      }
+    }
+    setTimeout(() => {
+      currentAnimation.value = 0;
+      showNumScoll.value = false;
+      if (indoorValue.value) {
+        indoorValue.value.style.opacity = "1";
+      }
+    }, 4.6 * 1000);
+  }
 }
 
 /** 时间长按开始 */
 const timeTouchStart = () => {
-    timePushTimer.value = setTimeout(() => {
-        envSelect();
-    }, 10 * 1000);
+  timePushTimer.value = setTimeout(() => {
+    envSelect();
+  }, 10 * 1000);
 }
 
 /** 时间长按结束 */
 const timeTouchEnd = () => {
-    clearTimeout(timePushTimer.value);
-    timePushTimer.value = null;
+  clearTimeout(timePushTimer.value);
+  timePushTimer.value = null;
 }
 </script>
 
 <style lang="scss" scoped>
 #home-screen-wrapper {
-    width: 100vw;
-    height: 100vh;
-    background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
-    background-size: 100% 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    -webkit-touch-callout: none !important;
-
-    .bg-video {
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 0;
-
-        video {
-            width: 100%;
-            height: 100%;
-        }
+  width: 100vw;
+  height: 100vh;
+  background: url('@/assets/imgs/home-screen/snow@2x.png') no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  -webkit-touch-callout: none !important;
+
+  .bg-video {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 0;
+
+    video {
+      width: 100%;
+      height: 100%;
     }
+  }
 
   .nav-top {
     display: flex;
@@ -283,8 +268,8 @@ const timeTouchEnd = () => {
     color: #FFF;
     margin-top: 12px;
 
-        flex-shrink: 0;
-        z-index: 99;
+    flex-shrink: 0;
+    z-index: 99;
 
     .wifi-icon {
       margin-left: 24px;
@@ -313,19 +298,19 @@ const timeTouchEnd = () => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-        flex-shrink: 0;
-        z-index: 99;
+    flex-shrink: 0;
+    z-index: 99;
 
 
     .content-left {
       margin-left: 24px;
 
-            .time {
-                color: #FFF;
-                font-size: 57px;
-                font-family: Roboto-Light, Roboto;
-                display: flex;
-                align-items: center;
+      .time {
+        color: #FFF;
+        font-size: 57px;
+        font-family: Roboto-Light, Roboto;
+        display: flex;
+        align-items: center;
 
         span {
           font-size: 48px;
@@ -365,66 +350,66 @@ const timeTouchEnd = () => {
     }
   }
 
-    .indoor-value {
-        z-index: 99;
-        color: #FFF;
-        display: flex;
+  .indoor-value {
+    z-index: 99;
+    color: #FFF;
+    display: flex;
 
-        .indoor-temp, .indoor-humi {
-            display: flex;
-            align-items: flex-start;
-        }
+    .indoor-temp, .indoor-humi {
+      display: flex;
+      align-items: flex-start;
+    }
 
-        .indoor-temp-value, .indoor-humi-value {
-            font-size: 76px;
-            width: 90px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+    .indoor-temp-value, .indoor-humi-value {
+      font-size: 76px;
+      width: 90px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-        .indoor-temp-value {
-            margin-left: 149px;
-        }
+    .indoor-temp-value {
+      margin-left: 149px;
+    }
 
-        .indoor-humi-value {
-            margin-left: 240px;
-        }
+    .indoor-humi-value {
+      margin-left: 240px;
+    }
 
-        span {
-            font-size: 24px;
-        }
+    span {
+      font-size: 24px;
     }
+  }
 
-    .indoor-setting {
-        z-index: 99;
-        display: flex;
-        font-size: 52px;
-        font-family: Roboto-Medium, Roboto;
-        font-weight: 500;
-        margin-top: 290px;
-        opacity: 0;
-        transform: translateY(30px);
-
-        .tovc-value {
-            color: #D0A24A;
-            margin-left: 120px;
-        }
+  .indoor-setting {
+    z-index: 99;
+    display: flex;
+    font-size: 52px;
+    font-family: Roboto-Medium, Roboto;
+    font-weight: 500;
+    margin-top: 290px;
+    opacity: 0;
+    transform: translateY(30px);
+
+    .tovc-value {
+      color: #D0A24A;
+      margin-left: 120px;
+    }
 
-        .pm25-value {
-            color: #D96F72;
-            margin-left: 100px;
-        }
+    .pm25-value {
+      color: #D96F72;
+      margin-left: 100px;
+    }
 
-        .co2-value {
-            color: #FFF;
-            margin-left: 110px;
-        }
-        .tovc-value, .pm25-value, .co2-value {
-            width: 90px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
+    .co2-value {
+      color: #FFF;
+      margin-left: 110px;
     }
+    .tovc-value, .pm25-value, .co2-value {
+      width: 90px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 }</style>