diff --git a/chenhai-ui/src/components/visual/jkjc.vue b/chenhai-ui/src/components/visual/jkjc.vue
index b64e84e..1c248cc 100644
--- a/chenhai-ui/src/components/visual/jkjc.vue
+++ b/chenhai-ui/src/components/visual/jkjc.vue
@@ -1,1126 +1,1159 @@
 <template>
-    <div class="health-dashboard">
-      <!-- 主内容区域 -->
-      <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>
-            </div>
+  <div class="health-dashboard">
+    <!-- 主内容区域 -->
+    <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="card stats-card">
-            <div class="card-header">
-              <span class="title">📊 健康统计总览</span>
+          <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 class="stats-grid">
-              <div class="stat-item">
-                <div class="stat-value">
-                  <animate-number :from="0" :to="healthStats.totalCamels" duration="3000" />
-                  <span class="unit">峰</span>
-                </div>
-                <div class="stat-label">总骆驼数</div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-value">
-                  <animate-number :from="0" :to="healthStats.healthyRate" duration="3000" />
-                  <span class="unit">%</span>
-                </div>
-                <div class="stat-label">健康率</div>
-                <div class="stat-trend up">↑ 2.3%</div>
-              </div>
-              <div class="stat-item">
-                <div class="stat-value">
-                  <animate-number :from="0" :to="healthStats.avgTemp" duration="3000" :decimals="1" />
-                  <span class="unit">°C</span>
-                </div>
-                <div class="stat-label">平均体温</div>
+          </div>
+        </div>
+
+        <div class="card stats-card">
+          <div class="card-header">
+            <span class="title">📊 健康统计总览</span>
+          </div>
+          <div class="stats-grid">
+            <div class="stat-item">
+              <div class="stat-value">
+                <animate-number :from="0" :to="healthStats.totalCamels" duration="3000" />
+                <span class="unit">峰</span>
               </div>
-              <div class="stat-item">
-                <div class="stat-value">
-                  <animate-number :from="0" :to="healthStats.warningCount" duration="3000" />
-                  <span class="unit">峰</span>
-                </div>
-                <div class="stat-label">异常预警</div>
-                <div class="stat-trend danger">需关注</div>
+              <div class="stat-label">总骆驼数</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-value">
+                <animate-number :from="0" :to="healthStats.healthyRate" duration="3000" />
+                <span class="unit">%</span>
               </div>
+              <div class="stat-label">健康率</div>
+              <div class="stat-trend up">↑ 2.3%</div>
             </div>
-          </div>
-  
-          <div class="card alert-card">
-            <div class="card-header">
-              <span class="title">⚠️ 健康预警</span>
-              <span class="badge">{{ healthAlerts.length }}</span>
+            <div class="stat-item">
+              <div class="stat-value">
+                <animate-number :from="0" :to="healthStats.avgTemp" duration="3000" :decimals="1" />
+                <span class="unit">°C</span>
+              </div>
+              <div class="stat-label">平均体温</div>
             </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>
-                <span class="alert-time">{{ alert.time }}</span>
+            <div class="stat-item">
+              <div class="stat-value">
+                <animate-number :from="0" :to="healthStats.warningCount" duration="3000" />
+                <span class="unit">峰</span>
               </div>
+              <div class="stat-label">异常预警</div>
+              <div class="stat-trend danger">需关注</div>
             </div>
           </div>
         </div>
-  
-        <!-- 中间：驼圈详情 + 健康指标趋势 -->
-        <div class="col-center">
-          <div class="card pen-detail-card">
-            <div class="card-header">
-              <span class="title">📍 {{ selectedPen }} · 圈舍详情</span>
-              <span class="sub">{{ getPenCount(selectedPen) }}峰骆驼</span>
-            </div>
-            <div class="pen-detail">
-              <div class="detail-item">
-                <div class="detail-label">平均体温</div>
-                <div class="detail-value">{{ penHealthData.avgTemp }}<span class="unit">°C</span></div>
-                <div class="detail-status" :class="getTempStatus(penHealthData.avgTemp)">{{ getTempStatusText(penHealthData.avgTemp) }}</div>
-              </div>
-              <div class="detail-item">
-                <div class="detail-label">空气质量</div>
-                <div class="detail-value">{{ penHealthData.airQuality }}<span class="unit">AQI</span></div>
-                <div class="detail-status" :class="getAirStatus(penHealthData.airQuality)">{{ getAirStatusText(penHealthData.airQuality) }}</div>
-              </div>
-              <div class="detail-item">
-                <div class="detail-label">湿度</div>
-                <div class="detail-value">{{ penHealthData.humidity }}<span class="unit">%</span></div>
-                <div class="detail-status" :class="getHumidityStatus(penHealthData.humidity)">{{ getHumidityStatusText(penHealthData.humidity) }}</div>
-              </div>
-              <div class="detail-item">
-                <div class="detail-label">通风指数</div>
-                <div class="detail-value">{{ penHealthData.ventilation }}<span class="unit">级</span></div>
-                <div class="detail-status normal">良好</div>
-              </div>
-            </div>
+
+        <div class="card alert-card">
+          <div class="card-header">
+            <span class="title">⚠️ 健康预警</span>
+            <span class="badge">{{ healthAlerts.length }}</span>
           </div>
-  
-          <!-- 健康指标趋势图 -->
-          <div class="card chart-card">
-            <div class="card-header">
-              <span class="title">📈 健康指标趋势 (7天)</span>
-              <div class="chart-tabs">
-                <button 
-                  v-for="metric in chartMetrics" 
-                  :key="metric.key"
-                  :class="{ active: activeMetric === metric.key }"
-                  @click="switchMetric(metric.key)"
-                >
-                  {{ metric.name }}
-                </button>
+          <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>
-            <div ref="healthChart" class="chart-container"></div>
           </div>
-  
-          <!-- 个体骆驼健康数据 -->
-          <div class="card camel-list-card">
-            <div class="card-header">
-              <span class="title">🐪 个体骆驼健康数据</span>
-              <span class="sub">点击骆驼查看详细健康报告</span>
+        </div>
+      </div>
+
+      <!-- 中间：驼圈详情 + 健康指标趋势 -->
+      <div class="col-center">
+        <div class="card pen-detail-card">
+          <div class="card-header">
+            <span class="title">📍 {{ selectedPen }} · 圈舍详情</span>
+            <span class="sub">{{ getPenCount(selectedPen) }}峰骆驼</span>
+          </div>
+          <div class="pen-detail">
+            <div class="detail-item">
+              <div class="detail-label">平均体温</div>
+              <div class="detail-value">{{ penHealthData.avgTemp }}<span class="unit">°C</span></div>
+              <div class="detail-status" :class="getTempStatus(penHealthData.avgTemp)">{{ getTempStatusText(penHealthData.avgTemp) }}</div>
             </div>
-            <div class="camel-search">
-              <input 
-                type="text" 
-                v-model="camelSearch" 
-                placeholder="搜索骆驼编号..." 
-                class="search-input"
-              />
+            <div class="detail-item">
+              <div class="detail-label">空气质量</div>
+              <div class="detail-value">{{ penHealthData.airQuality }}<span class="unit">AQI</span></div>
+              <div class="detail-status" :class="getAirStatus(penHealthData.airQuality)">{{ getAirStatusText(penHealthData.airQuality) }}</div>
             </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="detail-item">
+              <div class="detail-label">湿度</div>
+              <div class="detail-value">{{ penHealthData.humidity }}<span class="unit">%</span></div>
+              <div class="detail-status" :class="getHumidityStatus(penHealthData.humidity)">{{ getHumidityStatusText(penHealthData.humidity) }}</div>
+            </div>
+            <div class="detail-item">
+              <div class="detail-label">通风指数</div>
+              <div class="detail-value">{{ penHealthData.ventilation }}<span class="unit">级</span></div>
+              <div class="detail-status normal">良好</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 健康指标趋势图 -->
+        <div class="card chart-card">
+          <div class="card-header">
+            <span class="title">📈 健康指标趋势 (7天)</span>
+            <div class="chart-tabs">
+              <button 
+                v-for="metric in chartMetrics" 
+                :key="metric.key"
+                :class="{ active: activeMetric === metric.key }"
+                @click="switchMetric(metric.key)"
               >
-                <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>
+                {{ metric.name }}
+              </button>
+            </div>
+          </div>
+          <div ref="healthChart" class="chart-container"></div>
+        </div>
+
+        <!-- 个体骆驼健康数据 -->
+        <div class="card camel-list-card">
+          <div class="card-header">
+            <span class="title">🐪 个体骆驼健康数据</span>
+            <span class="sub">点击骆驼查看详细健康报告</span>
+          </div>
+          <div class="camel-search">
+            <input 
+              type="text" 
+              v-model="camelSearch" 
+              placeholder="搜索骆驼编号..." 
+              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>
             </div>
           </div>
         </div>
-  
-        <!-- 右侧：个体骆驼详细健康报告 -->
-        <div class="col-right">
-          <div class="card health-report-card">
-            <div class="card-header">
-              <span class="title">📋 个体健康报告</span>
-              <span v-if="selectedCamel" class="sub">{{ selectedCamel.id }}</span>
+      </div>
+
+      <!-- 右侧：个体骆驼详细健康报告 -->
+      <div class="col-right">
+        <div class="card health-report-card">
+          <div class="card-header">
+            <span class="title">📋 个体健康报告</span>
+            <span v-if="selectedCamel" class="sub">{{ selectedCamel.id }}</span>
+          </div>
+          <div v-if="selectedCamel" class="health-report">
+            <div class="report-header">
+              <div class="camel-avatar-large">🐪</div>
+              <div class="camel-basic">
+                <div class="camel-name">{{ selectedCamel.id }}</div>
+                <div class="camel-location">圈舍: {{ selectedCamel.pen }}</div>
+              </div>
+              <div class="health-badge" :class="selectedCamel.healthStatus">
+                {{ getHealthStatusText(selectedCamel.healthStatus) }}
+              </div>
             </div>
-            <div v-if="selectedCamel" class="health-report">
-              <div class="report-header">
-                <div class="camel-avatar-large">🐪</div>
-                <div class="camel-basic">
-                  <div class="camel-name">{{ selectedCamel.id }}</div>
-                  <div class="camel-location">圈舍: {{ selectedCamel.pen }}</div>
+            
+            <div class="report-metrics">
+              <div class="metric-row">
+                <div class="metric">
+                  <div class="metric-label">体温</div>
+                  <div class="metric-value" :class="getTempWarning(selectedCamel.temperature)">
+                    {{ selectedCamel.temperature }}<span class="unit">°C</span>
+                  </div>
+                  <div class="metric-range">正常范围: 36.5-38.5°C</div>
+                </div>
+                <div class="metric">
+                  <div class="metric-label">心率</div>
+                  <div class="metric-value">{{ selectedCamel.heartRate }}<span class="unit">bpm</span></div>
+                  <div class="metric-range">正常范围: 40-60 bpm</div>
                 </div>
-                <div class="health-badge" :class="selectedCamel.healthStatus">
-                  {{ getHealthStatusText(selectedCamel.healthStatus) }}
+                <div class="metric">
+                  <div class="metric-label">呼吸频率</div>
+                  <div class="metric-value">{{ selectedCamel.respRate }}<span class="unit">次/分</span></div>
+                  <div class="metric-range">正常范围: 8-16次/分</div>
                 </div>
               </div>
               
-              <div class="report-metrics">
-                <div class="metric-row">
-                  <div class="metric">
-                    <div class="metric-label">体温</div>
-                    <div class="metric-value" :class="getTempWarning(selectedCamel.temperature)">
-                      {{ selectedCamel.temperature }}<span class="unit">°C</span>
-                    </div>
-                    <div class="metric-range">正常范围: 36.5-38.5°C</div>
-                  </div>
-                  <div class="metric">
-                    <div class="metric-label">心率</div>
-                    <div class="metric-value">{{ selectedCamel.heartRate }}<span class="unit">bpm</span></div>
-                    <div class="metric-range">正常范围: 40-60 bpm</div>
-                  </div>
-                  <div class="metric">
-                    <div class="metric-label">呼吸频率</div>
-                    <div class="metric-value">{{ selectedCamel.respRate }}<span class="unit">次/分</span></div>
-                    <div class="metric-range">正常范围: 8-16次/分</div>
+              <div class="metric-row">
+                <div class="metric">
+                  <div class="metric-label">活动量</div>
+                  <div class="metric-value">{{ selectedCamel.activity }}<span class="unit">步</span></div>
+                  <div class="metric-progress">
+                    <div class="progress-bar" :style="{ width: (selectedCamel.activity / 8000 * 100) + '%' }"></div>
                   </div>
                 </div>
-                
-                <div class="metric-row">
-                  <div class="metric">
-                    <div class="metric-label">活动量</div>
-                    <div class="metric-value">{{ selectedCamel.activity }}<span class="unit">步</span></div>
-                    <div class="metric-progress">
-                      <div class="progress-bar" :style="{ width: (selectedCamel.activity / 8000 * 100) + '%' }"></div>
-                    </div>
-                  </div>
-                  <div class="metric">
-                    <div class="metric-label">饮水次数</div>
-                    <div class="metric-value">{{ selectedCamel.waterIntake }}<span class="unit">次/日</span></div>
-                  </div>
-                  <div class="metric">
-                    <div class="metric-label">采食量</div>
-                    <div class="metric-value">{{ selectedCamel.feedIntake }}<span class="unit">kg</span></div>
-                  </div>
+                <div class="metric">
+                  <div class="metric-label">饮水次数</div>
+                  <div class="metric-value">{{ selectedCamel.waterIntake }}<span class="unit">次/日</span></div>
+                </div>
+                <div class="metric">
+                  <div class="metric-label">采食量</div>
+                  <div class="metric-value">{{ selectedCamel.feedIntake }}<span class="unit">kg</span></div>
                 </div>
               </div>
-              
-              <div class="report-timeline">
-                <div class="timeline-title">📅 近期健康记录</div>
-                <div class="timeline-list">
-                  <div v-for="record in selectedCamel.healthRecords" :key="record.date" class="timeline-item">
-                    <div class="timeline-date">{{ record.date }}</div>
-                    <div class="timeline-content">
-                      <div class="timeline-event">{{ record.event }}</div>
-                      <div class="timeline-detail">{{ record.detail }}</div>
-                    </div>
+            </div>
+            
+            <div class="report-timeline">
+              <div class="timeline-title">📅 近期健康记录</div>
+              <div class="timeline-list">
+                <div v-for="record in selectedCamel.healthRecords" :key="record.date" class="timeline-item">
+                  <div class="timeline-date">{{ record.date }}</div>
+                  <div class="timeline-content">
+                    <div class="timeline-event">{{ record.event }}</div>
+                    <div class="timeline-detail">{{ record.detail }}</div>
                   </div>
                 </div>
               </div>
             </div>
-            <div v-else class="no-selection">
-              <span class="placeholder-icon">🐪</span>
-              <p>点击左侧骆驼查看详细健康报告</p>
-            </div>
           </div>
-  
-          <!-- 健康建议 -->
-          <div class="card advice-card">
-            <div class="card-header">
-              <span class="title">💡 健康管理建议</span>
-            </div>
-            <div class="advice-list">
-              <div class="advice-item" v-for="(advice, idx) in healthAdvice" :key="idx">
-                <span class="advice-icon">{{ advice.icon }}</span>
-                <div class="advice-content">
-                  <div class="advice-title">{{ advice.title }}</div>
-                  <div class="advice-desc">{{ advice.desc }}</div>
-                </div>
+          <div v-else class="no-selection">
+            <span class="placeholder-icon">🐪</span>
+            <p>点击左侧骆驼查看详细健康报告</p>
+          </div>
+        </div>
+
+        <!-- 健康建议 -->
+        <div class="card advice-card">
+          <div class="card-header">
+            <span class="title">💡 健康管理建议</span>
+          </div>
+          <div class="advice-list">
+            <div class="advice-item" v-for="(advice, idx) in healthAdvice" :key="idx">
+              <span class="advice-icon">{{ advice.icon }}</span>
+              <div class="advice-content">
+                <div class="advice-title">{{ advice.title }}</div>
+                <div class="advice-desc">{{ advice.desc }}</div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </template>
-  
-  <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 },
-          { name: 'C1圈', count: 35 }, { name: 'C2圈', count: 35 },
-          { name: 'D1圈', count: 35 }, { name: 'D2圈', count: 35 },
-          { name: 'E1圈', count: 35 }, { name: 'E2圈', count: 35 },
-          { name: 'F1圈', count: 35 }, { name: 'F2圈', count: 35 },
-          { name: 'G1圈', count: 35 }, { name: 'G2圈', count: 35 },
-          { name: 'H1圈', count: 35 }, { name: 'H2圈', count: 35 },
-          { name: 'I1圈', count: 35 }, { name: 'I2圈', count: 35 },
-          { name: 'K1圈', count: 35 }, { name: 'K2圈', count: 35 }
-        ],
-        selectedPen: 'A1圈',
-        
-        // 健康统计数据
-        healthStats: {
-          totalCamels: 700,
-          healthyRate: 94.2,
-          avgTemp: 37.6,
-          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' },
-          { level: 'low', levelText: '提示', title: 'C1圈活动量偏低', desc: '3峰骆驼活动量低于正常值', time: '08:47' },
-          { level: 'medium', levelText: '警告', title: 'E2圈饮水异常', desc: '2峰骆驼饮水次数减少', time: '07:22' }
-        ],
-        
-        // 圈舍健康数据
-        penHealthData: {
-          avgTemp: 37.5,
-          airQuality: 68,
-          humidity: 58,
-          ventilation: 3
-        },
-        
-        // 图表配置
-        chartMetrics: [
-          { key: 'temperature', name: '体温' },
-          { key: 'activity', name: '活动量' },
-          { key: 'healthRate', name: '健康率' }
-        ],
-        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圈空气质量下降，建议开启通风设备' },
-          { icon: '💧', title: '饮水管理', desc: 'E2圈饮水异常，检查饮水设备是否故障' },
-          { icon: '🏃', title: '活动促进', desc: 'C1圈活动量偏低，建议增加驱赶活动' }
-        ],
-        
-        // ECharts实例
-        healthChartIns: null,
-        
-        // 时间标签
-        timeLabels: []
-      };
-    },
-    
-    computed: {
-      filteredCamels() {
-        if (!this.camelSearch) {
-          return this.camels.filter(c => c.pen === this.selectedPen);
-        }
-        return this.camels.filter(c => 
-          c.pen === this.selectedPen && 
-          c.id.toLowerCase().includes(this.camelSearch.toLowerCase())
-        );
-      }
-    },
-    
-    mounted() {
-      this.getCurrentDateTime();
-      this.initTimeLabels();
-      this.initCamelData();
-      this.initHealthChart();
-      window.addEventListener('resize', this.handleResize);
-    },
-    
-    beforeDestroy() {
-      if (this.healthChartIns) this.healthChartIns.dispose();
-      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'));
-        }
-      },
-      
-      initCamelData() {
-        // 为每个圈舍生成35峰骆驼数据
-        const allCamels = [];
-        const statuses = ['healthy', 'warning', 'critical'];
-        const statusWeights = [0.85, 0.12, 0.03];
-        
-        this.pens.forEach(pen => {
-          for (let i = 1; i <= pen.count; i++) {
-            const random = Math.random();
-            let healthStatus = 'healthy';
-            if (random < statusWeights[0]) healthStatus = 'healthy';
-            else if (random < statusWeights[0] + statusWeights[1]) healthStatus = 'warning';
-            else healthStatus = 'critical';
-            
-            const baseTemp = 37.5;
-            const tempOffset = healthStatus === 'healthy' ? (Math.random() - 0.5) * 0.8 : 
-                               healthStatus === 'warning' ? 0.8 + Math.random() * 0.5 : 
-                               1.3 + Math.random() * 0.7;
-            
-            allCamels.push({
-              id: `${pen.name}-${String(i).padStart(3, '0')}`,
-              pen: pen.name,
-              temperature: +(baseTemp + (healthStatus !== 'healthy' ? tempOffset : tempOffset)).toFixed(1),
-              heartRate: Math.floor(45 + (healthStatus !== 'healthy' ? Math.random() * 15 : (Math.random() - 0.5) * 10)),
-              respRate: Math.floor(10 + (healthStatus !== 'healthy' ? Math.random() * 8 : (Math.random() - 0.5) * 4)),
-              activity: Math.floor(4000 + Math.random() * 4000),
-              waterIntake: Math.floor(3 + Math.random() * 5),
-              feedIntake: +(8 + Math.random() * 4).toFixed(1),
-              healthStatus: healthStatus,
-              healthRecords: this.generateHealthRecords(healthStatus)
-            });
-          }
-        });
-        this.camels = allCamels;
-      },
-      
-      generateHealthRecords(status) {
-        const records = [];
-        const dates = [0, 1, 2, 3, 4, 5, 6];
-        for (let i = 0; i < 5; i++) {
-          const date = dayjs().subtract(dates[i], 'day').format('MM/DD');
-          if (status === 'healthy') {
-            records.push({
-              date: date,
-              event: '日常巡检',
-              detail: '体温正常，精神状态良好，采食饮水正常'
-            });
-          } else if (status === 'warning') {
-            records.push({
-              date: date,
-              event: i === 0 ? '体温偏高' : '持续观察',
-              detail: i === 0 ? '体温38.9°C，建议隔离观察' : '体温略高，精神状态尚可'
-            });
-          } else {
-            records.push({
-              date: date,
-              event: i === 0 ? '异常告警' : '医疗干预',
-              detail: i === 0 ? '体温39.5°C，食欲不振，精神萎靡' : '已用药治疗，继续观察'
-            });
-          }
-        }
-        return records;
-      },
-      
-      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),
-          humidity: Math.floor(40 + Math.random() * 30),
-          ventilation: Math.floor(2 + Math.random() * 3)
-        };
-      },
-      
-      getPenCount(penName) {
-        const pen = this.pens.find(p => p.name === penName);
-        return pen ? pen.count : 0;
-      },
-      
-      selectCamel(camel) {
-        this.selectedCamel = camel;
-      },
-      
-      getHealthStatusText(status) {
-        const map = {
-          healthy: '健康',
-          warning: '亚健康',
-          critical: '异常'
-        };
-        return map[status] || '未知';
-      },
+  </div>
+</template>
+
+<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 },
+        { name: 'C1圈', count: 35 }, { name: 'C2圈', count: 35 },
+        { name: 'D1圈', count: 35 }, { name: 'D2圈', count: 35 },
+        { name: 'E1圈', count: 35 }, { name: 'E2圈', count: 35 },
+        { name: 'F1圈', count: 35 }, { name: 'F2圈', count: 35 },
+        { name: 'G1圈', count: 35 }, { name: 'G2圈', count: 35 },
+        { name: 'H1圈', count: 35 }, { name: 'H2圈', count: 35 },
+        { name: 'I1圈', count: 35 }, { name: 'I2圈', count: 35 },
+        { name: 'K1圈', count: 35 }, { name: 'K2圈', count: 35 }
+      ],
+      selectedPen: 'A1圈',
       
-      getTempStatus(temp) {
-        if (temp < 36.5) return 'warning';
-        if (temp > 38.5) return 'danger';
-        return 'normal';
+      // 健康统计数据
+      healthStats: {
+        totalCamels: 700,
+        healthyRate: 94.2,
+        avgTemp: 37.6,
+        warningCount: 42
       },
       
-      getTempStatusText(temp) {
-        if (temp < 36.5) return '偏低';
-        if (temp > 38.5) return '偏高';
-        return '正常';
-      },
+      // 健康预警
+      healthAlerts: [
+        { level: 'high', levelText: '紧急', title: 'A1圈骆驼体温异常', desc: '编号A1-023体温39.2°C', time: '09:32' },
+        { level: 'medium', levelText: '警告', title: 'B2圈空气质量下降', desc: '氨气浓度超标', time: '09:15' },
+        { level: 'low', levelText: '提示', title: 'C1圈活动量偏低', desc: '3峰骆驼活动量低于正常值', time: '08:47' },
+        { level: 'medium', levelText: '警告', title: 'E2圈饮水异常', desc: '2峰骆驼饮水次数减少', time: '07:22' }
+      ],
       
-      getAirStatus(airQuality) {
-        if (airQuality > 100) return 'danger';
-        if (airQuality > 70) return 'warning';
-        return 'normal';
+      // 圈舍健康数据
+      penHealthData: {
+        avgTemp: 37.5,
+        airQuality: 68,
+        humidity: 58,
+        ventilation: 3
       },
       
-      getAirStatusText(airQuality) {
-        if (airQuality > 100) return '差';
-        if (airQuality > 70) return '一般';
-        return '良好';
-      },
+      // 图表配置
+      chartMetrics: [
+        { key: 'temperature', name: '体温' },
+        { key: 'activity', name: '活动量' },
+        { key: 'healthRate', name: '健康率' }
+      ],
+      activeMetric: 'temperature',
       
-      getHumidityStatus(humidity) {
-        if (humidity > 75) return 'warning';
-        if (humidity < 40) return 'warning';
-        return 'normal';
-      },
+      // 骆驼数据 (每个圈舍35峰骆驼)
+      camels: [],
+      camelSearch: '',
+      selectedCamel: null,
       
-      getHumidityStatusText(humidity) {
-        if (humidity > 75) return '偏高';
-        if (humidity < 40) return '偏低';
-        return '适宜';
+      // 趋势数据
+      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]
       },
       
-      getTempWarning(temp) {
-        if (temp < 36.5 || temp > 38.5) return 'warning';
-        return '';
-      },
+      // 健康建议
+      healthAdvice: [
+        { icon: '🌡️', title: '体温监控', desc: 'A1圈有2峰骆驼体温偏高，建议隔离观察' },
+        { icon: '💨', title: '通风改善', desc: 'B2圈空气质量下降，建议开启通风设备' },
+        { icon: '💧', title: '饮水管理', desc: 'E2圈饮水异常，检查饮水设备是否故障' },
+        { icon: '🏃', title: '活动促进', desc: 'C1圈活动量偏低，建议增加驱赶活动' }
+      ],
       
-      initHealthChart() {
-        const chartDom = this.$refs.healthChart;
-        this.healthChartIns = echarts.init(chartDom);
-        this.updateHealthChart();
-      },
+      // ECharts实例
+      healthChartIns: null,
       
-      updateHealthChart() {
-        const currentData = this.trendData[this.activeMetric];
-        const unitMap = {
-          temperature: '°C',
-          activity: '步',
-          healthRate: '%'
-        };
-        const nameMap = {
-          temperature: '平均体温',
-          activity: '平均活动量',
-          healthRate: '健康率'
-        };
-        const yAxisMin = this.activeMetric === 'healthRate' ? 90 : null;
-        
-        this.healthChartIns.setOption({
-          tooltip: { 
-            trigger: 'axis',
-            backgroundColor: 'rgba(0,0,0,0.7)',
-            borderColor: '#3498db',
-            textStyle: { color: '#fff' }
-          },
-          xAxis: {
-            type: 'category',
-            data: this.timeLabels,
-            axisLabel: { color: '#fff' },
-            axisLine: { lineStyle: { color: '#5dade2' } }
-          },
-          yAxis: {
-            type: 'value',
-            name: `${nameMap[this.activeMetric]} (${unitMap[this.activeMetric]})`,
-            nameTextStyle: { color: '#fff' },
-            axisLabel: { color: '#fff' },
-            splitLine: { lineStyle: { color: 'rgba(93, 173, 226, 0.3)' } },
-            axisLine: { lineStyle: { color: '#5dade2' } },
-            min: yAxisMin
-          },
-          series: [{
-            data: currentData,
-            type: 'line',
-            smooth: true,
-            lineStyle: { width: 3, 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)' }
-            ]) },
-            symbol: 'circle',
-            symbolSize: 8,
-            itemStyle: { color: '#3498db' }
-          }],
-          grid: { containLabel: true, bottom: 20, top: 30, right: 20, left: 55 }
-        });
-      },
+      // 时间标签
+      timeLabels: []
+    };
+  },
+  
+  computed: {
+    filteredCamels() {
+      if (!this.camelSearch) {
+        return this.camels.filter(c => c.pen === this.selectedPen);
+      }
+      return this.camels.filter(c => 
+        c.pen === this.selectedPen && 
+        c.id.toLowerCase().includes(this.camelSearch.toLowerCase())
+      );
+    }
+  },
+  
+  mounted() {
+    this.getCurrentDateTime();
+    this.initTimeLabels();
+    this.initCamelData();
+    this.initHealthChart();
+    window.addEventListener('resize', this.handleResize);
+  },
+  
+  beforeDestroy() {
+    if (this.healthChartIns) this.healthChartIns.dispose();
+    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'));
+      }
+    },
+    
+    initCamelData() {
+      // 为每个圈舍生成35峰骆驼数据
+      const allCamels = [];
+      const statuses = ['healthy', 'warning', 'critical'];
+      const statusWeights = [0.85, 0.12, 0.03];
       
-      switchMetric(metric) {
-        this.activeMetric = metric;
-        this.updateHealthChart();
-      },
+      this.pens.forEach(pen => {
+        for (let i = 1; i <= pen.count; i++) {
+          const random = Math.random();
+          let healthStatus = 'healthy';
+          if (random < statusWeights[0]) healthStatus = 'healthy';
+          else if (random < statusWeights[0] + statusWeights[1]) healthStatus = 'warning';
+          else healthStatus = 'critical';
+          
+          const baseTemp = 37.5;
+          const tempOffset = healthStatus === 'healthy' ? (Math.random() - 0.5) * 0.8 : 
+                             healthStatus === 'warning' ? 0.8 + Math.random() * 0.5 : 
+                             1.3 + Math.random() * 0.7;
+          
+          allCamels.push({
+            id: `${pen.name}-${String(i).padStart(3, '0')}`,
+            pen: pen.name,
+            temperature: +(baseTemp + (healthStatus !== 'healthy' ? tempOffset : tempOffset)).toFixed(1),
+            heartRate: Math.floor(45 + (healthStatus !== 'healthy' ? Math.random() * 15 : (Math.random() - 0.5) * 10)),
+            respRate: Math.floor(10 + (healthStatus !== 'healthy' ? Math.random() * 8 : (Math.random() - 0.5) * 4)),
+            activity: Math.floor(4000 + Math.random() * 4000),
+            waterIntake: Math.floor(3 + Math.random() * 5),
+            feedIntake: +(8 + Math.random() * 4).toFixed(1),
+            healthStatus: healthStatus,
+            healthRecords: this.generateHealthRecords(healthStatus)
+          });
+        }
+      });
+      this.camels = allCamels;
+    },
+    
+    generateHealthRecords(status) {
+      const records = [];
+      const dates = [0, 1, 2, 3, 4, 5, 6];
+      for (let i = 0; i < 5; i++) {
+        const date = dayjs().subtract(dates[i], 'day').format('MM/DD');
+        if (status === 'healthy') {
+          records.push({
+            date: date,
+            event: '日常巡检',
+            detail: '体温正常，精神状态良好，采食饮水正常'
+          });
+        } else if (status === 'warning') {
+          records.push({
+            date: date,
+            event: i === 0 ? '体温偏高' : '持续观察',
+            detail: i === 0 ? '体温38.9°C，建议隔离观察' : '体温略高，精神状态尚可'
+          });
+        } else {
+          records.push({
+            date: date,
+            event: i === 0 ? '异常告警' : '医疗干预',
+            detail: i === 0 ? '体温39.5°C，食欲不振，精神萎靡' : '已用药治疗，继续观察'
+          });
+        }
+      }
+      return records;
+    },
+    
+    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),
+        humidity: Math.floor(40 + Math.random() * 30),
+        ventilation: Math.floor(2 + Math.random() * 3)
+      };
+    },
+    
+    getPenCount(penName) {
+      const pen = this.pens.find(p => p.name === penName);
+      return pen ? pen.count : 0;
+    },
+    
+    selectCamel(camel) {
+      this.selectedCamel = camel;
+    },
+    
+    getHealthStatusText(status) {
+      const map = {
+        healthy: '健康',
+        warning: '亚健康',
+        critical: '异常'
+      };
+      return map[status] || '未知';
+    },
+    
+    getTempStatus(temp) {
+      if (temp < 36.5) return 'warning';
+      if (temp > 38.5) return 'danger';
+      return 'normal';
+    },
+    
+    getTempStatusText(temp) {
+      if (temp < 36.5) return '偏低';
+      if (temp > 38.5) return '偏高';
+      return '正常';
+    },
+    
+    getAirStatus(airQuality) {
+      if (airQuality > 100) return 'danger';
+      if (airQuality > 70) return 'warning';
+      return 'normal';
+    },
+    
+    getAirStatusText(airQuality) {
+      if (airQuality > 100) return '差';
+      if (airQuality > 70) return '一般';
+      return '良好';
+    },
+    
+    getHumidityStatus(humidity) {
+      if (humidity > 75) return 'warning';
+      if (humidity < 40) return 'warning';
+      return 'normal';
+    },
+    
+    getHumidityStatusText(humidity) {
+      if (humidity > 75) return '偏高';
+      if (humidity < 40) return '偏低';
+      return '适宜';
+    },
+    
+    getTempWarning(temp) {
+      if (temp < 36.5 || temp > 38.5) return 'warning';
+      return '';
+    },
+    
+    initHealthChart() {
+      const chartDom = this.$refs.healthChart;
+      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 yAxisMin = this.activeMetric === 'healthRate' ? 90 : null;
       
+      this.healthChartIns.setOption({
+        tooltip: { 
+          trigger: 'axis',
+          backgroundColor: 'rgba(0,0,0,0.7)',
+          borderColor: '#3498db',
+          textStyle: { color: '#fff' }
+        },
+        xAxis: {
+          type: 'category',
+          data: this.timeLabels,
+          axisLabel: { color: '#fff' },
+          axisLine: { lineStyle: { color: '#5dade2' } }
+        },
+        yAxis: {
+          type: 'value',
+          name: `${nameMap[this.activeMetric]} (${unitMap[this.activeMetric]})`,
+          nameTextStyle: { color: '#fff' },
+          axisLabel: { color: '#fff' },
+          splitLine: { lineStyle: { color: 'rgba(93, 173, 226, 0.3)' } },
+          axisLine: { lineStyle: { color: '#5dade2' } },
+          min: yAxisMin
+        },
+        series: [{
+          data: currentData,
+          type: 'line',
+          smooth: true,
+          lineStyle: { width: 3, 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)' }
+          ]) },
+          symbol: 'circle',
+          symbolSize: 8,
+          itemStyle: { color: '#3498db' }
+        }],
+        grid: { containLabel: true, bottom: 20, top: 30, right: 20, left: 55 }
+      });
+    },
+    
+    switchMetric(metric) {
+      this.activeMetric = metric;
+      this.updateHealthChart();
+    },
+    
 
-      
-      handleResize() {
-        if (this.healthChartIns) this.healthChartIns.resize();
-      }
+    
+    handleResize() {
+      if (this.healthChartIns) this.healthChartIns.resize();
     }
-  };
-  </script>
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.health-dashboard {
+  width: 100%;
+  height: calc(100vh - 100px);
+  background: transparent;
+  padding: 20px 24px 30px;
+  box-sizing: border-box;
+  font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+
+.dashboard-main {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+  align-items: stretch;
   
-  <style scoped lang="scss">
-  .health-dashboard {
-    width: 100%;
-    height: calc(100vh - 100px);
-    background: transparent;
-    padding: 20px 24px 30px;
-    box-sizing: border-box;
-    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', sans-serif;
-    overflow-y: auto;
-    overflow-x: auto;
+  .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;
   }
+}
+
+.card {
+  background: transparent;
+  backdrop-filter: blur(0);
+  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;
   
+  &:hover {
+    border-color: #5dade2;
+    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25);
+    background: rgba(52, 152, 219, 0.05);
+  }
   
-  .dashboard-main {
+  .card-header {
+    padding: 14px 20px;
+    border-bottom: 1px solid rgba(52, 152, 219, 0.4);
     display: flex;
-    gap: 20px;
+    justify-content: space-between;
+    align-items: center;
     flex-wrap: wrap;
-    .col-left, .col-right {
-      flex: 1.1;
-      min-width: 280px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
+    gap: 10px;
+    flex-shrink: 0;
+    
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #fff;
+      letter-spacing: 0.5px;
+      text-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
     }
-    .col-center {
-      flex: 1.8;
-      min-width: 420px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
+    .badge {
+      background: #e74c3c;
+      border-radius: 30px;
+      padding: 2px 10px;
+      font-size: 12px;
+      color: white;
     }
-  }
-  
-  .card {
-    background: transparent;
-    backdrop-filter: blur(0);
-    border-radius: 16px;
-    border: 1.5px solid rgba(52, 152, 219, 0.7);
-    overflow: hidden;
-    transition: all 0.3s ease;
-    &:hover {
-      border-color: #5dade2;
-      box-shadow: 0 4px 20px rgba(52, 152, 219, 0.25);
-      background: rgba(52, 152, 219, 0.05);
+    .sub {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.7);
     }
-    .card-header {
-      padding: 14px 20px;
-      border-bottom: 1px solid rgba(52, 152, 219, 0.4);
+    .chart-tabs {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 10px;
-      .title {
-        font-size: 16px;
-        font-weight: 600;
+      gap: 8px;
+      button {
+        background: rgba(52, 152, 219, 0.2);
+        border: 1px solid rgba(52, 152, 219, 0.4);
+        border-radius: 20px;
+        padding: 4px 12px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.8);
+        cursor: pointer;
+        transition: all 0.2s;
+        &:hover, &.active {
+          background: #3498db;
+          border-color: #3498db;
+          color: white;
+        }
+      }
+    }
+  }
+}
+
+// 驼圈列表
+.pen-list-card {
+  .pen-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    padding: 16px;
+    .pen-item {
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(52, 152, 219, 0.4);
+      border-radius: 12px;
+      padding: 12px 8px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+      &:hover, &.active {
+        border-color: #5dade2;
+        background: rgba(52, 152, 219, 0.15);
+        transform: translateY(-2px);
+      }
+      .pen-name {
+        font-size: 14px;
+        font-weight: 500;
         color: #fff;
-        letter-spacing: 0.5px;
-        text-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+        margin-bottom: 4px;
       }
-      .badge {
-        background: #e74c3c;
-        border-radius: 30px;
-        padding: 2px 10px;
-        font-size: 12px;
-        color: white;
+      .pen-count {
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
+}
+
+// 统计卡片
+.stats-card {
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    padding: 20px;
+    .stat-item {
+      text-align: center;
+      .stat-value {
+        font-size: 28px;
+        font-weight: bold;
+        color: #5dade2;
+        .unit {
+          font-size: 12px;
+          margin-left: 2px;
+          color: rgba(255, 255, 255, 0.6);
+        }
       }
-      .sub {
+      .stat-label {
         font-size: 11px;
         color: rgba(255, 255, 255, 0.7);
+        margin: 4px 0;
       }
-      .chart-tabs {
-        display: flex;
-        gap: 8px;
-        button {
-          background: rgba(52, 152, 219, 0.2);
-          border: 1px solid rgba(52, 152, 219, 0.4);
-          border-radius: 20px;
-          padding: 4px 12px;
-          font-size: 11px;
-          color: rgba(255, 255, 255, 0.8);
-          cursor: pointer;
-          transition: all 0.2s;
-          &:hover, &.active {
-            background: #3498db;
-            border-color: #3498db;
-            color: white;
-          }
-        }
+      .stat-trend {
+        font-size: 10px;
+        &.up { color: #2ecc71; }
+        &.danger { color: #e74c3c; }
       }
     }
   }
+}
+
+// 预警列表
+.alert-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   
-  // 驼圈列表
-  .pen-list-card {
-    .pen-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 10px;
-      padding: 16px;
-      .pen-item {
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(52, 152, 219, 0.4);
-        border-radius: 12px;
-        padding: 12px 8px;
+  .alert-list {
+    padding: 8px 16px;
+    flex: 1;
+    overflow-y: auto;
+    .alert-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      border-bottom: 1px solid rgba(52, 152, 219, 0.2);
+      padding: 12px 4px;
+      .alert-level {
+        font-size: 10px;
+        padding: 2px 8px;
+        border-radius: 20px;
+        min-width: 40px;
         text-align: center;
-        cursor: pointer;
-        transition: all 0.2s;
-        &:hover, &.active {
-          border-color: #5dade2;
-          background: rgba(52, 152, 219, 0.15);
-          transform: translateY(-2px);
+        &.high {
+          background: rgba(231, 76, 60, 0.2);
+          color: #e74c3c;
         }
-        .pen-name {
-          font-size: 14px;
+        &.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: #fff;
-          margin-bottom: 4px;
+          color: rgba(255, 255, 255, 0.9);
         }
-        .pen-count {
+        .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);
+      }
     }
   }
-  
-  // 统计卡片
-  .stats-card {
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 16px;
-      padding: 20px;
-      .stat-item {
-        text-align: center;
-        .stat-value {
-          font-size: 28px;
-          font-weight: bold;
-          color: #5dade2;
-          .unit {
-            font-size: 12px;
-            margin-left: 2px;
-            color: rgba(255, 255, 255, 0.6);
-          }
-        }
-        .stat-label {
+}
+
+// 圈舍详情
+.pen-detail-card {
+  .pen-detail {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    padding: 20px;
+    .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;
-          color: rgba(255, 255, 255, 0.7);
-          margin: 4px 0;
-        }
-        .stat-trend {
-          font-size: 10px;
-          &.up { color: #2ecc71; }
-          &.danger { color: #e74c3c; }
+          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; }
+      }
     }
   }
+}
+
+// 图表容器
+.chart-container {
+  width: 100%;
+  height: 240px;
+  padding: 8px;
+}
+
+// 骆驼列表
+.camel-list-card {
+  display: flex;
+  flex-direction: column;
   
-  // 预警列表
-  .alert-card {
-    .alert-list {
+  .camel-search {
+    padding: 12px 16px;
+    flex-shrink: 0;
+    .search-input {
+      width: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      border: 1px solid rgba(52, 152, 219, 0.5);
+      border-radius: 20px;
       padding: 8px 16px;
-      max-height: 280px;
-      overflow-y: auto;
-      .alert-item {
-        display: flex;
-        align-items: flex-start;
-        gap: 12px;
-        border-bottom: 1px solid rgba(52, 152, 219, 0.2);
-        padding: 12px 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;
-          }
+      color: white;
+      font-size: 12px;
+      outline: none;
+      &:focus {
+        border-color: #5dade2;
+      }
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+  }
+  .camel-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    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);
+      border-radius: 12px;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      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;
         }
-        .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;
-          }
+        .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;
         }
-        .alert-time {
+        .camel-temp {
           font-size: 10px;
-          color: rgba(255, 255, 255, 0.4);
+          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;
   
-  // 圈舍详情
-  .pen-detail-card {
-    .pen-detail {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
+  .health-report {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    
+    .report-header {
+      display: flex;
+      align-items: center;
       gap: 16px;
       padding: 20px;
-      .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;
+      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: #5dade2;
-          .unit {
-            font-size: 11px;
-            margin-left: 2px;
-            color: rgba(255, 255, 255, 0.5);
-          }
+          color: #fff;
         }
-        .detail-status {
-          font-size: 10px;
+        .camel-location {
+          font-size: 11px;
+          color: rgba(255, 255, 255, 0.6);
           margin-top: 4px;
-          &.normal { color: #2ecc71; }
-          &.warning { color: #f39c12; }
-          &.danger { color: #e74c3c; }
         }
       }
-    }
-  }
-  
-  // 图表容器
-  .chart-container {
-    width: 100%;
-    height: 240px;
-    padding: 8px;
-  }
-  
-  // 骆驼列表
-  .camel-list-card {
-    .camel-search {
-      padding: 12px 16px;
-      .search-input {
-        width: 100%;
-        background: rgba(0, 0, 0, 0.4);
-        border: 1px solid rgba(52, 152, 219, 0.5);
+      .health-badge {
+        padding: 4px 12px;
         border-radius: 20px;
-        padding: 8px 16px;
-        color: white;
         font-size: 12px;
-        outline: none;
-        &:focus {
-          border-color: #5dade2;
-        }
-        &::placeholder {
-          color: rgba(255, 255, 255, 0.4);
-        }
-      }
-    }
-    .camel-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 12px;
-      padding: 16px;
-      max-height: 280px;
-      overflow-y: auto;
-      .camel-item {
-        background: rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(52, 152, 219, 0.4);
-        border-radius: 12px;
-        padding: 10px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        cursor: pointer;
-        transition: all 0.2s;
-        &:hover {
-          border-color: #5dade2;
-          background: rgba(52, 152, 219, 0.1);
+        font-weight: 500;
+        &.healthy {
+          background: rgba(46, 204, 113, 0.2);
+          color: #2ecc71;
         }
         &.warning {
-          border-color: rgba(243, 156, 18, 0.6);
+          background: rgba(243, 156, 18, 0.2);
+          color: #f39c12;
         }
-        .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;
-          }
+        &.critical {
+          background: rgba(231, 76, 60, 0.2);
+          color: #e74c3c;
         }
       }
     }
-  }
-  
-  // 健康报告
-  .health-report-card {
-    .health-report {
-      .report-header {
+    .report-metrics {
+      padding: 16px;
+      flex-shrink: 0;
+      .metric-row {
         display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 20px;
-        background: rgba(0, 0, 0, 0.2);
-        border-bottom: 1px solid rgba(52, 152, 219, 0.3);
-        .camel-avatar-large {
-          font-size: 48px;
-        }
-        .camel-basic {
+        gap: 20px;
+        margin-bottom: 16px;
+        .metric {
           flex: 1;
-          .camel-name {
-            font-size: 18px;
-            font-weight: bold;
-            color: #fff;
-          }
-          .camel-location {
+          .metric-label {
             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;
+            margin-bottom: 4px;
           }
-        }
-      }
-      .report-metrics {
-        padding: 16px;
-        .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-value {
+            font-size: 20px;
+            font-weight: bold;
+            color: #5dade2;
+            &.warning {
+              color: #e74c3c;
             }
-            .metric-range {
-              font-size: 10px;
-              color: rgba(255, 255, 255, 0.4);
-              margin-top: 4px;
+            .unit {
+              font-size: 11px;
+              margin-left: 2px;
+              color: rgba(255, 255, 255, 0.5);
             }
-            .metric-progress {
-              margin-top: 8px;
-              background: rgba(52, 152, 219, 0.3);
-              border-radius: 10px;
+          }
+          .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;
-              .progress-bar {
-                height: 6px;
-                background: #5dade2;
-                border-radius: 10px;
-              }
+              background: #5dade2;
+              border-radius: 10px;
             }
           }
         }
       }
-      .report-timeline {
-        padding: 16px;
-        border-top: 1px solid rgba(52, 152, 219, 0.3);
-        .timeline-title {
-          font-size: 13px;
-          font-weight: 500;
-          color: #fff;
+    }
+    .report-timeline {
+      padding: 16px;
+      border-top: 1px solid rgba(52, 152, 219, 0.3);
+      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-list {
-          .timeline-item {
-            display: flex;
-            gap: 12px;
-            margin-bottom: 12px;
-            .timeline-date {
+          .timeline-date {
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+            min-width: 50px;
+          }
+          .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);
-              min-width: 50px;
-            }
-            .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);
-              }
             }
           }
         }
       }
-
     }
-    .no-selection {
-      text-align: center;
-      padding: 60px 20px;
-      .placeholder-icon {
-        font-size: 64px;
-        opacity: 0.5;
-        display: block;
-        margin-bottom: 16px;
-      }
-      p {
-        color: rgba(255, 255, 255, 0.5);
-        font-size: 13px;
-      }
+  }
+  .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;
     }
   }
-  
-  // 健康建议
-  .advice-card {
-    .advice-list {
-      padding: 16px;
-      .advice-item {
-        display: flex;
-        gap: 12px;
-        margin-bottom: 16px;
-        &:last-child {
-          margin-bottom: 0;
-        }
-        .advice-icon {
-          font-size: 20px;
+}
+
+// 健康建议
+.advice-card {
+  .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-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-desc {
+          font-size: 11px;
+          color: rgba(255, 255, 255, 0.6);
+          margin-top: 2px;
         }
       }
     }
   }
-  
-  @keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.5; transform: scale(1.2); }
-  }
-  </style>
\ No newline at end of file
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+</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 e0517ce..8c9de9b 100644
--- a/chenhai-ui/src/components/visual/sbgl.vue
+++ b/chenhai-ui/src/components/visual/sbgl.vue
@@ -788,7 +788,7 @@ export default {
       }
       .thumb-img {
         width: 100%;
-        height: 80px;
+        height: 120px;
         object-fit: cover;
       }
       .thumb-label {
diff --git a/chenhai-ui/src/views/login.vue b/chenhai-ui/src/views/login.vue
index 5680755..e02bffc 100644
--- a/chenhai-ui/src/views/login.vue
+++ b/chenhai-ui/src/views/login.vue
@@ -1,17 +1,36 @@
 <template>
   <div class="login">
+    <!-- 背景装饰元素：营造牧场/田野氛围 -->
+    <!-- <div class="bg-decorations">
+      <div class="sun"></div>
+      <div class="cloud cloud1"></div>
+      <div class="cloud cloud2"></div>
+      <div class="grass grass-left"></div>
+      <div class="grass grass-right"></div>
+      <div class="cattle-icon cattle1">🐮</div>
+      <div class="cattle-icon cattle2">🐄</div>
+    </div> -->
+
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{title}}</h3>
+      <!-- 品牌区域 -->
+      <div class="brand-area">
+        <div class="logo-icon">🐫</div>
+        <h3 class="title">{{ title }}</h3>
+        <p class="subtitle">智慧牧场 · 轻松管理</p>
+      </div>
+
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
           type="text"
           auto-complete="off"
-          placeholder="账号"
+          placeholder="账号 / 手机号"
+          class="custom-input"
         >
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
+
       <el-form-item prop="password">
         <el-input
           v-model="loginForm.password"
@@ -19,45 +38,37 @@
           auto-complete="off"
           placeholder="密码"
           @keyup.enter.native="handleLogin"
+          class="custom-input"
         >
           <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
       </el-form-item>
-      <!-- <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item> -->
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+
+      <!-- 选项栏：记住密码 + 立即注册 -->
+      <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>
+      </div>
+
       <el-form-item style="width:100%;">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          class="login-btn"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
       </el-form-item>
+      
     </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
+
+    <!-- 底部 -->
+    <!-- <div class="el-login-footer">
       <span>{{ footerContent }}</span>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -71,7 +82,7 @@ export default {
   name: "Login",
   data() {
     return {
-      title: process.env.VUE_APP_TITLE,
+      title: '阿右旗阿拉腾敖包镇骆驼产业标准化智慧化示范基地数据中心',
       footerContent: defaultSettings.footerContent,
       codeUrl: "",
       loginForm: {
@@ -88,14 +99,12 @@ export default {
         password: [
           { required: true, trigger: "blur", message: "请输入您的密码" }
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
       },
       loading: false,
-      // 验证码开关
       captchaEnabled: true,
-      // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      showDemoTip: true  // 控制演示提示显示，可自行关闭
     }
   },
   watch: {
@@ -144,7 +153,6 @@ export default {
             Cookies.remove('rememberMe')
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            // this.$router.push({ path: this.redirect || "/Home" }).catch(()=>{})
             this.$router.push({ path: "/Home" }).catch(() => { });
           }).catch(() => {
             this.loading = false
@@ -160,65 +168,300 @@ 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);
+
 .login {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
+  height: 100vh;
+  min-height: 500px;
+  background: linear-gradient(135deg, #2b5e2b 0%, #8cb36b 50%, #d4c9a3 100%);
+  overflow: hidden;
+
+  // 动态装饰背景
+  .bg-decorations {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+  }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  z-index: 1;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
+  // 太阳
+  .sun {
+    position: absolute;
+    top: 8%;
+    right: 5%;
+    width: 100px;
+    height: 100px;
+    background: radial-gradient(circle, #ffdf8c, #ffb347);
+    border-radius: 50%;
+    box-shadow: 0 0 50px rgba(255, 180, 70, 0.6);
+    animation: float 8s infinite ease-in-out;
+  }
+
+  // 云朵
+  .cloud {
+    position: absolute;
+    background: rgba(255, 255, 255, 0.85);
+    border-radius: 1000px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+    
+    &::before, &::after {
+      content: '';
+      position: absolute;
+      background: inherit;
+      border-radius: 50%;
+    }
+  }
+  .cloud1 {
+    top: 12%;
+    left: -50px;
+    width: 160px;
+    height: 70px;
+    &::before { width: 60px; height: 60px; top: -30px; left: 20px; }
+    &::after { width: 80px; height: 80px; top: -40px; left: 70px; }
+    animation: drift 22s infinite linear;
+  }
+  .cloud2 {
+    bottom: 15%;
+    right: -30px;
+    width: 200px;
+    height: 85px;
+    &::before { width: 70px; height: 70px; top: -35px; left: 20px; }
+    &::after { width: 90px; height: 90px; top: -45px; left: 85px; }
+    animation: drift 28s infinite reverse linear;
+  }
+
+  // 草地剪影
+  .grass {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 80px;
+    background: repeating-linear-gradient(45deg, #4c6a2c, #4c6a2c 30px, #5e7e38 30px, #5e7e38 60px);
+    opacity: 0.5;
+    &::before {
+      content: '';
+      position: absolute;
+      top: -20px;
+      left: 0;
+      width: 100%;
+      height: 25px;
+      background: radial-gradient(ellipse at top, #6f9e3f, transparent);
     }
   }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
+  .grass-left { left: 0; width: 40%; border-radius: 0 40% 0 0; }
+  .grass-right { right: 0; width: 55%; border-radius: 40% 0 0 0; }
+
+  // 奶牛图标
+  .cattle-icon {
+    position: absolute;
+    font-size: 48px;
+    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.2));
+    opacity: 0.7;
+    animation: bounce 4s infinite;
+  }
+  .cattle1 { bottom: 12%; left: 5%; animation-delay: 0s; }
+  .cattle2 { bottom: 18%; right: 8%; animation-delay: 1.2s; font-size: 56px; }
+
+  // 登录卡片
+  .login-form {
+    position: relative;
+    z-index: 2;
+    width: 440px;
+    padding: 40px 35px 35px;
+    background: $card-white;
+    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);
+    
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  // 品牌区
+  .brand-area {
+    text-align: center;
+    margin-bottom: 30px;
+    .logo-icon {
+      font-size: 56px;
+      display: inline-block;
+      animation: gentleSwing 2s infinite ease;
+    }
+    .title {
+      margin: 12px 0 6px;
+      font-size: 28px;
+      font-weight: 600;
+      color: $text-dark;
+      letter-spacing: 2px;
+    }
+    .subtitle {
+      font-size: 13px;
+      color: $text-light;
+      margin-bottom: 5px;
+      font-weight: 400;
+    }
+  }
+
+  // 输入框样式优化
+  .custom-input {
+    :deep(.el-input__inner) {
+      height: 48px;
+      border-radius: 60px;
+      border: 1px solid #e2e8e6;
+      background: #fefef7;
+      padding-left: 42px;
+      font-size: 15px;
+      transition: all 0.2s;
+      &:focus {
+        border-color: $primary-color;
+        box-shadow: $shadow-focus;
+      }
+    }
+    :deep(.el-input__prefix) {
+      left: 16px;
+      top: 2px;
+      .input-icon {
+        font-size: 18px;
+        color: $primary-color;
+      }
+    }
+  }
+
+  // 选项栏（记住密码 + 注册）
+  .options-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 8px 0 25px 0;
+    .remember-checkbox {
+      :deep(.el-checkbox__inner) {
+        border-radius: 4px;
+        border-color: #cbd5e1;
+        background-color: #fff;
+      }
+      :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+        background-color: $primary-color;
+        border-color: $primary-color;
+      }
+      :deep(.el-checkbox__label) {
+        color: $text-light;
+        font-size: 13px;
+      }
+    }
+    .register-link {
+      color: $primary-color;
+      font-size: 13px;
+      text-decoration: none;
+      font-weight: 500;
+      transition: 0.2s;
+      &:hover {
+        color: $primary-hover;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  // 登录按钮
+  .login-btn {
+    width: 100%;
+    height: 48px;
+    background: $primary-color;
+    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;
+    &:hover, &:focus {
+      background: $primary-hover;
+      transform: scale(1.01);
+      box-shadow: 0 10px 22px rgba(92, 122, 46, 0.4);
+    }
+  }
+
+  // 演示提示小标签
+  .demo-tip {
+    margin-top: 22px;
+    text-align: center;
+    font-size: 12px;
+    color: #8b9a7a;
+    background: #f2f6ec;
+    padding: 8px 12px;
+    border-radius: 100px;
+    display: inline-block;
+    width: 100%;
+    span {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+
+  // 底部footer样式
+  .el-login-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    padding: 12px;
+    color: rgba(255,255,240,0.9);
+    font-size: 12px;
+    background: rgba(0,0,0,0.2);
+    backdrop-filter: blur(4px);
+    z-index: 2;
+    font-family: monospace;
   }
 }
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
+
+// 动画
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-12px); }
+  100% { transform: translateY(0px); }
 }
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
+@keyframes drift {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(80px); }
 }
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
+@keyframes bounce {
+  0%,100%{ transform: translateY(0); }
+  50%{ transform: translateY(-8px); }
 }
-.login-code-img {
-  height: 38px;
+@keyframes gentleSwing {
+  0%,100%{ transform: rotate(0deg); }
+  50%{ transform: rotate(6deg); }
+}
+
+// 响应式
+@media (max-width: 500px) {
+  .login .login-form {
+    width: 88%;
+    padding: 30px 20px;
+  }
+  .bg-decorations .cattle-icon {
+    display: none;
+  }
+  .cloud1, .cloud2 {
+    opacity: 0.6;
+  }
 }
-</style>
+</style>
\ No newline at end of file