From 5c63d4bbaf28166e107b388240e9cbc2d85fbcc1 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期五, 28 二月 2025 11:41:43 +0800
Subject: [PATCH] 图表样式优化
---
zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue | 62 ++++++------------------------
1 files changed, 13 insertions(+), 49 deletions(-)
diff --git a/zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue b/zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue
index d3dc582..bb5525d 100644
--- a/zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue
+++ b/zhitan-vue/src/views/costAnalysis/cost-trend-analysis.vue
@@ -36,7 +36,7 @@
</div>
<div class="table-bg-style">
<div class="table-box theme-dark-mt20" style="">
- <el-table :data="tableData" v-loading="loading">
+ <el-table :data="tableData" v-loading="loading" style="border-bottom: 1px solid #ebeef5">
<el-table-column label="鏃堕棿" prop="dateCode" align="center" width="160" />
<el-table-column label="鎬昏垂鐢�(鍏�)" prop="total" align="center" width="120" />
<el-table-column :label="col.energyName" v-for="(col, index) in columns" :key="index" align="center">
@@ -47,7 +47,7 @@
</div>
</div>
<div class="charts-view" v-loading="loading">
- <el-row :gutter="2" class="" v-for="item in chartDataList" :key="item.energyType">
+ <el-row :gutter="1" class="" v-for="item in chartDataList" :key="item.energyType">
<el-col :span="12">
<BaseCard :title="item.costLabel + '(鍏�)'">
<div class="">
@@ -85,6 +85,7 @@
:chartData="{
title: item.accumulationLabel,
chartType: 'bar',
+ barWidth: '10',
xAxis: item.accumulationKeyList,
series: [
{
@@ -258,59 +259,22 @@
.table-box {
margin-top: 0;
- :deep .el-table--border .el-table__inner-wrapper:after {
- height: 0;
- }
+}
- :deep .el-table--border:after {
- width: 0;
+.themeDark {
+ .table-box {
+ padding: 0 10px;
}
-
- :deep .el-table--border:before {
- width: 0;
- }
-
- :deep .el-table__border-left-patch {
- background: transparent;
- }
-
- :deep .el-table--border .el-table__cell {
- border-right: none;
+}
+.themeLight {
+ .table-box {
+ padding-bottom: 20px;
}
}
.charts-view {
width: 100%;
- margin-top: 20px;
- // padding: 0 30px;
-}
-.display-buttons {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- margin-top: 16px;
- margin-right: 16px;
- .display-btn,
- .active-display-btn {
- width: 78px;
- height: 34px;
- background: #fff;
- color: #409eff;
- border: 2px solid #409eff;
- border-radius: 4px;
- margin-left: 10px;
- text-align: center;
- line-height: 31px;
- font-size: 14px;
- font-weight: 400;
- cursor: pointer;
- &:hover {
- opacity: 0.9;
- }
- }
- .active-display-btn {
- background: #409eff;
- color: #fff;
- }
+ margin-top: 12px;
+ padding-bottom: 24px;
}
</style>
--
Gitblit v1.9.3