From caba724b7025dd8801ed590bed3d8d56579d6a8c Mon Sep 17 00:00:00 2001 From: licp <lichunping@guanfang.com.cn> Date: 星期四, 18 四月 2024 17:14:45 +0800 Subject: [PATCH] 完成实验室资质页面编写 --- src/components/view/b4-inspection-item-statistics.vue | 46 +++++++++++++++++++++++++--------------------- 1 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/components/view/b4-inspection-item-statistics.vue b/src/components/view/b4-inspection-item-statistics.vue index 6eb1a49..53f6155 100644 --- a/src/components/view/b4-inspection-item-statistics.vue +++ b/src/components/view/b4-inspection-item-statistics.vue @@ -1,9 +1,9 @@ <template> <div class="inspection-main"> <div class="inspection-content" style="height:100%"> - <p style="font-size: 16px;padding:19.5px 0px">妫�娴嬮」鐩粺璁�</p> + <!-- <p style="font-size: 16px;padding:19.5px 0px">妫�娴嬮」鐩粺璁�</p> --> <el-row :gutter="20"> - <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;"> + <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> <div class="inspection-card inspection-head"> <div class="inspection-head-left"> <h4>浠婃棩椤圭洰鎺ユ敹</h4> @@ -17,7 +17,7 @@ <img src="../../../static/img/daliy-0.svg" alt="" srcset=""> </div> </el-col> - <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;"> + <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> <div class="inspection-card inspection-head"> <div class="inspection-head-left"> <h4>浠婃棩椤圭洰瀹屾垚</h4> @@ -31,7 +31,7 @@ <img src="../../../static/img/daliy-1.svg" alt="" srcset=""> </div> </el-col> - <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;"> + <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> <div class="inspection-card inspection-head"> <div class="inspection-head-left"> <h4>浠婃棩椤圭洰鍓╀綑</h4> @@ -45,36 +45,36 @@ <img src="../../../static/img/daliy-2.svg" alt="" srcset=""> </div> </el-col> - <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;"> + <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;"> <h4 style="margin-bottom: 5px;">浠婃棩椤圭洰鍚堟牸鐜�</h4> <echart-module :id="'inspection-qualified'" :config="chartConfig2" :datas="chartData2" style="align-self: center;"></echart-module> </div> </el-col> - <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;"> + <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;"> <h4 style="margin-bottom: 5px;">浠婃棩椤圭洰瀹屾垚鐜�</h4> <echart-module :id="'inspection-complete'" :config="chartConfig3" :datas="chartData3" style="align-self: center;"></echart-module> </div> </el-col> - <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 30px;"> + <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="margin-bottom: 16px;"> <div class="inspection-card inspection-head" style="flex-direction: column;padding-bottom: 5px;"> <h4 style="margin-bottom: 5px;">浠婃棩椤圭洰寤舵湡鐜�</h4> <echart-module :id="'inspection-extension'" :config="chartConfig4" :datas="chartData4" style="align-self: center;"></echart-module> </div> </el-col> </el-row> - <el-row :gutter="20"> - <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;"> - <div class="inspection-card chart-box"> + <el-row :gutter="20" style="height: calc(100% - 170px);"> + <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px; height: 100%;"> + <div class="inspection-card chart-box" style="height: 100%;"> <h4>杩�10鏃ラ」鐩帴鏀堕噺</h4> - <echart-module :id="'inspection-left'" :config="chartConfig0" :datas="chartData0"></echart-module> + <echart-module :id="'inspection-left'" :config="chartConfig0" :datas="chartData0" style="height: calc(100% - 32px);"></echart-module> </div> </el-col> - <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 30px;"> - <div class="inspection-card chart-box"> + <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 16px;height: 100%;"> + <div class="inspection-card chart-box" style="height: 100%;"> <h4>杩�10鏃ュ疄闄呭畬鎴愰」鐩笌鎺ユ敹椤圭洰瀵规瘮</h4> - <echart-module :id="'inspection-right'" :config="chartConfig1" :datas="chartData1"></echart-module> + <echart-module :id="'inspection-right'" :config="chartConfig1" :datas="chartData1" style="height: calc(100% - 32px);"></echart-module> </div> </el-col> </el-row> @@ -90,7 +90,7 @@ data(){ return{ chartConfig0:{ - height: '435px', + height: '', isLoading:true, type:'line' }, @@ -104,7 +104,7 @@ ] }, chartConfig1:{ - height: '435px', + height: '', isLoading:true, type:'bar' }, @@ -122,7 +122,7 @@ ] }, chartConfig2:{ - height: '118px', + height: '103px', width:'140px', isLoading:true, type:'pie' @@ -143,7 +143,7 @@ ] }, chartConfig3:{ - height: '118px', + height: '103px', width:'140px', isLoading:true, type:'pie' @@ -164,7 +164,7 @@ ] }, chartConfig4:{ - height: '118px', + height: '103px', width:'140px', isLoading:true, type:'pie' @@ -195,6 +195,10 @@ overflow-y: auto; overflow-x: hidden; } + .inspection-content{ + padding: 20px 0; + box-sizing: border-box; + } .inspection-card{ width: 100%; background: #FFFFFF; @@ -223,7 +227,7 @@ font-weight: bold; font-size: 28px; display: inline-block; - margin-bottom: 30px; + margin-bottom: 16px; } .inspection-head-left .inspection-head-left-info{ @@ -242,7 +246,7 @@ } .chart-box{ - padding: 30px 24px; + padding: 16px 24px; box-sizing: border-box; } -- Gitblit v1.9.3