| | |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | /* 选择器容器样式 */ |
| | | .picker-container { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: 9999; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | /* 蒙层样式 */ |
| | | .picker-mask { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | pointer-events: auto; |
| | | } |
| | | |
| | | .picker-container .t-date-time-picker, |
| | | .picker-container .t-picker { |
| | | pointer-events: auto; |
| | | } |
| | | |
| | | /* 当选择器显示时 */ |
| | | .t-date-time-picker[visible], |
| | | .t-picker[visible] { |
| | | position: absolute; |
| | | bottom: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | background-color: #fff; |
| | | border-radius: 24rpx 24rpx 0 0; |
| | | } |
| | | |
| | | /* 表单项样式 */ |
| | | .form-item { |
| | | display: flex; |
| | | flex-direction: row; |
| | | align-items: center; |
| | | background-color: #fff; |
| | | padding: 30rpx; |
| | | padding: 15rpx 30rpx; |
| | | margin-bottom: 2rpx; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .form-label { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 28rpx; |
| | | color: #333; |
| | | font-weight: 500; |
| | | width: 200rpx; /* 固定标签宽度 */ |
| | | flex-shrink: 0; /* 防止标签宽度被压缩 */ |
| | | margin-bottom: 16rpx; |
| | | } |
| | | |
| | | .info-icon { |
| | | width: 32rpx; |
| | | height: 32rpx; |
| | | margin-left: 8rpx; |
| | | } |
| | | |
| | | .form-input { |
| | |
| | | padding-right: 20rpx; |
| | | } |
| | | |
| | | .picker-text { |
| | | flex: 1; |
| | | text-align: right; |
| | | padding-right: 20rpx; |
| | | } |
| | | |
| | | .placeholder { |
| | | color: #999; |
| | | } |
| | |
| | | height: calc(100vh - 300rpx); /* 设置固定高度,减去顶部表单和底部按钮的高度 */ |
| | | } |
| | | |
| | | /* 列表头部样式 */ |
| | | .list-header { |
| | | padding: 30rpx; |
| | | border-bottom: 1rpx solid #eee; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .list-title-container { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | .list-title { |
| | | font-size: 28rpx; |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | margin-bottom: 30rpx; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .list-subtitle { |
| | | font-size: 24rpx; |
| | | color: #999; |
| | | } |
| | | |
| | | /* 项目列表样式 */ |
| | |
| | | |
| | | /* 轮灌组列表样式 */ |
| | | .group-list { |
| | | display: none; |
| | | display: flex; |
| | | flex-direction: column; |
| | | background-color: #fff; |
| | | max-height: none; /* 移除最大高度限制 */ |
| | | height: auto; /* 自适应高度 */ |
| | | } |
| | | |
| | | .group-list.expanded { |
| | | display: flex; |
| | | height: 100%; /* 恢复为100%高度,因为不再需要为底部统计留空间 */ |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .group-item { |
| | |
| | | align-items: center; |
| | | padding: 25rpx 30rpx; |
| | | border-top: 1rpx solid #eee; |
| | | position: relative; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .group-item::after { |
| | | content: ''; |
| | | position: absolute; |
| | | right: 30rpx; /* 修改为与左侧padding一致 */ |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 16rpx; |
| | | height: 16rpx; |
| | | border-top: 2rpx solid #999; |
| | | border-right: 2rpx solid #999; |
| | | transform: translateY(-50%) rotate(45deg); |
| | | } |
| | | |
| | | .group-item:active { |
| | | background-color: #e6f7ff; |
| | | } |
| | | |
| | | .group-item.selected { |
| | |
| | | flex: 1; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .group-index { |
| | | color: #1890FF; |
| | | margin-right: 8rpx; |
| | | font-size: 26rpx; |
| | | } |
| | | |
| | | .group-name { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 26rpx; |
| | | color: #666; |
| | | position: relative; |
| | | padding: 4rpx 20rpx; |
| | | background-color: rgba(24, 144, 255, 0.1); |
| | | border-radius: 10rpx; |
| | | } |
| | | |
| | | .group-name-text { |
| | | color: #333; |
| | | margin-right: 8rpx; |
| | | } |
| | | |
| | | .group-intake-count { |
| | | color: #999; |
| | | font-size: 24rpx; |
| | | } |
| | | |
| | | .group-hint { |
| | | font-size: 22rpx; |
| | | color: #1890FF; |
| | | margin-left: 10rpx; |
| | | background-color: rgba(24, 144, 255, 0.1); |
| | | padding: 4rpx 10rpx; |
| | | border-radius: 10rpx; |
| | | } |
| | | |
| | | /* .group-name::before { |
| | | content: ''; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 6rpx; |
| | | height: 6rpx; |
| | | background-color: #1890FF; |
| | | border-radius: 50%; |
| | | } */ |
| | | |
| | | .group-duration { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 40rpx; /* 增加右边距,为箭头留出空间 */ |
| | | } |
| | | |
| | | .duration-input { |
| | |
| | | padding: 20rpx 30rpx; |
| | | background-color: #fff; |
| | | box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); |
| | | z-index: 100; /* 提高z-index确保按钮在最上层 */ |
| | | z-index: 100; |
| | | } |
| | | |
| | | .confirm-button { |
| | | width: 100%; |
| | | height: 88rpx; |
| | | line-height: 88rpx; |
| | | height: 80rpx; |
| | | line-height: 80rpx; |
| | | text-align: center; |
| | | background-color: #1890FF; |
| | | color: #fff; |
| | | font-size: 30rpx; |
| | | border-radius: 44rpx; |
| | | font-size: 28rpx; |
| | | border-radius: 8rpx; |
| | | } |
| | | |
| | | .confirm-button-hover { |
| | | opacity: 0.8; |
| | | } |
| | | |
| | | /* TDesign Picker 样式覆盖 */ |
| | | .t-picker { |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .t-picker__header { |
| | | background-color: #fff; |
| | | border-bottom: 1rpx solid #eee; |
| | | } |
| | | |
| | | .t-picker__title { |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .t-picker__cancel, |
| | | .t-picker__confirm { |
| | | font-size: 28rpx; |
| | | padding: 20rpx 30rpx; |
| | | } |
| | | |
| | | .t-picker__cancel { |
| | | color: #999; |
| | | } |
| | | |
| | | .t-picker__confirm { |
| | | color: #1890FF; |
| | | } |
| | | |
| | | .t-picker__content { |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .t-picker__item { |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | } |
| | | |
| | | .t-picker__item--active { |
| | | color: #1890FF; |
| | | } |
| | | |
| | | /* 总灌溉时间统计样式 */ |
| | | .total-duration { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .total-duration-label { |
| | | font-size: 28rpx; |
| | | color: #666; |
| | | margin-right: 10rpx; |
| | | } |
| | | |
| | | .total-duration-value { |
| | | font-size: 32rpx; |
| | | color: #1890FF; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .empty-container { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 40rpx 0; |
| | | } |
| | | |
| | | .empty-image { |
| | | width: 200rpx; |
| | | height: 200rpx; |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | .empty-text { |
| | | color: #999; |
| | | font-size: 30rpx; |
| | | } |
| | | |
| | | .empty-tip { |
| | | font-size: 28rpx; |
| | | color: #999; |
| | | } |
| | | |
| | | .dialog-content { |
| | | padding: 20rpx 0; |
| | | } |
| | | |
| | | .dialog-section { |
| | | margin-bottom: 24rpx; |
| | | } |
| | | |
| | | .dialog-section:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | .dialog-title { |
| | | font-size: 28rpx; |
| | | color: #333; |
| | | font-weight: 500; |
| | | margin-bottom: 8rpx; |
| | | } |
| | | |
| | | .dialog-desc { |
| | | font-size: 26rpx; |
| | | color: #666; |
| | | line-height: 1.6; |
| | | padding-left: 20rpx; |
| | | } |