From 2f26fbc8e76dc8f4c87696367e2ead8f6b7a452a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 26 Nov 2022 14:57:48 +0800
Subject: [PATCH] 样式调整
---
src/views/home/components/rightContainer.vue | 98 +++++++++++++++++++------------------------------
1 files changed, 38 insertions(+), 60 deletions(-)
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index fa38aea..0e8e7b9 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -1,48 +1,29 @@
<template>
- <div class="container">
- <div class="case-box">
+ <div class="container" ref="Container">
+ <div class="case-box" ref="caseBox">
<div class="title">
案件统计
<div class="timer">
- <el-date-picker
- v-model="eventTime"
- type="daterange"
- align="right"
- unlink-panels
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :picker-options="pickerOptions"
- ></el-date-picker>
+ <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
+ start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+ </el-date-picker>
</div>
</div>
<div id="EventChangeEcharts" class="echarts-box"></div>
</div>
- <div class="alert-box">
- <div class="title">
+
+ <div class="alert-box" ref="alertBox">
+ <div class="title" ref="alertBoxTitle">
<span style="margin-right:130px">安保活动</span>
- <span
- class="activity"
- :class="{ choosed: acttype == 0 }"
- @click="actTabClick(0)"
- >正在进行</span>
+ <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
<span>/</span>
- <span
- class="activity"
- :class="{ choosed: acttype == 1 }"
- @click="actTabClick(1)"
- >历史活动</span>
+ <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
</div>
<div id="peopleList" class="echarts-box">
- <el-table
- :data="acttype == 0 ? underwayArr : historyArr"
- style="width: 100%"
+ <el-table :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
- :row-class-name="tableRowClassName"
- ref="activityTable"
- @row-click="activityRowClick"
- >
+ :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
<el-table-column prop="activityName" label="活动名称"></el-table-column>
<el-table-column prop="startTime" label="开始时间"></el-table-column>
<el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -50,20 +31,13 @@
</el-table>
</div>
</div>
- <div class="crowd-box">
+
+ <div class="crowd-box" ref="crowdBox">
<div class="title">
<span style="margin-right:130px">现有设备</span>
- <span
- class="equiment"
- :class="{ choosed: linetype == 0 }"
- @click="lineTabClick(0)"
- >设备种类</span>
+ <span class="equiment" :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>
<span>/</span>
- <span
- class="activity"
- :class="{ choosed: linetype == 1 }"
- @click="lineTabClick(1)"
- >设备状态</span>
+ <span class="activity" :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
</div>
<div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
</div>
@@ -130,6 +104,7 @@
spareNewArr: [],
overhaulNewArr: [],
disableNewArr: [],
+ tableHeight: 0
}
},
created () {
@@ -145,8 +120,12 @@
this.clickEquimentChart()
this.historyArr = historyArr
this.underwayArr = underwayArr
+
this.$nextTick(() => {
window.addEventListener("resize", this.echartsResize)
+ this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 52
+
+ console.log(this.tableHeight, this.$refs.Container.offsetHeight, this.$refs.caseBox.offsetHeight, this.$refs.crowdBox.offsetHeight, this.$refs.alertBoxTitle.offsetHeight, 32)
})
this.equipmentEchartsCarousel()
},
@@ -674,32 +653,20 @@
width: 100%;
.case-box {
- height: 30%;
- }
-
- .alert-box,
- .crowd-box {
- height: 35%;
-
- .echarts-box {
- overflow-x: hidden;
- overflow-y: auto;
- }
- }
-
- .alert-box {
- flex: 1;
+ height: 300px;
}
.crowd-box {
- height: 310px;
+ height: 300px;
}
.case-box,
.alert-box,
.crowd-box {
+ margin: 8px;
display: flex;
flex-direction: column;
+ background: $bg-color;
.title::after {
content: '';
@@ -720,7 +687,7 @@
text-align: left;
height: 40px;
line-height: 40px;
- font-size: 20px;
+ font-size: 16px;
background-image: linear-gradient(to right, #2e4aba, #010d3e);
.timer {
@@ -766,7 +733,7 @@
border: 1px solid rgba(20, 50, 123, 1);
cursor: pointer;
- & > div {
+ &>div {
height: 26px;
line-height: 26px;
}
@@ -786,5 +753,16 @@
height: 100%;
}
}
+
+ .alert-box {
+ flex: 1;
+ margin-top: 0;
+ margin-bottom: 0;
+
+ .echarts-box {
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3