shuai16.wang
/
smart-screen-demo-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

冲突解决

dev_230517
刘洪超 2 years ago
parent
eea94ccd12
commit
80ed4c8697
1 changed files with 213 additions and 228 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 441
      src/view/tabs/home-screen.vue

441
src/view/tabs/home-screen.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save