From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue | 74 ++++++++++++++++++++++---------------
1 files changed, 44 insertions(+), 30 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue b/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
index fe875d0..529ac0b 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/center-bottom.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="panel-root">
<div class="chart-header">
<div class="chart-header-title">
<PanelHeader title="瀹屾垚妫�楠屾暟" />
@@ -16,8 +16,8 @@
:tooltip="tooltip"
:xAxis="xAxis1"
:yAxis="yAxis1"
- :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
- style="height: 260px"
+ :options="baseChartOptions"
+ style="height: 100%"
/>
</div>
</div>
@@ -28,17 +28,18 @@
import { completedInspectionCount } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
+import { BI, baseChartOptions, withTooltip } from '../theme.js'
const chartStyle = {
width: '100%',
- height: '140%',
+ height: '100%',
}
const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }
const barLegend = {
show: true,
- textStyle: { color: '#B8C8E0' },
+ textStyle: { color: BI.text },
data: ['鍚堟牸', '涓嶅悎鏍�', '鍚堟牸鐜�'],
}
@@ -57,8 +58,8 @@
x2: 0,
y2: 1,
colorStops: [
- { offset: 1, color: 'rgba(0, 164, 237, 0)' },
- { offset: 0, color: 'rgba(78, 228, 255, 1)' },
+ { offset: 1, color: 'rgba(74, 108, 240, 0.05)' },
+ { offset: 0, color: BI.accentBright },
],
},
},
@@ -78,8 +79,8 @@
x2: 0,
y2: 1,
colorStops: [
- { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
- { offset: 0, color: 'rgba(144, 97, 248, 1)' },
+ { offset: 1, color: 'rgba(142, 124, 230, 0.05)' },
+ { offset: 0, color: BI.series[2] },
],
},
},
@@ -92,14 +93,14 @@
showSymbol: true,
symbol: 'circle',
symbolSize: 8,
- lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
- itemStyle: { color: 'rgba(90, 216, 166, 1)' },
+ lineStyle: { color: BI.up, width: 2 },
+ itemStyle: { color: BI.up },
data: [],
emphasis: { focus: 'series' },
},
])
-const tooltip = {
+const tooltip = withTooltip({
trigger: 'axis',
axisPointer: { type: 'cross' },
formatter(params) {
@@ -110,22 +111,22 @@
})
return result
},
-}
+})
const xAxis1 = ref([
- { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
+ { type: 'category', axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: BI.text, fontSize: 12 }, data: [] },
])
const yAxis1 = [
- { type: 'value', name: '浠�', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
+ { type: 'value', name: '浠�', axisLabel: { color: BI.text, fontSize: 12 }, nameTextStyle: { color: BI.text }, splitLine: { lineStyle: { color: 'rgba(143, 163, 200, 0.15)' } } },
{
type: 'value',
name: '鍚堟牸鐜�(%)',
min: 0,
max: 100,
- axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
- nameTextStyle: { color: '#B8C8E0' },
- splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
+ axisLabel: { color: BI.text, fontSize: 12, formatter: '{value}%' },
+ nameTextStyle: { color: BI.text },
+ splitLine: { show: false },
},
]
@@ -176,36 +177,49 @@
.warn-range {
position: absolute;
right: 0;
- top: 0;
- height: 32px;
- padding: 0 14px;
+ top: 2px;
+ height: 28px;
+ padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
- border-radius: 4px;
- color: #ffffff;
- font-weight: 600;
- font-size: 14px;
- background: linear-gradient(180deg, rgba(51, 120, 255, 1) 0%, rgba(0, 164, 237, 1) 100%);
- border: 1px solid rgba(78, 228, 255, 0.25);
+ border-radius: 6px;
+ color: var(--bi-text-strong);
+ font-weight: 500;
+ font-size: 13px;
+ background: rgba(74, 108, 240, 0.15);
+ border: 1px solid rgba(74, 108, 240, 0.35);
cursor: pointer;
+ transition: border-color 0.2s ease;
z-index: 10;
}
.warn-range:hover {
- background: linear-gradient(180deg, rgba(51, 140, 255, 1) 0%, rgba(0, 184, 237, 1) 100%);
+ border-color: var(--bi-accent-bright);
+}
+
+.panel-root {
+ flex: 1;
+ height: 100%;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
}
.main-panel {
display: flex;
flex-direction: column;
+ flex: 1;
+ min-height: 0;
gap: 20px;
}
.panel-item-customers {
- border: 1px solid #1a58b0;
+ border: 1px solid var(--bi-panel-border);
+ background: var(--bi-panel-bg);
+ border-radius: 8px;
padding: 18px;
width: 100%;
- height: 436px;
+ box-sizing: border-box;
}
</style>
--
Gitblit v1.9.3