| | |
| | | position: sticky; |
| | | /* 使用sticky定位 */ |
| | | top: 0; |
| | | z-index: 9999; |
| | | z-index: 999; |
| | | background-color: #fff; |
| | | /* 确保背景色 */ |
| | | /* 减小tabs高度 */ |
| | |
| | | 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%); |