After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 6.2 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 3.8 KiB |
After Width: | Height: | Size: 7.5 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 4.5 KiB |
After Width: | Height: | Size: 3.7 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 33 KiB |
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,186 @@ |
|||||||
|
<template> |
||||||
|
<div class="base-bg"> |
||||||
|
<div class="zhp-title"> |
||||||
|
<img |
||||||
|
class="leftImg" |
||||||
|
src="@/assets/imgs/show/back.png" |
||||||
|
@click="onClickLeft()" |
||||||
|
/> |
||||||
|
<div class="zhp-title-text">定时</div> |
||||||
|
</div> |
||||||
|
<div class="time-center"> |
||||||
|
<div class="time-center-item" @click="onOpenClick(true)"> |
||||||
|
<div class="layout-horizontal layout-items-center"> |
||||||
|
<div |
||||||
|
class="time-center-item-select" |
||||||
|
:class=" |
||||||
|
isOpen ? 'time-center-item-select' : 'time-center-item-unselect' |
||||||
|
" |
||||||
|
> |
||||||
|
开机 |
||||||
|
</div> |
||||||
|
<img |
||||||
|
class="selectImg" |
||||||
|
:src=" |
||||||
|
isOpen |
||||||
|
? '/src/assets/imgs/show/icon_check.png' |
||||||
|
: '/src/assets/imgs/show/icon_nomor.png' |
||||||
|
" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="time-center-item" @click="onOpenClick(false)"> |
||||||
|
<div class="layout-horizontal layout-items-center"> |
||||||
|
<div |
||||||
|
class="time-center-item-select" |
||||||
|
:class=" |
||||||
|
isOpen ? 'time-center-item-unselect' : 'time-center-item-select' |
||||||
|
" |
||||||
|
> |
||||||
|
关机 |
||||||
|
</div> |
||||||
|
<img |
||||||
|
class="selectImg" |
||||||
|
:src=" |
||||||
|
isOpen |
||||||
|
? '/src/assets/imgs/show/icon_nomor.png' |
||||||
|
: '/src/assets/imgs/show/icon_check.png' |
||||||
|
" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="item-content"> |
||||||
|
<div class="item-text">时间</div> |
||||||
|
<div class="item-text-select">1小时后</div> |
||||||
|
<img class="rightImg" src="@/assets/imgs/show/right.png" /> |
||||||
|
</div> |
||||||
|
<div class="item-content"> |
||||||
|
<div class="item-text">设备</div> |
||||||
|
<div class="item-text-select">1台空调</div> |
||||||
|
<img class="rightImg" src="@/assets/imgs/show/right.png" /> |
||||||
|
</div> |
||||||
|
<div class="bottom-btn bottom-btn-text">保存</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script setup> |
||||||
|
import { Toast } from "vant"; |
||||||
|
import { ref } from "vue"; |
||||||
|
|
||||||
|
const isOpen = ref(false); |
||||||
|
const onClickLeft = () => { |
||||||
|
Toast("点击返回"); |
||||||
|
}; |
||||||
|
const onOpenClick = (b) => { |
||||||
|
isOpen.value = b; |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.time-center { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding-left: 24px; |
||||||
|
padding-right: 24px; |
||||||
|
margin-bottom: 12px; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.time-center-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
height: 100px; |
||||||
|
width: 330px; |
||||||
|
background-position: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-image: url("@/assets/imgs/show/bg_add_timing_unselect.png"); |
||||||
|
|
||||||
|
.layout-horizontal { |
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.time-center-item-select { |
||||||
|
color: #ffffff; |
||||||
|
text-align: center; |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.time-center-item-unselect { |
||||||
|
color: #ffffff; |
||||||
|
opacity: 0.4; |
||||||
|
text-align: center; |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
.selectImg { |
||||||
|
width: 60px; |
||||||
|
height: 60px; |
||||||
|
margin-left: 26px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item-content { |
||||||
|
margin-bottom: 12px; |
||||||
|
position: relative; |
||||||
|
left: 50%; |
||||||
|
-webkit-transform: translateX(-50%); |
||||||
|
transform: translateX(-50%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
width: 672px; |
||||||
|
height: 100px; |
||||||
|
background-image: url("@/assets/imgs/show/bg_add_item_timing.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
|
||||||
|
.item-text { |
||||||
|
margin-left: 36px; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 32px; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
.item-text-select { |
||||||
|
position: absolute; |
||||||
|
right: 100px; |
||||||
|
color: #ffffff; |
||||||
|
text-align: center; |
||||||
|
opacity: 0.4; |
||||||
|
font-size: 28px; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
.rightImg { |
||||||
|
position: absolute; |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
text-align: right; |
||||||
|
right: 36px; |
||||||
|
} |
||||||
|
|
||||||
|
.bottom-btn { |
||||||
|
bottom: 30px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
-webkit-transform: translateX(-50%); |
||||||
|
transform: translateX(-50%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 672px; |
||||||
|
height: 110px; |
||||||
|
background-image: url("@/assets/imgs/show/bg_btn.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 40px; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,91 @@ |
|||||||
|
<template> |
||||||
|
<div class="base-bg"> |
||||||
|
<div class="timing-flex-box"> |
||||||
|
<img |
||||||
|
class="timing-delete-img" |
||||||
|
src="@/assets/imgs/show/icon_notiming.png" |
||||||
|
/> |
||||||
|
<div class="hint-text">确定要删除该定时吗?</div> |
||||||
|
</div> |
||||||
|
<div class="bottom-s-c"> |
||||||
|
<div class="bottom-c" @click="onDeleteClick(false)">取消</div> |
||||||
|
<div class="bottom-s" @click="onDeleteClick(true)">确定</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { Toast } from "vant"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 删除定时 |
||||||
|
* @param b |
||||||
|
*/ |
||||||
|
const onDeleteClick = (b) => { |
||||||
|
if (b) { |
||||||
|
Toast("删除成功"); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.bottom-s-c { |
||||||
|
left: 24px; |
||||||
|
right: 24px; |
||||||
|
position: absolute; |
||||||
|
bottom: 30px; |
||||||
|
flex-wrap: wrap; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.bottom-s { |
||||||
|
margin-left: 20px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 40px; |
||||||
|
font-weight: 400; |
||||||
|
width: 326px; |
||||||
|
height: 110px; |
||||||
|
background-image: url("@/assets/imgs/show/bg_btn_blue.png"); |
||||||
|
} |
||||||
|
|
||||||
|
.bottom-c { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 40px; |
||||||
|
font-weight: 400; |
||||||
|
width: 326px; |
||||||
|
height: 110px; |
||||||
|
background-image: url("@/assets/imgs/show/bg_btn_gray.png"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.timing-flex-box { |
||||||
|
height: calc(100vh - 140px); |
||||||
|
width: 100vw; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.hint-text { |
||||||
|
margin-top: 55px; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 40px; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.timing-delete-img { |
||||||
|
width: 200px; |
||||||
|
height: 200px; |
||||||
|
} |
||||||
|
</style> |