1.计量器具台账上传附件报错 2.质量拉的数据不对（未明确） 3.计量器具台账逾期的做标红提醒 4.设备保养定时任务和记录要加上具体的保养内容 5.质...

云

18 小时以前 adb79299e86660a7f205466cf1ea48c6b25b1398

 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,