zhangzhiyi
2 years ago
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
@ -0,0 +1,150 @@
@@ -0,0 +1,150 @@
|
||||
<!-- |
||||
模式切换的弹出框 |
||||
点击蒙版可以关闭弹窗 |
||||
showModePop：展示弹窗是否开启，需要传参进来 |
||||
关闭弹窗事件：closePop，父组件需要接收值并更改showModePop |
||||
--> |
||||
<template> |
||||
<van-popup |
||||
v-model:show="showModePop" |
||||
position="bottom" |
||||
class="modeChangePop" |
||||
@click-overlay="closePop()" |
||||
> |
||||
<div class="mode-change-wrapper"> |
||||
<!-- 关闭按钮 --> |
||||
<div class="close-pop" @click="closePop()"> |
||||
<img src="@/assets/imgs/device-detail/normal-mode/down@2x.png" class="close-img"> |
||||
</div> |
||||
<!-- 模式内容 --> |
||||
<div class="content"> |
||||
<div |
||||
class="mode-card" |
||||
v-for="(item, index) in list" |
||||
:key="index" |
||||
> |
||||
<div class="mode-card-top" :class="{'mode-card-selected': item.selected}" @click="switchMode(item, index)"> |
||||
<img :src="item.modeImg"> |
||||
</div> |
||||
<div class="mode-card-btm"> |
||||
{{ item.modeName }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</van-popup> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { ref, toRefs, onMounted } from 'vue'; |
||||
|
||||
const props = defineProps<{ |
||||
showModePop: boolean; // 弹窗是否展示 |
||||
modeList: any[]; // 可设定的模式数组 |
||||
}>() |
||||
|
||||
const { showModePop, modeList } = toRefs(props); |
||||
/** 像父组件事件 */ |
||||
const emit = defineEmits(['closePop']); |
||||
/** 模式数组接收 */ |
||||
const list = ref(modeList); |
||||
|
||||
onMounted(() => { |
||||
changeCardBg(); |
||||
}) |
||||
|
||||
/** 关闭弹窗 */ |
||||
const closePop = () => { |
||||
const params = { |
||||
showModePop: false, |
||||
modeList: list.value |
||||
} |
||||
emit('closePop', params); |
||||
} |
||||
|
||||
/** |
||||
* 切换模式 |
||||
* @param changeMode 选中的模式数据 |
||||
* @param index 下标 |
||||
*/ |
||||
const switchMode = (changeMode: any, index: number) => { |
||||
list.value.forEach((item, i) => { |
||||
if (index === i) { |
||||
item.selected = true; |
||||
} else { |
||||
item.selected = false; |
||||
} |
||||
}) |
||||
changeCardBg(); |
||||
} |
||||
|
||||
/** 更换选中的图 */ |
||||
const changeCardBg = () => { |
||||
const selectModeBg = list.value.find(item => item.selected).selectModeBg; |
||||
const dom: any = document.getElementsByClassName(`mode-card-selected`)[0]; |
||||
if (dom) { |
||||
dom.style.background = `url(${selectModeBg})`; |
||||
dom.style.backgroundSize = '100% 100%'; |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.modeChangePop { |
||||
.mode-change-wrapper { |
||||
background-color: #20252E; |
||||
|
||||
.close-pop { |
||||
text-align: center; |
||||
|
||||
.close-img { |
||||
width: 142px; |
||||
height: 50px; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
margin-top: 20px; |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
padding: 0 29px; |
||||
|
||||
.mode-card { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
margin: 0 27px 40px 27px; |
||||
position: relative; |
||||
|
||||
.mode-card-top { |
||||
padding: 27px; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: url('src/assets/imgs/device-detail/normal-mode/circle-bg@2x.png') no-repeat; |
||||
background-size: 100% 100%; |
||||
margin-bottom: 60px; |
||||
|
||||
img { |
||||
width: 56px; |
||||
height: 56px; |
||||
} |
||||
} |
||||
|
||||
.mode-card-btm { |
||||
position: absolute; |
||||
top: 130px; |
||||
color: #FFF; |
||||
font-size: 28px; |
||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN; |
||||
font-weight: 400; |
||||
min-width: 150px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||