更新项目配置，启用URL检查功能；修改监测页面状态管理逻辑，优化在线状态的判断方式，提升用户体验和代码可读性。

zuoxiao

2025-08-19 7f48ad7939773a9bc02aad98dbc5e11a35d132e1

 pages/stationMonitor/stationMonitor.wxss

@@ -18,7 +18,8 @@
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
  height: 100vh; /* 固定高度为视口高度 */
  height: 100vh;
  /* 固定高度为视口高度 */
  width: 100%;
  box-sizing: border-box;
  /* 防止任何滚动 */
@@ -40,13 +41,16 @@
  background-color: #fff;
  padding: 4rpx 0;
  width: 100%;
  flex-shrink: 0; /* 防止被压缩 */
  flex-shrink: 0;
  /* 防止被压缩 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  border-bottom: 1rpx solid #eaeaea;
  position: sticky; /* 使用sticky定位 */
  position: sticky;
  /* 使用sticky定位 */
  top: 0;
  z-index: 9999;
  background-color: #fff; /* 确保背景色 */
  background-color: #fff;
  /* 确保背景色 */
  /* 减小tabs高度 */
  height: 100rpx;
  box-sizing: border-box;
@@ -152,12 +156,17 @@
  box-sizing: border-box;
  /* 使用flex: 1填充剩余空间 */
  flex: 1;
  min-height: 0; /* 允许flex项目收缩 */
  overflow-y: auto; /* 垂直滚动 */
  overflow-x: hidden; /* 隐藏水平滚动 */
  min-height: 0;
  /* 允许flex项目收缩 */
  overflow-y: auto;
  /* 垂直滚动 */
  overflow-x: hidden;
  /* 隐藏水平滚动 */
  /* 隐藏滚动条 */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  /* 为tabs留出空间 */
  margin-top: 0;
}
@@ -186,6 +195,7 @@
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
@@ -466,31 +476,32 @@
  .tab-name {
    font-size: 20rpx;
  }
  

  .tab-icon {
    width: 40rpx;
    height: 40rpx;
  }
  

  .tab-item {
    padding: 16rpx 2rpx;
    width: 25%; /* 确保小屏幕下也均分 */
    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;
@@ -502,30 +513,30 @@
  .tab-name {
    font-size: 18rpx;
  }
  

  .tab-icon {
    width: 36rpx;
    height: 36rpx;
  }
  

  .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;
@@ -536,81 +547,44 @@
.camera-list {
  display: flex;
  flex-direction: column;
  /* 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; */
  gap: 20rpx;

}

.camera-item {
  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;
  position: relative;
  overflow: hidden;
  /* 确保在不同设备上的显示一致性 */
  flex-shrink: 0;
  flex-grow: 0;
  /* 新增：强制约束，防止ezplayer超出 */
  contain: layout style paint;
  /* 新增：强制左对齐，无任何边距 */
  left: 0 !important;
  right: 0 !important;
  border-radius: 12rpx;
  margin-bottom: 10rpx;

  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 摄像头头部 */
.camera-header {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  /* 防止文字溢出 */
  overflow: hidden;
  margin: 20rpx 10rpx;
  margin-bottom: 16rpx;
  margin-top: 15rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
}

.camera-name {
  font-size: 32rpx;
  font-size: 28rpx;
  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: 24rpx;
  padding: 6rpx 12rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  /* 确保状态标签不被压缩 */
  min-width: fit-content;
}

.camera-status.online {
@@ -629,52 +603,42 @@
.camera-video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* height: 400rpx; */
  /* 移除所有装饰性样式，确保完全填充 */
  border-radius: 0;
  height: 100%;
  border-radius: 8rpx;
  overflow: hidden;
  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; */
  background-color: #f5f5f5;
}

/* 移除调试边框，避免影响ezplayer显示 */

/* 加载状态 */
.video-loading {
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-width: 0;

/* 视频状态样式 */
.video-loading,
.video-error,
.video-offline,
.video-no-url {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  /* 确保在不同设备上的显示一致性 */
  flex-shrink: 0;
  height: 100%;
  text-align: center;
}

.video-loading {
  background-color: #f8f9fa;
}

.video-error {
  background-color: #fff2f0;
  border: 1rpx solid #ffccc7;
}

.video-offline,
.video-no-url {
  background-color: #f5f5f5;
}

/* 加载动画 */
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
@@ -683,8 +647,6 @@
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16rpx;
  /* 确保动画在不同设备上的一致性 */
  flex-shrink: 0;
}

@keyframes spin {
@@ -692,650 +654,75 @@
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
.loading-text,
.error-text,
.offline-text,
.no-url-text {
  font-size: 24rpx;
  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;
  margin-top: 8rpx;
}

.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%;
}

/* 图标样式 */
.error-icon,
.offline-icon,
.no-url-icon {
  width: 60rpx;
  height: 60rpx;
  opacity: 0.5;
}

/* 重试按钮 */
.retry-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  gap: 6rpx;
  padding: 8rpx 16rpx;
  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;
  border-radius: 16rpx;
  font-size: 22rpx;
  margin-top: 12rpx;
}

.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;
  /* 确保在flex容器中的行为 */
  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;
}

/* 新增：专门处理ezplayer暂停状态的样式 */
.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;
}

/* 新增：使用CSS 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;
}

/* 新增：特别针对ezplayer的强制约束 */
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: 12rpx;
  /* 确保在不同设备上的显示一致性 */
  flex-shrink: 0;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.play-overlay {
  width: 80rpx;
  height: 80rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.play-overlay:active {
  transform: scale(0.9);
}

.play-icon {
  width: 40rpx;
  height: 40rpx;
  width: 20rpx;
  height: 20rpx;
  filter: brightness(0) invert(1);
}

.video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 20rpx 16rpx 16rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-time {
  font-size: 24rpx;
  opacity: 0.9;
}

.video-status {
  font-size: 22rpx;
  opacity: 0.8;
  color: #52c41a;
}

/* 播放控制按钮 */
.video-controls {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  display: flex;
  gap: 12rpx;
  z-index: 20;
}

.control-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.control-btn:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.8);
}

.control-icon {
  width: 32rpx;
  height: 32rpx;
  filter: brightness(0) invert(1);
}

/* 调试按钮 */
.debug-controls {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
  z-index: 20;
}

.debug-btn {
  padding: 8rpx 16rpx;
  background: rgba(255, 0, 0, 0.7);
  border-radius: 20rpx;
  font-size: 20rpx;
  color: white;
}

/* 离线状态 */
.video-offline {
/* 视频播放器容器 */
.video-wrapper {
  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: 80rpx;
  height: 80rpx;
  opacity: 0.4;
  margin-bottom: 16rpx;
  filter: grayscale(100%);
  /* 确保图标在不同设备上的一致性 */
  flex-shrink: 0;
}

.offline-text {
  font-size: 28rpx;
  color: #999;
  font-weight: 500;
  text-align: center;
  /* 确保文字在不同设备上的一致性 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 操作按钮 */
.camera-actions {
.video-wrapper-ezplayer {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  gap: 16rpx;
  box-sizing: border-box;
  /* 确保在不同设备上的显示一致性 */
  flex-shrink: 0;
  height: 100%;
}

.action-btn {
  flex: 1;
  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 {
  background-color: #1890FF;
  color: white;
}

.action-btn.primary:active {
  background-color: #096dd9;
  transform: scale(0.98);
}

.action-btn.secondary {
  background-color: #f5f5f5;
  color: #666;
  border: 1rpx solid #d9d9d9;
}

.action-btn.secondary:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}

/* 禁用状态 */
.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 {
@@ -1400,8 +787,10 @@
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  min-width: 0; /* 防止内容溢出 */
  overflow: hidden; /* 隐藏溢出内容 */
  min-width: 0;
  /* 防止内容溢出 */
  overflow: hidden;
  /* 隐藏溢出内容 */
}

.weather-data-item.soil-item .data-label {
@@ -1409,9 +798,12 @@
  color: #333;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap; /* 防止标签换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap;
  /* 防止标签换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

.weather-data-item.soil-item .data-value {
@@ -1419,9 +811,12 @@
  color: #1890ff;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap; /* 防止数值换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap;
  /* 防止数值换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 显示省略号 */
}

/* 土壤墒情站图标优化 */
@@ -1451,30 +846,30 @@
    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) {
@@ -1482,25 +877,25 @@
    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;
@@ -1707,138 +1102,52 @@
    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;
} 
}