From 202f43724fb26f0c8bfc24583a34bed35bd0bfaa Mon Sep 17 00:00:00 2001
From: ZhaoYang <565837861@qq.com>
Date: Wed, 11 Feb 2026 18:43:26 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=86=E5=8C=96=EF=BC=8C=E8=B0=83=E6=95=B4=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chenhai-ui/src/views/syd.vue | 1464 ++++++++++++++++++++++++++--------
 1 file changed, 1114 insertions(+), 350 deletions(-)

diff --git a/chenhai-ui/src/views/syd.vue b/chenhai-ui/src/views/syd.vue
index 7b4e2e8..5e77f0f 100644
--- a/chenhai-ui/src/views/syd.vue
+++ b/chenhai-ui/src/views/syd.vue
@@ -1,64 +1,260 @@
 <template>
-  <div class="app-container">
-<!--    统计-->
-
-
-    <!-- 消息通知 -->
-    <div class="info-container">
-      <div class="card-container">
-        <div class="info-card stat-card"
+  <div class="box">
+    <!-- 消息通知卡片区 - 优化版 -->
+    <div class="notification-section">
+      <div class="notification-header">
+        <h2 class="section-title">
+          <i class="el-icon-bell"></i> 消息通知
+          <span class="title-tag">最新动态</span>
+        </h2>
+        <el-button type="text" icon="el-icon-view" @click="$router.push('/vet-info/VetNotification')">
+          查看全部
+        </el-button>
+      </div>
+      
+      <div class="notification-grid">
+        <!-- 通知卡片 - 动态变色 -->
+        <div class="notification-card-main" 
              @click="$router.push('/vet-info/VetNotification')"
-             :class="{ shake: tjzs.unreadCount > 0 }"
+             :class="{
+               'has-unread': tjzs.unreadCount > 0,
+               'no-unread': !tjzs.unreadCount
+             }"
         >
-          <img class="info-icon" :src="require('@/assets/images/tongzhi.png')">
-          <div class="info-content">
-            <span class="info-title">通知</span>
-            <div class="status-container">
-              <div class="status-row">
-                <span class="status-text">未读：{{  tjzs.unreadCount || 0 }}</span>
+          <div class="notification-icon-wrapper">
+            <div class="notification-icon-bg">
+              <i class="el-icon-bell" v-if="tjzs.unreadCount > 0"></i>
+              <i class="el-icon-message" v-else></i>
+            </div>
+            <span class="notification-badge" v-if="tjzs.unreadCount > 0">{{ tjzs.unreadCount }}</span>
+          </div>
+          <div class="notification-content">
+            <div class="notification-title">
+              {{ tjzs.unreadCount > 0 ? '您有新的通知' : '暂无新通知' }}
+              <span class="notification-sub">{{ tjzs.unreadCount > 0 ? '待处理' : '全部已读' }}</span>
+            </div>
+            <div class="notification-stats">
+              <div class="stat-dot" :class="{ 'unread': tjzs.unreadCount > 0, 'read': !tjzs.unreadCount }"></div>
+              <span>未读：{{ tjzs.unreadCount || 0 }}</span>
+              <span class="stat-divider">|</span>
+              <span>已读：{{ tjzs.readCount || 0 }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 总数卡片 -->
+        <div class="stat-card stat-card-total">
+          <div class="stat-card-inner">
+            <div class="stat-icon-wrapper">
+              <div class="stat-icon icon-total">
+                <i class="el-icon-message"></i>
               </div>
-              <div class="status-row">
-                <span class="status-text">已读：{{ tjzs.readCount || 0 }}</span>
+            </div>
+            <div class="stat-info-wrapper">
+              <div class="stat-label">通知总数</div>
+              <div class="stat-value">{{ tjzs.totalCount || 0 }}</div>
+              <div class="stat-trend">
+                <i class="el-icon-arrow-up"></i> 累计通知
               </div>
             </div>
           </div>
         </div>
-        <div class="stat-card">
-          <div class="card-icon icon-total">
-            <i class="el-icon-message"></i>
+
+        <!-- 已读卡片 -->
+        <div class="stat-card stat-card-read">
+          <div class="stat-card-inner">
+            <div class="stat-icon-wrapper">
+              <div class="stat-icon icon-read">
+                <i class="el-icon-check"></i>
+              </div>
+            </div>
+            <div class="stat-info-wrapper">
+              <div class="stat-label">已读通知</div>
+              <div class="stat-value">{{ tjzs.readCount || 0 }}</div>
+              <div class="stat-trend positive">
+                <i class="el-icon-top"></i> 已处理
+              </div>
+            </div>
           </div>
-          <div class="card-text">
-            <div class="card-title">总数</div>
-            <div class="card-value">{{ tjzs.totalCount || 0 }}</div>
+        </div>
+
+        <!-- 未读卡片 -->
+        <div class="stat-card stat-card-unread">
+          <div class="stat-card-inner">
+            <div class="stat-icon-wrapper">
+              <div class="stat-icon icon-unread">
+                <i class="el-icon-bell"></i>
+              </div>
+            </div>
+            <div class="stat-info-wrapper">
+              <div class="stat-label">未读通知</div>
+              <div class="stat-value">{{ tjzs.unreadCount || 0 }}</div>
+              <div class="stat-trend warning">
+                <i class="el-icon-warning"></i> 待处理
+              </div>
+            </div>
           </div>
         </div>
-        <div class="stat-card">
-          <div class="card-icon icon-pending">
-            <i class="el-icon-check"></i>
+      </div>
+    </div>
+
+    <!-- 数据可视化仪表板 - 优化版 -->
+    <div class="dashboard-section">
+      <div class="dashboard-header">
+        <div class="header-left">
+          <h2 class="section-title">
+            <i class="el-icon-data-analysis"></i> 数据仪表板
+            <span class="title-tag">实时统计</span>
+          </h2>
+        </div>
+        <div class="header-right">
+          <el-radio-group v-model="dashboardTimeRange" size="small" class="time-radio-group">
+            <el-radio-button label="7">近7天</el-radio-button>
+            <el-radio-button label="30">近30天</el-radio-button>
+            <el-radio-button label="90">近90天</el-radio-button>
+          </el-radio-group>
+          <el-button size="small" icon="el-icon-refresh" circle @click="refreshCharts" class="refresh-btn"></el-button>
+        </div>
+      </div>
+
+      <!-- 第一行：通知状态 + 申请趋势 -->
+      <div class="chart-grid two-cols">
+        <!-- 通知状态环形图卡片 -->
+        <div class="chart-card gradient-blue">
+          <div class="chart-card-header">
+            <div class="header-title">
+              <i class="el-icon-pie-chart"></i>
+              <span>通知状态分布</span>
+            </div>
+            <el-tooltip content="已读与未读通知占比" placement="top">
+              <i class="el-icon-info chart-info-icon"></i>
+            </el-tooltip>
           </div>
-          <div class="card-text">
-            <div class="card-title">已读</div>
-            <div class="card-value">{{ tjzs.readCount || 0 }}</div>
+          <div class="chart-card-body">
+            <div id="notificationChart" style="width: 100%; height: 240px;"></div>
+          </div>
+          <div class="chart-card-footer">
+            <div class="footer-stat">
+              <span class="dot" style="background: #ff6b6b;"></span>
+              <span>未读</span>
+              <strong>{{ tjzs.unreadCount || 0 }}</strong>
+            </div>
+            <div class="footer-stat">
+              <span class="dot" style="background: #51cf66;"></span>
+              <span>已读</span>
+              <strong>{{ tjzs.readCount || 0 }}</strong>
+            </div>
+            <div class="footer-stat">
+              <span class="dot" style="background: #339af0;"></span>
+              <span>总计</span>
+              <strong>{{ tjzs.totalCount || 0 }}</strong>
+            </div>
           </div>
         </div>
-        <div class="stat-card">
-          <div class="card-icon icon-handled">
-            <i class="el-icon-bell"></i>
+
+        <!-- 资质申请趋势卡片 -->
+        <div class="chart-card gradient-purple">
+          <div class="chart-card-header">
+            <div class="header-title">
+              <i class="el-icon-data-line"></i>
+              <span>资质申请趋势</span>
+            </div>
+            <el-select v-model="trendTimeRange" size="mini" class="chart-select" @change="updateTrendChart">
+              <el-option label="近7天" value="7"></el-option>
+              <el-option label="近30天" value="30"></el-option>
+              <el-option label="近90天" value="90"></el-option>
+            </el-select>
           </div>
-          <div class="card-text">
-            <div class="card-title">未读</div>
-            <div class="card-value">{{  tjzs.unreadCount || 0 }}</div>
+          <div class="chart-card-body">
+            <div id="trendChart" style="width: 100%; height: 240px;"></div>
           </div>
         </div>
       </div>
-    </div>
-
-<!--    可视化-->
-
 
+      <!-- 第二行：资质分布 + 关键指标 -->
+      <div class="chart-grid two-cols">
+        <!-- 资质类型分布卡片 -->
+        <div class="chart-card gradient-green">
+          <div class="chart-card-header">
+            <div class="header-title">
+              <i class="el-icon-collection"></i>
+              <span>资质类型分布</span>
+            </div>
+            <el-tooltip content="各类兽医资质占比" placement="top">
+              <i class="el-icon-info chart-info-icon"></i>
+            </el-tooltip>
+          </div>
+          <div class="chart-card-body">
+            <div id="qualificationChart" style="width: 100%; height: 260px;"></div>
+          </div>
+        </div>
 
+        <!-- 关键指标卡片 -->
+        <div class="chart-card kpi-card">
+          <div class="chart-card-header">
+            <div class="header-title">
+              <i class="el-icon-data-board"></i>
+              <span>关键运营指标</span>
+            </div>
+            <el-tag size="mini" type="success" effect="dark">实时</el-tag>
+          </div>
+          <div class="chart-card-body">
+            <div class="kpi-grid">
+              <div class="kpi-item">
+                <div class="kpi-icon-bg" style="background: linear-gradient(145deg, #667eea, #764ba2);">
+                  <i class="el-icon-user"></i>
+                </div>
+                <div class="kpi-content">
+                  <div class="kpi-label">平台用户</div>
+                  <div class="kpi-value">{{ platformUserValue.toLocaleString() }}</div>
+                  <div class="kpi-trend positive">
+                    <i class="el-icon-top"></i> +12.5%
+                  </div>
+                </div>
+              </div>
+              <div class="kpi-item">
+                <div class="kpi-icon-bg" style="background: linear-gradient(145deg, #f093fb, #f5576c);">
+                  <i class="el-icon-user-solid"></i>
+                </div>
+                <div class="kpi-content">
+                  <div class="kpi-label">牧户人数</div>
+                  <div class="kpi-value">{{ herdsmanCount }}</div>
+                  <div class="kpi-trend positive">
+                    <i class="el-icon-top"></i> +8.2%
+                  </div>
+                </div>
+              </div>
+              <div class="kpi-item">
+                <div class="kpi-icon-bg" style="background: linear-gradient(145deg, #4facfe, #00f2fe);">
+                  <i class="el-icon-first-aid-kit"></i>
+                </div>
+                <div class="kpi-content">
+                  <div class="kpi-label">兽医人数</div>
+                  <div class="kpi-value">{{ vetCount }}</div>
+                  <div class="kpi-trend negative">
+                    <i class="el-icon-bottom"></i> -3.1%
+                  </div>
+                </div>
+              </div>
+              <div class="kpi-item">
+                <div class="kpi-icon-bg" style="background: linear-gradient(145deg, #43e97b, #38f9d7);">
+                  <i class="el-icon-shopping-bag-1"></i>
+                </div>
+                <div class="kpi-content">
+                  <div class="kpi-label">店铺数量</div>
+                  <div class="kpi-value">{{ shopCount }}</div>
+                  <div class="kpi-trend positive">
+                    <i class="el-icon-top"></i> +5.7%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
-    <!-- 资质弹窗 -->
+    <!-- 资质弹窗 (保持不变) -->
     <el-dialog :title="title" :visible.sync="flag" width="80%" append-to-body>
       <el-steps :active="activeStep" finish-status="success" simple style="margin-bottom: 40px;">
         <el-step title="选择经营范围"></el-step>
@@ -345,6 +541,7 @@
 <script>
 import { submitAuditQualification, getQualificationTypeOptions, getScopeOptions, getQualificationStatus } from "../api/vet/qualification";
 import { getStatsCard } from "../api/vet/notification";
+import * as echarts from 'echarts';
 
 export default {
   name: "Syd",
@@ -388,12 +585,27 @@ export default {
           {required: true, type: 'array', message: "请选择至少一个经营范围", trigger: "change"}
         ],
       },
-      // 各统计项的数值（可根据实际接口返回值替换）
-      platformUserValue: 12589.68, // 平台用户使用情况数值
-      herdsmanCount: "456/2", // 牧户人数（示例值，可替换为动态数据）
-      vetCount: 89.50, // 兽医人数
-      shopCount: 521, // 店铺数量
-      refreshing: false, // 店铺数量刷新状态
+      // 图表相关数据
+      trendTimeRange: "7",
+      dashboardTimeRange: "7",
+      notificationChart: null,
+      trendChart: null,
+      qualificationChart: null,
+      
+      // 各统计项的数值
+      platformUserValue: 12589.68,
+      herdsmanCount: "456/2",
+      vetCount: 89.50,
+      shopCount: 521,
+      
+      // 资质类型分布模拟数据
+      qualificationTypeData: [
+        { name: '执业兽医', value: 120 },
+        { name: '乡村兽医', value: 85 },
+        { name: '官方兽医', value: 45 },
+        { name: '高级兽医师', value: 32 },
+        { name: '中级兽医师', value: 68 }
+      ]
     }
   },
   created() {
@@ -401,11 +613,31 @@ export default {
     this.getcountSummary();
     this.getQualStatusAndHandle();
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts();
+    });
+  },
+  beforeDestroy() {
+    // 销毁图表实例
+    if (this.notificationChart) {
+      this.notificationChart.dispose();
+    }
+    if (this.trendChart) {
+      this.trendChart.dispose();
+    }
+    if (this.qualificationChart) {
+      this.qualificationChart.dispose();
+    }
+    window.removeEventListener('resize', this.handleResize);
+  },
   methods: {
     /** 获取通知数据 */
     getcountSummary() {
       getStatsCard().then(res => {
-        this.tjzs = res.data
+        this.tjzs = res.data;
+        // 更新图表数据
+        this.updateNotificationChart();
       })
     },
 
@@ -414,6 +646,8 @@ export default {
       const fetchData = async () => {
         const qtypeRes = await getQualificationTypeOptions();
         this.qualificationTypeOptions = qtypeRes.data;
+        // 更新资质类型分布图表
+        this.updateQualificationChart();
 
         const scopeRes = await getScopeOptions();
         this.scopeOptions = scopeRes.data;
@@ -501,8 +735,6 @@ export default {
         this.$message.success('提交成功，请等待审核');
         this.flag = false;
         setTimeout(() => {
-          // this.$router.push('/vet-info/VetPersonallnfo');
-          // this.$message.warning('请完善您的个人信息')
           this.$router.push({
             path: '/vet-info/VetPersonallnfo',
             query: { needCompleteInfo: 'true' }
@@ -527,7 +759,7 @@ export default {
       }
     },
 
-    //  添加证书
+    // 添加证书
     addCertificate() {
       this.qualificationForm.certificateslist.push({
         certName: '',
@@ -538,116 +770,829 @@ export default {
         certificateFiles: ''
       });
     },
+
+    /** 初始化图表 */
+    initCharts() {
+      // 初始化通知状态环形图
+      this.notificationChart = echarts.init(document.getElementById('notificationChart'));
+      
+      // 初始化趋势图
+      this.trendChart = echarts.init(document.getElementById('trendChart'));
+      
+      // 初始化资质类型分布图
+      this.qualificationChart = echarts.init(document.getElementById('qualificationChart'));
+      
+      // 更新所有图表
+      this.updateNotificationChart();
+      this.updateTrendChart();
+      this.updateQualificationChart();
+      
+      // 监听窗口大小变化，重新调整图表大小
+      window.addEventListener('resize', this.handleResize);
+    },
+
+    handleResize() {
+      if (this.notificationChart) this.notificationChart.resize();
+      if (this.trendChart) this.trendChart.resize();
+      if (this.qualificationChart) this.qualificationChart.resize();
+    },
+    
+    /** 更新通知状态环形图 */
+    updateNotificationChart() {
+      if (!this.notificationChart) return;
+      
+      const unreadCount = this.tjzs.unreadCount || 0;
+      const readCount = this.tjzs.readCount || 0;
+      const totalCount = this.tjzs.totalCount || (unreadCount + readCount);
+      
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}: {c} ({d}%)'
+        },
+        legend: {
+          show: false
+        },
+        series: [
+          {
+            name: '通知状态',
+            type: 'pie',
+            radius: ['55%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: '{b}\n{d}%',
+              color: '#606266',
+              fontSize: 12
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 14,
+                fontWeight: 'bold'
+              }
+            },
+            data: [
+              { 
+                value: unreadCount, 
+                name: '未读通知', 
+                itemStyle: { color: '#ff6b6b' } 
+              },
+              { 
+                value: readCount, 
+                name: '已读通知', 
+                itemStyle: { color: '#51cf66' } 
+              }
+            ]
+          }
+        ]
+      };
+      
+      this.notificationChart.setOption(option);
+    },
+    
+    /** 更新趋势图 */
+    updateTrendChart() {
+      if (!this.trendChart) return;
+      
+      // 根据选择的时间范围生成数据
+      const days = parseInt(this.trendTimeRange);
+      const dates = [];
+      const applicationData = [];
+      const approvalData = [];
+      
+      for (let i = days - 1; i >= 0; i--) {
+        const date = new Date();
+        date.setDate(date.getDate() - i);
+        dates.push(`${date.getMonth() + 1}.${date.getDate()}`);
+        applicationData.push(Math.floor(Math.random() * 20) + 10);
+        approvalData.push(Math.floor(Math.random() * 15) + 5);
+      }
+      
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          data: ['资质申请', '审核通过'],
+          orient: 'horizontal',
+          right: 10,
+          top: 0,
+          itemWidth: 10,
+          itemHeight: 10,
+          borderRadius: 4
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          top: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: dates,
+          axisLine: {
+            lineStyle: {
+              color: '#dcdfe6'
+            }
+          },
+          axisLabel: {
+            fontSize: 11
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '数量',
+          nameTextStyle: {
+            fontSize: 12,
+            color: '#909399'
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: '#e9e9e9'
+            }
+          }
+        },
+        series: [
+          {
+            name: '资质申请',
+            type: 'bar',
+            barWidth: '30%',
+            itemStyle: {
+              borderRadius: [4, 4, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#5470c6' },
+                { offset: 1, color: '#91a7ff' }
+              ])
+            },
+            data: applicationData
+          },
+          {
+            name: '审核通过',
+            type: 'bar',
+            barWidth: '30%',
+            itemStyle: {
+              borderRadius: [4, 4, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#91cc75' },
+                { offset: 1, color: '#bae7a4' }
+              ])
+            },
+            data: approvalData
+          }
+        ]
+      };
+      
+      this.trendChart.setOption(option);
+    },
+    
+    /** 更新资质类型分布图 */
+    updateQualificationChart() {
+      if (!this.qualificationChart) return;
+      
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          top: '8%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: 11
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: ['执业兽医', '乡村兽医', '官方兽医', '高级兽医师', '中级兽医师'],
+          axisLabel: {
+            fontSize: 12,
+            fontWeight: 500,
+            color: '#606266'
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {
+            name: '人数',
+            type: 'bar',
+            barWidth: 12,
+            data: [120, 85, 45, 32, 68],
+            label: {
+              show: true,
+              position: 'right',
+              color: '#409EFF',
+              fontWeight: 'bold',
+              fontSize: 12
+            },
+            itemStyle: {
+              borderRadius: [0, 6, 6, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: '#409EFF' },
+                { offset: 0.5, color: '#6ab7ff' },
+                { offset: 1, color: '#91ccff' }
+              ])
+            }
+          }
+        ]
+      };
+      
+      this.qualificationChart.setOption(option);
+    },
+    
+    /** 刷新图表数据 */
+    refreshCharts() {
+      this.$message({
+        message: '正在刷新数据...',
+        type: 'info',
+        duration: 1000
+      });
+      
+      // 重新获取统计数据
+      this.getcountSummary();
+      
+      // 更新趋势图
+      this.updateTrendChart();
+      
+      // 模拟数据更新
+      setTimeout(() => {
+        this.platformUserValue += Math.floor(Math.random() * 100);
+        this.vetCount += Math.floor(Math.random() * 10);
+        this.shopCount += Math.floor(Math.random() * 5);
+        
+        this.$message({
+          message: '数据刷新完成',
+          type: 'success',
+          duration: 1500
+        });
+      }, 800);
+    }
+  },
+  watch: {
+    dashboardTimeRange(val) {
+      this.trendTimeRange = val;
+      this.updateTrendChart();
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-/* 轮播背景 */
-.card-container {
-  display: flex;
-  gap: 20px;
+/* 全局样式 */
+.box {
+  background-color: #f6f9fc;
+  min-height: 100vh;
   padding: 20px;
 }
 
-.stat-card {
-  flex: 1;
-  min-width: 0;
-  padding: 30px 20px;
-  border: 1px solid #e5e6eb;
-  border-radius: 16px;
+/* 通知区域样式 */
+.notification-section {
   background: #fff;
+  border-radius: 20px;
+  padding: 24px 28px;
+  margin-bottom: 24px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.notification-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  margin-bottom: 24px;
+}
+
+.section-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 12px;
+    color: #409EFF;
+    font-size: 22px;
+  }
+}
+
+.title-tag {
+  font-size: 12px;
+  font-weight: 400;
+  color: #909399;
+  margin-left: 12px;
+  padding: 2px 8px;
+  background: #f0f2f5;
+  border-radius: 20px;
+}
+
+.notification-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 20px;
+}
+
+/* 主通知卡片 - 动态变色 */
+.notification-card-main {
+  grid-column: span 1;
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 16px;
   cursor: pointer;
   transition: all 0.3s ease;
-  min-height: 180px;
-  transform-origin: center center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+  
+  &.has-unread {
+    background: linear-gradient(145deg, #fff2f0, #ffe7e7);
+    border-left: 6px solid #ff6b6b;
+    animation: softPulse 2s infinite;
+    
+    .notification-title {
+      color: #c92a2a;
+    }
+  }
+  
+  &.no-unread {
+    background: linear-gradient(145deg, #f0f9ff, #e6f4ff);
+    border-left: 6px solid #339af0;
+    
+    .notification-title {
+      color: #1971c2;
+    }
+  }
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+  }
+}
 
+.notification-icon-wrapper {
+  position: relative;
+  margin-right: 16px;
+}
+
+.notification-icon-bg {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  
+  i {
+    font-size: 28px;
+    
+    .has-unread & {
+      color: #ff6b6b;
+    }
+    
+    .no-unread & {
+      color: #339af0;
+    }
+  }
+}
+
+.notification-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 6px;
+  background: #ff6b6b;
+  color: white;
+  border-radius: 20px;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
+}
+
+.notification-content {
+  flex: 1;
+}
+
+.notification-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.notification-sub {
+  font-size: 12px;
+  font-weight: 400;
+  padding: 2px 8px;
+  border-radius: 20px;
+  background: rgba(0, 0, 0, 0.04);
+  
+  .has-unread & {
+    background: rgba(255, 107, 107, 0.1);
+  }
+  
+  .no-unread & {
+    background: rgba(51, 154, 240, 0.1);
+  }
+}
+
+.notification-stats {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #5a6a7e;
+  
+  .stat-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-right: 8px;
+    
+    &.unread {
+      background: #ff6b6b;
+      box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
+    }
+    
+    &.read {
+      background: #51cf66;
+      box-shadow: 0 0 0 2px rgba(81, 207, 102, 0.2);
+    }
+  }
+  
+  .stat-divider {
+    margin: 0 10px;
+    color: #d0d7dd;
+  }
+}
+
+/* 统计卡片 */
+.stat-card {
+  background: #fff;
+  border-radius: 16px;
+  transition: all 0.3s ease;
+  border: 1px solid #f0f0f0;
+  
   &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+  }
+  
+  &-total {
+    background: linear-gradient(145deg, #fff7e6, #fff2db);
+  }
+  
+  &-read {
+    background: linear-gradient(145deg, #e8f5e9, #dff0df);
+  }
+  
+  &-unread {
+    background: linear-gradient(145deg, #ffebee, #ffe4e4);
   }
 }
 
-.info-card.stat-card {
-  background-color: #bbdefb;
-  color: #0d47a1;
+.stat-card-inner {
   display: flex;
   align-items: center;
-  justify-content: space-around;
   padding: 20px;
 }
 
-.shake {
-  animation: cardShake 1s infinite linear;
-  background-color: #f4b1bc !important;
+.stat-icon-wrapper {
+  margin-right: 16px;
 }
 
-.info-card .info-icon {
-  width: 60%;
-  cursor: pointer;
+.stat-icon {
+  width: 54px;
+  height: 54px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  i {
+    font-size: 26px;
+    color: white;
+  }
+  
+  &.icon-total {
+    background: linear-gradient(145deg, #ff9a44, #ff6b08);
+    box-shadow: 0 6px 12px rgba(255, 107, 8, 0.2);
+  }
+  
+  &.icon-read {
+    background: linear-gradient(145deg, #51cf66, #37b24d);
+    box-shadow: 0 6px 12px rgba(81, 207, 102, 0.2);
+  }
+  
+  &.icon-unread {
+    background: linear-gradient(145deg, #ff6b6b, #fa5252);
+    box-shadow: 0 6px 12px rgba(255, 107, 107, 0.2);
+  }
+}
+
+.stat-info-wrapper {
+  flex: 1;
 }
 
-.info-card .info-title {
+.stat-label {
+  font-size: 14px;
+  color: #5a6a7e;
+  margin-bottom: 6px;
+}
+
+.stat-value {
   font-size: 28px;
-  font-weight: bold;
-  color: #06358c;
-  margin-bottom: 0;
-  text-align: center;
-  cursor: pointer;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.2;
+  margin-bottom: 6px;
 }
 
-.card-icon {
-  width: 60px;
-  height: 60px;
-  border-radius: 8px;
+.stat-trend {
+  font-size: 12px;
+  color: #7c8b9c;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-right: 20px;
+  
+  i {
+    margin-right: 4px;
+  }
+  
+  &.positive {
+    color: #51cf66;
+  }
+  
+  &.warning {
+    color: #ff922b;
+  }
 }
 
-.card-icon i {
-  font-size: 30px;
-  color: #fff;
+/* 仪表板区域 */
+.dashboard-section {
+  background: #fff;
+  border-radius: 20px;
+  padding: 24px 28px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
 }
 
-.card-text {
+.dashboard-header {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
+  margin-bottom: 24px;
 }
 
-.card-title {
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.time-radio-group {
+  :deep(.el-radio-button__inner) {
+    padding: 8px 18px;
+    font-size: 13px;
+  }
+}
+
+.refresh-btn {
+  background: #f0f2f5;
+  border: none;
+  
+  &:hover {
+    background: #e4e7ed;
+    transform: rotate(180deg);
+    transition: transform 0.6s ease;
+  }
+}
+
+/* 图表网格 */
+.chart-grid {
+  display: grid;
+  gap: 24px;
+  margin-bottom: 24px;
+  
+  &.two-cols {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* 图表卡片 */
+.chart-card {
+  background: #fff;
+  border-radius: 20px;
+  padding: 20px;
+  transition: all 0.3s ease;
+  border: 1px solid #f0f4f8;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
+    border-color: transparent;
+  }
+  
+  &.gradient-blue {
+    background: linear-gradient(145deg, #fff, #f9fcff);
+  }
+  
+  &.gradient-purple {
+    background: linear-gradient(145deg, #fff, #faf9ff);
+  }
+  
+  &.gradient-green {
+    background: linear-gradient(145deg, #fff, #f9fffb);
+  }
+}
+
+.chart-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f4f8;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
   font-size: 16px;
-  color: #333;
-  margin-bottom: 8px;
+  color: #2c3e50;
+  
+  i {
+    margin-right: 10px;
+    color: #409EFF;
+    font-size: 18px;
+  }
 }
 
-.card-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #333;
+.chart-info-icon {
+  color: #a0b3c2;
+  font-size: 16px;
+  cursor: pointer;
+  
+  &:hover {
+    color: #409EFF;
+  }
 }
 
-.icon-total {
-  background: linear-gradient(135deg, #ff9a44 0%, #ff6b08 100%);
+.chart-select {
+  width: 100px;
 }
 
-.icon-pending {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+.chart-card-body {
+  min-height: 240px;
 }
 
-.icon-handled {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+.chart-card-footer {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f4f8;
 }
 
-/* 资质弹窗 */
-/* 经营范围 */
+.footer-stat {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+  
+  strong {
+    font-size: 16px;
+    color: #1e293b;
+    margin-left: 6px;
+  }
+}
+
+/* KPI卡片特殊样式 */
+.kpi-card {
+  background: linear-gradient(145deg, #fff, #fafcff);
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.kpi-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #fff;
+  border-radius: 16px;
+  transition: all 0.2s ease;
+  border: 1px solid #f0f4f8;
+  
+  &:hover {
+    background: #f9fcff;
+    border-color: #409EFF;
+    transform: scale(1.02);
+  }
+}
+
+.kpi-icon-bg {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  
+  i {
+    font-size: 22px;
+    color: white;
+  }
+}
+
+.kpi-content {
+  flex: 1;
+}
+
+.kpi-label {
+  font-size: 12px;
+  color: #7c8b9c;
+  margin-bottom: 4px;
+}
+
+.kpi-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 4px;
+}
+
+.kpi-trend {
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  
+  &.positive {
+    color: #51cf66;
+  }
+  
+  &.negative {
+    color: #ff6b6b;
+  }
+  
+  i {
+    margin-right: 2px;
+  }
+}
+
+/* 资质弹窗样式 (保持原样) */
 .scope-choice {
   color: #b6bbc6;
   font-size: 12px;
@@ -693,106 +1638,6 @@ export default {
   margin-bottom: 5px;
 }
 
-.uploaded-files {
-  margin-top: 15px;
-  padding: 10px;
-  background: #f5f7fa;
-  border-radius: 4px;
-}
-
-.file-list-title {
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: #303133;
-}
-
-.file-item {
-  padding: 5px 0;
-  color: #606266;
-  display: flex;
-  align-items: center;
-
-  i {
-    margin-right: 5px;
-    color: #409EFF;
-  }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .card-container {
-    flex-direction: column;
-    padding: 10px;
-    gap: 15px;
-  }
-
-  .stat-card {
-    min-height: 150px;
-    padding: 20px 15px;
-  }
-
-  .card-icon {
-    width: 50px;
-    height: 50px;
-    margin-right: 15px;
-
-    i {
-      font-size: 24px;
-    }
-  }
-
-  .info-card .info-icon {
-    width: 40px;
-    height: 40px;
-  }
-
-  .info-card .info-title {
-    font-size: 20px;
-  }
-
-  .card-value {
-    font-size: 20px;
-  }
-}
-
-/* 抖动动画 */
-@keyframes cardShake {
-  0% {
-    transform: translateX(0);
-  }
-  10% {
-    transform: translateX(-5px) translateY(-2px);
-  }
-  20% {
-    transform: translateX(5px) translateY(2px);
-  }
-  30% {
-    transform: translateX(-5px) translateY(-2px);
-  }
-  40% {
-    transform: translateX(5px) translateY(2px);
-  }
-  50% {
-    transform: translateX(-3px) translateY(-1px);
-  }
-  60% {
-    transform: translateX(3px) translateY(1px);
-  }
-  70% {
-    transform: translateX(-3px) translateY(-1px);
-  }
-  80% {
-    transform: translateX(3px) translateY(1px);
-  }
-  90% {
-    transform: translateX(-2px) translateY(0);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-/* 证书上传样式 */
 .certificate-upload-container {
   max-height: 500px;
   overflow-y: auto;
@@ -811,10 +1656,6 @@ export default {
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     border-color: #409EFF;
   }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .certificate-header {
@@ -832,95 +1673,6 @@ export default {
   color: #333;
 }
 
-.certificate-form {
-  margin-top: 15px;
-}
-
-.file-upload-area {
-  margin-bottom: 10px;
-}
-
-.file-info {
-  margin-top: 10px;
-  padding: 10px;
-  background: #f8f9fa;
-  border-radius: 4px;
-  border: 1px solid #e9ecef;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .file-name {
-    flex: 1;
-    margin-left: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .file-size {
-    color: #909399;
-    font-size: 12px;
-    margin: 0 15px;
-  }
-
-  .file-link {
-    color: #409EFF;
-    text-decoration: none;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.upload-progress {
-  margin-top: 10px;
-
-  .progress-text {
-    display: block;
-    text-align: center;
-    color: #67C23A;
-    font-size: 12px;
-    margin-top: 5px;
-  }
-}
-
-.upload-tip {
-  color: #909399;
-  font-size: 12px;
-  margin-top: 5px;
-}
-
-.file-preview {
-  margin-top: 15px;
-  padding-top: 15px;
-  border-top: 1px dashed #e6e6e6;
-
-  .preview-title {
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #606266;
-  }
-
-  .preview-image {
-    max-width: 200px;
-    max-height: 200px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: transform 0.3s ease;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-}
-
 .add-certificate-btn {
   text-align: center;
   padding: 20px;
@@ -943,7 +1695,6 @@ export default {
   }
 }
 
-/* 审核预览样式 */
 .certificate-review {
   padding: 15px;
   background: #fff;
@@ -966,40 +1717,70 @@ export default {
   }
 }
 
-.preview-thumbnail {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  cursor: pointer;
-  margin-top: 10px;
+/* 动画效果 */
+@keyframes softPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
+  }
+}
 
-  .thumbnail-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
-    border: 1px solid #ddd;
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .notification-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
+  
+  .chart-grid.two-cols {
+    grid-template-columns: 1fr;
+  }
+  
+  .kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 
-  .thumbnail-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
+@media (max-width: 768px) {
+  .box {
+    padding: 12px;
+  }
+  
+  .notification-section,
+  .dashboard-section {
+    padding: 18px;
+  }
+  
+  .notification-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .notification-card-main {
+    grid-column: span 1;
+  }
+  
+  .dashboard-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .header-right {
     width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    border-radius: 4px;
-    font-size: 12px;
+    justify-content: space-between;
   }
-
-  &:hover .thumbnail-overlay {
-    opacity: 1;
+  
+  .kpi-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .chart-card-footer {
+    flex-wrap: wrap;
+    gap: 12px;
   }
 }
 
@@ -1021,21 +1802,4 @@ export default {
 .certificate-upload-container::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
 }
-
-// 统计
-.statistics-container {
-  padding: 20px;
-  background-color: #f5f7fa;
-  border-radius: 8px;
-}
-.statistic-card {
-  background: #fff;
-  padding: 16px;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-.shop-icon {
-  cursor: pointer;
-  margin-left: 8px;
-}
-</style>
+</style>
\ No newline at end of file