|
@@ -12,10 +12,12 @@
|
|
|
<div class="right">
|
|
|
<div
|
|
|
class="control_all"
|
|
|
+ :class="topActive ? 'active' : ''"
|
|
|
@click="handle('all',1,'开启中')"
|
|
|
>全开</div>
|
|
|
<div
|
|
|
class="control_all"
|
|
|
+ :class="downActive ? 'active' : ''"
|
|
|
@click="handle('all',0,'关闭中')"
|
|
|
>全关</div>
|
|
|
</div>
|
|
@@ -28,9 +30,21 @@
|
|
|
>
|
|
|
<div class="name">{{ item.name }}</div>
|
|
|
<div class="control-box">
|
|
|
- <div class="control" @click="handle('child',1,'开启中')">上</div>
|
|
|
- <div class="control" @click="handle('child',2,'暂停中')">停</div>
|
|
|
- <div class="control" @click="handle('child',0,'关闭中')">下</div>
|
|
|
+ <div
|
|
|
+ class="control"
|
|
|
+ :class="item.isActive ? 'active' : ''"
|
|
|
+ @click="handle('child',1,'开启中',item)"
|
|
|
+ >上</div>
|
|
|
+ <div
|
|
|
+ class="control"
|
|
|
+ :class="item.isActive ? 'active' : ''"
|
|
|
+ @click="handle('child',2,'暂停中',item)"
|
|
|
+ >停</div>
|
|
|
+ <div
|
|
|
+ class="control"
|
|
|
+ :class="item.isActive ? 'active' : ''"
|
|
|
+ @click="handle('child',0,'关闭中',item)"
|
|
|
+ >下</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -44,34 +58,57 @@ import { ref } from "vue";
|
|
|
const childCurtains = ref([
|
|
|
{
|
|
|
name: "内侧窗帘",
|
|
|
- isOpen: false,
|
|
|
+ isActive: false,
|
|
|
id: 1
|
|
|
},
|
|
|
{
|
|
|
name: "外侧窗帘",
|
|
|
- isOpen: false,
|
|
|
+ isActive: false,
|
|
|
id: 2
|
|
|
},
|
|
|
])
|
|
|
const controlStatus = ref('')
|
|
|
+const topActive = ref(false)
|
|
|
+const downActive = ref(false)
|
|
|
let timer = null // 添加timer变量
|
|
|
-
|
|
|
-const handle = (type, status, name) => {
|
|
|
+let btnTimer = null;
|
|
|
+const handle = (type, status, name, itemCurrent) => {
|
|
|
controlStatus.value = name;
|
|
|
// 清除之前的定时器
|
|
|
if (timer) {
|
|
|
clearTimeout(timer);
|
|
|
}
|
|
|
+ if (btnTimer) {
|
|
|
+ clearTimeout(btnTimer);
|
|
|
+ }
|
|
|
// 设置新的定时器并保存引用
|
|
|
timer = setTimeout(() => {
|
|
|
controlStatus.value = '';
|
|
|
}, 3000);
|
|
|
if (type === 'all') {
|
|
|
+ if (status === 1) {
|
|
|
+ topActive.value = true;
|
|
|
+ } else {
|
|
|
+ downActive.value = true;
|
|
|
+ }
|
|
|
+ btnTimer = setTimeout(() => {
|
|
|
+ topActive.value = false;
|
|
|
+ downActive.value = false;
|
|
|
+ }, 100);
|
|
|
childCurtains.value.forEach((item) => {
|
|
|
// item = item.id;
|
|
|
})
|
|
|
} else {
|
|
|
-
|
|
|
+ childCurtains.value.forEach((item) => {
|
|
|
+ if (item.id === itemCurrent.id) {
|
|
|
+ item.isActive = true;
|
|
|
+ btnTimer = setTimeout(() => {
|
|
|
+ item.isActive = false;
|
|
|
+ console.log('被惦记item');
|
|
|
+
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
};
|
|
@@ -113,7 +150,7 @@ const handle = (type, status, name) => {
|
|
|
align-items: center;
|
|
|
gap: 12px;
|
|
|
border-radius: 50px;
|
|
|
- background: #dedfde;
|
|
|
+ background: #dddddf;
|
|
|
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
|
|
|
backdrop-filter: blur(10px);
|
|
|
color: #001428;
|
|
@@ -125,6 +162,10 @@ const handle = (type, status, name) => {
|
|
|
line-height: 18px; /* 128.571% */
|
|
|
letter-spacing: 0.56px;
|
|
|
}
|
|
|
+ .control_all.active {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.1);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.control_status {
|
|
@@ -153,7 +194,7 @@ const handle = (type, status, name) => {
|
|
|
/* card shadow */
|
|
|
box-shadow: 0px 10px 20px 0px rgba(0, 20, 40, 0.05);
|
|
|
border-radius: 24px 24px 44px 24px;
|
|
|
- background: var(--White-60, rgba(255, 255, 255, 0.6));
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
margin-bottom: 12px;
|
|
|
.name {
|
|
|
//styleName: Chi/Body Regular;
|
|
@@ -177,6 +218,7 @@ const handle = (type, status, name) => {
|
|
|
align-items: center;
|
|
|
margin-left: 10px;
|
|
|
border-radius: 60px;
|
|
|
+ opacity: 0.6;
|
|
|
background: rgba(255, 255, 255, 0.4);
|
|
|
backdrop-filter: blur(30px);
|
|
|
color: #000;
|
|
@@ -186,6 +228,9 @@ const handle = (type, status, name) => {
|
|
|
font-weight: 300;
|
|
|
line-height: normal;
|
|
|
}
|
|
|
+ .control.active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.light-box-active {
|