|
|
|
|
@ -1,5 +1,42 @@
@@ -1,5 +1,42 @@
|
|
|
|
|
<template> |
|
|
|
|
<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=""> |
|
|
|
|
@ -9,7 +46,7 @@
@@ -9,7 +46,7 @@
|
|
|
|
|
</div> |
|
|
|
|
<div class="content"> |
|
|
|
|
<div class="content-left"> |
|
|
|
|
<div class="time" @click="envSelect"> |
|
|
|
|
<div class="time disabled-scroll" @touchstart="timeTouchStart" @touchend="timeTouchEnd"> |
|
|
|
|
{{ hour }}<span>:</span>{{ minutes }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -24,20 +61,31 @@
@@ -24,20 +61,31 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="ceshi"> |
|
|
|
|
<img id="imgs" src="" width="100%"> |
|
|
|
|
|
|
|
|
|
<!-- 温湿度数值展示 --> |
|
|
|
|
<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> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { ref, onMounted, onUnmounted } from "vue"; |
|
|
|
|
import { ref, onMounted, onUnmounted, onActivated } from "vue"; |
|
|
|
|
import router from "@/router"; |
|
|
|
|
import {CountTo} from "vue3-count-to"; |
|
|
|
|
|
|
|
|
|
const aniImgs: any = ref([]); |
|
|
|
|
const timer: any = ref(); |
|
|
|
|
const imgs: any = ref(); |
|
|
|
|
const index = ref(0); |
|
|
|
|
/** 小时 */ |
|
|
|
|
const hour = ref("--"); |
|
|
|
|
/** 分钟 */ |
|
|
|
|
@ -50,46 +98,49 @@ const messageNum = ref(1);
@@ -50,46 +98,49 @@ const messageNum = ref(1);
|
|
|
|
|
* 当前环境，默认春天1 |
|
|
|
|
*/ |
|
|
|
|
const currentType = ref(1); |
|
|
|
|
/** |
|
|
|
|
* 当前展示的动画 |
|
|
|
|
* 0：关机循环 |
|
|
|
|
* 1：开机进场 |
|
|
|
|
* 2：开机循环 |
|
|
|
|
* 3：关机退场 |
|
|
|
|
*/ |
|
|
|
|
const currentAnimation = ref(0); |
|
|
|
|
/** 开机进场dom */ |
|
|
|
|
const animationApproach: any = ref(null); |
|
|
|
|
/** 关机退场dom */ |
|
|
|
|
const animationExit: any = ref(null); |
|
|
|
|
/** 关机循环 */ |
|
|
|
|
const animationShutdown: any = ref(null); |
|
|
|
|
/** 开机循环 */ |
|
|
|
|
const animationPower: any = ref(null); |
|
|
|
|
/** 温湿度数值展示dom */ |
|
|
|
|
const indoorValue: any = ref(null); |
|
|
|
|
/** 室内环境dom */ |
|
|
|
|
const indoorSetting: any = ref(null); |
|
|
|
|
/** 展示数字滚动 */ |
|
|
|
|
const showNumScoll = ref(false); |
|
|
|
|
/** 时间长按定时器 */ |
|
|
|
|
const timePushTimer: any = ref(null); |
|
|
|
|
|
|
|
|
|
onActivated(() => { |
|
|
|
|
animationShutdown.value && animationShutdown.value.play(); |
|
|
|
|
animationPower.animationPower && animationPower.value.play(); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
imgs.value = document.getElementById("imgs"); |
|
|
|
|
// for (let i = 0; i <= 79; i++) { |
|
|
|
|
// aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`); |
|
|
|
|
// } |
|
|
|
|
// run(); |
|
|
|
|
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()); |
|
|
|
|
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 = () => { |
|
|
|
|
// 清除定时器 |
|
|
|
|
if (timer.value) { |
|
|
|
|
clearInterval(timer.value); |
|
|
|
|
timer.value = null; |
|
|
|
|
} |
|
|
|
|
change(); |
|
|
|
|
timer.value = setInterval(() => { |
|
|
|
|
index.value++; |
|
|
|
|
if (index.value > 79) { |
|
|
|
|
index.value = 0; |
|
|
|
|
} |
|
|
|
|
change(); |
|
|
|
|
}, 1000 / 24); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const change = () => { |
|
|
|
|
if (imgs.value) { |
|
|
|
|
imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10 ? "0" + index.value : index.value}.png`; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
/** |
|
|
|
|
* 全屋设定 |
|
|
|
|
*/ |
|
|
|
|
@ -100,16 +151,90 @@ const wholeSetting = () => {
@@ -100,16 +151,90 @@ const wholeSetting = () => {
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 环境模拟选择 |
|
|
|
|
*/ |
|
|
|
|
const envSelect = () => { |
|
|
|
|
clearTimeout(timePushTimer.value); |
|
|
|
|
timePushTimer.value = null; |
|
|
|
|
router.push("/envSelect"); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 跳转消息页面 */ |
|
|
|
|
const goMessagePage = () => { |
|
|
|
|
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); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** 时间长按开始 */ |
|
|
|
|
const timeTouchStart = () => { |
|
|
|
|
timePushTimer.value = setTimeout(() => { |
|
|
|
|
envSelect(); |
|
|
|
|
}, 10 * 1000); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** 时间长按结束 */ |
|
|
|
|
const timeTouchEnd = () => { |
|
|
|
|
clearTimeout(timePushTimer.value); |
|
|
|
|
timePushTimer.value = null; |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@ -119,6 +244,23 @@ const goMessagePage = () => {
@@ -119,6 +244,23 @@ const goMessagePage = () => {
|
|
|
|
|
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; |
|
|
|
|
@ -126,6 +268,9 @@ const goMessagePage = () => {
@@ -126,6 +268,9 @@ const goMessagePage = () => {
|
|
|
|
|
color: #FFF; |
|
|
|
|
margin-top: 12px; |
|
|
|
|
|
|
|
|
|
flex-shrink: 0; |
|
|
|
|
z-index: 99; |
|
|
|
|
|
|
|
|
|
.wifi-icon { |
|
|
|
|
margin-left: 24px; |
|
|
|
|
display: flex; |
|
|
|
|
@ -153,6 +298,9 @@ const goMessagePage = () => {
@@ -153,6 +298,9 @@ const goMessagePage = () => {
|
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
z-index: 99; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.content-left { |
|
|
|
|
margin-left: 24px; |
|
|
|
|
@ -161,6 +309,8 @@ const goMessagePage = () => {
@@ -161,6 +309,8 @@ const goMessagePage = () => {
|
|
|
|
|
color: #FFF; |
|
|
|
|
font-size: 57px; |
|
|
|
|
font-family: Roboto-Light, Roboto; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 48px; |
|
|
|
|
@ -200,11 +350,66 @@ const goMessagePage = () => {
@@ -200,11 +350,66 @@ const goMessagePage = () => {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ceshi { |
|
|
|
|
width: 100vw; |
|
|
|
|
.indoor-value { |
|
|
|
|
z-index: 99; |
|
|
|
|
color: #FFF; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.indoor-temp, .indoor-humi { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#imgs { |
|
|
|
|
width: 100%; |
|
|
|
|
.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-humi-value { |
|
|
|
|
margin-left: 240px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}</style> |
|
|
|
|
|
zhangzhiyi
1 year ago