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-08-07 09:27:10 +08:00
parent f11a374baa
commit 5d7bd5bb19
27 changed files with 616 additions and 2263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
View File

@@ -2,14 +2,13 @@
<div style="width: 100%; height: 100%; display: flex; overflow: hidden">
<div class="legend-box">
<template v-for="(item, index) in legend" :key="index">
<div
class="legend-box-item"
:style="{
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
}"
@click="selectLegend(item, index)">
<div class="legend-box-item-img">
<img style="width: 42px" :src="item.url" />
<div class="legend-box-item" @click="selectLegend(item, index)">
<div
class="legend-box-item-img"
:style="{
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
}">
<img :src="item.url" />
</div>
<div class="legend-box-item-name">
{{ item.name }}
@@ -169,11 +168,11 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
/* 图片 */
import temperature from '../image/airConditioningSystem/temperature.png';
import people from '../image/airConditioningSystem/people.png';
import freshAir from '../image/airConditioningSystem/freshAir.png';
import airConditioner from '../image/airConditioningSystem/airConditioner.png';
import floorHeating from '../image/airConditioningSystem/floorHeating.png';
import temperature from '../image/airConditioningSystem/temperature.svg';
import people from '../image/airConditioningSystem/people.svg';
import freshAir from '../image/airConditioningSystem/freshAir.svg';
import airConditioner from '../image/airConditioningSystem/airConditioner.svg';
import floorHeating from '../image/airConditioningSystem/floorHeating.svg';
import selectImg from '../image/airConditioningSystem/selectImg.png';
// 温泉颜色
import sunRed from '../image/airConditioningSystem/sunRed.png';
@@ -524,36 +523,71 @@
</script>
<style lang="less">
.legend-box {
width: 5%;
width: 80px;
height: 100%;
background-color: rgba(33, 40, 54, 0.95);
border-radius: 4px 0px 0px 4px;
padding: 4px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px 5px;
.legend-box-item {
width: 100%;
height: 90px;
padding: 10px 0;
cursor: pointer;
background-size: 75%;
background-repeat: no-repeat;
background-position: center; /* 把图片背景居中 */
display: flex;
flex-direction: column;
align-items: center;
width: 70px;
height: 70px;
.legend-box-item-img {
width: 100%;
height: 50px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 50px;
height: 60px;
padding-top: 5px;
flex: 1;
cursor: pointer;
background-size: 100% 100%;
text-align: center;
img {
transition: all ease 0.2s;
}
img:hover {
transform: scale(1.1);
}
}
.legend-box-item-name {
width: 100%;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
transform: translateY(-5px);
text-align: center;
color: white;
font-size: 12px;
margin-top: 6px;
font-size: 13px;
}
}
// .legend-box-item {
// border: 1px solid red;
// width: 100%;
// height: 60px;
// padding: 0px 0;
// cursor: pointer;
// .legend-box-item-img {
// border: 2px solid orange;
// width: 100%;
// height: 50px;
// display: flex;
// justify-content: center; /* 水平居中 */
// align-items: center; /* 垂直居中 */
// position: relative;
// background-size: 150% 150%;
// background-repeat: no-repeat;
// img {
// position: absolute;
// transform: scale(1.2);
// }
// }
// .legend-box-item-name {
// width: 100%;
// display: flex;
// justify-content: center; /* 水平居中 */
// align-items: center; /* 垂直居中 */
// color: white;
// font-size: 12px;
// }
// }
}
.map-box {
width: 95%;