refactor(layout): 调整布局样式并优化轮播卡片组件

云

2026-09-15 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/productionAnalysis/components/center-top.vue

@@ -5,12 +5,11 @@
      <div
        v-for="item in statItems"
        :key="item.name"
        class="stat-card"
        class="stat-card bi-panel"
      >
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">{{ item.name }}</span>
          <span class="card-value">{{ item.value }}</span>
          <span class="card-value bi-num">{{ item.value }}</span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(item.rate) }}</span>
@@ -18,6 +17,7 @@
          </div>
        </div>
      </div>
      <div v-if="!statItems.length" class="stats-empty bi-panel">暂无数据</div>
    </div>

  </div>
@@ -67,38 +67,41 @@
  flex: 1;
  display: flex;
  align-items: center;
  background-image: url('@/assets/BI/border@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: 142px;
}

.card-icon {
  width: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
/* 左侧品牌蓝竖条，呼应首页面板标题 */
.stat-card::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 64px;
  border-radius: 2px;
  background: var(--bi-accent);
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 36px;
}

.card-value {
  font-weight: 500;
  font-weight: 600;
  font-size: 40px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  color: var(--bi-text);
}

.card-label {
  font-weight: 400;
  font-size: 16px;
  color: rgba(208, 231, 255, 0.7);
  color: var(--bi-text-secondary);
}

.card-compare {
@@ -106,7 +109,7 @@
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #d0e7ff;
  color: var(--bi-text-secondary);
}

.card-compare > span:first-child {
@@ -121,17 +124,26 @@
.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px; /* 轻微上移，让箭头与文字垂直居中对齐 */
  top: -1px;
}

.compare-up .compare-value,
.compare-up .compare-icon {
  color: #00c853;
  color: var(--bi-success);
}

.compare-down .compare-value,
.compare-down .compare-icon {
  color: #ff5252;
  color: var(--bi-danger);
}

.stats-empty {
  flex: 1;
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bi-text-tertiary);
  font-size: 14px;
}
</style>