add:照明系统交互

This commit is contained in:
chenpingsen
2024-07-18 15:29:22 +08:00
parent a6f77afe70
commit 429909a712
8 changed files with 959 additions and 793 deletions

View File

@@ -1,7 +1,5 @@
// 页面容器
.lighting-box {
// width: 100%;
// height: 100%;
position: relative;
// background: linear-gradient(#badaff, #8cabeb, #7095de);
// 照明设备功能总容器
@@ -47,32 +45,46 @@
height: 240px;
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
display: flex;
gap: 8px;
gap: 5px;
.area1 {
width: 170px;
width: 70px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area2 {
width: 240px;
width: 200px;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area3 {
width: 110px;
width: 120px;
background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0);
display: flex;
}
.area4 {
flex: 1;
width: 70px;
background: rgba(80, 236, 244, 0.3);
border: 2px solid rgb(80, 236, 244);
display: flex;
}
// .area-item:hover {
// transform: scale(1.05);
// }
.area5 {
flex: 1;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area6 {
flex: 1;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area-item:hover {
transform: scale(1.05);
}
.area-item {
cursor: pointer;
transition: all ease 0.2s;
@@ -82,37 +94,16 @@
display:flex;
justify-content: center;
align-items: center;
.group-shadow1 {
width: 35px;
height: 150px;
box-sizing: border-box;
padding: 10px;
// border: 2px solid red;
.shadow-box {
width: 30px;
height: 200px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow2 {
width: 35px;
height: 180px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow3 {
width: 40px;
height: 180px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
}
.group-shadow4 {
width: 40px;
height: 160px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.2);
}
}
// .group-shadow {
// transition: all ease 0.2s;
// }
// .group-shadow:hover {
// transform: scale(1.05);
// }
}
}
}