From 03fbaa3ebea4cd30ad798a4ec5c27dbb2c2daf86 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 16 三月 2021 18:31:59 +0800
Subject: [PATCH] echart里程标
---
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 53 +++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 43 insertions(+), 10 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 10723b3..d528eb6 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -100,7 +100,8 @@
</el-card>
</div>
<div class="part">
- <div class="header-width-tab">
+ <div class="part-top">
+ <div class="header-width-tab">
<el-tabs class="tab-menu" v-model="actHiddanderTab" @tab-click="initTabContent">
<el-tab-pane label="闅愭偅浜嬩欢缁熻" name="hidDanderStatistic"></el-tab-pane>
<el-tab-pane label="闅愭偅浜嬩欢瓒嬪娍" name="hidDanderTrend"></el-tab-pane>
@@ -168,6 +169,7 @@
</div>
</div>
</div>
+ </div>
</div>
<div class="statics flex-box">
<div class="lt">
@@ -239,12 +241,13 @@
<el-radio-button label="hc">浼氳溅</el-radio-button>
<el-radio-button label="lsmx">涓存椂鎱㈣</el-radio-button>
</el-radio-group>
+
<Pie :options="optionsOfIrregularEventPie" style="padding-top:20px;"></Pie>
</div>
</div>
</div>
</div>
- <div class="part">
+ <div class="part-bottom" >
<div class="tab-swiper">
<swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
</div>
@@ -1110,7 +1113,13 @@
</script>
<style lang="scss">
+
.guide-index {
+ background-color: #f0f2f5;
+ .tab-menu {
+ background-color: #fff;
+ height: 60px;
+ }
.el-progress-bar__outer {
border-radius: 2px;
}
@@ -1163,10 +1172,14 @@
}
}
.tab-content {
+ // padding: 18px 12px;
padding: 20px;
+
.card-view {
display: flex;
- margin-right: -20px;
+ margin-right: -20px;
+
+ // margin-left: -2px;
.el-card {
flex: 1;
margin-right: 20px;
@@ -1223,21 +1236,37 @@
}
}
.part {
- padding: 20px 0;
+ padding:20px 0;
margin-bottom: 20px;
+ .part-top{
+ background-color: #fff;
+ }
+ .part-bottom{
+ background-color: #fff;
+ // padding: 0 30px 30px 30px;
+ padding: 0 0 25px 0;
+
+ .tab-detail{
+ margin: 0 25px;
+ }
+ }
.header-width-tab {
display: flex;
justify-content: space-between;
+ margin-bottom: 12px;
+
.rt {
display: flex;
padding-top: 20px;
+ margin-right: 25px;
+
}
}
.statics {
display: flex;
- padding: 0 10px;
+ // padding: 0 10px;
min-height: 400px;
- margin-bottom: 30px;
+ margin-bottom: 20px;
.statics-header {
height: 50px;
display: flex;
@@ -1278,10 +1307,15 @@
.lt {
text-align: left;
flex: 1;
- padding-right: 40px;
+ padding: 3px 15px 15px 18px;
+ background-color: #fff;
+ margin-right: 18px;
+
}
.rt {
text-align: left;
+ background-color: #fff;
+ padding: 3px 15px 15px 18px;
width: 400px;
.header {
display: flex;
@@ -1339,12 +1373,11 @@
.gt {
flex: 1;
width: auto;
- //padding: 0 20px;
}
}
.tab-swiper {
- width: calc(100vw - 340px);
- margin-bottom: 20px;
+ width: calc(100vw - 367px);
+ margin: 0 0 20px 20px;
}
}
.general-view {
--
Gitblit v1.8.0