| | |
| | | .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; |
| | | font-size: 28rpx; |
| | | color: #666666; |
| | | margin-bottom: 10rpx; |
| | | } |
| | | |
| | | .group-name { |
| | | font-size: 32rpx; |
| | | font-weight: 500; |
| | | font-size: 36rpx; |
| | | font-weight: bold; |
| | | color: #333333; |
| | | } |
| | | |
| | | /* 阀控器列表容器 */ |
| | | /* 取水口列表容器 */ |
| | | .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; |
| | | } |
| | | |
| | | .valve-name { |
| | | font-size: 32rpx; |
| | | font-weight: 500; |
| | | color: #333333; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .valve-status-container { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: flex-end; |
| | | } |
| | | |
| | | .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: 4rpx 12rpx; |
| | | border-radius: 20rpx; |
| | | margin-left: 12rpx; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | height: 32rpx; |
| | | line-height: 1; |
| | | } |
| | | |
| | | .valve-status-inline.online { |
| | | background-color: rgba(82, 196, 26, 0.1); |
| | | color: #52C41A; |
| | | } |
| | | |
| | | .valve-status-inline.offline { |
| | | background-color: rgba(245, 34, 45, 0.1); |
| | | color: #F5222D; |
| | | } |
| | | |
| | | /* 命令状态样式 */ |
| | | .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; |
| | | } |
| | | |
| | | /* 底部按钮样式 */ |