From b0862808be397892e57b7e20d0859040effd01b4 Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期五, 15 八月 2025 10:46:58 +0800
Subject: [PATCH] 更新项目配置，添加监测站相关数据和状态管理；优化首页和监测页面的逻辑，提升用户体验；新增SVG图标资源，更新样式以增强可视化效果。

---
 pages/stationMonitor/stationMonitor.wxss | 1539 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 1,477 insertions(+), 62 deletions(-)

diff --git a/pages/stationMonitor/stationMonitor.wxss b/pages/stationMonitor/stationMonitor.wxss
index b43ab1f..1a97158 100644
--- a/pages/stationMonitor/stationMonitor.wxss
+++ b/pages/stationMonitor/stationMonitor.wxss
@@ -6,79 +6,126 @@
   padding: 0;
   width: 100%;
   box-sizing: border-box;
+  /* 闃叉姘村钩婊氬姩 */
+  overflow-x: hidden !important;
+  /* 纭繚椤甸潰瀹藉害绾︽潫 */
+  max-width: 100vw;
+  /* 鏂板锛氬己鍒剁Щ闄ゆ墍鏈夊彲鑳界殑杈硅窛 */
+  min-width: 0;
 }
 
 .container {
   padding: 0;
   margin: 0;
   background-color: #f5f5f5;
-  min-height: 100vh;
+  height: 100vh; /* 鍥哄畾楂樺害涓鸿鍙ｉ珮搴� */
   width: 100%;
   box-sizing: border-box;
-}
-
-/* 閫夐」鍗″鍣� */
-.tab-container {
+  /* 闃叉浠讳綍婊氬姩 */
+  overflow: hidden !important;
+  /* 浣跨敤flexbox甯冨眬 */
   display: flex;
+  flex-direction: column;
+  /* 纭繚瀹瑰櫒瀹藉害绾︽潫 */
+  max-width: 100vw;
+  min-width: 0;
+  /* 鏂板锛氬己鍒剁Щ闄ゆ墍鏈夊彲鑳界殑杈硅窛 */
+  left: 0 !important;
+  right: 0 !important;
+}
+
+/* 鏍囩椤垫牱寮� - 绾挎�у竷灞� */
+.tabs {
+  display: flex;
+  background-color: #fff;
+  padding: 4rpx 0;
   width: 100%;
-  background: white;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-  position: sticky;
+  flex-shrink: 0; /* 闃叉琚帇缂� */
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+  border-bottom: 1rpx solid #eaeaea;
+  position: sticky; /* 浣跨敤sticky瀹氫綅 */
   top: 0;
-  z-index: 100;
-  margin: 0;
-  padding: 0;
+  z-index: 9999;
+  background-color: #fff; /* 纭繚鑳屾櫙鑹� */
+  /* 鍑忓皬tabs楂樺害 */
+  height: 100rpx;
   box-sizing: border-box;
 }
 
-/* 閫夐」鍗￠」 */
-.tab-item {
+/* 绉婚櫎鏃х殑tab-container鏍峰紡 */
+
+
+
+/* 绉婚櫎杩囧害鐨凜SS瑙勫垯锛屼繚鎸佺畝娲佺殑tabs鏍峰紡 */
+
+/* 鏍囩椤甸」鏍峰紡 - 浼樺寲甯冨眬 */
+.tab {
   flex: 1;
-  width: 25%; /* 鏄庣‘璁剧疆姣忎釜閫夐」鍗″崰25%瀹藉害 */
+  text-align: center;
+  font-size: 29rpx;
+  color: #666;
+  position: relative;
+  padding: 12rpx 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 20rpx 5rpx;
-  position: relative;
   transition: all 0.3s ease;
-  box-sizing: border-box;
+  border-radius: 16rpx;
+  margin: 0 4rpx;
 }
 
-.tab-item.active {
-  background-color: #f0f8ff;
+.tab.active {
+  color: #0052d9;
+  font-weight: 500;
+  /* 娣诲姞娓愬彉鑳屾櫙鑹� */
+  background: linear-gradient(135deg, #e6f3ff 0%, #f0f8ff 100%);
+  box-shadow: 0 2rpx 8rpx rgba(0, 82, 217, 0.15);
 }
 
-.tab-item.active::after {
+.tab.active::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 60rpx;
+  width: 50rpx;
   height: 4rpx;
-  background-color: #1890FF;
+  background: linear-gradient(90deg, #0052d9 0%, #1890ff 100%);
   border-radius: 2rpx;
 }
 
-/* 閫夐」鍗″浘鏍� */
+/* 娣诲姞鎮仠鏁堟灉 */
+.tab:hover {
+  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
+  transform: translateY(-1rpx);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.tab.active:hover {
+  background: linear-gradient(135deg, #d9ecff 0%, #e6f3ff 100%);
+  transform: translateY(-1rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.2);
+}
+
+/* 鏍囩椤靛浘鏍� */
 .tab-icon {
-  width: 48rpx;
-  height: 48rpx;
-  margin-bottom: 8rpx;
+  width: 36rpx;
+  height: 36rpx;
+  margin-bottom: 6rpx;
   transition: all 0.3s ease;
 }
 
-.tab-item.active .tab-icon {
+.tab.active .tab-icon {
   transform: scale(1.1);
   filter: brightness(0) saturate(100%) invert(41%) sepia(96%) saturate(1408%) hue-rotate(200deg) brightness(96%) contrast(103%);
 }
 
-.tab-item:not(.active) .tab-icon {
+.tab:not(.active) .tab-icon {
   filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);
 }
 
-/* 閫夐」鍗℃枃瀛� */
+/* 鏍囩椤垫枃瀛� */
 .tab-name {
   font-size: 22rpx;
   color: #666;
@@ -89,11 +136,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
+  margin-bottom: 2rpx;
 }
 
-.tab-item.active .tab-name {
-  color: #1890FF;
-  font-weight: 600;
+.tab.active .tab-name {
+  color: #0052d9;
+  font-weight: 500;
 }
 
 /* 鍐呭鍖哄煙 */
@@ -101,8 +149,22 @@
   padding: 0;
   margin: 0;
   width: 100%;
-  min-height: calc(100vh - 140rpx);
   box-sizing: border-box;
+  /* 浣跨敤flex: 1濉厖鍓╀綑绌洪棿 */
+  flex: 1;
+  min-height: 0; /* 鍏佽flex椤圭洰鏀剁缉 */
+  overflow-y: auto; /* 鍨傜洿婊氬姩 */
+  overflow-x: hidden; /* 闅愯棌姘村钩婊氬姩 */
+  /* 闅愯棌婊氬姩鏉� */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+  /* 涓簍abs鐣欏嚭绌洪棿 */
+  margin-top: 0;
+}
+
+/* 闅愯棌Webkit娴忚鍣ㄧ殑婊氬姩鏉� */
+.content-area::-webkit-scrollbar {
+  display: none;
 }
 
 /* 閫夐」鍗″唴瀹� */
@@ -110,6 +172,7 @@
   width: 100%;
   background: white;
   border-radius: 0;
+  /* 杩樺師鍐呰竟璺� */
   padding: 20rpx 0;
   box-shadow: none;
   animation: fadeIn 0.3s ease-in-out;
@@ -134,10 +197,268 @@
   font-size: 32rpx;
   font-weight: 600;
   color: #333;
+  /* 杩樺師宸﹀彸杈硅窛 */
   margin: 0 20rpx 20rpx 20rpx;
   display: block;
   width: calc(100% - 40rpx);
   box-sizing: border-box;
+}
+
+/* 姘旇薄绔欓�夋嫨鍣� */
+.weather-station-selector {
+  /* 杩樺師宸﹀彸杈硅窛 */
+  margin: 10rpx 20rpx;
+  background: white;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.picker-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.picker-label {
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+.picker-value {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  font-size: 30rpx;
+  color: #333;
+  font-weight: 600;
+}
+
+.picker-arrow {
+  width: 24rpx;
+  height: 24rpx;
+  opacity: 0.6;
+}
+
+/* 姘旇薄绔欎俊鎭崱鐗� */
+.weather-info-card {
+  /* 杩樺師宸﹀彸杈硅窛 */
+  margin: 20rpx;
+  background: white;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 鐘舵�佹爮 */
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.status-indicator {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+}
+
+.status-indicator.online {
+  background: #52c41a;
+  box-shadow: 0 0 8rpx rgba(82, 196, 26, 0.4);
+}
+
+.status-indicator.offline {
+  background: #ff4d4f;
+  box-shadow: 0 0 8rpx rgba(255, 77, 79, 0.4);
+}
+
+.status-text {
+  font-size: 26rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+.refresh-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 12rpx 20rpx;
+  min-width: 100rpx;
+  background: #1890ff;
+  color: white;
+  border-radius: 24rpx;
+  font-size: 24rpx;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.refresh-btn:active {
+  transform: scale(0.95);
+  background: #096dd9;
+}
+
+.refresh-icon {
+  width: 28rpx;
+  height: 28rpx;
+  filter: brightness(0) invert(1);
+  left: 16rpx;
+}
+
+.refresh-text {
+  text-align: center;
+
+}
+
+/* 姘旇薄鏁版嵁缃戞牸 */
+.weather-data-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.weather-data-item {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 24rpx;
+  background: #f8f9fa;
+  border-radius: 16rpx;
+  border-left: 4rpx solid;
+  transition: all 0.3s ease;
+  min-height: 120rpx;
+  box-sizing: border-box;
+}
+
+.weather-data-item:active {
+  transform: scale(0.98);
+}
+
+.weather-data-item.humidity {
+  border-left-color: #1890ff;
+}
+
+.weather-data-item.temperature {
+  border-left-color: #ff4d4f;
+}
+
+.weather-data-item.uv {
+  border-left-color: #faad14;
+}
+
+.weather-data-item.light {
+  border-left-color: #52c41a;
+}
+
+.weather-data-item.rainfall {
+  border-left-color: #722ed1;
+}
+
+.weather-data-item.wind-speed {
+  border-left-color: #13c2c2;
+}
+
+.weather-data-item.wind-direction {
+  border-left-color: #eb2f96;
+}
+
+.data-icon {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 12rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.data-icon image {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+.data-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.data-label {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.data-value {
+  font-size: 36rpx;
+  color: #1890ff;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+/* 椋庡悜鏄剧ず */
+.wind-direction-display {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.wind-arrow {
+  width: 24rpx;
+  height: 24rpx;
+  transition: transform 0.3s ease;
+}
+
+/* 鏈�鍚庢洿鏂版椂闂� */
+.last-update {
+  text-align: center;
+  padding-top: 16rpx;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.update-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+/* 鏃犳暟鎹彁绀� */
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 20rpx;
+  color: #999;
+}
+
+.no-data-icon {
+  width: 120rpx;
+  height: 120rpx;
+  margin-bottom: 20rpx;
+  opacity: 0.5;
+}
+
+.no-data-text {
+  font-size: 28rpx;
+  color: #999;
 }
 
 /* 鍝嶅簲寮忛�傞厤 */
@@ -155,6 +476,25 @@
     padding: 16rpx 2rpx;
     width: 25%; /* 纭繚灏忓睆骞曚笅涔熷潎鍒� */
   }
+  
+  /* 姘旇薄绔欐暟鎹」鍝嶅簲寮忓瓧浣� */
+  .weather-data-item .data-label {
+    font-size: 22rpx;
+  }
+  
+  .weather-data-item .data-value {
+    font-size: 28rpx;
+  }
+  
+  .weather-data-item .data-icon {
+    width: 50rpx;
+    height: 50rpx;
+  }
+  
+  .weather-data-item .data-icon image {
+    width: 32rpx;
+    height: 32rpx;
+  }
 }
 
 /* 瓒呭皬灞忓箷閫傞厤 */
@@ -171,50 +511,106 @@
   .tab-item {
     padding: 12rpx 1rpx;
   }
+  
+  /* 姘旇薄绔欐暟鎹」瓒呭皬灞忓箷鍝嶅簲寮忓瓧浣� */
+  .weather-data-item .data-label {
+    font-size: 20rpx;
+  }
+  
+  .weather-data-item .data-value {
+    font-size: 24rpx;
+  }
+  
+  .weather-data-item .data-icon {
+    width: 46rpx;
+    height: 46rpx;
+  }
+  
+  .weather-data-item .data-icon image {
+    width: 30rpx;
+    height: 30rpx;
+  }
 }
 
 /* 鎽勫儚澶村垪琛ㄦ牱寮� */
 .camera-list {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  /* gap: 20rpx; */
   margin: 0;
   width: 100%;
+  box-sizing: border-box;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  max-width: 100vw;
+  overflow-x: hidden;
+  /* 鏂板锛氱Щ闄ゅ乏鍙冲唴杈硅窛锛岀‘淇濆畬鍏ㄥ～鍏� */
+  /* padding: 0; */
+  /* 鏂板锛氬己鍒剁害鏉燂紝闃叉ezplayer瓒呭嚭 */
+  /* contain: layout style paint; */
+  /* 鏂板锛氬己鍒跺乏瀵归綈锛屾棤浠讳綍杈硅窛 */
+  /* left: 0 !important;
+  right: 0 !important; */
 }
 
 .camera-item {
-  width: 100vw;
-  background: #f8f9fa;
-  border-radius: 0;
-  padding: 20rpx;
-  box-shadow: none;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  background: white;
+  border-radius: 16rpx;
+  /* 绉婚櫎宸﹀彸鍐呰竟璺濓紝纭繚瀹屽叏濉厖 */
+  padding: 24rpx 0;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
   box-sizing: border-box;
-  margin: 0 0 2rpx 0;
+  margin: 0;
   position: relative;
-  left: 0;
-  right: 0;
+  overflow: hidden;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+  flex-grow: 0;
+  /* 鏂板锛氬己鍒剁害鏉燂紝闃叉ezplayer瓒呭嚭 */
+  contain: layout style paint;
+  /* 鏂板锛氬己鍒跺乏瀵归綈锛屾棤浠讳綍杈硅窛 */
+  left: 0 !important;
+  right: 0 !important;
 }
 
 /* 鎽勫儚澶村ご閮� */
 .camera-header {
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 20rpx;
   box-sizing: border-box;
+  /* 闃叉鏂囧瓧婧㈠嚭 */
+  overflow: hidden;
+  margin: 20rpx 10rpx;
 }
 
 .camera-name {
-  font-size: 28rpx;
+  font-size: 32rpx;
   font-weight: 600;
   color: #333;
+  flex: 1;
+  min-width: 0;
+  /* 鏂囧瓧婧㈠嚭澶勭悊 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .camera-status {
   padding: 8rpx 16rpx;
   border-radius: 20rpx;
-  font-size: 22rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  /* 纭繚鐘舵�佹爣绛句笉琚帇缂� */
+  min-width: fit-content;
 }
 
 .camera-status.online {
@@ -233,24 +629,402 @@
 .camera-video-container {
   position: relative;
   width: 100%;
-  height: 400rpx;
+  max-width: 100%;
+  min-width: 0;
+  /* height: 400rpx; */
+  /* 绉婚櫎鎵�鏈夎楗版�ф牱寮忥紝纭繚瀹屽叏濉厖 */
   border-radius: 0;
   overflow: hidden;
-  margin-bottom: 16rpx;
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+  /* 闃叉ezplayer瓒呭嚭瀹瑰櫒 - 寮哄寲绾︽潫 */
+  overflow: hidden !important;
+  /* 鏂板锛氱粷瀵瑰畾浣嶇害鏉� */
+  position: relative !important;
+  /* 鏂板锛氬己鍒跺搴︾害鏉燂紝闃叉ezplayer瓒呭嚭 */
+  max-width: 100vw !important;
+  /* 鏂板锛氱‘淇濆鍣ㄤ笉浼氳秴鍑虹埗鍏冪礌 */
+  contain: layout style paint !important;
+  /* 鏂板锛氬己鍒跺乏瀵归綈锛岄槻姝㈠彸绉� */
+  left: 0 !important;
+  right: 0 !important;
+  /* 鏂板锛氬己鍒跺～鍏呮暣涓睆骞� */
+  /* width: 100vw !important;
+  min-width: 100vw !important; */
+}
+
+/* 绉婚櫎璋冭瘯杈规锛岄伩鍏嶅奖鍝峞zplayer鏄剧ず */
+
+/* 鍔犺浇鐘舵�� */
+.video-loading {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fa;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid #e3e3e3;
+  border-top: 4rpx solid #1890ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16rpx;
+  /* 纭繚鍔ㄧ敾鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  font-size: 26rpx;
+  color: #666;
+  font-weight: 500;
+  text-align: center;
+  /* 纭繚鏂囧瓧鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* 閿欒鐘舵�� */
+.video-error {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff2f0;
+  border: 1rpx solid #ffccc7;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+}
+
+.error-icon {
+  width: 80rpx;
+  height: 80rpx;
+  opacity: 0.6;
+  margin-bottom: 16rpx;
+  filter: grayscale(100%) brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
+  /* 纭繚鍥炬爣鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
+}
+
+.error-text {
+  font-size: 26rpx;
+  color: #ff4d4f;
+  font-weight: 500;
+  margin-bottom: 20rpx;
+  text-align: center;
+  /* 纭繚鏂囧瓧鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.retry-btn {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 12rpx 24rpx;
+  background-color: #ff4d4f;
+  color: white;
+  border: none;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  transition: all 0.3s ease;
+  /* 纭繚鎸夐挳鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
+  min-width: fit-content;
+}
+
+.retry-btn:active {
+  background-color: #cf1322;
+  transform: scale(0.98);
+}
+
+.retry-icon {
+  width: 24rpx;
+  height: 24rpx;
+  filter: brightness(0) invert(1);
+  /* 纭繚鍥炬爣鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
+}
+
+/* 鏃犳挱鏀惧湴鍧�鐘舵�� */
+.video-no-url {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+}
+
+.no-url-icon {
+  width: 80rpx;
+  height: 80rpx;
+  opacity: 0.4;
+  margin-bottom: 16rpx;
+  filter: grayscale(100%);
+  /* 纭繚鍥炬爣鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
+}
+
+.no-url-text {
+  font-size: 26rpx;
+  color: #999;
+  font-weight: 500;
+  text-align: center;
+  /* 纭繚鏂囧瓧鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 .video-wrapper {
   position: relative;
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+  /* 闃叉鍐呭婧㈠嚭 */
+  overflow: hidden !important;
+  /* 鏂板锛氱粷瀵瑰畾浣嶇害鏉� */
+  position: relative !important;
+  /* 鏂板锛氱Щ闄ゆ墍鏈夎竟璺濆拰鍐呰竟璺� */
+  margin: 0 !important;
+  padding: 0 !important;
+  /* 鏂板锛氬己鍒跺乏瀵归綈 */
+  left: 0 !important;
+  right: 0 !important;
+}
+
+/* ezplayer缁勪欢鏍峰紡浼樺寲 - 淇瓒呭嚭灞忓箷闂 */
+.video-wrapper ezplayer {
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  border-radius: 12rpx;
+  overflow: hidden !important;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+  /* 闃叉瓒呭嚭灞忓箷鐨勫叧閿缃� */
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  /* 寮哄埗绾︽潫灏哄 - 淇鏈�灏忓搴﹂棶棰� */
+  max-width: 100% !important;
+  max-height: 100% !important;
+  /* 鏂板锛氬己鍒剁害鏉熷埌鐖跺鍣� */
+  transform: none !important;
+  transform-origin: center center !important;
+  /* 鏂板锛氱‘淇濅笉瓒呭嚭杈圭晫 */
+  clip-path: inset(0 0 0 0) !important;
+  /* 鏂板锛氶槻姝换浣曞舰寮忕殑婧㈠嚭 */
+  contain: layout style paint !important;
+  /* 鏂板锛氬己鍒跺搴︾害鏉燂紝瑕嗙洊ezplayer鐨勬渶灏忓搴﹂檺鍒� */
+  min-width: 0 !important;
+  min-height: 0 !important;
+  /* 鏂板锛氱‘淇濈粍浠跺畬鍏ㄧ害鏉熷湪瀹瑰櫒鍐� */
+  box-sizing: border-box !important;
+  /* 鏂板锛氱Щ闄ゆ墍鏈夎竟璺濆拰鍐呰竟璺� */
+  margin: 0 !important;
+  padding: 0 !important;
+  /* 鏂板锛氬己鍒跺畬鍏ㄥ～鍏呭鍣� */
+  inset: 0 !important;
+}
+
+/* 閽堝ezplayer缁勪欢鐨勭壒娈婄害鏉� */
+.video-wrapper ezplayer {
+  /* 纭繚缁勪欢涓嶄細瓒呭嚭鐖跺鍣� */
+  box-sizing: border-box !important;
+  /* 闃叉姘村钩婊氬姩 */
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+  /* 纭繚鍦╢lex瀹瑰櫒涓殑琛屼负 */
+  flex: 0 0 auto !important;
+  /* 闃叉缂╂斁闂 */
+  transform-origin: top left !important;
+  /* 纭繚杈规鍦嗚鐢熸晥 */
+  border-radius: 12rpx !important;
+  /* 鏂板锛氬己鍒跺昂瀵哥害鏉� */
+  min-width: 0 !important;
+  min-height: 0 !important;
+  /* 鏂板锛氶槻姝换浣曞舰寮忕殑鎷変几 */
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  /* 鏂板锛氱‘淇濆畾浣嶆纭� */
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  /* 鏂板锛氬己鍒跺搴﹀拰楂樺害 */
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* 鏂板锛氫笓闂ㄥ鐞唀zplayer鏆傚仠鐘舵�佺殑鏍峰紡 */
+.video-wrapper ezplayer[data-paused="true"],
+.video-wrapper ezplayer.paused {
+  /* 寮哄埗绾︽潫瀹藉害锛岄槻姝㈣秴鍑哄睆骞� */
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  /* 纭繚缁勪欢瀹屽叏鍦ㄥ鍣ㄥ唴 */
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  /* 闃叉浠讳綍褰㈠紡鐨勬孩鍑� */
+  overflow: hidden !important;
+  /* 寮哄埗绾︽潫鍒扮埗瀹瑰櫒 */
+  contain: layout style paint !important;
+}
+
+/* 鏂板锛氫娇鐢–SS Grid寮哄埗绾︽潫ezplayer */
+.video-wrapper {
+  display: grid !important;
+  grid-template-columns: 1fr !important;
+  grid-template-rows: 1fr !important;
+  place-items: stretch !important;
+}
+
+/* 鏂板锛氬彧閽堝鎽勫儚澶寸浉鍏冲厓绱犲己鍒剁害鏉� */
+.camera-list,
+.camera-item,
+.camera-video-container,
+.video-wrapper,
+.camera-header,
+.camera-name,
+.camera-status,
+.camera-video-container > ezplayer,
+.video-wrapper > ezplayer {
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+}
+
+/* 鏂板锛氬己鍒剁Щ闄ゆ墍鏈夊彲鑳界殑杈硅窛鍜岃楗� */
+.camera-list,
+.camera-item,
+.camera-video-container,
+.video-wrapper {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+/* 鏂板锛氱壒鍒拡瀵筫zplayer鐨勫己鍒剁害鏉� */
+ezplayer {
+  width: 100vw !important;
+  height: 100% !important;
+  max-width: 100vw !important;
+  max-height: 100% !important;
+  min-width: 100vw !important;
+  min-height: 0 !important;
+  position: absolute !important;
+  left: 0 !important;
+  right: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  overflow: hidden !important;
+  box-sizing: border-box !important;
+  contain: layout style paint !important;
+  /* 鏂板锛氬己鍒跺～鍏呮暣涓睆骞曞搴� */
+  margin: 0 !important;
+  padding: 0 !important;
+  transform: none !important;
+  transform-origin: center center !important;
+  /* 鏂板锛氬己鍒剁Щ闄ゆ墍鏈夎楗� */
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  /* 鏂板锛氬己鍒剁害鏉熷埌灞忓箷杈圭紭 */
+  inset: 0 !important;
+}
+
+.video-wrapper ezplayer {
+  grid-column: 1 !important;
+  grid-row: 1 !important;
+  place-self: stretch !important;
+  /* 寮哄埗瀹屽叏濉厖缃戞牸鍗曞厓鏍� */
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+}
+
+/* 瑙嗛鍖呰鍣ㄧ殑缁濆瀹氫綅绾︽潫 */
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
+  /* 闃叉鍐呭婧㈠嚭 */
+  overflow: hidden !important;
+  /* 鏂板锛氱粷瀵瑰畾浣嶇害鏉� */
+  position: relative !important;
 }
 
 .live-player {
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  min-width: 0;
   background-color: #000;
-  border-radius: 0;
+  border-radius: 12rpx;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
 }
 
 .video-overlay {
@@ -363,44 +1137,67 @@
 .video-offline {
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  min-width: 0;
   background-color: #f5f5f5;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 12rpx;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
 }
 
 .offline-icon {
-  width: 60rpx;
-  height: 60rpx;
-  opacity: 0.5;
+  width: 80rpx;
+  height: 80rpx;
+  opacity: 0.4;
   margin-bottom: 16rpx;
+  filter: grayscale(100%);
+  /* 纭繚鍥炬爣鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
 }
 
 .offline-text {
-  font-size: 24rpx;
+  font-size: 28rpx;
   color: #999;
+  font-weight: 500;
+  text-align: center;
+  /* 纭繚鏂囧瓧鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 /* 鎿嶄綔鎸夐挳 */
 .camera-actions {
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   display: flex;
   gap: 16rpx;
   box-sizing: border-box;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀轰竴鑷存�� */
+  flex-shrink: 0;
 }
 
 .action-btn {
   flex: 1;
-  height: 64rpx;
-  border-radius: 32rpx;
+  height: 72rpx;
+  border-radius: 36rpx;
   font-size: 26rpx;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 8rpx;
   transition: all 0.3s ease;
+  box-sizing: border-box;
+  /* 纭繚鎸夐挳鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  min-width: 0;
+  overflow: hidden;
 }
 
 .action-btn.primary {
@@ -409,21 +1206,639 @@
 }
 
 .action-btn.primary:active {
-  background-color: #0050b3;
+  background-color: #096dd9;
+  transform: scale(0.98);
 }
 
 .action-btn.secondary {
-  background-color: white;
-  color: #1890FF;
-  border: 1rpx solid #1890FF;
+  background-color: #f5f5f5;
+  color: #666;
+  border: 1rpx solid #d9d9d9;
 }
 
 .action-btn.secondary:active {
-  background-color: #f0f8ff;
+  background-color: #e8e8e8;
+  transform: scale(0.98);
 }
 
-.action-btn.disabled {
-  background-color: #f5f5f5;
-  color: #bfbfbf;
+/* 绂佺敤鐘舵�� */
+.action-btn[disabled] {
+  background-color: #f5f5f5 !important;
+  color: #bfbfbf !important;
+  border-color: #d9d9d9 !important;
   cursor: not-allowed;
+  opacity: 0.6;
+  /* 纭繚绂佺敤鐘舵�佸湪涓嶅悓璁惧涓婄殑涓�鑷存�� */
+  transform: none !important;
+}
+
+.action-btn[disabled]:active {
+  transform: none !important;
+  background-color: #f5f5f5 !important;
+}
+
+.action-btn.primary[disabled] {
+  background-color: #d9d9d9 !important;
+  color: #bfbfbf !important;
+}
+
+.action-btn.secondary[disabled] {
+  background-color: #f5f5f5 !important;
+  color: #bfbfbf !important;
+  border-color: #d9d9d9 !important;
+}
+
+.action-icon {
+  width: 32rpx;
+  height: 32rpx;
+  /* 纭繚鍥炬爣鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  flex-shrink: 0;
+}
+
+/* 鍝嶅簲寮忎紭鍖� - 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+@media (max-width: 400px) {
+  .camera-item {
+    padding: 20rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .camera-header {
+    margin-bottom: 16rpx;
+  }
+  
+  .camera-name {
+    font-size: 28rpx;
+  }
+  
+  .camera-status {
+    font-size: 22rpx;
+    padding: 6rpx 12rpx;
+  }
+  
+  .camera-video-container {
+    height: 320rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .action-btn {
+    height: 64rpx;
+    font-size: 24rpx;
+  }
+  
+  .action-icon {
+    width: 28rpx;
+    height: 28rpx;
+  }
+}
+
+/* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� - 棰濆鐨勫吋瀹规�у鐞� */
+.camera-item {
+  /* 闃叉鍦ㄤ笉鍚岃澶囦笂鐨勫竷灞�宸紓 */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.camera-video-container {
+  /* 闃叉鍦ㄤ笉鍚岃澶囦笂鐨勬樉绀哄樊寮� */
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+/* 淇鍙兘鐨勬孩鍑洪棶棰� */
+.camera-list {
+  max-width: 100%;
+  overflow: hidden;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  transform: translateZ(0);
+}
+
+.camera-item {
+  overflow: hidden;
+  /* 纭繚鍦ㄤ笉鍚岃澶囦笂鐨勪竴鑷存�� */
+  transform: translateZ(0);
+}
+
+/* 閽堝鐪熸満鐨勭壒娈婁紭鍖� */
+@media screen and (max-device-width: 750px) {
+  .camera-item {
+    /* 鐪熸満涓婂彲鑳介渶瑕佺◢寰皟鏁撮棿璺� */
+    margin-bottom: 16rpx;
+  }
+  
+  .camera-video-container {
+    /* 鐪熸満涓婂彲鑳介渶瑕佺◢寰皟鏁撮珮搴� */
+    height: 380rpx;
+  }
+  
+  .action-btn {
+    /* 鐪熸満涓婂彲鑳介渶瑕佺◢寰皟鏁撮珮搴� */
+    height: 68rpx;
+  }
+}
+
+/* 鍦熷￥澧掓儏绔欎笓鐢ㄦ牱寮� */
+.weather-data-item.soil-item {
+  border-left: 4rpx solid;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  transition: all 0.3s ease;
+}
+
+.weather-data-item.soil-item:active {
+  transform: scale(0.98);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+}
+
+/* 鍦熷￥灞�1 - 钃濊壊绯� */
+.weather-data-item.soil-item:nth-child(1),
+.weather-data-item.soil-item:nth-child(2) {
+  border-left-color: #1890ff;
+  background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
+}
+
+/* 鍦熷￥灞�2 - 缁胯壊绯� */
+.weather-data-item.soil-item:nth-child(3),
+.weather-data-item.soil-item:nth-child(4) {
+  border-left-color: #52c41a;
+  background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%);
+}
+
+/* 鍦熷￥灞�3 - 姗欒壊绯� */
+.weather-data-item.soil-item:nth-child(5),
+.weather-data-item.soil-item:nth-child(6) {
+  border-left-color: #fa8c16;
+  background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%);
+}
+
+/* 鍦熷￥灞�4 - 绱壊绯� */
+.weather-data-item.soil-item:nth-child(7),
+.weather-data-item.soil-item:nth-child(8) {
+  border-left-color: #722ed1;
+  background: linear-gradient(135deg, #f9f0ff 0%, #ffffff 100%);
+}
+
+/* 鍦熷￥灞�5 - 绾㈣壊绯� */
+.weather-data-item.soil-item:nth-child(9),
+.weather-data-item.soil-item:nth-child(10) {
+  border-left-color: #f5222d;
+  background: linear-gradient(135deg, #fff1f0 0%, #ffffff 100%);
+}
+
+/* 鍦熷￥澧掓儏绔欐暟鎹綉鏍间紭鍖� */
+.weather-data-grid:has(.soil-item) {
+  grid-template-columns: 1fr 1fr;
+  gap: 16rpx;
+}
+
+/* 鍦熷￥澧掓儏绔欐暟鎹」鍐呭浼樺寲 */
+.weather-data-item.soil-item .data-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  min-width: 0; /* 闃叉鍐呭婧㈠嚭 */
+  overflow: hidden; /* 闅愯棌婧㈠嚭鍐呭 */
+}
+
+.weather-data-item.soil-item .data-label {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap; /* 闃叉鏍囩鎹㈣ */
+  overflow: hidden; /* 闅愯棌婧㈠嚭鍐呭 */
+  text-overflow: ellipsis; /* 鏄剧ず鐪佺暐鍙� */
+}
+
+.weather-data-item.soil-item .data-value {
+  font-size: 36rpx;
+  color: #1890ff;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap; /* 闃叉鏁板�兼崲琛� */
+  overflow: hidden; /* 闅愯棌婧㈠嚭鍐呭 */
+  text-overflow: ellipsis; /* 鏄剧ず鐪佺暐鍙� */
+}
+
+/* 鍦熷￥澧掓儏绔欏浘鏍囦紭鍖� */
+.weather-data-item.soil-item .data-icon {
+  width: 56rpx;
+  height: 56rpx;
+  background: white;
+  border-radius: 12rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  border: 2rpx solid rgba(255, 255, 255, 0.8);
+}
+
+.weather-data-item.soil-item .data-icon image {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+/* 鍦熷￥澧掓儏绔欐偓鍋滄晥鏋� */
+.weather-data-item.soil-item:hover {
+  transform: translateY(-2rpx);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+}
+
+/* 鍦熷￥澧掓儏绔欏搷搴斿紡浼樺寲 */
+@media (max-width: 400px) {
+  .weather-data-grid:has(.soil-item) {
+    grid-template-columns: 1fr 1fr;
+    gap: 12rpx;
+  }
+  
+  .weather-data-item.soil-item {
+    padding: 16rpx;
+    margin-bottom: 8rpx;
+  }
+  
+  .weather-data-item.soil-item .data-label {
+    font-size: 22rpx;
+  }
+  
+  .weather-data-item.soil-item .data-value {
+    font-size: 28rpx;
+  }
+  
+  .weather-data-item.soil-item .data-icon {
+    width: 50rpx;
+    height: 50rpx;
+  }
+  
+  .weather-data-item.soil-item .data-icon image {
+    width: 32rpx;
+    height: 32rpx;
+  }
+} 
+
+/* 瓒呭皬灞忓箷鍝嶅簲寮忎紭鍖� */
+@media (max-width: 320px) {
+  .weather-data-grid:has(.soil-item) {
+    grid-template-columns: 1fr 1fr;
+    gap: 8rpx;
+  }
+  
+  .weather-data-item.soil-item {
+    padding: 12rpx;
+    margin-bottom: 6rpx;
+  }
+  
+  .weather-data-item.soil-item .data-label {
+    font-size: 20rpx;
+  }
+  
+  .weather-data-item.soil-item .data-value {
+    font-size: 24rpx;
+  }
+  
+  .weather-data-item.soil-item .data-icon {
+    width: 46rpx;
+    height: 46rpx;
+  }
+  
+  .weather-data-item.soil-item .data-icon image {
+    width: 30rpx;
+    height: 30rpx;
+  }
+}
+
+/* ==================== 姘磋偉鏈烘牱寮� ==================== */
+
+/* 姘磋偉鏈洪�夋嫨鍣� */
+.fertilizer-station-selector {
+  /* 杩樺師宸﹀彸杈硅窛 */
+  margin: 10rpx 20rpx;
+  background: white;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 姘磋偉鏈轰俊鎭崱鐗� */
+.fertilizer-info-card {
+  /* 杩樺師宸﹀彸杈硅窛 */
+  margin: 20rpx;
+  background: white;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 鎺у埗寮�鍏冲尯鍩� */
+.control-switches {
+  margin-bottom: 20rpx;
+  padding: 16rpx 20rpx;
+  background: #f8f9fa;
+  border-radius: 12rpx;
+  border: 1rpx solid #e9ecef;
+}
+
+.section-title {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 16rpx;
+  display: block;
+}
+
+.switch-container {
+  display: flex;
+  gap: 60rpx;
+  justify-content: center;
+  align-items: center;
+}
+
+.switch-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.switch-label {
+  font-size: 24rpx;
+  color: #666;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.custom-switch {
+  transform: scale(1.1);
+}
+
+/* 鐩戞祴鏁版嵁鍖哄煙 */
+.monitoring-data {
+  margin-bottom: 24rpx;
+}
+
+.monitoring-data .section-title {
+  margin: 0 0 20rpx 0;
+  padding: 0 20rpx;
+}
+
+/* 姘磋偉鏈烘暟鎹綉鏍� */
+.monitoring-data .data-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.monitoring-data .data-item {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 20rpx;
+  background: #f8f9fa;
+  border-radius: 16rpx;
+  border-left: 4rpx solid;
+  transition: all 0.3s ease;
+  min-height: 100rpx;
+  box-sizing: border-box;
+}
+
+.monitoring-data .data-item:active {
+  transform: scale(0.98);
+}
+
+/* 姘磋偉鏈烘暟鎹」鏍峰紡 */
+.monitoring-data .data-item.pump-status {
+  border-left-color: #1890ff;
+  background: linear-gradient(135deg, #e6f7ff 0%, #ffffff 100%);
+}
+
+.monitoring-data .data-item.waste-flow {
+  border-left-color: #52c41a;
+  background: linear-gradient(135deg, #f6ffed 0%, #ffffff 100%);
+}
+
+.monitoring-data .data-item.fertilizing-duration {
+  border-left-color: #fa8c16;
+  background: linear-gradient(135deg, #fff7e6 0%, #ffffff 100%);
+}
+
+.monitoring-data .data-item.mixing-duration {
+  border-left-color: #722ed1;
+  background: linear-gradient(135deg, #f9f0ff 0%, #ffffff 100%);
+}
+
+.monitoring-data .data-item.mixing-set-time {
+  border-left-color: #13c2c2;
+  background: linear-gradient(135deg, #e6fffb 0%, #ffffff 100%);
+}
+
+.monitoring-data .data-item.fertilizing-set-time {
+  border-left-color: #eb2f96;
+  background: linear-gradient(135deg, #fff0f6 0%, #ffffff 100%);
+}
+
+/* 鐘舵�佸窘绔� */
+.status-badge {
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  text-align: center;
+  min-width: 80rpx;
+}
+
+.status-badge.normal {
+  background: #f6ffed;
+  color: #52c41a;
+  border: 1rpx solid #b7eb8f;
+}
+
+.status-badge.abnormal {
+  background: #fff2f0;
+  color: #ff4d4f;
+  border: 1rpx solid #ffccc7;
+}
+
+/* 姘磋偉鏈烘暟鎹」鍥炬爣 */
+.monitoring-data .data-item .data-icon {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border-radius: 12rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.monitoring-data .data-item .data-icon image {
+  width: 36rpx;
+  height: 36rpx;
+}
+
+/* 姘磋偉鏈烘暟鎹」鍐呭 */
+.monitoring-data .data-item .data-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.monitoring-data .data-item .data-label {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.monitoring-data .data-item .data-value {
+  font-size: 36rpx;
+  color: #1890ff;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+/* 姘磋偉鏈哄搷搴斿紡浼樺寲 */
+@media (max-width: 400px) {
+  .control-switches {
+    padding: 12rpx 16rpx;
+    margin-bottom: 16rpx;
+  }
+  
+  .section-title {
+    font-size: 24rpx;
+    margin-bottom: 12rpx;
+  }
+  
+  .switch-container {
+    gap: 40rpx;
+  }
+  
+  .switch-item {
+    gap: 12rpx;
+  }
+  
+  .switch-label {
+    font-size: 22rpx;
+  }
+  
+  .custom-switch {
+    transform: scale(1.0);
+  }
+  
+  .monitoring-data .data-grid {
+    grid-template-columns: 1fr;
+    gap: 16rpx;
+  }
+  
+  .monitoring-data .data-item {
+    padding: 20rpx;
+  }
+  
+  .monitoring-data .data-item .data-label {
+    font-size: 24rpx;
+  }
+  
+  .monitoring-data .data-item .data-value {
+    font-size: 32rpx;
+  }
+  
+  .monitoring-data .data-item .data-icon {
+    width: 50rpx;
+    height: 50rpx;
+  }
+  
+  .monitoring-data .data-item .data-icon image {
+    width: 32rpx;
+    height: 32rpx;
+  }
+} 
+
+/* ezplayer缁勪欢鏍峰紡 - 闃叉鍙樺舰鍜岃秴鍑哄睆骞� */
+.video-wrapper ezplayer {
+  /* 鍩虹灏哄绾︽潫 */
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  
+  /* 浣嶇疆绾︽潫 */
+  position: relative !important;
+  left: 0 !important;
+  right: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  
+  /* 婧㈠嚭鎺у埗 */
+  overflow: hidden !important;
+  clip-path: inset(0 0 0 0) !important;
+  
+  /* 鍙樻崲绾︽潫 */
+  transform: none !important;
+  transform-origin: center center !important;
+  
+  /* 甯冨眬绾︽潫 */
+  contain: layout style paint !important;
+  flex-basis: auto !important;
+  flex-grow: 0 !important;
+  flex-shrink: 0 !important;
+  
+  /* 鐩掓ā鍨嬬害鏉� */
+  box-sizing: border-box !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  
+  /* 娓叉煋浼樺寲 */
+  backface-visibility: hidden !important;
+  perspective: 1000px !important;
+  will-change: auto !important;
+  
+  /* 鐪熸満鐗规畩澶勭悊 */
+  -webkit-transform: none !important;
+  -webkit-transform-origin: center center !important;
+  -webkit-backface-visibility: hidden !important;
+  -webkit-perspective: 1000px !important;
+}
+
+/* 鐪熸満涓婄殑鐗规畩绾︽潫 */
+@media screen and (max-device-width: 750px) {
+  .video-wrapper ezplayer {
+    /* 鐪熸満涓婃洿涓ユ牸鐨勭害鏉� */
+    max-width: 100vw !important;
+    max-height: 100vh !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+    
+    /* 闃叉鐪熸満涓婄殑缂╂斁闂 */
+    -webkit-transform: scale(1) !important;
+    transform: scale(1) !important;
+    
+    /* 鐪熸満涓婄殑婧㈠嚭鎺у埗 */
+    overflow: hidden !important;
+    clip: rect(0, auto, auto, 0) !important;
+  }
+}
+
+/* 鏆傚仠鐘舵�佺殑鐗规畩澶勭悊 */
+.video-wrapper ezplayer[data-paused="true"] {
+  /* 鏆傚仠鏃朵繚鎸佸昂瀵� */
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  
+  /* 鏆傚仠鏃堕槻姝㈠彉褰� */
+  transform: none !important;
+  -webkit-transform: none !important;
+  
+  /* 鏆傚仠鏃剁殑婧㈠嚭鎺у埗 */
+  overflow: hidden !important;
+  clip-path: inset(0 0 0 0) !important;
 } 
\ No newline at end of file

--
Gitblit v1.8.0