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

云

8 小时以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

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

@@ -2,7 +2,7 @@
  <div>
    <PanelHeader title="生产订单完成进度" />
    <div class="main-panel">
      <div class="panel-item-customers">
      <div class="panel-item-customers bi-panel">
        <CarouselCards :items="cardItems" :visible-count="4" />
        <div
          class="progress-table-container"
@@ -55,6 +55,7 @@
import { getProgressStatistics } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import CarouselCards from './CarouselCards.vue'
import { BI_COLORS } from '../theme.js'

const progressTableRef = ref(null)
const progressTableScrollTimer = ref(null)
@@ -92,10 +93,10 @@
// 根据进度百分比返回颜色
const progressColor = (percentage) => {
  const p = percentage || 0
  if (p < 30) return '#f56c6c'
  if (p < 50) return '#e6a23c'
  if (p < 80) return '#409eff'
  return '#67c23a'
  if (p < 30) return BI_COLORS.red
  if (p < 50) return BI_COLORS.amber
  if (p < 80) return BI_COLORS.primary
  return BI_COLORS.green
}

const setRowRef = (el, index) => {
@@ -248,17 +249,19 @@
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 428px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-table-container {
  height: 320px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@@ -270,7 +273,7 @@
.progress-table {
  width: 100%;
  border-collapse: collapse;
  color: #b8c8e0;
  color: var(--bi-text-secondary);
  font-size: 12px;
  table-layout: fixed;
}
@@ -278,7 +281,7 @@
.progress-table thead {
  position: sticky;
  top: 0;
  background-color: rgba(26, 88, 176, 0.9);
  background-color: var(--bi-surface-2);
  z-index: 10;
}

@@ -286,8 +289,8 @@
  padding: 8px 6px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid rgba(184, 200, 224, 0.3);
  color: #b8c8e0;
  border-bottom: 1px solid var(--bi-divider);
  color: var(--bi-text);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
@@ -320,7 +323,7 @@

.progress-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(184, 200, 224, 0.1);
  border-bottom: 1px solid var(--bi-divider);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -329,7 +332,7 @@
}

.progress-table tbody tr:hover {
  background-color: rgba(184, 200, 224, 0.1);
  background-color: rgba(159, 176, 207, 0.06);
}

.progress-table tbody tr.row-under-header {
@@ -341,11 +344,11 @@
}

.progress-table :deep(.el-progress-bar__outer) {
  background-color: rgba(184, 200, 224, 0.2);
  background-color: rgba(159, 176, 207, 0.15);
}

.progress-table :deep(.el-progress__text) {
  color: #b8c8e0;
  color: var(--bi-text-secondary);
  font-size: 11px;
}
</style>