style：首页图标修改

src/views/Home/Index.vue

@@ -244,7 +244,7 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY-
 				<el-card shadow="never">
 					<template #header>
 						<div class="h-3 flex justify-between">
-							<span>模具分类统计</span>
+							<span>按模具分类统计，取模具数量最多的前10项</span>
 						</div>
 					</template>
 					<Echart :options="moldTypeBarOptionsData" :height="260" />
@@ -347,6 +347,18 @@ const loading = ref(true)
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
 
+const getCssVar = (name: string, fallback: string) => {
+  if (typeof window === 'undefined') return fallback
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || fallback
+}
+
+const chartTitleColor = {
+  primary: getCssVar('--el-text-color-primary', '#303133'),
+  secondary: getCssVar('--el-text-color-secondary', '#909399'),
+  accent: getCssVar('--el-color-primary', '#409eff')
+}
+
 
 
 const productionOverviewRange = ref<string[]>([])
@@ -393,18 +405,14 @@ const deviceStatusCards = ref<DeviceStatusVO[]>([])
 const moldStatusCards = ref<DeviceStatusVO[]>([])
 const formData = ref<DeviceOperationStatus>()
 const deviceRepairLineOptions = ref<EChartsOption>({
-  title: {
-    text: '设备维修数量统计',
-    left: 'center'
-  },
   tooltip: {
     trigger: 'axis'
   },
   grid: {
     left: 40,
     right: 30,
-    bottom: 50,
+    bottom: 20,
-    top: 60,
+    top: 40,
     containLabel: true
   },
   xAxis: {
@@ -425,10 +433,6 @@ const deviceRepairLineOptions = ref<EChartsOption>({
   ]
 })
 const deviceCategoryPieOptionsData = ref<EChartsOption>({
-	title: {
-    text: '设备分类统计',
-    left: 'center'
-  },
   tooltip: {
     trigger: 'item',
     formatter: '{b}：{c}'
@@ -441,8 +445,8 @@ const deviceCategoryPieOptionsData = ref<EChartsOption>({
     {
       name: '设备类别',
       type: 'pie',
-      radius: '55%',
+      radius: '65%',
-      center: ['50%', '60%'],
+      center: ['55%', '50%'],
 	      label: {
 	        show: true,
 	        formatter: '{b}：{c}'
@@ -453,8 +457,39 @@ const deviceCategoryPieOptionsData = ref<EChartsOption>({
 
 const moldTypeBarOptionsData = ref<EChartsOption>({
   title: {
-    text: '模具分类统计',
+    left: 18,
-    left: 'center'
+    top: 10,
+    textStyle: {
+      rich: {
+        bar: {
+          width: 4,
+          height: 16,
+          backgroundColor: chartTitleColor.accent,
+          borderRadius: 2
+        },
+        title: {
+          fontSize: 16,
+          fontWeight: 700,
+          lineHeight: 18,
+          color: chartTitleColor.primary
+        }
+      }
+    },
+    subtextStyle: {
+      rich: {
+        barSub: {
+          width: 4,
+          height: 12,
+          backgroundColor: chartTitleColor.accent,
+          borderRadius: 2
+        },
+        sub: {
+          fontSize: 12,
+          lineHeight: 14,
+          color: chartTitleColor.secondary
+        }
+      }
+    }
   },
   tooltip: {
     trigger: 'axis',
@@ -465,8 +500,8 @@ title: {
   grid: {
     left: 40,
     right: 20,
-    bottom: 30,
+    bottom: 10,
-    top: 60,
+    top: 40,
     containLabel: true
   },
   xAxis: {
@@ -474,6 +509,16 @@ title: {
     // data: ['一车间', '二车间', '三车间', '四车间', '五车间'],
     axisTick: {
       alignWithLabel: true
+    },
+    axisLabel: {
+      rotate: 35,
+      interval: 0,
+      margin: 14,
+      color: chartTitleColor.secondary,
+      formatter: (value: string) => {
+        const v = String(value ?? '')
+        return v.length > 10 ? `${v.slice(0, 10)}…` : v
+      }
     }
   },
   yAxis: {