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/right-top.vue |  186 +++++++++++++++++++++++++++++++++++++++------
 1 files changed, 159 insertions(+), 27 deletions(-)

diff --git a/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue b/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
index 890e99a..3e117b0 100644
--- a/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
+++ b/src/views/reportAnalysis/qualityAnalysis/components/right-top.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <PanelHeader title="涓嶅悎鏍间骇鍝佹帓鍚�" />
+    <PanelHeader title="涓嶅悎鏍间骇鍝佹帓鍚�">
+      <template #extra>
+        <span class="range-tip">(杩� 30 澶�)</span>
+      </template>
+    </PanelHeader>
     <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">
@@ -71,39 +75,115 @@
   flex-direction: row;
   align-items: center;
   height: 40px;
+  transition: all 0.3s ease;
+  position: relative;
+  animation: rankItemFadeIn 0.5s ease-out both;
+}
 
-  .main-panel-box-left {
-    background: red;
-    border-radius: 20px;
-    text-align: center;
-    line-height: 32px;
-    margin: 0 20px;
+@keyframes rankItemFadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.main-panel-box:hover {
+  transform: translateX(5px);
+}
+
+/* 鎺掑悕椤瑰簳閮ㄥ厜绾� */
+.main-panel-box::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 77, 79, 0.3), transparent);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.main-panel-box:hover::after {
+  opacity: 1;
+}
+
+.main-panel-box-left {
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+  border-radius: 20px;
+  text-align: center;
+  line-height: 32px;
+  margin: 0 20px;
+  padding: 0 12px;
+  font-weight: 600;
+  font-size: 12px;
+  color: white;
+  min-width: 60px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 鎺掑悕鏍囩鍙戝厜 */
+.main-panel-box-left::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: rankShine 2s ease-in-out infinite;
+}
+
+@keyframes rankShine {
+  0% { left: -100%; }
+  50%, 100% { left: 100%; }
+}
+
+.main-panel-box:hover .main-panel-box-left {
+  box-shadow: 0 0 15px rgba(255, 77, 79, 0.5);
+}
+
+.main-panel-box-right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .main-panel-box-right-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 6px;
   }
 
-  .main-panel-box-right {
+  .main-panel-box-right-text {
+    font-size: 12px;
     display: flex;
-    flex-direction: column;
-    flex: 1;
+    justify-content: space-between;
+    padding-right: 60px;
+    margin-bottom: 4px;
+    color: rgba(184, 200, 224, 0.8);
+    transition: color 0.3s;
+  }
 
-    .main-panel-box-right-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: #ffffff;
-      margin-bottom: 6px;
+  .main-panel-box:hover .main-panel-box-right-text {
+    color: rgba(184, 200, 224, 1);
+  }
+
+  .main-panel-box-right-progress {
+    :deep(.el-progress__text) {
+      color: white !important;
     }
-
-    .main-panel-box-right-text {
-      font-size: 12px;
-      display: flex;
-      justify-content: space-between;
-      padding-right: 60px;
-      margin-bottom: 4px;
+    :deep(.el-progress-bar__outer) {
+      background-color: rgba(78, 228, 255, 0.15);
     }
-
-    .main-panel-box-right-progress {
-      :deep(.el-progress__text) {
-        color: white !important;
-      }
+    :deep(.el-progress-bar__inner) {
+      transition: width 0.8s ease;
     }
   }
 }
@@ -128,5 +208,57 @@
   width: 100%;
   height: 449px;
   overflow: hidden;
+  position: relative;
+}
+
+/* 闈㈡澘瑙掕惤瑁呴グ */
+.panel-item-customers::before,
+.panel-item-customers::after {
+  content: '';
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  border-color: rgba(255, 77, 79, 0.5);
+  border-style: solid;
+  pointer-events: none;
+}
+
+.panel-item-customers::before {
+  top: -1px;
+  left: -1px;
+  border-width: 2px 0 0 2px;
+}
+
+.panel-item-customers::after {
+  bottom: -1px;
+  right: -1px;
+  border-width: 0 2px 2px 0;
+}
+
+/* 闈㈡澘鑳屾櫙鑴夊啿 */
+.panel-item-customers::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 50%, rgba(255, 77, 79, 0.03) 0%, transparent 70%);
+  pointer-events: none;
+  animation: panelPulse 5s ease-in-out infinite;
+  z-index: 0;
+}
+
+@keyframes panelPulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.5; }
+}
+
+.range-tip {
+  font-size: 14px;
+  color: rgba(184, 200, 224, 0.75);
+  animation: tipFade 2s ease-in-out infinite;
+}
+
+@keyframes tipFade {
+  0%, 100% { opacity: 0.75; }
+  50% { opacity: 1; }
 }
 </style>

--
Gitblit v1.9.3