fix:修改新风系统弹窗 优化页面展示

This commit is contained in:
zhaohy
2024-08-02 10:45:49 +08:00
parent c0fa5ad9be
commit bab2e8def5
6 changed files with 139 additions and 34 deletions

View File

@@ -4,11 +4,23 @@
<div class="box-title title">
{{ dataSource.title }}
</div>
<div style="width: 100%; height: 50px; position: relative; display: flex">
<div style="width: auto; height: 50px; position: relative; display: flex">
<img class="box-img" :src="dataSource.url" />
<div class="box-type"> {{ dataSource.type }}</div>
<div class="box-number">{{ dataSource.number }}</div>
<div class="box-unit"> {{ dataSource.unit }}</div>
<div
class="box-type"
:style="{
fontSize: dataSource.type === '二氧化碳' ? '8px' : '10px',
}">
{{ dataSource.type }}</div
>
<div
class="box-number"
:style="{
left: dataSource.type === '二氧化碳' ? '95px' : '90px',
}"
>{{ dataSource.number }}</div
>
<div v-if="dataSource?.unit" class="box-unit"> {{ dataSource.unit }}</div>
<div style="position: absolute; bottom: -16px">
<img style="width: 12px" src="../image/airConditioningSystem/triangle.png" />
</div>
@@ -27,7 +39,7 @@
</script>
<style lang="less" scoped>
.box {
min-width: 130px;
min-width: 100px;
width: auto;
height: 80px;
background-color: #213479;
@@ -70,27 +82,39 @@
font-size: 10px;
left: 50px;
top: 53%;
transform: translateY(-50%);
position: absolute;
width: auto;
height: 100%;
line-height: 50px;
margin-left: 50px;
min-width: 30px;
margin-right: 4px;
}
.box-number {
color: #0dffa4;
font-size: 18px;
left: 90px;
left: 72%;
top: 45%;
transform: translate(-50%, -50%);
position: absolute;
width: auto;
text-align: center;
font-weight: bold;
box-sizing: border-box;
font-style: italic;
width: auto;
height: 100%;
line-height: 48px;
min-width: 20px;
}
.box-unit {
color: white;
font-size: 8px;
position: absolute;
right: 10px;
top: 53%;
transform: translateY(-50%);
min-width: 20px;
width: auto;
height: 100%;
line-height: 55px;
margin-left: 5px;
text-align: center;
margin-right: 8px;
}
}
</style>