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/right-top.vue | 46 +++++++++++++++++++++++++++++++++++++---------
1 files changed, 37 insertions(+), 9 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
index 890e99a..cb7a704 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
@@ -1,9 +1,9 @@
<template>
- <div>
+ <div class="panel-root">
<PanelHeader title="涓嶅悎鏍间骇鍝佹帓鍚�" />
<div class="main-panel panel-item-customers">
<div class="main-panel-container">
- <div style="color: white" class="main-panel-box" v-for="(item, index) in panelList" :key="index">
+ <div class="main-panel-box" v-for="(item, index) in panelList" :key="index">
<!-- <div style="flex: 1" class="main-panel-box-left">{{ item.rank }}</div> -->
<div style="flex: 1" class="main-panel-box-left">{{ item.productName }}</div>
<div style="flex: 3" class="main-panel-box-right">
@@ -71,13 +71,20 @@
flex-direction: row;
align-items: center;
height: 40px;
+ color: var(--bi-text);
.main-panel-box-left {
- background: red;
- border-radius: 20px;
+ background: rgba(74, 108, 240, 0.15);
+ border: 1px solid rgba(74, 108, 240, 0.35);
+ border-radius: 6px;
+ color: var(--bi-text-strong);
text-align: center;
line-height: 32px;
margin: 0 20px;
+ padding: 0 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.main-panel-box-right {
@@ -87,8 +94,8 @@
.main-panel-box-right-title {
font-size: 14px;
- font-weight: 600;
- color: #ffffff;
+ font-weight: 500;
+ color: var(--bi-text-strong);
margin-bottom: 6px;
}
@@ -98,11 +105,20 @@
justify-content: space-between;
padding-right: 60px;
margin-bottom: 4px;
+ font-variant-numeric: tabular-nums;
}
.main-panel-box-right-progress {
:deep(.el-progress__text) {
- color: white !important;
+ color: var(--bi-text) !important;
+ }
+
+ :deep(.el-progress-bar__outer) {
+ background-color: rgba(74, 108, 240, 0.12);
+ }
+
+ :deep(.el-progress-bar__inner) {
+ background: var(--bi-accent-bright);
}
}
}
@@ -116,17 +132,29 @@
overflow-y: auto;
}
+.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: 449px;
+ box-sizing: border-box;
overflow: hidden;
}
</style>
--
Gitblit v1.9.3