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/productionAnalysis/components/CarouselCards.vue | 99 +++++++++++++++++++++----------------------------
1 files changed, 42 insertions(+), 57 deletions(-)
diff --git a/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue b/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue
index 0498824..df4f9e2 100644
--- a/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue
+++ b/src/views/reportAnalysis/productionAnalysis/components/CarouselCards.vue
@@ -1,14 +1,15 @@
<template>
<div class="carousel-cards">
- <button
+ <button
v-if="canScrollLeft"
class="nav-button nav-button-left"
+ aria-label="鍚戝乏婊氬姩"
@click="scrollLeftFn"
>
- <img src="@/assets/BI/jiantou.png" alt="宸︾澶�" />
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
</button>
- <div
- class="cards-container"
+ <div
+ class="cards-container"
:style="{ '--visible-count': visibleCount }"
ref="cardsContainerRef"
>
@@ -17,7 +18,6 @@
:key="index"
class="card-item"
>
- <div v-if="item.icon" class="card-icon" :style="{ backgroundImage: `url(${item.icon})` }"></div>
<div class="card-title">
<div class="card-label">{{ item.label }}</div>
<div class="card-value">
@@ -30,12 +30,13 @@
</div>
</div>
</div>
- <button
+ <button
v-if="canScrollRight"
class="nav-button nav-button-right"
+ aria-label="鍚戝彸婊氬姩"
@click="scrollRightFn"
>
- <img src="@/assets/BI/jiantou.png" alt="鍙崇澶�" />
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
</button>
</div>
</template>
@@ -48,9 +49,9 @@
type: Array,
default: () => [],
validator: (value) => {
- return value.every(item =>
- item && typeof item.label !== 'undefined' &&
- typeof item.value !== 'undefined' &&
+ return value.every(item =>
+ item && typeof item.label !== 'undefined' &&
+ typeof item.value !== 'undefined' &&
typeof item.unit !== 'undefined'
)
}
@@ -79,7 +80,7 @@
const updateScrollState = () => {
const container = cardsContainerRef.value
if (!container) return
-
+
currentScrollLeft.value = container.scrollLeft
maxScrollLeft.value = container.scrollWidth - container.clientWidth
}
@@ -88,19 +89,19 @@
const scrollLeftFn = () => {
const container = cardsContainerRef.value
if (!container) return
-
+
const scrollItems = Array.from(container.querySelectorAll('.card-item'))
if (scrollItems.length === 0) return
-
+
const itemWidth = scrollItems[0]?.offsetWidth || 0
const gap = 12
const scrollDistance = itemWidth + gap
-
+
container.scrollBy({
left: -scrollDistance,
behavior: 'smooth'
})
-
+
// 寤惰繜鏇存柊鐘舵�侊紝绛夊緟婊氬姩鍔ㄧ敾瀹屾垚
setTimeout(() => {
updateScrollState()
@@ -111,19 +112,19 @@
const scrollRightFn = () => {
const container = cardsContainerRef.value
if (!container) return
-
+
const scrollItems = Array.from(container.querySelectorAll('.card-item'))
if (scrollItems.length === 0) return
-
+
const itemWidth = scrollItems[0]?.offsetWidth || 0
const gap = 12
const scrollDistance = itemWidth + gap
-
+
container.scrollBy({
left: scrollDistance,
behavior: 'smooth'
})
-
+
// 寤惰繜鏇存柊鐘舵�侊紝绛夊緟婊氬姩鍔ㄧ敾瀹屾垚
setTimeout(() => {
updateScrollState()
@@ -188,40 +189,30 @@
transform: translateY(-50%);
width: 32px;
height: 32px;
- background: rgba(26, 88, 176, 0.6);
- border: 1px solid rgba(26, 88, 176, 0.8);
+ background: var(--bi-surface-2);
+ border: 1px solid var(--bi-border);
border-radius: 50%;
+ color: var(--bi-text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
- transition: all 0.3s ease;
+ transition: color 0.2s ease, border-color 0.2s ease;
padding: 0;
}
.nav-button:hover {
- background: rgba(26, 88, 176, 0.8);
- transform: translateY(-50%) scale(1.1);
+ color: var(--bi-accent);
+ border-color: var(--bi-accent);
}
.nav-button-left {
left: -16px;
}
-.nav-button-left img {
- width: 16px;
- height: 16px;
- transform: rotate(180deg);
-}
-
.nav-button-right {
right: -16px;
-}
-
-.nav-button-right img {
- width: 16px;
- height: 16px;
}
.card-item {
@@ -229,24 +220,15 @@
min-width: calc((100% - (var(--visible-count) - 1) * 12px) / var(--visible-count));
display: flex;
align-items: center;
- background: linear-gradient(269deg, rgba(27,57,126,0.13) 0%, rgba(33,137,206,0.33) 98.13%, #24AFF4 100%);
- border-radius: 8px 8px 8px 8px;
+ background: var(--bi-surface-2);
+ border: 1px solid var(--bi-border);
+ border-radius: 8px;
padding: 12px 16px;
- transition: all 0.3s ease;
+ transition: border-color 0.2s ease;
}
.card-item:hover {
- transform: translateY(-2px);
-}
-
-.card-icon {
- width: 80px;
- height: 60px;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- flex-shrink: 0;
- margin-right: 12px;
+ border-color: rgba(91, 140, 255, 0.45);
}
.card-title {
@@ -254,12 +236,13 @@
align-items: flex-start;
flex-direction: column;
flex: 1;
+ min-width: 0;
}
.card-label {
font-weight: 400;
font-size: 14px;
- color: #FFFFFF;
+ color: var(--bi-text-secondary);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
@@ -280,7 +263,7 @@
gap: 6px;
font-weight: 400;
font-size: 12px;
- color: rgba(255, 255, 255, 0.85);
+ color: var(--bi-text-secondary);
}
.rate-label {
@@ -292,15 +275,17 @@
}
.value-number {
- font-weight: 400;
- font-size: 14px;
- color: #FFFFFF;
- line-height: 1;
+ font-weight: 600;
+ font-size: 22px;
+ color: var(--bi-text);
+ line-height: 1.1;
+ font-variant-numeric: tabular-nums;
+ font-feature-settings: 'tnum';
}
.value-unit {
- font-size: 14px;
- color: #FFFFFF;
+ font-size: 12px;
+ color: var(--bi-text-secondary);
font-weight: 400;
}
</style>
--
Gitblit v1.9.3