diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/floor-1.png b/hx-ai-intelligent/src/view/equipmentControl/image/floor-1.png new file mode 100644 index 0000000..72fa0ab Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/floor-1.png differ diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/floor-2.png b/hx-ai-intelligent/src/view/equipmentControl/image/floor-2.png new file mode 100644 index 0000000..325c0c4 Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/floor-2.png differ diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/floor1.png b/hx-ai-intelligent/src/view/equipmentControl/image/floor1.png new file mode 100644 index 0000000..c4e1347 Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/floor1.png differ diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/floor2.png b/hx-ai-intelligent/src/view/equipmentControl/image/floor2.png new file mode 100644 index 0000000..d2bf3d7 Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/floor2.png differ diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less index 396321e..57e43cd 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less @@ -10,10 +10,13 @@ width: 1280px; height: 720px; user-select: none; - background-image: url(../image/bg.jpg); + background-image: url(../image/floor-1.png); + background-size: 100% 100%; + background-repeat: no-repeat; + background-color: linear-gradient(top to bottom,#c0deff, #8eadf0); // 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性 - perspective: 1000px; - perspective-origin: 850px -160px; + perspective: 900px; + perspective-origin: 900px -120px; // 左上角区域切换功能 .btn-box { width: 100px; @@ -45,11 +48,11 @@ // 大区分区 .area{ position: absolute; - bottom: 170px; - left: 240px; - width: 780px; - height: 240px; - transform: rotateX(79deg) rotateZ(-22deg) skew(29deg); + bottom: 210px; + left: 250px; + width: 700px; + height: 270px; + transform: rotateX(73deg) rotateZ(338deg) skew(31deg); display: flex; gap: 5px; .area1 { @@ -93,7 +96,95 @@ } .area-item { cursor: pointer; - transition: all ease 0.2s; + transition: transform ease 0.2s; + >.light-group { + height: 100%; + flex: 1; + display:flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + padding: 10px; + // border: 2px solid red; + .shadow-box { + width: 30px; + height: 220px; + border-radius: 20px; + background: rgba(0, 0, 0, 0.2); + } + } + } + } + } + .lightingImgBox1 { + position: relative; + width: 1280px; + height: 720px; + user-select: none; + background-image: url(../image/floor-2.png); + background-size: 100% 100%; + background-repeat: no-repeat; + background-color: linear-gradient(top to bottom,#c0deff, #8eadf0); + // 由于背景是俯视图,会产生有交点的透视效果,故使用透视属性 + perspective: 900px; + perspective-origin: 900px -120px; + // 左上角区域切换功能 + .btn-box { + width: 100px; + position: sticky; + top: 15px; + margin-left: 10px; + display: flex; + flex-direction: column; + gap: 8px; + .btn-item { + cursor: pointer; + width: 100%; + height: 35px; + border-radius: 4px; + // background: rgba(39, 120, 255, 1); + background: rgb(7, 72, 116); + border: 1px solid rgba(51, 199, 255, 1); + box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3); + font-size: 16px; + color: white; + } + .btnActive { + background: rgba(39, 120, 255, 1); + } + .btn-item:hover { + color: white; + } + } + // 大区分区 + .area{ + position: absolute; + bottom: 320px; + left: 240px; + width: 950px; + height: 270px; + transform: rotateX(76deg) rotateZ(-22deg) skew(30deg); + display: flex; + justify-content: space-between; + gap: 5px; + .area1 { + width: 170px; + background: rgba(0, 251, 91, 0.3); + border: 2px solid rgb(0, 251, 91); + display: flex; + } + .area2 { + width: 150px; + 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: transform ease 0.2s; >.light-group { height: 100%; flex: 1; @@ -105,7 +196,7 @@ // border: 2px solid red; .shadow-box { width: 30px; - height: 200px; + height: 230px; border-radius: 20px; background: rgba(0, 0, 0, 0.2); } diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue index ded560b..24ca8bc 100644 --- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue +++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue @@ -1,6 +1,6 @@