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

云

2 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

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

@@ -1,5 +1,5 @@
<template>
  <div>
  <div class="panel-root">
    <div class="chart-header">
      <div class="chart-header-title">
        <PanelHeader title="完成检验数" />
@@ -16,8 +16,8 @@
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        style="height: 260px"
        :options="baseChartOptions"
        style="height: 100%"
      />
    </div>
  </div>
@@ -28,17 +28,18 @@
import { completedInspectionCount } from '@/api/viewIndex.js'
import PanelHeader from './PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import { BI, baseChartOptions, withTooltip } from '../theme.js'

const chartStyle = {
  width: '100%',
  height: '140%',
  height: '100%',
}

const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true }

const barLegend = {
  show: true,
  textStyle: { color: '#B8C8E0' },
  textStyle: { color: BI.text },
  data: ['合格', '不合格', '合格率'],
}

@@ -57,8 +58,8 @@
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(0, 164, 237, 0)' },
          { offset: 0, color: 'rgba(78, 228, 255, 1)' },
          { offset: 1, color: 'rgba(74, 108, 240, 0.05)' },
          { offset: 0, color: BI.accentBright },
        ],
      },
    },
@@ -78,8 +79,8 @@
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 1, color: 'rgba(83, 126, 245, 0.19)' },
          { offset: 0, color: 'rgba(144, 97, 248, 1)' },
          { offset: 1, color: 'rgba(142, 124, 230, 0.05)' },
          { offset: 0, color: BI.series[2] },
        ],
      },
    },
@@ -92,14 +93,14 @@
    showSymbol: true,
    symbol: 'circle',
    symbolSize: 8,
    lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 },
    itemStyle: { color: 'rgba(90, 216, 166, 1)' },
    lineStyle: { color: BI.up, width: 2 },
    itemStyle: { color: BI.up },
    data: [],
    emphasis: { focus: 'series' },
  },
])

const tooltip = {
const tooltip = withTooltip({
  trigger: 'axis',
  axisPointer: { type: 'cross' },
  formatter(params) {
@@ -110,22 +111,22 @@
    })
    return result
  },
}
})

const xAxis1 = ref([
  { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] },
  { type: 'category', axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: BI.text, fontSize: 12 }, data: [] },
])

const yAxis1 = [
  { type: 'value', name: '件', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } },
  { type: 'value', name: '件', axisLabel: { color: BI.text, fontSize: 12 }, nameTextStyle: { color: BI.text }, splitLine: { lineStyle: { color: 'rgba(143, 163, 200, 0.15)' } } },
  {
    type: 'value',
    name: '合格率(%)',
    min: 0,
    max: 100,
    axisLabel: { color: '#B8C8E0', formatter: '{value}%' },
    nameTextStyle: { color: '#B8C8E0' },
    splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } },
    axisLabel: { color: BI.text, fontSize: 12, formatter: '{value}%' },
    nameTextStyle: { color: BI.text },
    splitLine: { show: false },
  },
]

@@ -176,36 +177,49 @@
.warn-range {
  position: absolute;
  right: 0;
  top: 0;
  height: 32px;
  padding: 0 14px;
  top: 2px;
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(180deg, rgba(51, 120, 255, 1) 0%, rgba(0, 164, 237, 1) 100%);
  border: 1px solid rgba(78, 228, 255, 0.25);
  border-radius: 6px;
  color: var(--bi-text-strong);
  font-weight: 500;
  font-size: 13px;
  background: rgba(74, 108, 240, 0.15);
  border: 1px solid rgba(74, 108, 240, 0.35);
  cursor: pointer;
  transition: border-color 0.2s ease;
  z-index: 10;
}

.warn-range:hover {
  background: linear-gradient(180deg, rgba(51, 140, 255, 1) 0%, rgba(0, 184, 237, 1) 100%);
  border-color: var(--bi-accent-bright);
}

.panel-root {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.main-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 20px;
}

.panel-item-customers {
  border: 1px solid #1a58b0;
  border: 1px solid var(--bi-panel-border);
  background: var(--bi-panel-bg);
  border-radius: 8px;
  padding: 18px;
  width: 100%;
  height: 436px;
  box-sizing: border-box;
}
</style>