| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 100vh; |
| | | background-color: #F5F5F5; |
| | | background-color: #f5f5f5; |
| | | } |
| | | |
| | | /* 顶部信息区域样式 */ |
| | | .header-section { |
| | | background-color: #FFFFFF; |
| | | padding: 20rpx 30rpx; |
| | | margin-bottom: 20rpx; |
| | | box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
| | | background-color: #ffffff; |
| | | padding: 20rpx; |
| | | border-bottom: 1rpx solid #e0e0e0; |
| | | } |
| | | |
| | | .plan-info { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 20rpx; |
| | | margin-bottom: 8rpx; |
| | | min-height: 40rpx; |
| | | } |
| | | |
| | | .plan-code { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | line-height: 40rpx; |
| | | } |
| | | |
| | | .status-icon { |
| | | width: 68rpx; |
| | | height: 68rpx; |
| | | .plan-code .label { |
| | | color: #666; |
| | | font-size: 28rpx; |
| | | margin-right: 8rpx; |
| | | } |
| | | |
| | | .time-info { |
| | | .plan-code .value { |
| | | color: #333; |
| | | font-size: 32rpx; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 状态标签样式 */ |
| | | .plan-status { |
| | | padding: 4rpx 16rpx; |
| | | border-radius: 20rpx; |
| | | font-size: 24rpx; |
| | | color: #fff; |
| | | text-align: center; |
| | | margin-left: 20rpx; |
| | | } |
| | | |
| | | .plan-status.draft { |
| | | background-color: #9E9E9E; |
| | | } |
| | | |
| | | .plan-status.published { |
| | | background-color: #90CAF9; |
| | | } |
| | | |
| | | .plan-status.executing { |
| | | background-color: #2196F3; |
| | | } |
| | | |
| | | .plan-status.completed { |
| | | background-color: #4CAF50; |
| | | } |
| | | |
| | | .plan-status.terminated { |
| | | background-color: #F44336; |
| | | } |
| | | |
| | | .time-info, .project-info { |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 10rpx 0; |
| | | margin-top: 8rpx; |
| | | } |
| | | |
| | | .label { |
| | | color: #666666; |
| | | .time-info .label, .project-info .label { |
| | | color: #666; |
| | | font-size: 28rpx; |
| | | margin-right: 10rpx; |
| | | } |
| | | |
| | | .value { |
| | | color: #333333; |
| | | .time-info .value, .project-info .value { |
| | | color: #333; |
| | | font-size: 28rpx; |
| | | font-weight: 500; |
| | | } |
| | |
| | | } |
| | | |
| | | .scroll-content { |
| | | padding: 0 30rpx 30rpx 30rpx; |
| | | padding: 20rpx; |
| | | } |
| | | |
| | | .project-item { |
| | |
| | | |
| | | /* 轮灌组列表样式 */ |
| | | .group-list { |
| | | background-color: #FFFFFF; |
| | | border-radius: 0 0 12rpx 12rpx; |
| | | padding: 0 20rpx; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | max-height: 0; |
| | | transition: all 0.3s ease-in-out; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .group-list.expanded { |
| | | max-height: 2000rpx; /* 足够大的高度以容纳内容 */ |
| | | padding: 0 20rpx 20rpx 20rpx; |
| | | } |
| | | |
| | | .group-list.collapsed { |
| | | max-height: 0; |
| | | padding-top: 0; |
| | | padding-bottom: 0; |
| | | } |
| | | |
| | | .group-item { |
| | | border-radius: 8rpx; |
| | | margin-top: 20rpx; |
| | | background-color: #ffffff; |
| | | border-radius: 12rpx; |
| | | padding: 20rpx; |
| | | background-color: #F9F9F9; |
| | | position: relative; |
| | | margin-bottom: 20rpx; |
| | | box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); |
| | | } |
| | | |
| | | /* 轮灌组状态样式 */ |
| | | .group-status-indicator { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 20rpx; |
| | | margin-left: auto; |
| | | background-color: #f5f7fa; |
| | | padding: 4rpx 10rpx; |
| | | border-radius: 8rpx; |
| | | } |
| | | |
| | | .status-dot { |
| | | width: 16rpx; |
| | | height: 16rpx; |
| | | border-radius: 50%; |
| | | margin-right: 10rpx; |
| | | margin-right: 8rpx; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .group-item.pending .status-dot { |
| | | background-color: #ffd700; |
| | | } |
| | | |
| | | .group-item.in_progress .status-dot { |
| | | background-color: #4CAF50; |
| | | } |
| | | |
| | | .group-item.completed .status-dot { |
| | | background-color: #2196F3; |
| | | } |
| | | |
| | | .status-text { |
| | | font-size: 26rpx; |
| | | font-weight: 500; |
| | | color: #666; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | /* 已灌溉状态 */ |
| | | .irrigated .status-dot { |
| | | background-color: #52C41A; |
| | | .group-item.pending .status-text { |
| | | color: #e6c100; |
| | | } |
| | | |
| | | .irrigated .status-text { |
| | | color: #52C41A; |
| | | .group-item.in_progress .status-text { |
| | | color: #4CAF50; |
| | | } |
| | | |
| | | /* 正在灌溉状态 */ |
| | | .irrigating .status-dot { |
| | | background-color: #D43030; |
| | | .group-item.completed .status-text { |
| | | color: #2196F3; |
| | | } |
| | | |
| | | .irrigating .status-text { |
| | | color: #D43030; |
| | | /* 根据不同状态显示不同背景色 */ |
| | | .group-item.pending .group-status-indicator { |
| | | background-color: rgba(255, 215, 0, 0.1); |
| | | } |
| | | |
| | | /* 未灌溉状态 */ |
| | | .waiting .status-dot { |
| | | background-color: #FAAD14; |
| | | .group-item.in_progress .group-status-indicator { |
| | | background-color: rgba(76, 175, 80, 0.1); |
| | | } |
| | | |
| | | .waiting .status-text { |
| | | color: #FAAD14; |
| | | .group-item.completed .group-status-indicator { |
| | | background-color: rgba(33, 150, 243, 0.1); |
| | | } |
| | | |
| | | /* 轮灌组信息样式 */ |
| | | .group-info { |
| | | padding-left: 26rpx; |
| | | margin-top: 12rpx; |
| | | } |
| | | |
| | | .group-name-row { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 12rpx; |
| | | width: 100%; |
| | | } |
| | | |
| | | .group-label { |
| | | font-size: 32rpx; |
| | | color: #666; |
| | | margin-right: 8rpx; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .group-name { |
| | | font-size: 30rpx; |
| | | font-weight: bold; |
| | | color: #333333; |
| | | margin-bottom: 20rpx; |
| | | font-size: 32rpx; |
| | | font-weight: 500; |
| | | color: #333; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .group-time-info { |
| | | background-color: #FFFFFF; |
| | | border-radius: 8rpx; |
| | | padding: 20rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 8rpx; |
| | | } |
| | | |
| | | .time-row { |
| | | display: flex; |
| | | margin-bottom: 10rpx; |
| | | } |
| | | |
| | | .time-row:last-child { |
| | | margin-bottom: 0; |
| | | align-items: center; |
| | | } |
| | | |
| | | .time-label { |
| | | color: #666666; |
| | | color: #666; |
| | | font-size: 26rpx; |
| | | width: 150rpx; |
| | | width: 160rpx; |
| | | } |
| | | |
| | | .time-value { |
| | | color: #333333; |
| | | color: #333; |
| | | font-size: 26rpx; |
| | | } |
| | | |
| | | /* 取水口信息样式 */ |
| | | .intake-info { |
| | | margin-top: 20rpx; |
| | | border-top: 1rpx dashed #e0e0e0; |
| | | padding-top: 16rpx; |
| | | } |
| | | |
| | | .intake-header { |
| | | font-size: 28rpx; |
| | | color: #333; |
| | | font-weight: 500; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .intake-list { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10rpx; |
| | | } |
| | | |
| | | .intake-item { |
| | | background-color: #f9f9f9; |
| | | border-radius: 8rpx; |
| | | padding: 12rpx 16rpx; |
| | | } |
| | | |
| | | .intake-item.success { |
| | | border-left: 4rpx solid #4CAF50; |
| | | } |
| | | |
| | | .intake-item.error { |
| | | border-left: 4rpx solid #F44336; |
| | | } |
| | | |
| | | .intake-name { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 26rpx; |
| | | color: #333; |
| | | } |
| | | |
| | | .intake-status-dot { |
| | | width: 12rpx; |
| | | height: 12rpx; |
| | | border-radius: 50%; |
| | | margin-right: 8rpx; |
| | | } |
| | | |
| | | .intake-item.success .intake-status-dot { |
| | | background-color: #4CAF50; |
| | | } |
| | | |
| | | .intake-item.error .intake-status-dot { |
| | | background-color: #F44336; |
| | | } |
| | | |
| | | .intake-result { |
| | | margin-top: 6rpx; |
| | | font-size: 24rpx; |
| | | color: #F44336; |
| | | padding-left: 20rpx; |
| | | } |