Compare commits
No commits in common. 'd206ef782541c3d359419f92e1db3e446d93f9a6' and '7052c187ac3d774bed2d4d85771ef0b3ee471ab4' have entirely different histories.
d206ef7825
...
7052c187ac
Before Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 6.4 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 5.1 KiB |
Before Width: | Height: | Size: 5.6 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.7 KiB |
Before Width: | Height: | Size: 5.9 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 3.9 KiB |
Before Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 4.5 KiB |
@ -1,150 +0,0 @@ |
|||||||
<!-- |
|
||||||
模式切换的弹出框 |
|
||||||
点击蒙版可以关闭弹窗 |
|
||||||
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> |
|