From adb79299e86660a7f205466cf1ea48c6b25b1398 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期四, 18 六月 2026 13:14:37 +0800
Subject: [PATCH] 1.计量器具台账上传附件报错 2.质量拉的数据不对（未明确） 3.计量器具台账逾期的做标红提醒 4.设备保养定时任务和记录要加上具体的保养内容 5.质量要区分质检规则抽检还是全检，抽检的话是抽多少百分比 6.供应商管理东西太少了，没有资质文件啊这些东西（是不是可以参考pro） 7.采购审批把人从李莹莹改成龙红星
---
src/views/reportAnalysis/qualityAnalysis/components/center-top.vue | 134 +++++++++++++++++++++++++++++++++++++++-----
1 files changed, 119 insertions(+), 15 deletions(-)
diff --git a/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue
index 8e46770..7703892 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/center-top.vue
@@ -2,17 +2,26 @@
<div>
<!-- 椤堕儴缁熻鍗＄墖 -->
<div class="stats-cards">
- <div v-for="item in statItems" :key="item.name" class="stat-card">
- <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div v-for="(item, index) in statItems" :key="item.name" class="stat-card" :style="{ animationDelay: `${index * 0.15}s` }">
+ <div class="card-icon-wrapper">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="icon-ring"></div>
+ </div>
<div class="card-content">
<span class="card-label">{{ item.name }}</span>
- <span class="card-value">{{ item.value }}</span>
+ <span class="card-value">
+ <span class="value-number">{{ item.value }}</span>
+ </span>
<div class="card-compare" :class="compareClass(Number(item.rate))">
- <span>鍚屾瘮</span>
+ <el-tooltip content="浠婃棩鍗曟棩妫�楠屾暟鐩稿鏄ㄦ棩鍗曟棩妫�楠屾暟鐨勫闀跨巼" placement="top">
+ <span>{{ item.name === '鎬绘楠屾暟' ? '鏃ョ幆姣�' : '鍚屾瘮' }}</span>
+ </el-tooltip>
<span class="compare-value">{{ formatPercent(item.rate) }}</span>
<span class="compare-icon">{{ Number(item.rate) >= 0 ? '鈫�' : '鈫�' }}</span>
</div>
</div>
+ <!-- 鍗＄墖搴曢儴鍏夌嚎 -->
+ <div class="card-glow"></div>
</div>
</div>
@@ -70,11 +79,14 @@
<style scoped>
.stats-cards {
display: flex;
- gap: 30px;
+ gap: 20px;
+ width: 100%;
+ overflow: hidden;
}
.stat-card {
flex: 1;
+ min-width: 0;
display: flex;
align-items: center;
background-image: url('@/assets/BI/border@2x.png');
@@ -82,47 +94,134 @@
background-position: center;
background-repeat: no-repeat;
height: 142px;
+ padding-right: 10px;
+ box-sizing: border-box;
+ position: relative;
+ overflow: hidden;
+ animation: cardFadeIn 0.6s ease-out both;
+}
+
+@keyframes cardFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* 鍗＄墖搴曢儴鍙戝厜鏁堟灉 */
+.card-glow {
+ position: absolute;
+ bottom: 0;
+ left: 10%;
+ right: 10%;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
+ animation: glowPulse 3s ease-in-out infinite;
+}
+
+@keyframes glowPulse {
+ 0%, 100% { opacity: 0.3; }
+ 50% { opacity: 0.8; }
+}
+
+.card-icon-wrapper {
+ position: relative;
+ width: 70px;
+ height: 70px;
+ min-width: 70px;
+ margin: 0 12px 0 8px;
}
.card-icon {
- width: 100px;
- height: 100px;
- margin: 20px 20px 0 10px;
+ width: 70px;
+ height: 70px;
+ position: relative;
+ z-index: 2;
+ animation: iconFloat 3s ease-in-out infinite;
+}
+
+@keyframes iconFloat {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-3px); }
+}
+
+/* 鍥炬爣澶栧湀鍏夌幆 */
+.icon-ring {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80px;
+ height: 80px;
+ border: 1px solid rgba(0, 212, 255, 0.3);
+ border-radius: 50%;
+ animation: ringRotate 8s linear infinite;
+}
+
+@keyframes ringRotate {
+ from { transform: translate(-50%, -50%) rotate(0deg); }
+ to { transform: translate(-50%, -50%) rotate(360deg); }
}
.card-content {
display: flex;
flex-direction: column;
- gap: 10px;
+ gap: 6px;
+ min-width: 0;
+ flex: 1;
}
.card-value {
font-weight: 500;
- font-size: 40px;
+ font-size: 32px;
+ line-height: 1.2;
background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.value-number {
+ display: inline-block;
+ animation: countUp 1s ease-out;
+}
+
+@keyframes countUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
}
.card-label {
font-weight: 400;
- font-size: 16px;
+ font-size: 14px;
color: rgba(208, 231, 255, 0.7);
+ white-space: nowrap;
}
.card-compare {
display: flex;
align-items: center;
- gap: 6px;
- font-size: 15px;
+ gap: 4px;
+ font-size: 13px;
color: #d0e7ff;
white-space: nowrap;
flex-wrap: nowrap;
}
.card-compare>span:first-child {
- font-size: 13px;
+ font-size: 12px;
opacity: 0.8;
}
@@ -134,7 +233,12 @@
font-size: 14px;
position: relative;
top: -1px;
- /* 杞诲井涓婄Щ锛岃绠ご涓庢枃瀛楀瀭鐩村眳涓榻� */
+ animation: arrowBounce 1s ease-in-out infinite;
+}
+
+@keyframes arrowBounce {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-2px); }
}
.compare-up .compare-value,
--
Gitblit v1.9.3