From e11f3af894197fc233eff0a925b9b97a11d20dc5 Mon Sep 17 00:00:00 2001
From: ZhaoYang <565837861@qq.com>
Date: Mon, 13 Apr 2026 18:37:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BF=94=E5=9B=9E=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E8=B7=B3=E8=BD=AC=E8=8B=A5=E4=BE=9D=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=963=E4=B8=AA=E5=8F=AF=E8=A7=86?=
 =?UTF-8?q?=E5=8C=96=E5=A4=A7=E5=B1=8F=EF=BC=8C=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chenhai-ui/src/components/visual/jkjc.vue | 634 ++++++++--------------
 chenhai-ui/src/components/visual/sbgl.vue | 446 ++++++---------
 chenhai-ui/src/components/visual/scgk.vue | 561 ++++++++-----------
 chenhai-ui/src/router/index.js            |  21 +-
 chenhai-ui/src/views/Home.vue             |  53 +-
 chenhai-ui/src/views/login.vue            | 522 +++++++++++++-----
 6 files changed, 1065 insertions(+), 1172 deletions(-)

diff --git a/chenhai-ui/src/components/visual/jkjc.vue b/chenhai-ui/src/components/visual/jkjc.vue
index 1c248cc..947b80c 100644
--- a/chenhai-ui/src/components/visual/jkjc.vue
+++ b/chenhai-ui/src/components/visual/jkjc.vue
@@ -1,24 +1,26 @@
 <template>
   <div class="health-dashboard">
-    <!-- 主内容区域 -->
+    <!-- 主内容区域：Grid三列布局 -->
     <div class="dashboard-main">
-      <!-- 左侧：驼圈列表 -->
+      <!-- 左侧：驼圈列表 + 健康统计总览 + 健康预警 -->
       <div class="col-left">
         <div class="card pen-list-card">
           <div class="card-header">
             <span class="title">🐫 驼圈列表</span>
             <span class="sub">共 {{ pens.length }} 个圈舍</span>
           </div>
-          <div class="pen-grid">
-            <div 
-              v-for="pen in pens" 
-              :key="pen.name"
-              class="pen-item"
-              :class="{ active: selectedPen === pen.name }"
-              @click="selectPen(pen.name)"
-            >
-              <div class="pen-name">{{ pen.name }}</div>
-              <div class="pen-count">{{ pen.count }}峰</div>
+          <div class="pen-grid-wrapper">
+            <div class="pen-grid">
+              <div 
+                v-for="pen in pens" 
+                :key="pen.name"
+                class="pen-item"
+                :class="{ active: selectedPen === pen.name }"
+                @click="selectPen(pen.name)"
+              >
+                <div class="pen-name">{{ pen.name }}</div>
+                <div class="pen-count">{{ pen.count }}峰</div>
+              </div>
             </div>
           </div>
         </div>
@@ -66,20 +68,22 @@
             <span class="title">⚠️ 健康预警</span>
             <span class="badge">{{ healthAlerts.length }}</span>
           </div>
-          <div class="alert-list">
-            <div v-for="(alert, idx) in healthAlerts" :key="idx" class="alert-item">
-              <span class="alert-level" :class="alert.level">{{ alert.levelText }}</span>
-              <div class="alert-content">
-                <div class="alert-title">{{ alert.title }}</div>
-                <div class="alert-desc">{{ alert.desc }}</div>
+          <div class="alert-list-wrapper">
+            <div class="alert-list">
+              <div v-for="(alert, idx) in healthAlerts" :key="idx" class="alert-item">
+                <span class="alert-level" :class="alert.level">{{ alert.levelText }}</span>
+                <div class="alert-content">
+                  <div class="alert-title">{{ alert.title }}</div>
+                  <div class="alert-desc">{{ alert.desc }}</div>
+                </div>
+                <span class="alert-time">{{ alert.time }}</span>
               </div>
-              <span class="alert-time">{{ alert.time }}</span>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 中间：驼圈详情 + 健康指标趋势 -->
+      <!-- 中间：圈舍详情 + 健康指标趋势 + 个体骆驼健康数据 -->
       <div class="col-center">
         <div class="card pen-detail-card">
           <div class="card-header">
@@ -142,31 +146,33 @@
               class="search-input"
             />
           </div>
-          <div class="camel-grid">
-            <div 
-              v-for="camel in filteredCamels" 
-              :key="camel.id"
-              class="camel-item"
-              :class="{ warning: camel.healthStatus !== 'healthy' }"
-              @click="selectCamel(camel)"
-            >
-              <div class="camel-avatar">
-                <span class="camel-icon">🐪</span>
-                <span v-if="camel.healthStatus !== 'healthy'" class="warning-dot"></span>
-              </div>
-              <div class="camel-info">
-                <div class="camel-id">{{ camel.id }}</div>
-                <div class="camel-temp">{{ camel.temperature }}°C</div>
-              </div>
-              <div class="camel-status" :class="camel.healthStatus">
-                {{ getHealthStatusText(camel.healthStatus) }}
+          <div class="camel-grid-wrapper">
+            <div class="camel-grid">
+              <div 
+                v-for="camel in filteredCamels" 
+                :key="camel.id"
+                class="camel-item"
+                :class="{ warning: camel.healthStatus !== 'healthy' }"
+                @click="selectCamel(camel)"
+              >
+                <div class="camel-avatar">
+                  <span class="camel-icon">🐪</span>
+                  <span v-if="camel.healthStatus !== 'healthy'" class="warning-dot"></span>
+                </div>
+                <div class="camel-info">
+                  <div class="camel-id">{{ camel.id }}</div>
+                  <div class="camel-temp">{{ camel.temperature }}°C</div>
+                </div>
+                <div class="camel-status" :class="camel.healthStatus">
+                  {{ getHealthStatusText(camel.healthStatus) }}
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 右侧：个体骆驼详细健康报告 -->
+      <!-- 右侧：个体骆驼详细健康报告 + 健康建议 -->
       <div class="col-right">
         <div class="card health-report-card">
           <div class="card-header">
@@ -225,7 +231,7 @@
               </div>
             </div>
             
-            <div class="report-timeline">
+            <div class="report-timeline compact-timeline">
               <div class="timeline-title">📅 近期健康记录</div>
               <div class="timeline-list">
                 <div v-for="record in selectedCamel.healthRecords" :key="record.date" class="timeline-item">
@@ -244,7 +250,6 @@
           </div>
         </div>
 
-        <!-- 健康建议 -->
         <div class="card advice-card">
           <div class="card-header">
             <span class="title">💡 健康管理建议</span>
@@ -266,14 +271,12 @@
 
 <script>
 import * as echarts from 'echarts';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
 
 export default {
   name: 'HealthDashboard',
+
   data() {
     return {
-      // 驼圈数据 (根据Excel)
       pens: [
         { name: 'A1圈', count: 35 }, { name: 'A2圈', count: 35 },
         { name: 'B1圈', count: 35 }, { name: 'B2圈', count: 35 },
@@ -288,7 +291,6 @@ export default {
       ],
       selectedPen: 'A1圈',
       
-      // 健康统计数据
       healthStats: {
         totalCamels: 700,
         healthyRate: 94.2,
@@ -296,7 +298,6 @@ export default {
         warningCount: 42
       },
       
-      // 健康预警
       healthAlerts: [
         { level: 'high', levelText: '紧急', title: 'A1圈骆驼体温异常', desc: '编号A1-023体温39.2°C', time: '09:32' },
         { level: 'medium', levelText: '警告', title: 'B2圈空气质量下降', desc: '氨气浓度超标', time: '09:15' },
@@ -304,7 +305,6 @@ export default {
         { level: 'medium', levelText: '警告', title: 'E2圈饮水异常', desc: '2峰骆驼饮水次数减少', time: '07:22' }
       ],
       
-      // 圈舍健康数据
       penHealthData: {
         avgTemp: 37.5,
         airQuality: 68,
@@ -312,7 +312,6 @@ export default {
         ventilation: 3
       },
       
-      // 图表配置
       chartMetrics: [
         { key: 'temperature', name: '体温' },
         { key: 'activity', name: '活动量' },
@@ -320,19 +319,16 @@ export default {
       ],
       activeMetric: 'temperature',
       
-      // 骆驼数据 (每个圈舍35峰骆驼)
       camels: [],
       camelSearch: '',
       selectedCamel: null,
       
-      // 趋势数据
       trendData: {
         temperature: [37.2, 37.3, 37.4, 37.5, 37.6, 37.5, 37.4],
         activity: [5200, 5400, 5600, 5800, 5900, 6100, 6000],
         healthRate: [92.5, 93.1, 93.6, 93.8, 94.0, 94.1, 94.2]
       },
       
-      // 健康建议
       healthAdvice: [
         { icon: '🌡️', title: '体温监控', desc: 'A1圈有2峰骆驼体温偏高，建议隔离观察' },
         { icon: '💨', title: '通风改善', desc: 'B2圈空气质量下降，建议开启通风设备' },
@@ -340,11 +336,9 @@ export default {
         { icon: '🏃', title: '活动促进', desc: 'C1圈活动量偏低，建议增加驱赶活动' }
       ],
       
-      // ECharts实例
       healthChartIns: null,
-      
-      // 时间标签
-      timeLabels: []
+      timeLabels: [],
+      resizeObserver: null
     };
   },
   
@@ -361,31 +355,20 @@ export default {
   },
   
   mounted() {
-    this.getCurrentDateTime();
     this.initTimeLabels();
     this.initCamelData();
     this.initHealthChart();
     window.addEventListener('resize', this.handleResize);
+    this.observeChartResize();
   },
   
   beforeDestroy() {
     if (this.healthChartIns) this.healthChartIns.dispose();
+    if (this.resizeObserver) this.resizeObserver.disconnect();
     window.removeEventListener('resize', this.handleResize);
   },
   
   methods: {
-    getCurrentDateTime() {
-      const dateDom = document.querySelector('#cloudDate');
-      const timeDom = document.querySelector('#cloudTime');
-      const update = () => {
-        const now = dayjs().locale('zh-cn');
-        if (dateDom) dateDom.innerHTML = now.format('MM月DD日 dddd');
-        if (timeDom) timeDom.innerHTML = now.format('HH:mm:ss');
-      };
-      update();
-      setInterval(update, 1000);
-    },
-    
     initTimeLabels() {
       for (let i = 6; i >= 0; i--) {
         this.timeLabels.push(dayjs().subtract(i, 'day').format('MM/DD'));
@@ -393,7 +376,6 @@ export default {
     },
     
     initCamelData() {
-      // 为每个圈舍生成35峰骆驼数据
       const allCamels = [];
       const statuses = ['healthy', 'warning', 'critical'];
       const statusWeights = [0.85, 0.12, 0.03];
@@ -430,8 +412,8 @@ export default {
     
     generateHealthRecords(status) {
       const records = [];
-      const dates = [0, 1, 2, 3, 4, 5, 6];
-      for (let i = 0; i < 5; i++) {
+      const dates = [0, 1, 2, 3];
+      for (let i = 0; i < 4; i++) {
         const date = dayjs().subtract(dates[i], 'day').format('MM/DD');
         if (status === 'healthy') {
           records.push({
@@ -459,7 +441,6 @@ export default {
     selectPen(penName) {
       this.selectedPen = penName;
       this.selectedCamel = null;
-      // 更新圈舍健康数据 (模拟)
       this.penHealthData = {
         avgTemp: +(37.2 + Math.random() * 0.8).toFixed(1),
         airQuality: Math.floor(40 + Math.random() * 50),
@@ -478,11 +459,7 @@ export default {
     },
     
     getHealthStatusText(status) {
-      const map = {
-        healthy: '健康',
-        warning: '亚健康',
-        critical: '异常'
-      };
+      const map = { healthy: '健康', warning: '亚健康', critical: '异常' };
       return map[status] || '未知';
     },
     
@@ -529,22 +506,15 @@ export default {
     
     initHealthChart() {
       const chartDom = this.$refs.healthChart;
+      if (!chartDom) return;
       this.healthChartIns = echarts.init(chartDom);
       this.updateHealthChart();
     },
     
     updateHealthChart() {
       const currentData = this.trendData[this.activeMetric];
-      const unitMap = {
-        temperature: '°C',
-        activity: '步',
-        healthRate: '%'
-      };
-      const nameMap = {
-        temperature: '平均体温',
-        activity: '平均活动量',
-        healthRate: '健康率'
-      };
+      const unitMap = { temperature: '°C', activity: '步', healthRate: '%' };
+      const nameMap = { temperature: '平均体温', activity: '平均活动量', healthRate: '健康率' };
       const yAxisMin = this.activeMetric === 'healthRate' ? 90 : null;
       
       this.healthChartIns.setOption({
@@ -590,7 +560,16 @@ export default {
       this.updateHealthChart();
     },
     
-
+    observeChartResize() {
+      const chartEl = this.$refs.healthChart;
+      if (!chartEl) return;
+      this.resizeObserver = new ResizeObserver(() => {
+        setTimeout(() => {
+          if (this.healthChartIns) this.healthChartIns.resize();
+        }, 100);
+      });
+      this.resizeObserver.observe(chartEl);
+    },
     
     handleResize() {
       if (this.healthChartIns) this.healthChartIns.resize();
@@ -602,56 +581,65 @@ export default {
 <style scoped lang="scss">
 .health-dashboard {
   width: 100%;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 120px);
   background: transparent;
-  padding: 20px 24px 30px;
+  padding: 20px 20px 0;
   box-sizing: border-box;
   font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: hidden;
 }
 
-
 .dashboard-main {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.2fr 2fr 1.2fr;
   gap: 20px;
-  flex-wrap: wrap;
-  align-items: stretch;
-  
-  .col-left, .col-right {
-    flex: 1.1;
-    min-width: 280px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-  .col-center {
-    flex: 1.8;
-    min-width: 420px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
+  height: 100%;
+  min-height: 0;
+}
+
+.col-left {
+  display: grid;
+  grid-template-rows: 1fr auto 1fr;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.col-center {
+  display: grid;
+  grid-template-rows: auto 0.8fr 1fr;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.col-right {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .card {
-  background: transparent;
-  backdrop-filter: blur(0);
+  background: rgba(8, 28, 45, 0.55);
+  backdrop-filter: blur(3px);
   border-radius: 16px;
   border: 1.5px solid rgba(52, 152, 219, 0.7);
-  overflow: hidden;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
-  
+  min-height: 0;
+  overflow: hidden;
+
   &:hover {
     border-color: #5dade2;
     box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25);
-    background: rgba(52, 152, 219, 0.05);
+    background: rgba(52, 152, 219, 0.08);
   }
-  
+
   .card-header {
-    padding: 14px 20px;
+    padding: 12px 16px;
     border-bottom: 1px solid rgba(52, 152, 219, 0.4);
     display: flex;
     justify-content: space-between;
@@ -659,9 +647,9 @@ export default {
     flex-wrap: wrap;
     gap: 10px;
     flex-shrink: 0;
-    
+
     .title {
-      font-size: 16px;
+      font-size: 15px;
       font-weight: 600;
       color: #fff;
       letter-spacing: 0.5px;
@@ -700,8 +688,13 @@ export default {
   }
 }
 
-// 驼圈列表
+// 驼圈列表 - 带滚动条
 .pen-list-card {
+  .pen-grid-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
   .pen-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -736,19 +729,20 @@ export default {
 
 // 统计卡片
 .stats-card {
+  flex-shrink: 0;
   .stats-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
-    padding: 20px;
+    padding: 16px;
     .stat-item {
       text-align: center;
       .stat-value {
-        font-size: 28px;
+        font-size: 24px;
         font-weight: bold;
         color: #5dade2;
         .unit {
-          font-size: 12px;
+          font-size: 11px;
           margin-left: 2px;
           color: rgba(255, 255, 255, 0.6);
         }
@@ -767,57 +761,49 @@ export default {
   }
 }
 
-// 预警列表
+// 预警列表 - 文字放大
 .alert-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  
-  .alert-list {
-    padding: 8px 16px;
+  .alert-list-wrapper {
     flex: 1;
     overflow-y: auto;
+    min-height: 0;
+  }
+  .alert-list {
+    padding: 12px 16px;
     .alert-item {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       border-bottom: 1px solid rgba(52, 152, 219, 0.2);
-      padding: 12px 4px;
+      padding: 14px 4px;
       .alert-level {
-        font-size: 10px;
-        padding: 2px 8px;
+        font-size: 13px;
+        padding: 4px 12px;
         border-radius: 20px;
-        min-width: 40px;
+        min-width: 48px;
         text-align: center;
-        &.high {
-          background: rgba(231, 76, 60, 0.2);
-          color: #e74c3c;
-        }
-        &.medium {
-          background: rgba(243, 156, 18, 0.2);
-          color: #f39c12;
-        }
-        &.low {
-          background: rgba(52, 152, 219, 0.2);
-          color: #3498db;
-        }
+        font-weight: 500;
+        &.high { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }
+        &.medium { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
+        &.low { background: rgba(52, 152, 219, 0.2); color: #3498db; }
       }
       .alert-content {
         flex: 1;
-        .alert-title {
-          font-size: 13px;
-          font-weight: 500;
-          color: rgba(255, 255, 255, 0.9);
+        .alert-title { 
+          font-size: 14px; 
+          font-weight: 600; 
+          color: rgba(255, 255, 255, 0.95); 
+          margin-bottom: 4px;
         }
-        .alert-desc {
-          font-size: 11px;
-          color: rgba(255, 255, 255, 0.6);
-          margin-top: 2px;
+        .alert-desc { 
+          font-size: 12px; 
+          color: rgba(255, 255, 255, 0.7); 
+          line-height: 1.4;
         }
       }
-      .alert-time {
-        font-size: 10px;
-        color: rgba(255, 255, 255, 0.4);
+      .alert-time { 
+        font-size: 11px; 
+        color: rgba(255, 255, 255, 0.5); 
       }
     }
   }
@@ -825,53 +811,35 @@ export default {
 
 // 圈舍详情
 .pen-detail-card {
+  flex-shrink: 0;
   .pen-detail {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
-    padding: 20px;
+    padding: 16px;
     .detail-item {
       text-align: center;
-      .detail-label {
-        font-size: 11px;
-        color: rgba(255, 255, 255, 0.7);
-        margin-bottom: 6px;
-      }
-      .detail-value {
-        font-size: 22px;
-        font-weight: bold;
-        color: #5dade2;
-        .unit {
-          font-size: 11px;
-          margin-left: 2px;
-          color: rgba(255, 255, 255, 0.5);
-        }
-      }
-      .detail-status {
-        font-size: 10px;
-        margin-top: 4px;
-        &.normal { color: #2ecc71; }
-        &.warning { color: #f39c12; }
-        &.danger { color: #e74c3c; }
-      }
+      .detail-label { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; }
+      .detail-value { font-size: 20px; font-weight: bold; color: #5dade2; .unit { font-size: 10px; } }
+      .detail-status { font-size: 10px; margin-top: 4px; &.normal { color: #2ecc71; } &.warning { color: #f39c12; } &.danger { color: #e74c3c; } }
     }
   }
 }
 
 // 图表容器
+.chart-card {
+  flex-shrink: 0;
+}
 .chart-container {
   width: 100%;
-  height: 240px;
-  padding: 8px;
+  height: 100%;
+  min-height: 0;
 }
 
 // 骆驼列表
 .camel-list-card {
-  display: flex;
-  flex-direction: column;
-  
   .camel-search {
-    padding: 12px 16px;
+    padding: 10px 16px;
     flex-shrink: 0;
     .search-input {
       width: 100%;
@@ -882,22 +850,20 @@ export default {
       color: white;
       font-size: 12px;
       outline: none;
-      &:focus {
-        border-color: #5dade2;
-      }
-      &::placeholder {
-        color: rgba(255, 255, 255, 0.4);
-      }
+      &:focus { border-color: #5dade2; }
+      &::placeholder { color: rgba(255, 255, 255, 0.4); }
     }
   }
+  .camel-grid-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
   .camel-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
     padding: 16px;
-    flex: 1;
-    overflow-y: auto;
-    max-height: 280px;
     .camel-item {
       background: rgba(0, 0, 0, 0.3);
       border: 1px solid rgba(52, 152, 219, 0.4);
@@ -908,247 +874,99 @@ export default {
       gap: 10px;
       cursor: pointer;
       transition: all 0.2s;
-      &:hover {
-        border-color: #5dade2;
-        background: rgba(52, 152, 219, 0.1);
-      }
-      &.warning {
-        border-color: rgba(243, 156, 18, 0.6);
-      }
-      .camel-avatar {
-        position: relative;
-        .camel-icon {
-          font-size: 28px;
-        }
-        .warning-dot {
-          position: absolute;
-          top: -2px;
-          right: -2px;
-          width: 10px;
-          height: 10px;
-          background: #f39c12;
-          border-radius: 50%;
-          animation: pulse 1.5s infinite;
-        }
-      }
-      .camel-info {
-        flex: 1;
-        .camel-id {
-          font-size: 12px;
-          font-weight: 500;
-          color: #fff;
-        }
-        .camel-temp {
-          font-size: 10px;
-          color: rgba(255, 255, 255, 0.6);
-        }
-      }
-      .camel-status {
-        font-size: 10px;
-        padding: 2px 6px;
-        border-radius: 10px;
-        &.healthy {
-          background: rgba(46, 204, 113, 0.2);
-          color: #2ecc71;
-        }
-        &.warning {
-          background: rgba(243, 156, 18, 0.2);
-          color: #f39c12;
-        }
-        &.critical {
-          background: rgba(231, 76, 60, 0.2);
-          color: #e74c3c;
-        }
-      }
+      &:hover { border-color: #5dade2; background: rgba(52, 152, 219, 0.1); }
+      &.warning { border-color: rgba(243, 156, 18, 0.6); }
+      .camel-avatar { position: relative; .camel-icon { font-size: 28px; } .warning-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #f39c12; border-radius: 50%; animation: pulse 1.5s infinite; } }
+      .camel-info { flex: 1; .camel-id { font-size: 12px; font-weight: 500; color: #fff; } .camel-temp { font-size: 10px; color: rgba(255, 255, 255, 0.6); } }
+      .camel-status { font-size: 10px; padding: 2px 6px; border-radius: 10px; &.healthy { background: rgba(46, 204, 113, 0.2); color: #2ecc71; } &.warning { background: rgba(243, 156, 18, 0.2); color: #f39c12; } &.critical { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } }
     }
   }
 }
 
-// 健康报告
+// 健康报告 - 近期健康记录文字放大
 .health-report-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  
   .health-report {
     flex: 1;
     display: flex;
     flex-direction: column;
-    
+    min-height: 0;
     .report-header {
       display: flex;
       align-items: center;
       gap: 16px;
-      padding: 20px;
+      padding: 16px;
       background: rgba(0, 0, 0, 0.2);
       border-bottom: 1px solid rgba(52, 152, 219, 0.3);
       flex-shrink: 0;
-      .camel-avatar-large {
-        font-size: 48px;
-      }
-      .camel-basic {
-        flex: 1;
-        .camel-name {
-          font-size: 18px;
-          font-weight: bold;
-          color: #fff;
-        }
-        .camel-location {
-          font-size: 11px;
-          color: rgba(255, 255, 255, 0.6);
-          margin-top: 4px;
-        }
-      }
-      .health-badge {
-        padding: 4px 12px;
-        border-radius: 20px;
-        font-size: 12px;
-        font-weight: 500;
-        &.healthy {
-          background: rgba(46, 204, 113, 0.2);
-          color: #2ecc71;
-        }
-        &.warning {
-          background: rgba(243, 156, 18, 0.2);
-          color: #f39c12;
-        }
-        &.critical {
-          background: rgba(231, 76, 60, 0.2);
-          color: #e74c3c;
-        }
-      }
+      .camel-avatar-large { font-size: 48px; }
+      .camel-basic { flex: 1; .camel-name { font-size: 16px; font-weight: bold; color: #fff; } .camel-location { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; } }
+      .health-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; &.healthy { background: rgba(46, 204, 113, 0.2); color: #2ecc71; } &.warning { background: rgba(243, 156, 18, 0.2); color: #f39c12; } &.critical { background: rgba(231, 76, 60, 0.2); color: #e74c3c; } }
     }
     .report-metrics {
       padding: 16px;
       flex-shrink: 0;
-      .metric-row {
-        display: flex;
-        gap: 20px;
-        margin-bottom: 16px;
-        .metric {
-          flex: 1;
-          .metric-label {
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.6);
-            margin-bottom: 4px;
-          }
-          .metric-value {
-            font-size: 20px;
-            font-weight: bold;
-            color: #5dade2;
-            &.warning {
-              color: #e74c3c;
-            }
-            .unit {
-              font-size: 11px;
-              margin-left: 2px;
-              color: rgba(255, 255, 255, 0.5);
-            }
-          }
-          .metric-range {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.4);
-            margin-top: 4px;
-          }
-          .metric-progress {
-            margin-top: 8px;
-            background: rgba(52, 152, 219, 0.3);
-            border-radius: 10px;
-            height: 6px;
-            .progress-bar {
-              height: 6px;
-              background: #5dade2;
-              border-radius: 10px;
-            }
-          }
-        }
-      }
+      .metric-row { display: flex; gap: 16px; margin-bottom: 16px; .metric { flex: 1; .metric-label { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; } .metric-value { font-size: 18px; font-weight: bold; color: #5dade2; &.warning { color: #e74c3c; } .unit { font-size: 10px; } } .metric-range { font-size: 9px; color: rgba(255, 255, 255, 0.4); margin-top: 4px; } .metric-progress { margin-top: 8px; background: rgba(52, 152, 219, 0.3); border-radius: 10px; height: 6px; .progress-bar { height: 6px; background: #5dade2; border-radius: 10px; } } } }
     }
-    .report-timeline {
-      padding: 16px;
-      border-top: 1px solid rgba(52, 152, 219, 0.3);
+    .report-timeline.compact-timeline {
       flex: 1;
       overflow-y: auto;
-      .timeline-title {
-        font-size: 13px;
-        font-weight: 500;
-        color: #fff;
-        margin-bottom: 12px;
-      }
-      .timeline-list {
-        .timeline-item {
-          display: flex;
-          gap: 12px;
-          margin-bottom: 12px;
-          .timeline-date {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.5);
-            min-width: 50px;
+      padding: 16px;
+      border-top: 1px solid rgba(52, 152, 219, 0.3);
+      .timeline-title { 
+        font-size: 14px; 
+        font-weight: 600; 
+        color: #fff; 
+        margin-bottom: 12px; 
+      }
+      .timeline-list .timeline-item { 
+        display: flex; 
+        gap: 16px; 
+        margin-bottom: 14px; 
+        padding-bottom: 10px;
+        border-bottom: 1px solid rgba(52, 152, 219, 0.15);
+        &:last-child { border-bottom: none; }
+        .timeline-date { 
+          font-size: 12px; 
+          color: rgba(255, 255, 255, 0.6); 
+          min-width: 55px; 
+          font-weight: 500;
+        }
+        .timeline-content { 
+          flex: 1; 
+          .timeline-event { 
+            font-size: 13px; 
+            font-weight: 600;
+            color: rgba(255, 255, 255, 0.95); 
+            margin-bottom: 4px;
           }
-          .timeline-content {
-            flex: 1;
-            .timeline-event {
-              font-size: 12px;
-              color: rgba(255, 255, 255, 0.9);
-            }
-            .timeline-detail {
-              font-size: 10px;
-              color: rgba(255, 255, 255, 0.5);
-            }
+          .timeline-detail { 
+            font-size: 12px; 
+            color: rgba(255, 255, 255, 0.65); 
+            line-height: 1.4;
           }
         }
       }
     }
   }
   .no-selection {
-    text-align: center;
-    padding: 60px 20px;
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    .placeholder-icon {
-      font-size: 64px;
-      opacity: 0.5;
-      display: block;
-      margin-bottom: 16px;
-    }
-    p {
-      color: rgba(255, 255, 255, 0.5);
-      font-size: 13px;
-    }
+    text-align: center;
+    padding: 40px 20px;
+    .placeholder-icon { font-size: 64px; opacity: 0.5; margin-bottom: 16px; }
+    p { color: rgba(255, 255, 255, 0.5); font-size: 13px; }
   }
 }
 
 // 健康建议
 .advice-card {
+  flex-shrink: 0;
   .advice-list {
     padding: 16px;
-    .advice-item {
-      display: flex;
-      gap: 12px;
-      margin-bottom: 16px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-      .advice-icon {
-        font-size: 20px;
-      }
-      .advice-content {
-        flex: 1;
-        .advice-title {
-          font-size: 13px;
-          font-weight: 500;
-          color: #fff;
-        }
-        .advice-desc {
-          font-size: 11px;
-          color: rgba(255, 255, 255, 0.6);
-          margin-top: 2px;
-        }
-      }
-    }
+    .advice-item { display: flex; gap: 12px; margin-bottom: 16px; &:last-child { margin-bottom: 0; } .advice-icon { font-size: 20px; } .advice-content { flex: 1; .advice-title { font-size: 13px; font-weight: 500; color: #fff; } .advice-desc { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; } } }
   }
 }
 
@@ -1156,4 +974,26 @@ export default {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: 0.5; transform: scale(1.2); }
 }
+
+// 滚动条美化
+.pen-grid-wrapper::-webkit-scrollbar,
+.alert-list-wrapper::-webkit-scrollbar,
+.camel-grid-wrapper::-webkit-scrollbar,
+.report-timeline.compact-timeline::-webkit-scrollbar {
+  width: 4px;
+}
+.pen-grid-wrapper::-webkit-scrollbar-track,
+.alert-list-wrapper::-webkit-scrollbar-track,
+.camel-grid-wrapper::-webkit-scrollbar-track,
+.report-timeline.compact-timeline::-webkit-scrollbar-track {
+  background: rgba(52, 152, 219, 0.2);
+  border-radius: 2px;
+}
+.pen-grid-wrapper::-webkit-scrollbar-thumb,
+.alert-list-wrapper::-webkit-scrollbar-thumb,
+.camel-grid-wrapper::-webkit-scrollbar-thumb,
+.report-timeline.compact-timeline::-webkit-scrollbar-thumb {
+  background: #5dade2;
+  border-radius: 2px;
+}
 </style>
\ No newline at end of file
diff --git a/chenhai-ui/src/components/visual/sbgl.vue b/chenhai-ui/src/components/visual/sbgl.vue
index 8c9de9b..a8772b5 100644
--- a/chenhai-ui/src/components/visual/sbgl.vue
+++ b/chenhai-ui/src/components/visual/sbgl.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="device-dashboard">
-    <!-- 主内容区域 - 使用更规整的网格布局 -->
+    <!-- 主内容区域 - Grid三列布局 -->
     <div class="dashboard-main">
       <!-- 左侧列：设备清单与告警 -->
       <div class="col-left">
-        <!-- 设备清单卡片（移至左侧第一项） -->
+        <!-- 设备清单卡片 -->
         <div class="card device-list-card">
           <div class="card-header">
             <span class="title">⚙️ 设备清单</span>
@@ -13,27 +13,29 @@
           <div class="device-search">
             <input type="text" v-model="deviceSearch" placeholder="搜索设备..." class="search-input" />
           </div>
-          <div class="device-list">
-            <div 
-              v-for="device in filteredDevices" 
-              :key="device.id"
-              class="device-item"
-              :class="{ active: selectedDevice && selectedDevice.id === device.id, warning: device.status === 'warning', offline: device.status === 'offline' }"
-              @click="selectDevice(device)"
-            >
-              <div class="device-icon">{{ device.icon }}</div>
-              <div class="device-info">
-                <div class="device-name">{{ device.name }}</div>
-                <div class="device-loc">{{ device.location }}</div>
-              </div>
-              <div class="device-status-badge" :class="device.status">
-                {{ device.statusText }}
+          <div class="device-list-wrapper">
+            <div class="device-list">
+              <div 
+                v-for="device in filteredDevices" 
+                :key="device.id"
+                class="device-item"
+                :class="{ active: selectedDevice && selectedDevice.id === device.id, warning: device.status === 'warning', offline: device.status === 'offline' }"
+                @click="selectDevice(device)"
+              >
+                <div class="device-icon">{{ device.icon }}</div>
+                <div class="device-info">
+                  <div class="device-name">{{ device.name }}</div>
+                  <div class="device-loc">{{ device.location }}</div>
+                </div>
+                <div class="device-status-badge" :class="device.status">
+                  {{ device.statusText }}
+                </div>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- 设备统计卡片（移至左侧第二项） -->
+        <!-- 设备统计卡片 -->
         <div class="card device-stats-card">
           <div class="card-header">
             <span class="title">📊 设备运行总览</span>
@@ -59,24 +61,6 @@
             </div>
           </div>
         </div>
-
-        <!-- 告警列表卡片 -->
-        <div class="card alert-card">
-          <div class="card-header">
-            <span class="title">⚠️ 设备告警</span>
-            <span class="badge">{{ deviceAlerts.length }}</span>
-          </div>
-          <div class="alert-list">
-            <div v-for="(alert, idx) in deviceAlerts" :key="idx" class="alert-item">
-              <span class="alert-level" :class="alert.level">{{ alert.levelText }}</span>
-              <div class="alert-content">
-                <div class="alert-title">{{ alert.title }}</div>
-                <div class="alert-desc">{{ alert.desc }}</div>
-              </div>
-              <span class="alert-time">{{ alert.time }}</span>
-            </div>
-          </div>
-        </div>
       </div>
 
       <!-- 中间列：监控画面与缩略图 -->
@@ -125,14 +109,13 @@
 
       <!-- 右侧列：骆驼档案与统计信息 -->
       <div class="col-right">
-        <!-- 骆驼档案数据卡片 - 表头固定，内容滚动，修复对齐问题 -->
+        <!-- 骆驼档案数据卡片 -->
         <div class="card camel-archive-card">
           <div class="card-header">
             <span class="title">🐪 骆驼档案数据</span>
             <span class="sub">共 {{ camelData.length }} 条记录</span>
           </div>
           <div class="camel-table-wrapper">
-            <!-- 独立表头，确保与滚动内容对齐 -->
             <table class="camel-table camel-table-header">
               <thead>
                 <tr>
@@ -254,18 +237,12 @@
 </template>
 
 <script>
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-import vueSeamlessScroll from 'vue-seamless-scroll';
 
 export default {
   name: 'DeviceDashboard',
-  components: {
-    vueSeamlessScroll
-  },
+
   data() {
     return {
-      // 设备统计数据
       deviceStats: {
         total: 48,
         online: 42,
@@ -274,7 +251,6 @@ export default {
         maintenance: 5
       },
       
-      // 设备列表
       devices: [
         { id: 'CAM-01', icon: '📹', name: '高清摄像头', location: 'A1圈', status: 'online', statusText: '在线', lastInspection: '2024-01-15', nextMaintenance: '2024-02-15', runtime: 3240 },
         { id: 'CAM-02', icon: '📹', name: '高清摄像头', location: 'A2圈', status: 'online', statusText: '在线', lastInspection: '2024-01-15', nextMaintenance: '2024-02-15', runtime: 3120 },
@@ -292,7 +268,6 @@ export default {
       selectedDevice: null,
       showDeviceModal: false,
       
-      // 设备告警
       deviceAlerts: [
         { level: 'high', levelText: '紧急', title: '温湿度传感器异常', desc: 'A1圈温度传感器信号丢失', time: '09:32' },
         { level: 'medium', levelText: '警告', title: '挤奶监测仪数据异常', desc: '数据波动超出正常范围', time: '08:15' },
@@ -300,17 +275,15 @@ export default {
         { level: 'medium', levelText: '警告', title: '网络延迟过高', desc: '监控网络延迟超过500ms', time: '06:22' }
       ],
       
-      // 监控摄像头
       cameras: [
-        { id: 1, name: 'A1圈', location: 'A1圈', thumbnail: require("../../assets/images/jk1.png"), videoUrl:require('../../assets/images/jk1.png'), status: 'online', recording: true },
-        { id: 2, name: 'A2圈', location: 'A2圈', thumbnail: require('../../assets/images/jk2.png'), videoUrl:require('../../assets/images/jk2.png'), status: 'online', recording: true },
-        { id: 3, name: 'B1圈', location: 'B1圈', thumbnail:require('../../assets/images/jk5.png') , videoUrl:require('../../assets/images/jk5.png'), status: 'online', recording: true },
-        { id: 4, name: '挤奶车间', location: '挤奶车间', thumbnail:require('../../assets/images/jk3.png'), videoUrl:require('../../assets/images/jk3.png'), status: 'online', recording: true },
-        { id: 5, name: '草料仓库', location: '草料仓库', thumbnail:require('../../assets/images/jk4.png'), videoUrl:require('../../assets/images/jk4.png') , status: 'offline', recording: false }
+        { id: 1, name: 'A1圈', location: 'A1圈', thumbnail: require("../../assets/images/jk1.png"), videoUrl: require('../../assets/images/jk1.png'), status: 'online', recording: true },
+        { id: 2, name: 'A2圈', location: 'A2圈', thumbnail: require('../../assets/images/jk2.png'), videoUrl: require('../../assets/images/jk2.png'), status: 'online', recording: true },
+        { id: 3, name: 'B1圈', location: 'B1圈', thumbnail: require('../../assets/images/jk5.png'), videoUrl: require('../../assets/images/jk5.png'), status: 'online', recording: true },
+        { id: 4, name: '挤奶车间', location: '挤奶车间', thumbnail: require('../../assets/images/jk3.png'), videoUrl: require('../../assets/images/jk3.png'), status: 'online', recording: true },
+        { id: 5, name: '草料仓库', location: '草料仓库', thumbnail: require('../../assets/images/jk4.png'), videoUrl: require('../../assets/images/jk4.png'), status: 'offline', recording: false }
       ],
       currentCameraIndex: 0,
       
-      // 骆驼档案数据
       camelData: [
         { id: 'A1-01', age: 8, weight: 635, breed: '阿拉善双峰驼', score: 5, milkOutput: 3.4, parity: 2 },
         { id: 'A1-02', age: 8, weight: 642, breed: '阿拉善双峰驼', score: 4, milkOutput: 4.5, parity: 2 },
@@ -349,7 +322,6 @@ export default {
         { id: 'A1-35', age: 7, weight: 622, breed: '阿拉善双峰驼', score: 5, milkOutput: 4.5, parity: 1 }
       ],
       
-      // 滚动配置
       scrollOption: {
         step: 0.5,
         limitMoveNum: 10,
@@ -361,7 +333,6 @@ export default {
         switchOffset: 30
       },
       
-      // 维保计划
       maintenanceTasks: [
         { id: 1, device: '温湿度传感器 (A1圈)', date: '2024-01-25', type: 'urgent', typeText: '紧急' },
         { id: 2, device: '饮水监测仪 (C1圈)', date: '2024-01-22', type: 'warning', typeText: '需处理' },
@@ -454,63 +425,72 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// 整体布局样式 - 使用固定高度和 flex 布局保证对齐
 .device-dashboard {
   width: 100%;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 120px);
   background: transparent;
-  padding: 20px 24px 30px;
+  padding: 20px 20px 0;
   box-sizing: border-box;
   font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: hidden;
 }
 
-
-// 三列布局，使用 flex 保证等高校准，并确保撑满对齐
+// Grid三列布局
 .dashboard-main {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.2fr 1.6fr 1.2fr;
   gap: 20px;
-  flex-wrap: wrap;
-  align-items: stretch; // 让所有列高度一致
-  
-  .col-left, .col-right {
-    flex: 1.2;
-    min-width: 300px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-  
-  .col-center {
-    flex: 1.6;
-    min-width: 400px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
+  height: 100%;
+  min-height: 0;
+}
+
+// 左侧列
+.col-left {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// 中间列
+.col-center {
+  display: grid;
+  grid-template-rows: auto auto;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// 右侧列
+.col-right {
+  display: grid;
+  grid-template-rows: 1fr auto auto;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
 }
 
-// 通用卡片样式 - 所有卡片高度自适应，内容撑满
+// 通用卡片样式
 .card {
-  background: transparent;
-  backdrop-filter: blur(0);
+  background: rgba(8, 28, 45, 0.55);
+  backdrop-filter: blur(3px);
   border-radius: 16px;
   border: 1.5px solid rgba(52, 152, 219, 0.7);
-  overflow: hidden;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
-  flex: 1; // 让卡片在列内自动撑满剩余空间
-  
+  min-height: 0;
+  overflow: hidden;
+
   &:hover {
     border-color: #5dade2;
     box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25);
-    background: rgba(52, 152, 219, 0.05);
+    background: rgba(52, 152, 219, 0.08);
   }
-  
+
   .card-header {
-    padding: 14px 20px;
+    padding: 12px 16px;
     border-bottom: 1px solid rgba(52, 152, 219, 0.4);
     display: flex;
     justify-content: space-between;
@@ -518,15 +498,14 @@ export default {
     flex-wrap: wrap;
     gap: 10px;
     flex-shrink: 0;
-    
+
     .title {
-      font-size: 16px;
+      font-size: 15px;
       font-weight: 600;
       color: #fff;
       letter-spacing: 0.5px;
       text-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
     }
-    
     .badge {
       background: #e74c3c;
       border-radius: 30px;
@@ -534,13 +513,10 @@ export default {
       font-size: 12px;
       color: white;
     }
-    
     .sub {
       font-size: 11px;
       color: rgba(255, 255, 255, 0.7);
     }
-    
-    
     .monitor-controls {
       display: flex;
       gap: 8px;
@@ -561,22 +537,22 @@ export default {
   }
 }
 
-// 设备统计卡片 - 网格布局
+// 设备统计卡片
 .device-stats-card {
+  flex-shrink: 0;
   .stats-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
-    padding: 20px;
-    
+    padding: 16px;
     .stat-item {
       text-align: center;
       .stat-value {
-        font-size: 28px;
+        font-size: 24px;
         font-weight: bold;
         color: #5dade2;
         .unit {
-          font-size: 12px;
+          font-size: 11px;
           margin-left: 2px;
           color: rgba(255, 255, 255, 0.6);
         }
@@ -597,11 +573,8 @@ export default {
 
 // 设备列表卡片
 .device-list-card {
-  display: flex;
-  flex-direction: column;
-  
   .device-search {
-    padding: 12px 16px;
+    padding: 10px 16px;
     flex-shrink: 0;
     .search-input {
       width: 100%;
@@ -612,24 +585,22 @@ export default {
       color: white;
       font-size: 12px;
       outline: none;
-      &:focus {
-        border-color: #5dade2;
-      }
-      &::placeholder {
-        color: rgba(255, 255, 255, 0.4);
-      }
+      &:focus { border-color: #5dade2; }
+      &::placeholder { color: rgba(255, 255, 255, 0.4); }
     }
   }
-  .device-list {
+  .device-list-wrapper {
     flex: 1;
-    max-height: 280px;
     overflow-y: auto;
+    min-height: 0;
+  }
+  .device-list {
     padding: 8px 16px;
     .device-item {
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 12px;
+      padding: 10px;
       background: rgba(0, 0, 0, 0.2);
       border-radius: 12px;
       margin-bottom: 8px;
@@ -640,44 +611,21 @@ export default {
         border-color: #5dade2;
         background: rgba(52, 152, 219, 0.15);
       }
-      &.warning {
-        border-color: rgba(243, 156, 18, 0.6);
-      }
-      &.offline {
-        border-color: rgba(149, 165, 166, 0.5);
-        opacity: 0.7;
-      }
-      .device-icon {
-        font-size: 24px;
-      }
+      &.warning { border-color: rgba(243, 156, 18, 0.6); }
+      &.offline { border-color: rgba(149, 165, 166, 0.5); opacity: 0.7; }
+      .device-icon { font-size: 24px; }
       .device-info {
         flex: 1;
-        .device-name {
-          font-size: 13px;
-          font-weight: 500;
-          color: #fff;
-        }
-        .device-loc {
-          font-size: 10px;
-          color: rgba(255, 255, 255, 0.5);
-        }
+        .device-name { font-size: 13px; font-weight: 500; color: #fff; }
+        .device-loc { font-size: 10px; color: rgba(255, 255, 255, 0.5); }
       }
       .device-status-badge {
         font-size: 10px;
         padding: 2px 8px;
         border-radius: 20px;
-        &.online {
-          background: rgba(46, 204, 113, 0.2);
-          color: #2ecc71;
-        }
-        &.warning {
-          background: rgba(243, 156, 18, 0.2);
-          color: #f39c12;
-        }
-        &.offline {
-          background: rgba(149, 165, 166, 0.2);
-          color: #95a5a6;
-        }
+        &.online { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
+        &.warning { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
+        &.offline { background: rgba(149, 165, 166, 0.2); color: #95a5a6; }
       }
     }
   }
@@ -685,52 +633,35 @@ export default {
 
 // 告警列表卡片
 .alert-card {
-  .alert-list {
-    padding: 8px 16px;
-    max-height: 240px;
+  .alert-list-wrapper {
+    flex: 1;
     overflow-y: auto;
+    min-height: 0;
+  }
+  .alert-list {
+    padding: 8px 12px;
     .alert-item {
       display: flex;
       align-items: flex-start;
-      gap: 12px;
+      gap: 10px;
       border-bottom: 1px solid rgba(52, 152, 219, 0.2);
-      padding: 12px 4px;
+      padding: 10px 4px;
       .alert-level {
         font-size: 10px;
         padding: 2px 8px;
         border-radius: 20px;
         min-width: 40px;
         text-align: center;
-        &.high {
-          background: rgba(231, 76, 60, 0.2);
-          color: #e74c3c;
-        }
-        &.medium {
-          background: rgba(243, 156, 18, 0.2);
-          color: #f39c12;
-        }
-        &.low {
-          background: rgba(52, 152, 219, 0.2);
-          color: #3498db;
-        }
+        &.high { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }
+        &.medium { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
+        &.low { background: rgba(52, 152, 219, 0.2); color: #3498db; }
       }
       .alert-content {
         flex: 1;
-        .alert-title {
-          font-size: 13px;
-          font-weight: 500;
-          color: rgba(255, 255, 255, 0.9);
-        }
-        .alert-desc {
-          font-size: 11px;
-          color: rgba(255, 255, 255, 0.6);
-          margin-top: 2px;
-        }
-      }
-      .alert-time {
-        font-size: 10px;
-        color: rgba(255, 255, 255, 0.4);
+        .alert-title { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
+        .alert-desc { font-size: 10px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
       }
+      .alert-time { font-size: 10px; color: rgba(255, 255, 255, 0.4); }
     }
   }
 }
@@ -747,7 +678,7 @@ export default {
       width: 100%;
       height: auto;
       display: block;
-      min-height: 260px;
+      min-height: 200px;
       object-fit: cover;
     }
     .monitor-overlay {
@@ -766,7 +697,6 @@ export default {
       }
     }
   }
-
 }
 
 // 缩略图卡片
@@ -788,7 +718,7 @@ export default {
       }
       .thumb-img {
         width: 100%;
-        height: 120px;
+        height: 100px;
         object-fit: cover;
       }
       .thumb-label {
@@ -803,129 +733,89 @@ export default {
           width: 8px;
           height: 8px;
           border-radius: 50%;
-          &.online {
-            background: #2ecc71;
-            box-shadow: 0 0 5px #2ecc71;
-          }
-          &.offline {
-            background: #95a5a6;
-          }
+          &.online { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
+          &.offline { background: #95a5a6; }
         }
       }
     }
   }
 }
 
-// 骆驼档案卡片 - 表头固定，内容滚动，修复表头与内容对齐
+// 骆驼档案卡片
 .camel-archive-card {
   .camel-table-wrapper {
     display: flex;
     flex-direction: column;
-    height: 360px;
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
   }
-  
   .camel-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 11px;
-    table-layout: fixed; // 固定表格布局，确保列宽一致
-    
+    table-layout: fixed;
     th, td {
-      padding: 10px 8px;
+      padding: 8px 6px;
       text-align: center;
       color: #fff;
       box-sizing: border-box;
     }
-    
     th {
       background: rgba(52, 152, 219, 0.3);
       font-weight: 500;
       border-bottom: 1px solid rgba(52, 152, 219, 0.5);
     }
   }
-  
   .camel-table-header {
     flex-shrink: 0;
-    th {
-      padding: 10px 8px;
-    }
   }
-  
-  .camel-table-body {
-    tbody {
-      tr {
-        border-bottom: 1px solid rgba(52, 152, 219, 0.2);
-        &:hover {
-          background: rgba(52, 152, 219, 0.1);
-        }
-        td {
-          padding: 8px 6px;
-          color: rgba(255, 255, 255, 0.85);
-        }
-      }
-    }
+  .camel-table-body tbody tr {
+    border-bottom: 1px solid rgba(52, 152, 219, 0.2);
+    &:hover { background: rgba(52, 152, 219, 0.1); }
   }
-  
   .seamless-scroll-container {
     flex: 1;
     overflow: hidden;
   }
-  
   .seamless-scroll {
     height: 100%;
     overflow: hidden;
   }
-  
   .score {
     display: inline-block;
     padding: 2px 6px;
     border-radius: 20px;
-    &.excellent {
-      background: rgba(46, 204, 113, 0.2);
-      color: #2ecc71;
-    }
-    &.good {
-      background: rgba(52, 152, 219, 0.2);
-      color: #5dade2;
-    }
-    &.normal {
-      background: rgba(243, 156, 18, 0.2);
-      color: #f39c12;
-    }
+    &.excellent { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
+    &.good { background: rgba(52, 152, 219, 0.2); color: #5dade2; }
+    &.normal { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
   }
 }
 
 // 统计摘要卡片
 .stats-summary-card {
+  flex-shrink: 0;
   .summary-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
-    padding: 20px;
+    padding: 16px;
     .summary-item {
       text-align: center;
       .summary-value {
-        font-size: 24px;
+        font-size: 22px;
         font-weight: bold;
         color: #5dade2;
-        .unit {
-          font-size: 11px;
-          margin-left: 2px;
-          color: rgba(255, 255, 255, 0.5);
-        }
-      }
-      .summary-label {
-        font-size: 11px;
-        color: rgba(255, 255, 255, 0.7);
-        margin-top: 4px;
+        .unit { font-size: 10px; margin-left: 2px; color: rgba(255, 255, 255, 0.5); }
       }
+      .summary-label { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }
     }
   }
 }
 
 // 维保计划卡片
 .maintenance-card {
+  flex-shrink: 0;
   .maintenance-list {
     padding: 16px;
     .maintenance-item {
@@ -934,32 +824,15 @@ export default {
       align-items: center;
       padding: 10px 0;
       border-bottom: 1px solid rgba(52, 152, 219, 0.2);
-      .maintenance-device {
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.9);
-        flex: 1;
-      }
-      .maintenance-date {
-        font-size: 10px;
-        color: rgba(255, 255, 255, 0.5);
-        margin: 0 12px;
-      }
+      .maintenance-device { font-size: 12px; color: rgba(255, 255, 255, 0.9); flex: 1; }
+      .maintenance-date { font-size: 10px; color: rgba(255, 255, 255, 0.5); margin: 0 12px; }
       .maintenance-type {
         font-size: 10px;
         padding: 2px 8px;
         border-radius: 20px;
-        &.urgent {
-          background: rgba(231, 76, 60, 0.2);
-          color: #e74c3c;
-        }
-        &.warning {
-          background: rgba(243, 156, 18, 0.2);
-          color: #f39c12;
-        }
-        &.normal {
-          background: rgba(52, 152, 219, 0.2);
-          color: #5dade2;
-        }
+        &.urgent { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }
+        &.warning { background: rgba(243, 156, 18, 0.2); color: #f39c12; }
+        &.normal { background: rgba(52, 152, 219, 0.2); color: #5dade2; }
       }
     }
   }
@@ -990,20 +863,14 @@ export default {
       align-items: center;
       padding: 16px 20px;
       border-bottom: 1px solid rgba(52, 152, 219, 0.4);
-      .modal-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #fff;
-      }
+      .modal-title { font-size: 16px; font-weight: 600; color: #fff; }
       .close-btn {
         background: none;
         border: none;
         font-size: 24px;
         color: rgba(255, 255, 255, 0.6);
         cursor: pointer;
-        &:hover {
-          color: #e74c3c;
-        }
+        &:hover { color: #e74c3c; }
       }
     }
     .modal-body {
@@ -1011,11 +878,7 @@ export default {
       .detail-row {
         display: flex;
         margin-bottom: 12px;
-        .detail-label {
-          width: 100px;
-          font-size: 12px;
-          color: rgba(255, 255, 255, 0.6);
-        }
+        .detail-label { width: 100px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
         .detail-value {
           flex: 1;
           font-size: 12px;
@@ -1041,32 +904,29 @@ export default {
         color: white;
         cursor: pointer;
         transition: all 0.2s;
-        &:hover {
-          background: rgba(52, 152, 219, 0.4);
-        }
-        &.primary {
-          background: #3498db;
-          border-color: #3498db;
-          &:hover {
-            background: #2980b9;
-          }
-        }
+        &:hover { background: rgba(52, 152, 219, 0.4); }
+        &.primary { background: #3498db; border-color: #3498db; &:hover { background: #2980b9; } }
       }
     }
   }
 }
 
-// 自定义滚动条
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+// 滚动条美化
+.device-list-wrapper::-webkit-scrollbar,
+.alert-list-wrapper::-webkit-scrollbar,
+.seamless-scroll-container::-webkit-scrollbar {
+  width: 4px;
 }
-::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 5px;
+.device-list-wrapper::-webkit-scrollbar-track,
+.alert-list-wrapper::-webkit-scrollbar-track,
+.seamless-scroll-container::-webkit-scrollbar-track {
+  background: rgba(52, 152, 219, 0.2);
+  border-radius: 2px;
 }
-::-webkit-scrollbar-thumb {
+.device-list-wrapper::-webkit-scrollbar-thumb,
+.alert-list-wrapper::-webkit-scrollbar-thumb,
+.seamless-scroll-container::-webkit-scrollbar-thumb {
   background: #5dade2;
-  border-radius: 5px;
+  border-radius: 2px;
 }
 </style>
\ No newline at end of file
diff --git a/chenhai-ui/src/components/visual/scgk.vue b/chenhai-ui/src/components/visual/scgk.vue
index 6908361..3efd4a8 100644
--- a/chenhai-ui/src/components/visual/scgk.vue
+++ b/chenhai-ui/src/components/visual/scgk.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="production-dashboard">
-    <!-- 主内容区域：三列布局，中间为地图+统计指标 -->
     <div class="dashboard-main">
       <!-- 左侧指标卡片与生产数据 -->
       <div class="col-left">
@@ -88,8 +87,8 @@
 
         <!-- 百度地图容器 -->
         <div class="map-card">
-          <baidu-map id="baiduMapContainer" class="baidu-map-container" :center="center" :zoom="17"
-            :scroll-wheel-zoom="true" map-type="BMAP_NORMAL_MAP">
+          <baidu-map class="baidu-map-container" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"
+            map-type="BMAP_NORMAL_MAP">
             <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
           </baidu-map>
         </div>
@@ -130,8 +129,7 @@
           <div class="card-header">
             <span class="title">🐪 泌乳母驼存栏结构</span>
           </div>
-          <div ref="lactatingBarChart" class="bar-chart-container"></div>
-          <div class="quota-footer">泌乳母驼 {{ lactatingCamels }} 峰 | 总存栏 {{ productionStats.camelCount }} 峰</div>
+          <div ref="lactatingBarChart" class="chart-container"></div>
         </div>
       </div>
     </div>
@@ -140,52 +138,16 @@
 
 <script>
 import * as echarts from 'echarts';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-
-// 动画数字组件
-const AnimateNumber = {
-  props: {
-    from: Number,
-    to: Number,
-    duration: { type: Number, default: 2000 },
-    decimals: { type: Number, default: 0 }
-  },
-  data() {
-    return {
-      currentValue: this.from
-    };
-  },
-  mounted() {
-    let startTime = null;
-    const animate = (timestamp) => {
-      if (!startTime) startTime = timestamp;
-      const progress = Math.min(1, (timestamp - startTime) / this.duration);
-      const val = this.from + (this.to - this.from) * progress;
-      this.currentValue = val;
-      if (progress < 1) {
-        requestAnimationFrame(animate);
-      }
-    };
-    requestAnimationFrame(animate);
-  },
-  render(h) {
-    const formatted = this.currentValue.toFixed(this.decimals);
-    return h('span', {}, formatted);
-  }
-};
 
 export default {
   name: 'ProductionControlPanel',
-  components: {
-    'animate-number': AnimateNumber
-  },
+
   data() {
     return {
-      // 默认中心坐标
       center: { lng: 104.516843, lat: 40.272114 },
+      zoom: 17,
       productionStats: {
-        totalMilk: 2845,    // 吨
+        totalMilk: 2845,
         camelCount: 12860,
         fiberOutput: 78.3,
         activeHouseholds: 342
@@ -207,16 +169,13 @@ export default {
       camelChartIns: null,
       trendChartIns: null,
       lactatingBarChartIns: null,
-      baiduMap: null
+      resizeObserver: null
     };
   },
   computed: {
     lactatingCamels() {
       return Math.round(this.productionStats.camelCount * 0.48);
     },
-    otherCamels() {
-      return this.productionStats.camelCount - this.lactatingCamels;
-    },
     barChartData() {
       const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
       const lactatingData = [];
@@ -236,26 +195,18 @@ export default {
     }
   },
   mounted() {
-    this.getCurrentDateTime();
     this.initAllCharts();
     window.addEventListener('resize', this.handleResize);
-    this.$nextTick(() => {
-      this.initBaiduMapNative();
-    });
+    this.observeChartResize();
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.handleResize);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
     if (this.camelChartIns) this.camelChartIns.dispose();
     if (this.trendChartIns) this.trendChartIns.dispose();
     if (this.lactatingBarChartIns) this.lactatingBarChartIns.dispose();
-    if (this.baiduMap) {
-      this.baiduMap.destroy();
-    }
   },
   methods: {
-    getCurrentDateTime() {
-      // 保留原函数
-    },
     initAllCharts() {
       this.initCamelStructureChart();
       this.initTrendChart();
@@ -268,23 +219,40 @@ export default {
       this.camelChartIns = echarts.init(chartDom);
       this.camelChartIns.setOption({
         tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#3498db', textStyle: { color: '#fff' } },
-        legend: { orient: 'vertical', left: 'left', textStyle: { color: '#fff' } },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          textStyle: { color: '#fff' },
+          itemWidth: 20,
+          itemHeight: 12
+        },
         series: [
           {
             name: '骆驼结构',
             type: 'pie',
-            radius: '55%',
+            radius: ['70%', '80%'],
             center: ['50%', '50%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 8,
+              borderColor: 'rgba(0,0,0,0.2)',
+              borderWidth: 1
+            },
+            label: {
+              color: '#fff',
+              formatter: '{b}: {d}%',
+              fontSize: 11
+            },
+            emphasis: { scale: true },
             data: [
               { value: 5840, name: '产奶母驼', itemStyle: { color: '#3498db' } },
               { value: 4320, name: '育成驼', itemStyle: { color: '#5dade2' } },
               { value: 2700, name: '种公驼', itemStyle: { color: '#85c1e9' } }
-            ],
-            label: { color: '#fff', formatter: '{b}: {d}%' },
-            emphasis: { scale: true }
+            ]
           }
         ],
-        backgroundColor: 'transparent'
+        backgroundColor: 'transparent',
+        graphic: []
       });
     },
     initTrendChart() {
@@ -297,32 +265,35 @@ export default {
         xAxis: {
           type: 'category',
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-          axisLabel: { color: '#fff' },
-          axisLine: { lineStyle: { color: '#5dade2' } }
+          axisLabel: { color: '#fff', fontSize: 10, rotate: 30 },
+          axisLine: { lineStyle: { color: '#5dade2' } },
+          axisTick: { show: false }
         },
         yAxis: {
           type: 'value',
           name: '产奶量 (吨)',
-          nameTextStyle: { color: '#fff' },
-          axisLabel: { color: '#fff' },
+          nameTextStyle: { color: '#fff', fontSize: 11 },
+          axisLabel: { color: '#fff', fontSize: 10 },
           splitLine: { lineStyle: { color: 'rgba(93, 173, 226, 0.3)' } },
-          axisLine: { lineStyle: { color: '#5dade2' } }
+          axisLine: { show: false }
         },
         series: [{
           data: [165, 182, 204, 234, 290, 310, 342, 356, 330, 298, 245, 189],
           type: 'line',
           smooth: true,
-          lineStyle: { width: 3, color: '#5dade2' },
+          lineStyle: { width: 2, color: '#5dade2' },
           areaStyle: {
-            opacity: 0.2, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#3498db' }, { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
+            opacity: 0.2,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#3498db' },
+              { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
             ])
           },
           symbol: 'circle',
-          symbolSize: 8,
+          symbolSize: 6,
           itemStyle: { color: '#3498db' }
         }],
-        grid: { containLabel: true, bottom: 0, top: 40, right: 20, left: 10 }
+        grid: { containLabel: true, top: 30, bottom: 5, left: 10, right: 10 }
       });
     },
     initLactatingBarChart() {
@@ -350,35 +321,37 @@ export default {
           data: ['泌乳母驼', '其他骆驼'],
           textStyle: { color: '#fff' },
           left: 'left',
-          itemWidth: 25,
-          itemHeight: 14
+          itemWidth: 20,
+          itemHeight: 12,
+          itemGap: 10
         },
         grid: {
           containLabel: true,
-          bottom: 15,
           top: 30,
-          right: 15,
-          left: 50
+          bottom: 5,
+          left: 10,
+          right: 10
         },
         xAxis: {
           type: 'category',
           data: months,
-          axisLabel: { color: '#fff', rotate: 30, interval: 0 },
+          axisLabel: { color: '#fff', fontSize: 9, rotate: 30, interval: 0 },
           axisLine: { lineStyle: { color: '#5dade2' } },
           axisTick: { show: false }
         },
         yAxis: {
           type: 'value',
-          nameTextStyle: { color: '#fff' },
-          axisLabel: { color: '#fff' },
+          nameTextStyle: { color: '#fff', fontSize: 10 },
+          axisLabel: { color: '#fff', fontSize: 9 },
           splitLine: { lineStyle: { color: 'rgba(93, 173, 226, 0.3)' } },
-          axisLine: { lineStyle: { color: '#5dade2' } }
+          axisLine: { show: false }
         },
         series: [
           {
             name: '泌乳母驼',
             type: 'bar',
             stack: 'total',
+            barWidth: '60%',
             data: lactatingData,
             itemStyle: { color: '#3498db', borderRadius: [4, 4, 0, 0] },
             label: { show: false }
@@ -387,6 +360,7 @@ export default {
             name: '其他骆驼',
             type: 'bar',
             stack: 'total',
+            barWidth: '60%',
             data: otherData,
             itemStyle: { color: '#85c1e9', borderRadius: [4, 4, 0, 0] },
             label: { show: false }
@@ -395,83 +369,24 @@ export default {
         backgroundColor: 'transparent'
       });
     },
-    initBaiduMapNative() {
-      if (typeof window.BMapGL === 'undefined') {
-        console.error('百度地图API未加载，请检查AK或网络，稍后重试');
-        setTimeout(() => this.initBaiduMapNative(), 500);
-        return;
-      }
-      const mapContainer = document.getElementById('baiduMapContainer');
-      if (!mapContainer) {
-        console.error('地图容器未找到');
-        return;
-      }
-      mapContainer.innerHTML = '';
-      const map = new window.BMapGL.Map(mapContainer);
-      const centerPoint = new window.BMapGL.Point(105.669, 38.833);
-      map.centerAndZoom(centerPoint, 11);
-      map.enableScrollWheelZoom(true);
-      map.setMapStyle({ style: 'midnight' });
-      
-      const markerPoint = new window.BMapGL.Point(105.669, 38.833);
-      const marker = new window.BMapGL.Marker(markerPoint);
-      map.addOverlay(marker);
-      const infoWindow = new window.BMapGL.InfoWindow(
-        '<div style="background:#0a1a2e;color:#fff;padding:5px;border-radius:8px;"><strong>吉兰泰骆驼产业园</strong><br/>存栏骆驼: 4200峰<br/>日产奶量: 8.6吨</div>',
-        { width: 200, offset: new window.BMapGL.Size(0, -30) }
-      );
-      marker.addEventListener('click', () => {
-        map.openInfoWindow(infoWindow, markerPoint);
-      });
-      
-      const circlePoint = new window.BMapGL.Point(105.62, 38.81);
-      const circle = new window.BMapGL.Circle(circlePoint, 5000, {
-        strokeColor: "#3498db",
-        strokeWeight: 2,
-        fillColor: "#5dade2",
-        fillOpacity: 0.2
-      });
-      map.addOverlay(circle);
-      
-      const labelOpts = { position: new window.BMapGL.Point(105.69, 38.85), offset: new window.BMapGL.Size(20, 0) };
-      const label = new window.BMapGL.Label('巴音塔拉嘎查', labelOpts);
-      label.setStyle({
-        color: '#fff',
-        fontSize: '12px',
-        backgroundColor: 'rgba(0,0,0,0.6)',
-        border: 'none',
-        borderRadius: '4px',
-        padding: '2px 6px'
+    observeChartResize() {
+      const charts = ['camelChart', 'trendChart', 'lactatingBarChart'];
+      this.resizeObserver = new ResizeObserver(() => {
+        setTimeout(() => {
+          if (this.camelChartIns) this.camelChartIns.resize();
+          if (this.trendChartIns) this.trendChartIns.resize();
+          if (this.lactatingBarChartIns) this.lactatingBarChartIns.resize();
+        }, 100);
       });
-      map.addOverlay(label);
-      
-      const markerPoint2 = new window.BMapGL.Point(105.59, 38.79);
-      const marker2 = new window.BMapGL.Marker(markerPoint2);
-      map.addOverlay(marker2);
-      const infoWindow2 = new window.BMapGL.InfoWindow(
-        '<div style="background:#0a1a2e;color:#fff;padding:5px;border-radius:8px;"><strong>查干通格牧场</strong><br/>存栏骆驼: 2100峰<br/>日产奶量: 4.2吨</div>',
-        { width: 200, offset: new window.BMapGL.Size(0, -30) }
-      );
-      marker2.addEventListener('click', () => {
-        map.openInfoWindow(infoWindow2, markerPoint2);
+      charts.forEach(refName => {
+        const el = this.$refs[refName];
+        if (el) this.resizeObserver.observe(el);
       });
-      
-      this.baiduMap = map;
-      setTimeout(() => {
-        if (this.baiduMap) {
-          this.baiduMap.centerAndZoom(centerPoint, 11);
-        }
-      }, 200);
     },
     handleResize() {
       if (this.camelChartIns) this.camelChartIns.resize();
       if (this.trendChartIns) this.trendChartIns.resize();
       if (this.lactatingBarChartIns) this.lactatingBarChartIns.resize();
-      if (this.baiduMap) {
-        setTimeout(() => {
-          this.baiduMap.centerAndZoom(this.baiduMap.getCenter(), this.baiduMap.getZoom());
-        }, 100);
-      }
     }
   }
 };
@@ -480,66 +395,58 @@ export default {
 <style scoped lang="scss">
 .production-dashboard {
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - 120px);
   background: transparent;
-  padding: 20px 24px 30px;
+  padding: 20px 20px 0;
   box-sizing: border-box;
   font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
-  overflow-y: auto;
-  overflow-x: auto;
+  overflow: hidden;
 }
 
 .dashboard-main {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.2fr 2fr 1.2fr;
   gap: 20px;
-  align-items: stretch;  /* 确保所有列高度一致 */
-  
-  .col-left,
-  .col-right {
-    flex: 1.2;
-    min-width: 280px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-  
-  .col-center {
-    flex: 2;
-    min-width: 480px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
+  height: 100%;
+  min-height: 0;
 }
 
-@media (max-width: 1200px) {
-  .dashboard-main {
-    flex-wrap: wrap;
-  }
-  .col-left, .col-center, .col-right {
-    min-width: 320px;
-  }
+.col-left,
+.col-right {
+  display: grid;
+  grid-template-rows: auto 1fr 1fr;
+  gap: 20px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.col-center {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 16px;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .card {
-  background: transparent;
-  backdrop-filter: blur(0);
+  background: rgba(8, 28, 45, 0.55);
+  backdrop-filter: blur(3px);
   border-radius: 16px;
   border: 1.5px solid rgba(52, 152, 219, 0.7);
-  overflow: hidden;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
-  flex: 1;  /* 让卡片自动填充可用高度 */
+  min-height: 0;
+  overflow: hidden;
 
   &:hover {
     border-color: #5dade2;
     box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25);
-    background: rgba(52, 152, 219, 0.05);
+    background: rgba(52, 152, 219, 0.08);
   }
 
   .card-header {
-    padding: 14px 20px;
+    padding: 12px 16px;
     border-bottom: 1px solid rgba(52, 152, 219, 0.4);
     display: flex;
     justify-content: space-between;
@@ -547,7 +454,7 @@ export default {
     flex-shrink: 0;
 
     .title {
-      font-size: 16px;
+      font-size: 15px;
       font-weight: 600;
       color: #fff;
       letter-spacing: 0.5px;
@@ -564,19 +471,76 @@ export default {
   }
 }
 
-/* 地图上方统计指标 */
+/* KPI卡片 - 内容自适应 */
+.kpi-card {
+  .kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    padding: 16px;
+    flex: 1;
+
+    .kpi-item {
+      background: rgba(0, 0, 0, 0.25);
+      border-radius: 12px;
+      padding: 12px 8px;
+      text-align: center;
+      border: 1.5px solid rgba(52, 152, 219, 0.5);
+      transition: all 0.2s;
+
+      &:hover {
+        border-color: #5dade2;
+        background: rgba(52, 152, 219, 0.08);
+      }
+
+      .kpi-value {
+        font-size: 24px;
+        font-weight: bold;
+        color: #5dade2;
+
+        .unit {
+          font-size: 12px;
+          margin-left: 4px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+      }
+
+      .kpi-label {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 6px 0 4px;
+      }
+
+      .trend {
+        font-size: 10px;
+
+        &.up {
+          color: #2ecc71;
+        }
+      }
+    }
+  }
+}
+
+/* 图表容器 - 完全自适应 */
+.chart-container {
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+/* 地图统计指标 */
 .map-stats {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 12px;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  flex-shrink: 0;
 
   .stat-badge {
-    flex: 1;
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(4px);
     border-radius: 12px;
-    padding: 24px 8px;
+    padding: 16px 8px;
     text-align: center;
     border: 1.5px solid rgba(52, 152, 219, 0.6);
     transition: all 0.2s;
@@ -588,15 +552,14 @@ export default {
 
     .stat-label {
       display: block;
-      font-size: 20px;  
+      font-size: 14px;
       color: rgba(255, 255, 255, 0.85);
-      margin-bottom: 10px;
-      font-weight: 500;
+      margin-bottom: 8px;
     }
 
     .stat-number {
       display: block;
-      font-size: 28px;
+      font-size: 22px;
       font-weight: bold;
       color: #5dade2;
 
@@ -607,112 +570,44 @@ export default {
   }
 }
 
-.kpi-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  padding: 20px;
-  flex: 1;
-
-  .kpi-item {
-    background: rgba(0, 0, 0, 0.25);
-    border-radius: 12px;
-    padding: 14px;
-    text-align: center;
-    border: 1.5px solid rgba(52, 152, 219, 0.5);
-    transition: all 0.2s;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    &:hover {
-      border-color: #5dade2;
-      background: rgba(52, 152, 219, 0.08);
-    }
-
-    .kpi-value {
-      font-size: 28px;
-      font-weight: bold;
-      color: #5dade2;
-
-      .unit {
-        font-size: 14px;
-        margin-left: 4px;
-        color: rgba(255, 255, 255, 0.7);
-      }
-    }
-
-    .kpi-label {
-      font-size: 13px;
-      color: rgba(255, 255, 255, 0.9);
-      margin: 6px 0 4px;
-      font-weight: 500;
-    }
-
-    .trend {
-      font-size: 11px;
-      font-weight: 500;
-
-      &.up {
-        color: #2ecc71;
-      }
-    }
-  }
-}
-
-.chart-container {
-  width: 100%;
-  height: 220px;
-  padding: 8px;
-  flex-shrink: 0;
-}
-
-.bar-chart-container {
-  width: 100%;
-  height: 260px;
-  padding: 8px 8px 0 8px;
-  flex-shrink: 0;
-}
-
+/* 地图卡片 */
 .map-card {
-  margin-top: 0;
   flex: 1;
+  min-height: 0;
   display: flex;
-  min-height: 500px;
-  
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1.5px solid rgba(52, 152, 219, 0.6);
+  background: #0a1f2e;
+
   .baidu-map-container {
     width: 100%;
     height: 100%;
-    min-height: 480px;
-    border-radius: 16px;
-    overflow: hidden;
-    border: 1.5px solid rgba(52, 152, 219, 0.6);
-    background: #0a1f2e;
   }
 }
 
+/* 预警和任务列表 */
 .alert-list,
 .task-list {
-  padding: 8px 16px;
   flex: 1;
   overflow-y: auto;
+  padding: 12px;
 
-  .alert-item,
-  .task-item {
+  .alert-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid rgba(52, 152, 219, 0.3);
-    padding: 12px 4px;
-    font-size: 13px;
+    padding: 10px 4px;
+    font-size: 12px;
 
     .alert-type {
-      width: 46px;
+      width: 42px;
       border-radius: 20px;
       text-align: center;
-      padding: 3px 0;
+      padding: 2px 0;
+      font-size: 11px;
       background: rgba(0, 0, 0, 0.4);
-      font-weight: 500;
 
       &.warning {
         background: rgba(230, 126, 34, 0.3);
@@ -732,90 +627,64 @@ export default {
 
     .alert-msg {
       flex: 1;
-      margin-left: 12px;
+      margin-left: 10px;
       color: rgba(255, 255, 255, 0.9);
     }
 
     .alert-time {
       color: rgba(255, 255, 255, 0.5);
-      font-size: 11px;
+      font-size: 10px;
     }
   }
 }
 
-.task-item {
-  flex-direction: column;
-  align-items: flex-start !important;
+.task-list {
+  .task-item {
+    margin-bottom: 12px;
 
-  .task-name {
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: #5dade2;
-  }
+    .task-name {
+      font-weight: 600;
+      margin-bottom: 6px;
+      color: #5dade2;
+      font-size: 13px;
+    }
 
-  .task-progress {
-    width: 100%;
-    background: rgba(52, 152, 219, 0.3);
-    border-radius: 12px;
-    height: 8px;
+    .task-progress {
+      width: 100%;
+      background: rgba(52, 152, 219, 0.3);
+      border-radius: 10px;
+      height: 6px;
 
-    .progress-bar {
-      height: 8px;
-      background: #5dade2;
-      border-radius: 12px;
-      width: 0%;
+      .progress-bar {
+        height: 6px;
+        background: #5dade2;
+        border-radius: 10px;
+      }
     }
-  }
 
-  .task-info {
-    font-size: 11px;
-    margin-top: 8px;
-    color: rgba(255, 255, 255, 0.6);
+    .task-info {
+      font-size: 10px;
+      margin-top: 6px;
+      color: rgba(255, 255, 255, 0.6);
+    }
   }
 }
 
-.quota-footer {
-  text-align: center;
-  font-size: 12px;
-  padding: 12px 0 18px;
-  color: rgba(255, 255, 255, 0.7);
-  border-top: 1px solid rgba(52, 152, 219, 0.4);
-  margin-top: auto;
-  flex-shrink: 0;
-}
-
-.col-right .card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 确保左侧卡片内容自适应 */
-.col-left .card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.col-left .kpi-card {
-  flex: 0 0 auto;  /* KPI卡片不自动拉伸 */
+/* 滚动条美化 */
+.alert-list::-webkit-scrollbar,
+.task-list::-webkit-scrollbar {
+  width: 4px;
 }
 
-.col-left .chart-card {
-  flex: 1;
-  min-height: 240px;
+.alert-list::-webkit-scrollbar-track,
+.task-list::-webkit-scrollbar-track {
+  background: rgba(52, 152, 219, 0.2);
+  border-radius: 2px;
 }
 
-.production-dashboard::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.production-dashboard::-webkit-scrollbar-track {
-  background: rgba(52, 152, 219, 0.1);
-  border-radius: 3px;
-}
-.production-dashboard::-webkit-scrollbar-thumb {
+.alert-list::-webkit-scrollbar-thumb,
+.task-list::-webkit-scrollbar-thumb {
   background: #5dade2;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 </style>
\ No newline at end of file
diff --git a/chenhai-ui/src/router/index.js b/chenhai-ui/src/router/index.js
index 0c46619..3eea8e7 100644
--- a/chenhai-ui/src/router/index.js
+++ b/chenhai-ui/src/router/index.js
@@ -67,15 +67,28 @@ export const constantRoutes = [
     component: () => import('@/views/Home'),
     hidden: true
   },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: 'index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/index'),
+  //       name: 'Index',
+  //       meta: { title: '首页', icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
+
   {
     path: '',
     component: Layout,
-    redirect: 'index',
+    redirect: '/Home',
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
+        path: '/Home',
+        component: () => import('@/views/Home'),
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
     ]
diff --git a/chenhai-ui/src/views/Home.vue b/chenhai-ui/src/views/Home.vue
index 72f440a..ffe8b4f 100644
--- a/chenhai-ui/src/views/Home.vue
+++ b/chenhai-ui/src/views/Home.vue
@@ -14,8 +14,8 @@
 
                 <!-- 标题 -->
                 <div class="title">
-                        <div>阿右旗阿拉腾敖包镇骆驼产业标准化智慧化</div>
-                        <div>示范基地数据中心</div>
+                    <div>阿右旗阿拉腾敖包镇骆驼产业标准化智慧化</div>
+                    <div>示范基地数据中心</div>
                 </div>
 
                 <!-- 头部左侧时间和日期 -->
@@ -39,7 +39,9 @@
                         fontWeight: 'normal',
                         letterSpacing: '2px'
                     }" />
+                    <i class="el-icon-switch-button" @click="logout()" />
                 </div>
+
             </div>
             <div id="cen_content">
                 <transition name="fade-slide" mode="out-in">
@@ -68,6 +70,7 @@ import 'dayjs/locale/zh-cn'
 import scgk from '@/components/visual/scgk'
 import jkjc from '@/components/visual/jkjc'
 import sbgl from '@/components/visual/sbgl'
+import { getUserProfile } from '@/api/system/user'
 
 export default {
     components: {
@@ -149,9 +152,33 @@ export default {
 
         this.getCurrentDate()
         this.getCurrentTime()
+        // this.getUser()
     },
 
     methods: {
+        async logout() {
+            this.$confirm("确定要退出系统吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    this.$store.dispatch("LogOut").then(() => {
+                        location.href = "/index";
+                    });
+                })
+                .catch(() => { });
+        },
+
+        // 获取用户信息
+        // getUser() {
+        //     getUserProfile().then(res => {
+        //         console.log(111,res);
+        //         this.username = res.data.nickName
+        //     })
+        // },
+
+        // tab选项卡
         bindTab(index) {
             this.active = index
         },
@@ -205,7 +232,7 @@ export default {
             position: relative;
             background-size: 100% 100%;
 
-            .title{
+            .title {
                 width: 100%;
                 text-align: center;
                 color: #fff;
@@ -359,11 +386,11 @@ export default {
                 width: 350px;
                 position: absolute;
                 bottom: 0;
-                right: 0;
+                right: 20px;
                 left: auto;
                 top: auto;
                 display: grid;
-                grid-template-columns: 1fr 1fr;
+                grid-template-columns: 1fr 1fr 50px;
                 background: rgba(0, 0, 0, 0.3);
                 backdrop-filter: blur(5px);
                 border-radius: 8px 0 0 0;
@@ -372,6 +399,19 @@ export default {
                 div {
                     width: auto;
                 }
+
+                .el-icon-switch-button {
+                    position: absolute;
+                    color: #fff;
+                    right: 0;
+                    bottom: 20px;
+                    display: inline-block;
+                    font-size: 20px;
+                    cursor: pointer;
+                }
+                .el-icon-switch-button:hover{
+                    color: #5DACE1;
+                }
             }
         }
 
@@ -528,5 +568,4 @@ export default {
             line-height: 40px !important;
         }
     }
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/chenhai-ui/src/views/login.vue b/chenhai-ui/src/views/login.vue
index 7d71317..d090a85 100644
--- a/chenhai-ui/src/views/login.vue
+++ b/chenhai-ui/src/views/login.vue
@@ -1,11 +1,23 @@
 <template>
   <div class="login">
+    <!-- 动态背景层：骆驼剪影 + 沙尘粒子 -->
+    <div class="camel-bg">
+      <div class="camel-silhouette camel-1"></div>
+      <div class="camel-silhouette camel-2"></div>
+      <div class="camel-silhouette camel-3"></div>
+    </div>
+    <div class="sand-particles"></div>
+    
+    <!-- 主登录卡片 - 更宽的设计 -->
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <!-- 品牌区域 -->
+      <!-- 品牌区域：骆驼元素突出 -->
       <div class="brand-area">
-        <div class="logo-icon">🐫</div>
+        <div class="camel-logo">
+          <span class="camel-icon">🐫</span>
+          <span class="camel-icon-small">🐪</span>
+        </div>
         <h3 class="title">{{ title }}</h3>
-        <p class="subtitle">智慧牧场 · 轻松管理</p>
+        <p class="subtitle">🏜️ 智慧驼场 · 科技兴牧 🏜️</p>
       </div>
 
       <el-form-item prop="username">
@@ -33,7 +45,6 @@
         </el-input>
       </el-form-item>
 
-      <!-- 优化后的验证码区域：更紧凑、对齐美观 -->
       <el-form-item prop="code" v-if="captchaEnabled" class="captcha-item">
         <div class="captcha-wrapper">
           <el-input 
@@ -52,7 +63,6 @@
         </div>
       </el-form-item>
 
-      <!-- 选项栏：记住密码 + 立即注册 -->
       <div class="options-bar">
         <el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox">记住密码</el-checkbox>
         <router-link v-if="register" class="register-link" to="/register">立即注册</router-link>
@@ -71,6 +81,10 @@
         </el-button>
       </el-form-item>
       
+      <!-- 装饰性骆驼脚印 -->
+      <div class="camel-footprints">
+        <span>🐫</span><span>🐪</span><span>🐫</span><span>🐪</span><span>🐫</span>
+      </div>
     </el-form>
   </div>
 </template>
@@ -172,266 +186,524 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-// 颜色变量 - 驼场主题色（自然、大地、清新）
-$primary-color: #7c9a3e;      // 草绿色主色调
-$primary-hover: #5c7a2e;      // 深草绿
-$bg-overlay: rgba(0, 0, 0, 0.3);
-$text-dark: #2c3a1f;
-$text-light: #6b7a5a;
-$card-white: rgba(255, 255, 255, 0.96);
-$shadow-sm: 0 20px 35px -10px rgba(0, 0, 0, 0.2);
-$shadow-focus: 0 0 0 3px rgba(124, 154, 62, 0.2);
+// 骆驼牧场主题色
+$camel-brown: #c4903a;       // 驼色主色调
+$camel-dark: #8b6914;        // 深驼色
+$camel-light: #e8c89a;       // 浅驼色
+$sand-light: #f5e6c8;        // 沙色
+$grass-green: #5c8a3c;       // 草绿色
+$sky-blue: #4a7c6f;          // 天空蓝
+$text-dark: #3d2b1a;
+$text-light: #fef5e6;
+$card-bg: rgba(255, 248, 235, 0.96);
+$card-border: rgba(196, 144, 58, 0.3);
+$shadow-card: 0 30px 50px -15px rgba(0, 0, 0, 0.3);
+$shadow-focus: 0 0 0 3px rgba(196, 144, 58, 0.3);
 
 .login {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
   height: 100vh;
-  min-height: 500px;
-  background: linear-gradient(135deg, #2b5e2b 0%, #8cb36b 50%, #d4c9a3 100%);
+  min-height: 600px;
   overflow: hidden;
-
-  // 登录卡片
+  background: linear-gradient(145deg, #2d5a3b 0%, #6b8c42 30%, #c4a86a 70%, #e8d4b0 100%);
+  
+  // 骆驼剪影背景层
+  .camel-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 1;
+    
+    .camel-silhouette {
+      position: absolute;
+      bottom: 5%;
+      width: 180px;
+      height: 120px;
+      background: rgba(100, 60, 20, 0.2);
+      border-radius: 50% 40% 40% 50% / 60% 50% 50% 40%;
+      filter: blur(3px);
+      
+      &::before {
+        content: '🐪';
+        position: absolute;
+        font-size: 100px;
+        opacity: 0.25;
+        bottom: -20px;
+        left: 0;
+      }
+      
+      &.camel-1 {
+        left: 2%;
+        animation: walkCamel 25s linear infinite;
+        transform: scaleX(1);
+        &::before { content: '🐫'; }
+      }
+      
+      &.camel-2 {
+        right: 5%;
+        animation: walkCamel 30s linear infinite reverse;
+        transform: scaleX(-1);
+        &::before { content: '🐪'; font-size: 130px; }
+      }
+      
+      &.camel-3 {
+        left: 25%;
+        bottom: 15%;
+        animation: walkCamel 35s linear infinite;
+        animation-delay: -10s;
+        transform: scale(0.7);
+        &::before { content: '🐫'; opacity: 0.15; }
+      }
+    }
+  }
+  
+  // 沙尘粒子特效
+  .sand-particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+    
+    &::before, &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-image: radial-gradient(2px 2px at 10% 30%, rgba(210, 170, 100, 0.4) 2px, transparent 2px),
+                        radial-gradient(3px 3px at 85% 60%, rgba(190, 140, 70, 0.3) 3px, transparent 3px);
+      background-size: 60px 60px, 100px 100px;
+      animation: floatSand 40s linear infinite;
+    }
+    
+    &::after {
+      background-image: radial-gradient(1px 1px at 40% 80%, rgba(230, 200, 140, 0.5) 1px, transparent 1px);
+      background-size: 40px 40px;
+      animation: floatSand 30s linear infinite reverse;
+    }
+  }
+  
+  // 登录卡片 - 更宽的设计
   .login-form {
     position: relative;
-    z-index: 2;
-    width: 440px;
-    padding: 40px 35px 35px;
-    background: $card-white;
+    z-index: 20;
+    width: 540px;
+    max-width: 90vw;
+    padding: 48px 48px 40px;
+    background: $card-bg;
     backdrop-filter: blur(2px);
-    border-radius: 32px;
-    box-shadow: $shadow-sm;
-    transition: all 0.3s ease;
-    border: 1px solid rgba(255,255,255,0.5);
+    border-radius: 48px;
+    box-shadow: $shadow-card;
+    transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
+    border: 1px solid $card-border;
     
     &:hover {
-      transform: translateY(-3px);
-      box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.25);
+      transform: translateY(-5px);
+      box-shadow: 0 35px 55px -18px rgba(0, 0, 0, 0.35);
     }
   }
-
-  // 品牌区
+  
+  // 品牌区 - 骆驼元素突出
   .brand-area {
     text-align: center;
-    margin-bottom: 30px;
-    .logo-icon {
-      font-size: 56px;
-      display: inline-block;
-      animation: gentleSwing 2s infinite ease;
+    margin-bottom: 32px;
+    
+    .camel-logo {
+      margin-bottom: 12px;
+      animation: camelBounce 2s ease-in-out infinite;
+      
+      .camel-icon {
+        font-size: 70px;
+        display: inline-block;
+        filter: drop-shadow(0 4px 12px rgba(139, 105, 20, 0.3));
+        transition: all 0.3s;
+        
+        &:hover {
+          transform: scale(1.05);
+          filter: drop-shadow(0 6px 18px rgba(196, 144, 58, 0.5));
+        }
+      }
+      
+      .camel-icon-small {
+        font-size: 40px;
+        display: inline-block;
+        margin-left: -10px;
+        vertical-align: middle;
+        animation: smallCamel 1.5s ease-in-out infinite alternate;
+      }
     }
+    
     .title {
-      margin: 12px 0 6px;
-      font-size: 28px;
-      font-weight: 600;
+      margin: 8px 0 10px;
+      font-size: 24px;
+      font-weight: 700;
       color: $text-dark;
-      letter-spacing: 2px;
+      letter-spacing: 1px;
+      line-height: 1.4;
+      background: linear-gradient(135deg, #8b6914 0%, #c4903a 40%, #e8c89a 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      color: transparent;
     }
+    
     .subtitle {
-      font-size: 13px;
-      color: $text-light;
-      margin-bottom: 5px;
-      font-weight: 400;
+      font-size: 15px;
+      color: #8b6b3d;
+      font-weight: 500;
+      letter-spacing: 1px;
     }
   }
-
-  // 输入框样式优化
+  
+  // 输入框样式
   .custom-input {
+    margin-bottom: 6px;
+    
     :deep(.el-input__inner) {
-      height: 48px;
+      height: 54px;
       border-radius: 60px;
-      border: 1px solid #e2e8e6;
-      background: #fefef7;
-      padding-left: 42px;
+      border: 1.5px solid #e8dcc8;
+      background: #fffef8;
+      color: $text-dark;
+      padding-left: 54px;
       font-size: 15px;
-      transition: all 0.2s;
+      transition: all 0.3s ease;
+      
+      &::placeholder {
+        color: #b8a88a;
+      }
+      
+      &:hover {
+        border-color: $camel-brown;
+        background: #ffffff;
+      }
+      
       &:focus {
-        border-color: $primary-color;
+        border-color: $camel-brown;
         box-shadow: $shadow-focus;
       }
     }
+    
     :deep(.el-input__prefix) {
-      left: 16px;
-      top: 2px;
+      left: 20px;
+      top: 3px;
       .input-icon {
-        font-size: 18px;
-        color: $primary-color;
+        font-size: 20px;
+        color: $camel-brown;
       }
     }
   }
-
-  // ========= 优化后的验证码样式 =========
+  
+  // 验证码区域
   .captcha-item {
-    margin-bottom: 18px;
+    margin-bottom: 20px;
     
     :deep(.el-form-item__content) {
       line-height: initial;
     }
   }
-
+  
   .captcha-wrapper {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 14px;
     width: 100%;
   }
-
+  
   .captcha-input {
     flex: 1;
     
     :deep(.el-input__inner) {
-      height: 48px;
+      height: 54px;
       border-radius: 60px;
-      border: 1px solid #e2e8e6;
-      background: #fefef7;
-      padding-left: 42px;
+      border: 1.5px solid #e8dcc8;
+      background: #fffef8;
+      padding-left: 54px;
       font-size: 15px;
-      transition: all 0.2s;
       
       &:focus {
-        border-color: $primary-color;
+        border-color: $camel-brown;
         box-shadow: $shadow-focus;
       }
     }
     
     :deep(.el-input__prefix) {
-      left: 16px;
-      top: 2px;
+      left: 20px;
+      top: 3px;
       .input-icon {
-        font-size: 18px;
-        color: $primary-color;
+        font-size: 20px;
+        color: $camel-brown;
       }
     }
   }
-
+  
   .captcha-image {
     position: relative;
     flex-shrink: 0;
-    width: 110px;
-    height: 48px;
-    border-radius: 12px;
+    width: 130px;
+    height: 54px;
+    border-radius: 18px;
     overflow: hidden;
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s, box-shadow 0.2s;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    border: 1px solid $camel-brown;
     
     &:hover {
       transform: scale(1.02);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
       
       .refresh-icon {
         opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
       }
     }
   }
-
+  
   .captcha-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
-
+  
   .refresh-icon {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 22px;
+    transform: translate(-50%, -50%) scale(0.9);
+    font-size: 24px;
     font-weight: bold;
     color: white;
-    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
     opacity: 0;
-    transition: opacity 0.2s;
-    background: rgba(0, 0, 0, 0.5);
-    width: 32px;
-    height: 32px;
+    transition: all 0.25s ease;
+    background: rgba(100, 60, 20, 0.7);
+    width: 38px;
+    height: 38px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    backdrop-filter: blur(2px);
+    backdrop-filter: blur(4px);
     pointer-events: none;
   }
-
-  // 选项栏（记住密码 + 注册）
+  
+  // 选项栏
   .options-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 8px 0 25px 0;
+    margin: 10px 0 30px 0;
+    
     .remember-checkbox {
       :deep(.el-checkbox__inner) {
-        border-radius: 4px;
-        border-color: #cbd5e1;
-        background-color: #fff;
+        border-radius: 5px;
+        border-color: #c4aa80;
+        background-color: #fffef8;
+        width: 17px;
+        height: 17px;
+        
+        &::after {
+          height: 9px;
+          left: 5px;
+          top: 1px;
+          width: 4px;
+          border-color: $camel-brown;
+        }
       }
+      
       :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-        background-color: $primary-color;
-        border-color: $primary-color;
+        background-color: $camel-light;
+        border-color: $camel-brown;
       }
+      
       :deep(.el-checkbox__label) {
-        color: $text-light;
+        color: $text-dark;
         font-size: 13px;
+        font-weight: 500;
       }
     }
+    
     .register-link {
-      color: $primary-color;
+      color: $camel-brown;
       font-size: 13px;
+      font-weight: 600;
       text-decoration: none;
-      font-weight: 500;
       transition: 0.2s;
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        width: 0;
+        height: 2px;
+        background: $camel-brown;
+        transition: width 0.25s ease;
+      }
+      
       &:hover {
-        color: $primary-hover;
-        text-decoration: underline;
+        color: $camel-dark;
+        &::after {
+          width: 100%;
+        }
       }
     }
   }
-
+  
   // 登录按钮
   .login-btn {
     width: 100%;
-    height: 48px;
-    background: $primary-color;
+    height: 56px;
+    background: linear-gradient(105deg, #c4903a 0%, #a0702a 50%, #c4903a 100%);
     border: none;
     border-radius: 60px;
-    font-size: 16px;
-    font-weight: 600;
-    letter-spacing: 2px;
-    box-shadow: 0 8px 18px rgba(124, 154, 62, 0.3);
-    transition: all 0.25s;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 4px;
+    color: #fffef5;
+    box-shadow: 0 8px 20px rgba(164, 112, 42, 0.4);
+    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
+    
     &:hover, &:focus {
-      background: $primary-hover;
-      transform: scale(1.01);
-      box-shadow: 0 10px 22px rgba(92, 122, 46, 0.4);
+      background: linear-gradient(105deg, #d4a050 0%, #c4903a 50%, #d4a050 100%);
+      transform: translateY(-2px);
+      box-shadow: 0 12px 28px rgba(164, 112, 42, 0.5);
+    }
+    
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+  
+  // 骆驼脚印装饰
+  .camel-footprints {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    margin-top: 28px;
+    opacity: 0.5;
+    
+    span {
+      font-size: 16px;
+      animation: footprintWalk 1.5s ease-in-out infinite;
+      animation-delay: calc(var(--i, 0) * 0.15s);
+      
+      @for $i from 1 through 5 {
+        &:nth-child(#{$i}) {
+          --i: #{$i};
+        }
+      }
     }
   }
 }
 
-// 动画
-@keyframes gentleSwing {
-  0%,100%{ transform: rotate(0deg); }
-  50%{ transform: rotate(6deg); }
+// 动画定义
+@keyframes camelBounce {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-6px) rotate(2deg); }
 }
 
-// 响应式
-@media (max-width: 500px) {
+@keyframes smallCamel {
+  0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
+  100% { transform: translateY(-8px) rotate(5deg); opacity: 1; }
+}
+
+@keyframes walkCamel {
+  0% { transform: translateX(-10%) translateY(0); }
+  25% { transform: translateX(0%) translateY(-5px); }
+  50% { transform: translateX(10%) translateY(0); }
+  75% { transform: translateX(0%) translateY(5px); }
+  100% { transform: translateX(-10%) translateY(0); }
+}
+
+@keyframes floatSand {
+  0% { background-position: 0 0; opacity: 0.6; }
+  100% { background-position: 100px 100px; opacity: 1; }
+}
+
+@keyframes footprintWalk {
+  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
+  50% { transform: translateY(-5px) scale(1.1); opacity: 1; }
+}
+
+// 响应式适配
+@media (max-width: 650px) {
   .login .login-form {
-    width: 88%;
-    padding: 30px 20px;
+    width: 92%;
+    padding: 36px 28px 32px;
+    border-radius: 36px;
+  }
+  
+  .brand-area {
+    margin-bottom: 24px;
+    .camel-logo .camel-icon { font-size: 55px; }
+    .camel-logo .camel-icon-small { font-size: 30px; }
+    .title { font-size: 18px; }
+    .subtitle { font-size: 12px; }
   }
   
   .captcha-wrapper {
-    gap: 8px;
+    gap: 10px;
   }
   
   .captcha-image {
-    width: 95px;
-    height: 44px;
+    width: 110px;
+    height: 48px;
   }
   
-  .captcha-input :deep(.el-input__inner) {
-    height: 44px;
+  .captcha-input :deep(.el-input__inner),
+  .custom-input :deep(.el-input__inner) {
+    height: 48px;
+    padding-left: 48px;
+  }
+  
+  .login-btn {
+    height: 50px;
+    font-size: 16px;
+  }
+  
+  .camel-footprints {
+    gap: 8px;
+    span { font-size: 14px; }
+  }
+}
+
+// 暗色模式支持
+@media (prefers-color-scheme: dark) {
+  .login .login-form {
+    background: rgba(30, 25, 20, 0.92);
+    
+    .brand-area .title {
+      background: linear-gradient(135deg, #e8c89a 0%, #c4903a 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+    
+    .custom-input :deep(.el-input__inner) {
+      background: #2a2518;
+      border-color: #5a4a30;
+      color: #f0e6d8;
+      
+      &:focus {
+        border-color: $camel-brown;
+      }
+    }
+    
+    .options-bar .remember-checkbox :deep(.el-checkbox__label) {
+      color: #f0e6d8;
+    }
   }
 }
 </style>
\ No newline at end of file