xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:空调、照明系统背景图&点阵修改 样式补充 图像素材补充 通风系统增加电动窗效果

Browse Source
This commit is contained in:
chenpingsen
2024-09-03 13:27:13 +08:00
parent 758a5718de
commit 378baaefe2
15 changed files with 166 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
View File

@@ -3,14 +3,16 @@
position: relative;
width: 100%;
height: 100%;
// background: linear-gradient(#badaff, #8cabeb, #7095de);
overflow-y: scroll;
background: #8eabec;
// 照明设备功能总容器
.lighting-img-box {
position: relative;
width: 1280px;
height: 720px;
// 1536 * 864
width: 1536px;
height: 864px;
user-select: none;
background-image: url(../image/floor-1.png);
background-image: url(../image/floor-1-1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
@@ -48,39 +50,39 @@
// 大区分区
.area{
position: absolute;
bottom: 210px;
left: 250px;
width: 700px;
height: 270px;
transform: rotateX(73deg) rotateZ(338deg) skew(31deg);
top: 290px;
left: 310px;
width: 1000px;
height: 265px;
transform: rotateX(73deg) rotateZ(341deg) skew(31deg);
display: flex;
gap: 5px;
.area1 {
width: 65px;
width: 80px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
}
.area2 {
width: 100px;
width: 150px;
background: rgba(255, 165, 0, 0.3);
border: 2px solid rgb(255, 165, 0);
display: flex;
}
.area3 {
width: 220px;
width: 260px;
background: rgba(255, 0, 0, 0.3);
border: 2px solid rgb(255, 0, 0);
display: flex;
}
.area4 {
width: 70px;
width: 90px;
background: rgba(80, 236, 244, 0.3);
border: 2px solid rgb(80, 236, 244);
display: flex;
}
.area5 {
flex: 210px;
width: 100px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;
@@ -105,10 +107,9 @@
align-items: center;
box-sizing: border-box;
padding: 10px;
// border: 2px solid red;
.shadow-box {
width: 30px;
height: 220px;
width: 35px;
height: 240px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.2);
}
@@ -118,13 +119,14 @@
}
.lightingImgBox1 {
position: relative;
width: 1280px;
height: 720px;
width: 1536px;
height: 864px;
user-select: none;
background-image: url(../image/floor-2.png);
background-image: url(../image/floor-2-1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: linear-gradient(top to bottom,#c0deff, #8eadf0);
z-index: 9;
// 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
perspective: 900px;
perspective-origin: 900px -120px;
@@ -159,16 +161,16 @@
// 大区分区
.area{
position: absolute;
bottom: 320px;
left: 240px;
width: 950px;
height: 270px;
transform: rotateX(76deg) rotateZ(-22deg) skew(30deg);
top: 180px;
left: 290px;
width: 1150px;
height: 280px;
transform: rotateX(78deg) rotateZ(340deg) skew(32deg);
display: flex;
justify-content: space-between;
gap: 5px;
.area1 {
width: 170px;
width: 190px;
background: rgba(0, 251, 91, 0.3);
border: 2px solid rgb(0, 251, 91);
display: flex;