|
@@ -46,21 +46,21 @@
|
|
|
<div class="air-volume" v-if="isOpen">
|
|
|
<div class="volume-left">
|
|
|
<div class="volume-top">
|
|
|
- <span>1</span>
|
|
|
- <span>2</span>
|
|
|
- <span>3</span>
|
|
|
- <span class="span-active">4</span>
|
|
|
+ <span :class="windNum === 1 ? 'span-active' : ''">1</span>
|
|
|
+ <span :class="windNum === 2 ? 'span-active' : ''">2</span>
|
|
|
+ <span :class="windNum === 3 ? 'span-active' : ''">3</span>
|
|
|
+ <span :class="windNum === 4 ? 'span-active' : ''">4</span>
|
|
|
</div>
|
|
|
<div class="text">风量调节</div>
|
|
|
</div>
|
|
|
<div class="volume-right">
|
|
|
- <div class="control-item">
|
|
|
+ <div class="control-item" @click="handle('minus')">
|
|
|
<img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'minus.svg')" />
|
|
|
</div>
|
|
|
- <div class="control-item">
|
|
|
+ <div class="control-item" @click="handle('plus')">
|
|
|
<img class="icon" :src="parseImgUrl('taiguv1/envmonitor', 'plus.svg')" />
|
|
|
</div>
|
|
|
- <div class="control-item">A</div>
|
|
|
+ <div class="control-item" @click="handle('auto')">A</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -99,6 +99,24 @@ export default defineComponent({
|
|
|
realTemp: 24,
|
|
|
isWhite: false,
|
|
|
barWidth: 30,
|
|
|
+ windNum: 1,
|
|
|
+
|
|
|
+ handle(type){
|
|
|
+ if(type === 'minus'){
|
|
|
+ proxyData.windNum -= 1;
|
|
|
+ if(proxyData.windNum < 1){
|
|
|
+ proxyData.windNum = 1;
|
|
|
+ }
|
|
|
+ }else if(type === 'plus'){
|
|
|
+ proxyData.windNum += 1;
|
|
|
+ if(proxyData.windNum > 4){
|
|
|
+ proxyData.windNum = 4;
|
|
|
+ }
|
|
|
+ }else if(type === 'auto'){
|
|
|
+ proxyData.windNum = 4;
|
|
|
+ }
|
|
|
+ console.log('type==',type)
|
|
|
+ },
|
|
|
getAirStatus() {
|
|
|
if (proxyData.isOpen) {
|
|
|
nextTick(() => {
|
|
@@ -435,6 +453,7 @@ export default defineComponent({
|
|
|
.control-item {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
+ opacity: 0.6;
|
|
|
background: rgba(255, 255, 255, 0.4);
|
|
|
backdrop-filter: blur(60px);
|
|
|
border-radius: 50%;
|
|
@@ -453,6 +472,9 @@ export default defineComponent({
|
|
|
color: rgba(0, 20, 40, 1);
|
|
|
}
|
|
|
}
|
|
|
+ .control-item.active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|