/* pages/stationMonitor/stationMonitor.wxss */
|
|
/* 重置页面默认样式 */
|
page {
|
margin: 0;
|
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;
|
height: 100vh;
|
/* 固定高度为视口高度 */
|
width: 100%;
|
box-sizing: border-box;
|
/* 防止任何滚动 */
|
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%;
|
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: 999;
|
background-color: #fff;
|
/* 确保背景色 */
|
/* 减小tabs高度 */
|
height: 100rpx;
|
box-sizing: border-box;
|
}
|
|
/* 移除旧的tab-container样式 */
|
|
|
|
/* 移除过度的CSS规则，保持简洁的tabs样式 */
|
|
/* 标签页项样式 - 优化布局 */
|
.tab {
|
flex: 1;
|
text-align: center;
|
font-size: 29rpx;
|
color: #666;
|
position: relative;
|
padding: 12rpx 0;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
transition: all 0.3s ease;
|
border-radius: 16rpx;
|
margin: 0 4rpx;
|
}
|
|
.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.active::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 50rpx;
|
height: 4rpx;
|
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: 36rpx;
|
height: 36rpx;
|
margin-bottom: 6rpx;
|
transition: all 0.3s ease;
|
}
|
|
.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: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;
|
text-align: center;
|
line-height: 1.2;
|
transition: color 0.3s ease;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
max-width: 100%;
|
margin-bottom: 2rpx;
|
}
|
|
.tab.active .tab-name {
|
color: #0052d9;
|
font-weight: 500;
|
}
|
|
/* 内容区域 */
|
.content-area {
|
padding: 0;
|
margin: 0;
|
width: 100%;
|
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 */
|
/* 为tabs留出空间 */
|
margin-top: 0;
|
}
|
|
/* 隐藏Webkit浏览器的滚动条 */
|
.content-area::-webkit-scrollbar {
|
display: none;
|
}
|
|
/* 选项卡内容 */
|
.tab-content {
|
width: 100%;
|
background: white;
|
border-radius: 0;
|
/* 还原内边距 */
|
padding: 20rpx 0;
|
box-shadow: none;
|
animation: fadeIn 0.3s ease-in-out;
|
box-sizing: border-box;
|
margin: 0;
|
display: block;
|
}
|
|
@keyframes fadeIn {
|
from {
|
opacity: 0;
|
transform: translateY(20rpx);
|
}
|
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
/* 内容标题 */
|
.content-title {
|
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;
|
}
|
|
/* 响应式适配 */
|
@media (max-width: 400px) {
|
.tab-name {
|
font-size: 20rpx;
|
}
|
|
.tab-icon {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
|
.tab-item {
|
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;
|
}
|
}
|
|
/* 超小屏幕适配 */
|
@media (max-width: 320px) {
|
.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;
|
}
|
}
|
|
/* 摄像头列表样式 */
|
.camera-list {
|
display: flex;
|
flex-direction: column;
|
gap: 20rpx;
|
|
}
|
|
.camera-item {
|
background: white;
|
border-radius: 12rpx;
|
margin-bottom: 10rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
}
|
|
/* 摄像头头部 */
|
.camera-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16rpx;
|
margin-top: 15rpx;
|
margin-left: 15rpx;
|
margin-right: 15rpx;
|
}
|
|
.camera-name {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #333;
|
flex: 1;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.camera-status {
|
padding: 6rpx 12rpx;
|
border-radius: 16rpx;
|
font-size: 22rpx;
|
font-weight: 500;
|
}
|
|
.camera-status.online {
|
background-color: #f6ffed;
|
color: #52c41a;
|
border: 1rpx solid #b7eb8f;
|
}
|
|
.camera-status.offline {
|
background-color: #fff2f0;
|
color: #ff4d4f;
|
border: 1rpx solid #ffccc7;
|
}
|
|
/* 视频容器 */
|
.camera-video-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
border-radius: 8rpx;
|
overflow: hidden;
|
background-color: #f5f5f5;
|
}
|
|
|
|
/* 视频状态样式 */
|
.video-loading,
|
.video-error,
|
.video-offline,
|
.video-no-url {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
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;
|
border: 4rpx solid #e3e3e3;
|
border-top: 4rpx solid #1890ff;
|
border-radius: 50%;
|
animation: spin 1s linear infinite;
|
margin-bottom: 16rpx;
|
}
|
|
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
}
|
|
.loading-text,
|
.error-text,
|
.offline-text,
|
.no-url-text {
|
font-size: 24rpx;
|
color: #666;
|
margin-top: 8rpx;
|
}
|
|
.error-text {
|
color: #ff4d4f;
|
}
|
|
/* 图标样式 */
|
.error-icon,
|
.offline-icon,
|
.no-url-icon {
|
width: 60rpx;
|
height: 60rpx;
|
opacity: 0.5;
|
}
|
|
/* 重试按钮 */
|
.retry-btn {
|
display: flex;
|
align-items: center;
|
gap: 6rpx;
|
padding: 8rpx 16rpx;
|
background-color: #ff4d4f;
|
color: white;
|
border: none;
|
border-radius: 16rpx;
|
font-size: 22rpx;
|
margin-top: 12rpx;
|
}
|
|
.retry-btn:active {
|
background-color: #cf1322;
|
}
|
|
.retry-icon {
|
width: 20rpx;
|
height: 20rpx;
|
filter: brightness(0) invert(1);
|
}
|
|
/* 视频播放器容器 */
|
.video-wrapper {
|
width: 100%;
|
height: 100%;
|
}
|
|
.video-wrapper-ezplayer {
|
width: 100%;
|
height: 100%;
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 土壤墒情站专用样式 */
|
.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%);
|
}
|
|
/* 注肥泵状态行 - 重新设计为两模块布局 */
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status {
|
display: flex !important;
|
align-items: center !important;
|
justify-content: space-between !important;
|
padding: 20rpx !important;
|
gap: 16rpx !important;
|
}
|
|
/* 左侧模块：图标+标签+状态值 */
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .data-content {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: flex-start;
|
flex: 1;
|
/* 关闭 gap，改用 margin 控制，兼容性更好 */
|
gap: 0 !important;
|
min-width: 0;
|
}
|
|
/* 只作用于注肥泵状态行：用 margin 控制 label 与 value 的间距，避免 gap 兼容性问题 */
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status.custom-pump-row .data-label {
|
display: block !important;
|
margin-bottom: 0 !important;
|
line-height: 1 !important;
|
}
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status.custom-pump-row .data-value {
|
display: block !important;
|
margin-top: -10rpx !important;
|
line-height: 1 !important;
|
}
|
|
/* 左侧模块中的状态值样式 */
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .data-value {
|
font-size: 36rpx !important;
|
font-weight: 700 !important;
|
line-height: 1.2 !important;
|
margin: 0 !important;
|
}
|
|
/* 状态值样式 */
|
.data-value.normal {
|
color: #52c41a;
|
}
|
|
.data-value.alarm {
|
color: #ff4d4f;
|
}
|
|
/* 右侧模块：清除报警按钮 - 独立模块在右边居中 */
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .clear-fault-btn {
|
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%) !important;
|
color: white !important;
|
border: none !important;
|
border-radius: 20rpx !important;
|
padding: 12rpx 20rpx !important;
|
font-size: 24rpx !important;
|
font-weight: 500 !important;
|
box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3) !important;
|
transition: all 0.3s ease !important;
|
white-space: nowrap !important;
|
line-height: 1.2 !important;
|
height: 50rpx !important;
|
min-height: 44rpx !important;
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
flex-shrink: 0 !important;
|
margin: 0 !important;
|
align-self: center !important;
|
}
|
|
/* 清除故障按钮激活状态 - 只针对注肥泵状态行 */
|
.fertilizer-info-card .monitoring-data .data-grid .data-item.pump-status .clear-fault-btn:active {
|
transform: scale(0.95) !important;
|
box-shadow: 0 1rpx 4rpx rgba(255, 77, 79, 0.4) !important;
|
}
|
|
.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;
|
}
|
}
|
