|
|
@ -1,22 +1,26 @@ |
|
|
|
<template> |
|
|
|
<div style="width: 100%; height: 100%; overflow: hidden"> |
|
|
|
<div class="box-title title"> |
|
|
|
<span style="margin-left: 12px">空调箱组</span> |
|
|
|
<span style="margin-left: 12px; font-size: 14px; font-weight: 700">空调箱组</span> |
|
|
|
</div> |
|
|
|
<div class="box-center"> |
|
|
|
<template v-if="!showAllButtons"> |
|
|
|
<template v-for="(item, index) in dataSource.slice(0, 3)" :key="index"> |
|
|
|
<div style="width: 97.3px; height: 39px; background-color: #aaaaaa; padding: 1px"> |
|
|
|
<div |
|
|
|
class="box-center-button" |
|
|
|
:style="{ |
|
|
|
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9', |
|
|
|
background: |
|
|
|
item.title === selectConditioning.title |
|
|
|
? ' linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%)' |
|
|
|
: '#3a3e46', |
|
|
|
color: item.title === selectConditioning.title ? 'rgb(0, 61, 90)' : '#fff', |
|
|
|
fontWeight: item.title === selectConditioning.title ? '700' : '400', |
|
|
|
border: |
|
|
|
item.title === selectConditioning.title ? '1px solid rgba(255, 255, 255, 1)' : '', |
|
|
|
}" |
|
|
|
@click="selectConditioningData(item, index)"> |
|
|
|
{{ item.title }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span> |
|
|
@ -24,17 +28,21 @@ |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<template v-for="(item, index) in dataSource" :key="index"> |
|
|
|
<div style="width: 94px; height: 39px; background-color: #aaaaaa; padding: 1px"> |
|
|
|
<div |
|
|
|
class="box-center-button" |
|
|
|
:style="{ |
|
|
|
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9', |
|
|
|
background: |
|
|
|
item.title === selectConditioning.title |
|
|
|
? ' linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%)' |
|
|
|
: '#3a3e46', |
|
|
|
color: item.title === selectConditioning.title ? 'rgb(0, 61, 90)' : '#fff', |
|
|
|
fontWeight: item.title === selectConditioning.title ? '700' : '400', |
|
|
|
border: |
|
|
|
item.title === selectConditioning.title ? '1px solid rgba(255, 255, 255, 1)' : '', |
|
|
|
}" |
|
|
|
@click="selectConditioningData(item, index)"> |
|
|
|
{{ item.title }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<div style="width: 100%; height: 20px"> |
|
|
|
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span> |
|
|
@ -178,14 +186,12 @@ |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 10px; |
|
|
|
.box-center-button { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 97.3px; |
|
|
|
height: 40px; |
|
|
|
// background-color: #b5cdd9; |
|
|
|
background-image: url(../../image/airConditioningSystem/buttonBg.svg); |
|
|
|
background-size: 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
border-radius: 4px; /* 圆角半径 */ |
|
|
|
font-size: 14px; |
|
|
|
text-align: center; |
|
|
|
border-radius: 4px; |
|
|
|
line-height: 40px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|