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

云

8 天以前 1c829f9177eab675b22be4d20ef2761ed1bbb423

 src/views/reportAnalysis/PSIDataAnalysis/components/center-center.vue

@@ -1,15 +1,8 @@
<template>
  <div>
    <!-- 设备统计 -->
    <!-- 产品周转天数 -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">产品周转天数</span>
      </div>
      <PanelHeader title="产品周转天数" />
      <Echarts
        ref="chart"
        :chartStyle="chartStyle"
@@ -19,7 +12,7 @@
        :tooltip="tooltip"
        :xAxis="xAxis1"
        :yAxis="yAxis1"
        :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
        :options="baseOptions"
        style="height: 260px"
      />
    </div>
@@ -29,11 +22,14 @@
<script setup>
import { ref, onMounted } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from './PanelHeader.vue'
import { productTurnoverDays } from '@/api/viewIndex.js'
import { BI, baseChartOptions, withTooltip } from '../theme.js'

const chartStyle = { width: '100%', height: '100%' }
const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true }
const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['周转天数'] }
const barLegend = { show: false, textStyle: { color: BI.text }, data: ['周转天数'] }
const baseOptions = baseChartOptions
const barSeries1 = ref([
  {
    name: '周转天数',
@@ -42,19 +38,20 @@
    barWidth: 30,
    emphasis: { focus: 'series' },
    itemStyle: {
      borderRadius: [4, 4, 0, 0],
      color: {
        type: 'linear',
        x: 0, y: 1, x2: 0, y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(0,164,237,0)' },
          { offset: 1, color: '#4EE4FF' },
          { offset: 0, color: 'rgba(74, 108, 240, 0.05)' },
          { offset: 1, color: BI.accentBright },
        ],
      },
    },
    data: [],
  },
])
const tooltip = {
const tooltip = withTooltip({
  trigger: 'axis',
  axisPointer: { type: 'shadow' },
  formatter(params) {
@@ -64,9 +61,9 @@
    })
    return result
  },
}
const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }])
const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }]
})
const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: BI.text }, data: [] }])
const yAxis1 = [{ type: 'value', axisLabel: { color: BI.text } }]

const fetchData = () => {
  productTurnoverDays()
@@ -89,41 +86,12 @@

<style scoped>
.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 0 18px 18px;
  border: 1px solid var(--bi-panel-border);
  background: var(--bi-panel-bg);
  border-radius: 8px;
  padding: 10px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
  gap: 6px;
}
</style>