Browse Source

fix:拉杆箱首页样式定制

master
guoapeng 1 week ago
parent
commit
660ea9bf54
  1. 21
      src/views/home/index.vue

21
src/views/home/index.vue

@ -99,8 +99,13 @@ 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">
<div class="left-box">
<div
class="home-left"
:style="{
'grid-template-rows': deviceType === deviceStore.deviceTypeMap.DrawBarDM ? 'repeat(1, 1fr)' : 'repeat(2, 1fr)',
}"
>
<div class="left-box" :class="{ 'left-box-1': [deviceStore.deviceTypeMap.DrawBarDM].includes(deviceType) }">
<el-card <el-card
v-for="item in homeStore.h2O2SensorData.filter(item => item.type !== 'WirelessExtSensor')" v-for="item in homeStore.h2O2SensorData.filter(item => item.type !== 'WirelessExtSensor')"
:key="item.sensorId" :key="item.sensorId"
@ -141,7 +146,7 @@ const deviceType = computed(() => {
</div> </div>
</el-card> </el-card>
</div> </div>
<div class="left-box">
<div v-if="deviceType !== deviceStore.deviceTypeMap.DrawBarDM" class="left-box">
<el-card <el-card
v-for="item in homeStore.h2O2SensorData.filter(item => item.type === 'WirelessExtSensor')" v-for="item in homeStore.h2O2SensorData.filter(item => item.type === 'WirelessExtSensor')"
:key="item.sensorId" :key="item.sensorId"
@ -206,6 +211,13 @@ $input-height: 3rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.home-grid-container .home-left .left-box-1 {
flex-direction: column !important;
.card {
height: calc(50% - 5px) !important;
width: 100% !important;
}
}
.home-grid-container { .home-grid-container {
height: 100%; height: 100%;
@ -219,7 +231,7 @@ $input-height: 3rem;
height: 100%; height: 100%;
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-rows: repeat(2, 1fr);
//grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
gap: 20px; gap: 20px;
.left-box { .left-box {
@ -236,7 +248,6 @@ $input-height: 3rem;
width: calc((100% / 3) * 2 - 10px) !important; width: calc((100% / 3) * 2 - 10px) !important;
} }
.card-three { .card-three {
width: calc(100% / 3 - 10px) !important; width: calc(100% / 3 - 10px) !important;
} }
.card { .card {

Loading…
Cancel
Save