|  |  |  | 
|---|
|  |  |  | .group-detail-container { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | min-height: 100vh; | 
|---|
|  |  |  | background-color: #f5f5f5; | 
|---|
|  |  |  | height: 100vh; | 
|---|
|  |  |  | background-color: #F5F5F5; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 页面标题样式 */ | 
|---|
|  |  |  | .page-header { | 
|---|
|  |  |  | background-color: #1890FF; | 
|---|
|  |  |  | background-color: #FFFFFF; | 
|---|
|  |  |  | padding: 30rpx; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); | 
|---|
|  |  |  | margin-bottom: 20rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .header-content { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .project-name { | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | opacity: 0.8; | 
|---|
|  |  |  | margin-bottom: 10rpx; | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .project-label { | 
|---|
|  |  |  | color: #999999; | 
|---|
|  |  |  | margin-right: 8rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .group-name { | 
|---|
|  |  |  | font-size: 32rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | font-size: 36rpx; | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | margin-bottom: 10rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 阀控器列表容器 */ | 
|---|
|  |  |  | /* 取水口列表容器 */ | 
|---|
|  |  |  | .valve-list-container { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | padding: 30rpx; | 
|---|
|  |  |  | padding: 0 30rpx; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .section-title { | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | /* 取水口列表 */ | 
|---|
|  |  |  | .valve-list { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 取水口项目 */ | 
|---|
|  |  |  | .valve-item { | 
|---|
|  |  |  | background-color: #FFFFFF; | 
|---|
|  |  |  | border-radius: 12rpx; | 
|---|
|  |  |  | padding: 30rpx; | 
|---|
|  |  |  | margin-bottom: 20rpx; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-info { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | margin-right: 20rpx; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-name-container { | 
|---|
|  |  |  | font-size: 32rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | margin-bottom: 12rpx; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .name-text { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | max-width: 100%; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | text-overflow: ellipsis; | 
|---|
|  |  |  | white-space: nowrap; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-rtu-addr { | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .rtu-label { | 
|---|
|  |  |  | color: #999999; | 
|---|
|  |  |  | white-space: nowrap; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .rtu-value { | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | text-overflow: ellipsis; | 
|---|
|  |  |  | white-space: nowrap; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status-container { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | align-items: flex-end; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | min-width: 100rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status { | 
|---|
|  |  |  | padding: 8rpx 20rpx; | 
|---|
|  |  |  | border-radius: 30rpx; | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | margin-bottom: 10rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status.online { | 
|---|
|  |  |  | background-color: rgba(82, 196, 26, 0.1); | 
|---|
|  |  |  | color: #52C41A; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status.offline { | 
|---|
|  |  |  | background-color: rgba(245, 34, 45, 0.1); | 
|---|
|  |  |  | color: #F5222D; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 内联状态样式 */ | 
|---|
|  |  |  | .valve-status-inline { | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | padding: 8rpx 20rpx; | 
|---|
|  |  |  | border-radius: 30rpx; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | height: 36rpx; | 
|---|
|  |  |  | line-height: 1; | 
|---|
|  |  |  | min-width: 80rpx; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | white-space: nowrap; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status-inline.online { | 
|---|
|  |  |  | background-color: rgba(82, 196, 26, 0.1); | 
|---|
|  |  |  | color: #52C41A; | 
|---|
|  |  |  | border: 1rpx solid rgba(82, 196, 26, 0.3); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status-inline.offline { | 
|---|
|  |  |  | background-color: rgba(245, 34, 45, 0.1); | 
|---|
|  |  |  | color: #F5222D; | 
|---|
|  |  |  | border: 1rpx solid rgba(245, 34, 45, 0.3); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 命令状态样式 */ | 
|---|
|  |  |  | .command-status { | 
|---|
|  |  |  | padding: 8rpx 20rpx; | 
|---|
|  |  |  | border-radius: 30rpx; | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | min-width: 160rpx; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | height: 40rpx; | 
|---|
|  |  |  | line-height: 1; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .command-status.sent { | 
|---|
|  |  |  | background-color: rgba(82, 196, 26, 0.1); | 
|---|
|  |  |  | color: #52C41A; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .command-status.unsent { | 
|---|
|  |  |  | background-color: rgba(250, 173, 20, 0.1); | 
|---|
|  |  |  | color: #FAAD14; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 加载中样式 */ | 
|---|
|  |  |  | .loading-container { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | padding: 60rpx 0; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | height: 300rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .loading-icon { | 
|---|
|  |  |  | width: 60rpx; | 
|---|
|  |  |  | height: 60rpx; | 
|---|
|  |  |  | border: 4rpx solid #f3f3f3; | 
|---|
|  |  |  | border-top: 4rpx solid #1890FF; | 
|---|
|  |  |  | width: 80rpx; | 
|---|
|  |  |  | height: 80rpx; | 
|---|
|  |  |  | border: 6rpx solid #f3f3f3; | 
|---|
|  |  |  | border-top: 6rpx solid #3498db; | 
|---|
|  |  |  | border-radius: 50%; | 
|---|
|  |  |  | animation: spin 1s linear infinite; | 
|---|
|  |  |  | margin-bottom: 20rpx; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .loading-text { | 
|---|
|  |  |  | font-size: 26rpx; | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 阀控器列表样式 */ | 
|---|
|  |  |  | .valve-list { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-item { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | padding: 30rpx; | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | margin-bottom: 20rpx; | 
|---|
|  |  |  | border-radius: 8rpx; | 
|---|
|  |  |  | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-info { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-name { | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | margin-bottom: 10rpx; | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-location { | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status { | 
|---|
|  |  |  | padding: 8rpx 20rpx; | 
|---|
|  |  |  | border-radius: 30rpx; | 
|---|
|  |  |  | font-size: 24rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status.online { | 
|---|
|  |  |  | background-color: #e6f7ff; | 
|---|
|  |  |  | color: #1890FF; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .valve-status.offline { | 
|---|
|  |  |  | background-color: #fff1f0; | 
|---|
|  |  |  | color: #f5222d; | 
|---|
|  |  |  | color: #666666; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 空状态样式 */ | 
|---|
|  |  |  | .empty-state { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | padding: 100rpx 0; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | height: 400rpx; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .empty-icon { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .empty-text { | 
|---|
|  |  |  | font-size: 26rpx; | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  | font-size: 28rpx; | 
|---|
|  |  |  | color: #999999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 底部按钮样式 */ | 
|---|