From aec1b6ec73897b5e5f3a85f2985447726a399ed0 Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期六, 19 四月 2025 15:56:48 +0800
Subject: [PATCH] 更新灌溉计划页面，添加灌溉计划列表刷新标记，优化项目选择器和时间选择器的逻辑；更新样式以提升用户体验，确保在切换标签时只加载必要的数据。
---
pages/createIrrigation/createIrrigation.wxss | 274 +++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 256 insertions(+), 18 deletions(-)
diff --git a/pages/createIrrigation/createIrrigation.wxss b/pages/createIrrigation/createIrrigation.wxss
index 93c27a6..3ea92a9 100644
--- a/pages/createIrrigation/createIrrigation.wxss
+++ b/pages/createIrrigation/createIrrigation.wxss
@@ -8,24 +8,68 @@
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 {
@@ -58,6 +102,12 @@
padding-right: 20rpx;
}
+.picker-text {
+ flex: 1;
+ text-align: right;
+ padding-right: 20rpx;
+}
+
.placeholder {
color: #999;
}
@@ -80,11 +130,28 @@
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;
}
/* 椤圭洰鍒楄〃鏍峰紡 */
@@ -145,15 +212,11 @@
/* 杞亴缁勫垪琛ㄦ牱寮� */
.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 {
@@ -162,6 +225,25 @@
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 {
@@ -172,16 +254,61 @@
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 {
@@ -218,20 +345,131 @@
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;
}
\ No newline at end of file
--
Gitblit v1.8.0