刘洪超
2 years ago
12 changed files with 454 additions and 120 deletions
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,249 @@
@@ -0,0 +1,249 @@
|
||||
<template> |
||||
<div class="base-bg"> |
||||
<div class="zhp-title"> |
||||
<div class="zhp-title-text">选择空调</div> |
||||
</div> |
||||
<div class="card" style="overflow: auto"> |
||||
<div v-for="(item, i) in dList" :key="i"> |
||||
<div class="item-card" @click="onSelectDevice(item)"> |
||||
<div class="layout-top"> |
||||
<div class="name">{{ item.name }}</div> |
||||
<div |
||||
:class="{ |
||||
openBg: item.state, |
||||
closeBg: !item.state, |
||||
}" |
||||
> |
||||
<span v-if="item.state" class="stateText">开机</span> |
||||
<span v-if="!item.state" class="stateText">关机</span> |
||||
</div> |
||||
<img |
||||
v-show="item.imgState.includes(1)" |
||||
class="pre_img" |
||||
src="@/assets/imgs/show/icon_timing_fault.png" |
||||
/> |
||||
<img |
||||
v-show="item.imgState.includes(2)" |
||||
class="pre_img" |
||||
src="@/assets/imgs/show/icon_timing_killvirus.png" |
||||
/> |
||||
</div> |
||||
<div class="layout-btm"> |
||||
<div class="tem-btm"> |
||||
<span v-if="item.state" class="tem-openText">{{ item.tem }}</span> |
||||
<span v-if="!item.state" class="tem-closeText">{{ |
||||
item.tem |
||||
}}</span> |
||||
<span v-if="item.state" class="tem-open">℃</span> |
||||
<span v-if="!item.state" class="tem-close">℃</span> |
||||
</div> |
||||
<div> |
||||
<img |
||||
v-show="item.selectState" |
||||
class="state-img" |
||||
src="@/assets/imgs/show/icon_select.png" |
||||
/> |
||||
<img |
||||
v-show="!item.selectState" |
||||
class="state-img" |
||||
src="@/assets/imgs/show/icon_nomor.png" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottom-s-c"> |
||||
<div class="bottom-c" @click="onSelectClick(false)">取消</div> |
||||
<div class="bottom-s" @click="onSelectClick(true)">确定</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
// eslint-disable-next-line vue/no-export-in-script-setup |
||||
import { ref, onMounted } from "vue"; |
||||
import { useRouter } from "vue-router"; |
||||
|
||||
const router = useRouter(); |
||||
const dList: any = ref<any[]>([]); |
||||
|
||||
const onSelectDevice = (item: any) => { |
||||
//开机状态可选 |
||||
if (item.state) { |
||||
item.selectState = !item.selectState; |
||||
} |
||||
}; |
||||
const onSelectClick = (sure: boolean) => { |
||||
if (sure) { |
||||
let number = 0; |
||||
dList.value.forEach((e: any) => { |
||||
if (e.selectState) { |
||||
number++; |
||||
} |
||||
}); |
||||
router.push({ |
||||
path: "/timingAdd", |
||||
query: { pageType: "timingAdd", sListNum: number }, |
||||
}); |
||||
} else { |
||||
router.push({ |
||||
path: "/timingAdd", |
||||
}); |
||||
} |
||||
}; |
||||
onMounted(() => { |
||||
dList.value = [ |
||||
{ |
||||
name: "卧室空调", |
||||
state: true, |
||||
tem: "25", |
||||
selectState: false, |
||||
imgState: [0], |
||||
}, |
||||
{ |
||||
name: "客房空调", |
||||
state: false, |
||||
tem: "23", |
||||
selectState: false, |
||||
imgState: [0], |
||||
}, |
||||
{ |
||||
name: "厨房空调", |
||||
state: true, |
||||
tem: "27", |
||||
selectState: false, |
||||
imgState: [1], |
||||
}, |
||||
{ |
||||
name: "书房空调", |
||||
state: true, |
||||
tem: "26", |
||||
selectState: true, |
||||
imgState: [1, 2], |
||||
}, |
||||
{ |
||||
name: "次卧空调", |
||||
state: true, |
||||
tem: "28", |
||||
selectState: true, |
||||
imgState: [2], |
||||
}, |
||||
{ |
||||
name: "主卫空调", |
||||
state: false, |
||||
tem: "25", |
||||
selectState: false, |
||||
imgState: [0], |
||||
}, |
||||
]; |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.card { |
||||
padding-bottom: 170px; |
||||
margin-right: 24px; |
||||
margin-left: 24px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
|
||||
.item-card { |
||||
margin-bottom: 20px; |
||||
width: 326px; |
||||
height: 145px; |
||||
background: #20252e; |
||||
box-sizing: border-box; |
||||
border-radius: 16px; |
||||
padding: 24px 22px 10px 24px; |
||||
} |
||||
|
||||
.layout-top { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.name { |
||||
font-size: 28px; |
||||
color: white; |
||||
font-weight: 400; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.openBg { |
||||
width: 56px; |
||||
height: 32px; |
||||
border-radius: 16px; |
||||
box-sizing: border-box; |
||||
justify-content: center; |
||||
align-items: center; |
||||
display: flex; |
||||
background-color: #3c75e5; |
||||
} |
||||
|
||||
.closeBg { |
||||
width: 56px; |
||||
height: 32px; |
||||
border-radius: 16px; |
||||
box-sizing: border-box; |
||||
justify-content: center; |
||||
align-items: center; |
||||
display: flex; |
||||
background-color: rgba($color: #ffffff, $alpha: 0.2); |
||||
} |
||||
|
||||
.stateText { |
||||
font-size: 18px; |
||||
font-weight: 400; |
||||
color: white; |
||||
} |
||||
|
||||
.layout-btm { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-top: 23px; |
||||
} |
||||
|
||||
.tem-btm { |
||||
align-items: end; |
||||
|
||||
.tem-openText { |
||||
font-size: 54px; |
||||
font-weight: 300; |
||||
color: white; |
||||
} |
||||
|
||||
.tem-closeText { |
||||
font-size: 54px; |
||||
font-weight: 300; |
||||
color: rgba($color: #ffffff, $alpha: 0.4); |
||||
} |
||||
|
||||
.tem-open { |
||||
margin-left: 5px; |
||||
font-size: 24px; |
||||
font-weight: 300; |
||||
color: white; |
||||
} |
||||
|
||||
.tem-close { |
||||
margin-left: 5px; |
||||
font-size: 24px; |
||||
font-weight: 300; |
||||
color: rgba($color: #ffffff, $alpha: 0.4); |
||||
} |
||||
} |
||||
|
||||
.state-img { |
||||
width: 60px; |
||||
height: 60px; |
||||
} |
||||
|
||||
.pre_img { |
||||
margin-left: 10px; |
||||
width: 30px; |
||||
height: 30px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,43 @@
@@ -0,0 +1,43 @@
|
||||
<template> |
||||
<div class="base-bg layout-items-center"> |
||||
<div class="timeBg"> |
||||
|
||||
</div> |
||||
<div class="bottom-s-c"> |
||||
<div class="bottom-c" @click="onSelectClick(false)">取消</div> |
||||
<div class="bottom-s" @click="onSelectClick(true)">确定</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref } from "vue"; |
||||
import { useRouter } from "vue-router"; |
||||
const router = useRouter(); |
||||
const onSelectClick = (sure: boolean) => { |
||||
if (sure) { |
||||
let time = 0.5; |
||||
router.push({ |
||||
path: "/timingAdd", |
||||
query: { pageType: "timingAdd", time: time }, |
||||
}); |
||||
} else { |
||||
router.push({ |
||||
path: "/timingAdd", |
||||
}); |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.timeBg { |
||||
margin-top: 30px; |
||||
width: 672px; |
||||
height: 520px; |
||||
align-items: center; |
||||
justify-content: center; |
||||
display: flex; |
||||
flex: 1; |
||||
background-color: rgba($color: #a1b8e6, $alpha: 0.08); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue