|
|
@ -90,19 +90,25 @@ const deviceType = computed(() => { |
|
|
<template> |
|
|
<template> |
|
|
<div class="home"> |
|
|
<div class="home"> |
|
|
<div v-if="route.path === '/home'" class="home-grid-container"> |
|
|
<div v-if="route.path === '/home'" class="home-grid-container"> |
|
|
<div class="home-left" :style="styles"> |
|
|
|
|
|
<el-card |
|
|
|
|
|
v-for="(item, index) in homeStore.h2O2SensorData" |
|
|
|
|
|
:key="item.sensorId" |
|
|
|
|
|
class="card" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'card-center-1': |
|
|
|
|
|
index === 0 |
|
|
|
|
|
&& (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM), |
|
|
|
|
|
}" |
|
|
|
|
|
> |
|
|
|
|
|
<Environment :env-params="item" /> |
|
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
<div class="home-left"> |
|
|
|
|
|
<div class="left-box"> |
|
|
|
|
|
<el-card v-for="item in homeStore.h2O2SensorData" :key="item.sensorId" class="card"> |
|
|
|
|
|
<Environment :env-params="item" /> |
|
|
|
|
|
</el-card> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="left-box" /> |
|
|
|
|
|
<!-- <el-card --> |
|
|
|
|
|
<!-- v-for="(item, index) in homeStore.h2O2SensorData" --> |
|
|
|
|
|
<!-- :key="item.sensorId" --> |
|
|
|
|
|
<!-- class="card" --> |
|
|
|
|
|
<!-- :class="{ --> |
|
|
|
|
|
<!-- 'card-center-1': --> |
|
|
|
|
|
<!-- index === 0 --> |
|
|
|
|
|
<!-- && (deviceType === deviceStore.deviceTypeMap.PipeDM || deviceType === deviceStore.deviceTypeMap.DrawBarDM), --> |
|
|
|
|
|
<!-- }" --> |
|
|
|
|
|
<!-- > --> |
|
|
|
|
|
<!-- <Environment :env-params="item" /> --> |
|
|
|
|
|
<!-- </el-card> --> |
|
|
</div> |
|
|
</div> |
|
|
<div class="home-grid-item home-right"> |
|
|
<div class="home-grid-item home-right"> |
|
|
<!-- 正在进行的配方 --> |
|
|
<!-- 正在进行的配方 --> |
|
|
@ -167,35 +173,44 @@ $input-height: 3rem; |
|
|
|
|
|
|
|
|
.home-left { |
|
|
.home-left { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
|
|
|
width: 100%; |
|
|
display: grid; |
|
|
display: grid; |
|
|
gap: 10px; |
|
|
|
|
|
|
|
|
grid-template-rows: repeat(2, 1fr); |
|
|
|
|
|
grid-template-columns: repeat(1, 1fr); |
|
|
|
|
|
gap: 20px; |
|
|
|
|
|
.left-box { |
|
|
|
|
|
display: flex; // 使用 Flexbox 布局 |
|
|
|
|
|
flex-direction: row; // 子元素水平排列（默认值） |
|
|
|
|
|
align-items: flex-start; // 子元素顶部对齐 |
|
|
|
|
|
overflow-x: auto; // 横向滚动支持 |
|
|
|
|
|
width: 100%; // 父容器宽度占满 |
|
|
|
|
|
gap: 10px; // 子元素之间的间距（可选） |
|
|
|
|
|
.card { |
|
|
|
|
|
flex: 0 0 auto; |
|
|
|
|
|
width: calc(100% / 3 - 10px); |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
min-width: 200px; |
|
|
|
|
|
border: 1px solid rgb(225, 225, 225); |
|
|
|
|
|
border-radius: 10px; |
|
|
|
|
|
background: rgba(147, 203, 255, 0.1); |
|
|
|
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); |
|
|
|
|
|
|
|
|
.card { |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
border: 1px solid rgb(225, 225, 225); |
|
|
|
|
|
position: relative; |
|
|
|
|
|
border-radius: 10px 10px 10px 10px; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%); |
|
|
|
|
|
background: rgba(147, 203, 255, 0.1); |
|
|
|
|
|
|
|
|
|
|
|
.title-line { |
|
|
|
|
|
height: 1vw; |
|
|
|
|
|
background-color: #b3d9ff; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
border-radius: 10px 10px 0 0; |
|
|
|
|
|
margin: -2.12rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.title-line { |
|
|
|
|
|
height: 1vw; |
|
|
|
|
|
background-color: #b3d9ff; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
border-radius: 10px 10px 0 0; |
|
|
|
|
|
margin: -2.12rem; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.card-title-name { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
gap: 10px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
padding: 1rem; |
|
|
|
|
|
|
|
|
.card-title-name { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
gap: 10px; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
padding: 1rem; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
