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

78
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue
View File

@@ -2,14 +2,13 @@
<div class="box-ventilationSystem">
<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 }}
@@ -260,13 +259,13 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
//图片
import temperature from '../image/airConditioningSystem/temperature.png';
import humidity from '../image/ventilationSystem/humidity.png';
import PM25 from '../image/ventilationSystem/PM25.png';
import CO2 from '../image/ventilationSystem/CO2.png';
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
import window from '../image/ventilationSystem/window.png';
import airCurtain from '../image/ventilationSystem/fanMachine.png';
import temperature from '../image/airConditioningSystem/temperature.svg';
import humidity from '../image/ventilationSystem/humidity.svg';
import PM25 from '../image/ventilationSystem/PM25.svg';
import CO2 from '../image/ventilationSystem/CO2.svg';
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.svg';
import window from '../image/ventilationSystem/window.svg';
import airCurtain from '../image/ventilationSystem/fanMachine.svg';
import selectImg from '../image/airConditioningSystem/selectImg.png';
import sunRed from '../image/airConditioningSystem/sunRed.png';
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
@@ -476,34 +475,39 @@
</script>
<style lang="less">
.legend-box {
width: 5%;
width: 80px;
height: 100%;
background-color: rgba(33, 40, 54, 0.9);
border-radius: 4px 0px 0px 4px;
padding: 4px;
background-color: rgba(33, 40, 54, 0.95);
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;
}
}
}