From ad9c163fefcfdd15463926f7713c4af81c01cd87 Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期四, 27 三月 2025 13:50:58 +0800
Subject: [PATCH] 更新创建灌溉计划页面，添加API通信模块，优化项目选择器和时间选择功能；增强用户体验，修复轮灌组显示逻辑，调整样式和配置文件。
---
pages/irrigation/irrigation.wxss | 507 ++++++++++++++++++++++++--------------------------------
1 files changed, 219 insertions(+), 288 deletions(-)
diff --git a/pages/irrigation/irrigation.wxss b/pages/irrigation/irrigation.wxss
index bf95b18..690a85d 100644
--- a/pages/irrigation/irrigation.wxss
+++ b/pages/irrigation/irrigation.wxss
@@ -3,44 +3,34 @@
flex-direction: column;
height: 100vh;
background-color: #f5f5f5;
- padding: 20rpx;
- box-sizing: border-box;
+ overflow: hidden;
}
-/* 椤堕儴鏍囩椤垫牱寮� */
+/* 鏍囩椤垫牱寮� */
.tabs {
display: flex;
background-color: #fff;
- border-radius: 12rpx;
- margin-bottom: 20rpx;
- overflow: hidden;
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+ padding: 20rpx 0;
+ width: 100%;
+ flex-shrink: 0; /* 闃叉琚帇缂� */
+ box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
+ border-bottom: 1rpx solid #eaeaea;
position: relative;
+ z-index: 10;
}
.tab {
flex: 1;
text-align: center;
- padding: 30rpx 0;
font-size: 28rpx;
color: #666;
position: relative;
- transition: all 0.2s ease;
-}
-
-.tab-hover {
- opacity: 0.8;
- background-color: rgba(0, 0, 0, 0.03);
-}
-
-.tab:active {
- opacity: 0.8;
- background-color: rgba(0, 0, 0, 0.03);
+ padding: 20rpx 0;
}
.tab.active {
- color: rgba(45, 139, 247, 1);
- font-weight: bold;
+ color: #0052d9;
+ font-weight: 500;
}
.tab.active::after {
@@ -49,243 +39,234 @@
bottom: 0;
left: 50%;
transform: translateX(-50%);
- width: 50vw;
- height: 6rpx;
- background-color: rgba(45, 139, 247, 1);
- border-radius: 3rpx;
+ width: 40rpx;
+ height: 4rpx;
+ background-color: #0052d9;
+ border-radius: 2rpx;
}
-/* 鍒锋柊鎸夐挳鍜屽垎闅旂嚎 */
-.refresh-header {
- display: flex;
- justify-content: flex-end;
- padding: 10rpx 20rpx;
-}
-
-.refresh-button {
- font-size: 28rpx;
- color: #fff;
- background-color: rgba(45, 139, 247, 1);
- border: none;
- border-radius: 5px;
- padding: 10rpx 20rpx;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.refresh-button:active {
- background-color: #1a6fc7;
-}
-
-.divider {
- height: 1rpx;
- background-color: #e0e0e0;
- margin: 10rpx 0;
-}
-
-/* 涓嬫媺鍒锋柊鍔ㄧ敾 */
-.refresh-view {
- text-align: center;
- padding: 30rpx;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.dot {
- width: 20rpx;
- height: 20rpx;
- background-color: rgba(45, 139, 247, 1);
- border-radius: 50%;
- margin: 0 5px;
- animation: blink 1.4s infinite both;
-}
-
-.dot:nth-child(2) {
- animation-delay: 0.2s;
-}
-
-.dot:nth-child(3) {
- animation-delay: 0.4s;
-}
-
-@keyframes blink {
- 0%, 80%, 100% {
- opacity: 0;
- }
- 40% {
- opacity: 1;
- }
-}
-
-/* scroll-view鏍峰紡 */
+/* 鍒楄〃瀹瑰櫒鏍峰紡 */
.scroll-view {
flex: 1;
- overflow-y: auto;
- margin-bottom: 20rpx;
- height: calc(100vh - 180rpx); /* 鍑忓幓椤堕儴鏍囩椤靛拰搴曢儴鎸夐挳鐨勯珮搴� */
+ overflow: hidden;
+ padding-bottom: 140rpx; /* 澧炲姞搴曢儴鍐呰竟璺濓紝涓烘寜閽暀鍑烘洿澶氱┖闂� */
+ background-color: #f5f5f5; /* 纭繚鑳屾櫙鑹蹭笌tabs涓嶅悓 */
+ margin-top: 10rpx; /* 涓庨《閮╰ab淇濇寔涓�鐐硅窛绂� */
}
.scroll-bg {
- padding: 10rpx 0;
- height: 100%;
- display: flex;
- flex-direction: column;
-}
-
-/* 涓棿鍒楄〃鏍峰紡 */
-.irrigation-list {
- flex: 1;
- background-color: transparent;
- margin-bottom: 20rpx;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- padding: 0;
-}
-
-.list-title {
- font-size: 28rpx;
- font-weight: bold;
- color: #333;
padding: 20rpx;
- background-color: #f8f8f8;
- border-bottom: 1rpx solid #eee;
+ padding-bottom: 40rpx; /* 娣诲姞搴曢儴鍐呰竟璺濓紝闃叉鏈�鍚庝竴椤硅閬尅 */
}
+/* 鍒楄〃椤规牱寮� */
.list-item {
- padding: 30rpx;
- padding-bottom: 90rpx;
- position: relative;
background-color: #fff;
- border-radius: 12rpx;
- margin-bottom: 16rpx;
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+ border-radius: 16rpx;
+ margin-bottom: 20rpx;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
-.item-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10rpx;
- margin-top: 10rpx;
-}
-
-.item-title {
- font-size: 28rpx;
- font-weight: bold;
- color: #333;
-}
-
-.item-status {
- font-size: 24rpx;
- color: #999;
- padding: 4rpx 12rpx;
+/* 鐘舵�佹爣绛炬牱寮� */
+.status-tag {
+ position: absolute;
+ top: 20rpx;
+ right: 20rpx;
+ padding: 4rpx 16rpx;
border-radius: 20rpx;
-
- display: flex;
- align-items: center;
-}
-
-.status-icon {
- width: 70rpx;
- height: 70rpx;
-
-}
-
-.status-active {
+ font-size: 24rpx;
color: #fff;
- background-color: rgba(45, 139, 247, 1);
}
-.status-draft {
- color: #fff;
+.status-tag.draft {
+ background-color: #ff9d00;
+}
+
+.status-tag.published {
+ background-color: #0052d9;
+}
+
+.status-tag.executing {
+ background-color: #00a870;
+}
+
+.status-tag.completed {
background-color: #999;
}
-.status-published {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #00AD45;
- background-color: rgba(0, 173, 69, 0.1);
+/* 鍐呭鍖哄煙鏍峰紡 */
+.item-content {
+ padding: 30rpx;
}
-.status-published-icon {
- width: 34rpx;
- height: 34rpx;
- margin-right: 6rpx;
+/* 鏍囬鍖哄煙鏍峰紡 */
+.title-section {
+ margin-bottom: 30rpx;
}
-.item-info {
- font-size: 24rpx;
- color: #666;
- margin-right: 160rpx;
-}
-
-.info-row {
- display: flex;
- margin-bottom: 8rpx;
- align-items: flex-end; /* 娣诲姞搴曢儴瀵归綈 */
-}
-
-/* 缂栧彿琛屾牱寮� - 浣滀负鏍囬绐佸嚭鏄剧ず */
-.title-row {
- margin-bottom: 10rpx;
-}
-
-.title-row .info-label,
-.title-row .info-value {
- font-size: 26rpx;
- font-weight: bold;
+.plan-title {
+ font-size: 32rpx;
+ font-weight: 500;
color: #333;
+ margin-bottom: 8rpx;
+}
+
+.project-name {
+ font-size: 26rpx;
+ color: #666;
+}
+
+/* 淇℃伅鍖哄煙鏍峰紡 */
+.info-section {
+ margin-bottom: 30rpx;
+}
+
+/* 淇℃伅缃戞牸 */
+.info-grid {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 100%;
+ margin-top: 12rpx;
+}
+
+.info-item {
+ display: flex;
+ align-items: flex-start;
+ /* 妯悜甯冨眬鏃跺崰鎹竴鍗婂搴� */
+ width: 48%;
+}
+
+/* 绾靛悜甯冨眬鐨勪俊鎭綉鏍� */
+.vertical-layout {
+ flex-direction: column;
+ gap: 16rpx;
+}
+
+.vertical-layout .info-item {
+ width: 100%;
+ margin-bottom: 16rpx;
+}
+
+/* 鍘嗗彶鍒楄〃鐗瑰畾鏍峰紡 */
+.history-grid {
+ flex-direction: column;
+ gap: 20rpx;
+}
+
+.info-icon {
+ width: 40rpx;
+ height: 40rpx;
+ margin-right: 16rpx;
+}
+
+.info-icon.duration-icon {
+ width: 35rpx;
+ height: 35rpx;
+ margin-right: 16rpx;
+}
+
+.info-icon image {
+ width: 100%;
+ height: 100%;
+}
+
+.info-content {
+ flex: 1;
}
.info-label {
+ font-size: 24rpx;
color: #999;
- width: 150rpx;
- margin-right: 10rpx; /* 娣诲姞鍙充晶闂磋窛 */
+ margin-bottom: 4rpx;
}
-/* 涓哄凡鐏屾簤鏃堕棿鍜岃疆缁勬坊鍔犵壒娈婃牱寮� */
-.info-row.irrigated-row {
- margin-top: 12rpx;
- margin-bottom: 12rpx;
- align-items: center !important; /* 寮哄埗鍨傜洿灞呬腑瀵归綈 */
- display: flex;
- justify-content: flex-start; /* 姘村钩鏂瑰悜璧风偣瀵归綈 */
- height: 50rpx; /* 鍥哄畾琛岄珮 */
+.info-value {
+ font-size: 28rpx;
+ color: #333;
}
-.info-row.irrigated-row .info-label {
+/* 鎵ц涓姸鎬侀澶栦俊鎭牱寮� */
+.executing-info {
+ margin-top: 20rpx;
+ padding-top: 20rpx;
+ border-top: 1rpx solid #f5f5f5;
+}
+
+/* 鎿嶄綔鎸夐挳鍖哄煙鏍峰紡 */
+.action-section {
display: flex;
+ justify-content: flex-end;
+ gap: 20rpx;
+ padding-top: 20rpx;
+ border-top: 1rpx solid #f5f5f5;
+ width: 100%;
+ position: relative;
+ z-index: 1;
+}
+
+.action-buttons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 20rpx;
+ width: 100%;
+}
+
+.action-button {
+ display: inline-flex;
align-items: center;
- height: 100%; /* 浣跨敤鐧惧垎姣旈珮搴� */
+ justify-content: center;
+ gap: 8rpx;
+ padding: 12rpx 24rpx;
+ border-radius: 8rpx;
+ font-size: 28rpx;
+ line-height: 1;
+ min-width: 160rpx;
+ height: 60rpx;
+ margin: 0;
+ background-color: #1890FF;
+ color: #fff;
+ border: none;
+ position: relative;
+ z-index: 2;
}
-.info-value-time {
- font-size: 30rpx;
- font-weight: bold;
- color: rgb(42, 130, 228);
- display: flex;
- align-items: center;
- height: 100%; /* 浣跨敤涓巌nfo-label鐩稿悓鐨勯珮搴� */
+.action-button::after {
+ display: none;
}
-/* 绌哄垪琛ㄥ鍣� */
+.action-button image {
+ width: 32rpx;
+ height: 32rpx;
+ display: block;
+}
+
+.action-button text {
+ color: #fff;
+ display: block;
+}
+
+.publish-button {
+ background-color: #1890FF !important;
+}
+
+.stop-button {
+ background-color: #ff4d4f !important;
+}
+
+.execute-button {
+ background-color: #1890FF !important;
+}
+
+/* 绌虹姸鎬佹牱寮� */
.empty-list {
- flex: 1;
display: flex;
flex-direction: column;
- justify-content: center;
align-items: center;
- background-color: #fff;
- border-radius: 12rpx;
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
- width: 100%;
- height: calc(100vh - 250rpx); /* 鍑忓幓椤堕儴鏍囩椤点�佸簳閮ㄦ寜閽拰鍐呰竟璺濈殑楂樺害 */
- min-height: 500rpx;
+ justify-content: center;
+ padding: 100rpx 0;
}
.empty-icon {
@@ -301,96 +282,46 @@
/* 搴曢儴鎸夐挳鏍峰紡 */
.bottom-button {
- padding: 20rpx 0;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20rpx;
+ background-color: #fff;
+ box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
+ z-index: 100;
}
.add-button {
- background-color: rgba(45, 139, 247, 1);
- color: #fff;
- font-size: 32rpx;
- border-radius: 12rpx;
- width: 100%;
- transition: all 0.2s ease;
-}
-
-.add-button-hover {
- background-color: rgba(35, 110, 200, 1);
- transform: scale(0.98);
-}
-
-.add-button:active {
- background-color: rgba(35, 110, 200, 1);
- transform: scale(0.98);
-}
-
-/* 鍒楄〃椤规搷浣滄寜閽� */
-.item-actions {
display: flex;
- justify-content: flex-end;
align-items: center;
- position: absolute;
- bottom: 20rpx;
- right: 30rpx;
- z-index: 2;
+ justify-content: center;
+ background-color: #1890FF;
+ color: #fff;
+ border-radius: 8rpx;
+ font-size: 30rpx;
+ padding: 5rpx 0;
}
-.action-button {
- font-size: 24rpx;
- padding: 6rpx 20rpx;
- margin-left: 16rpx;
- border-radius: 30rpx;
- background-color: #fff;
- line-height: 1.5;
- min-height: auto;
- box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
- transition: all 0.2s ease;
+.add-button image {
+ width: 36rpx;
+ height: 36rpx;
+ margin-right: 8rpx;
}
-.action-button-hover {
- transform: scale(0.95);
- box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
-}
-
-.action-button:active {
- transform: scale(0.95);
- box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
-}
-
-.publish-button {
- color: rgba(45, 139, 247, 1);
- border: 1rpx solid rgba(45, 139, 247, 1);
-}
-
+/* 鎸夐挳鐐瑰嚮鏁堟灉 */
.publish-button-hover {
- background-color: rgba(45, 139, 247, 0.1);
-}
-
-.publish-button:active {
- background-color: rgba(45, 139, 247, 0.1);
-}
-
-.stop-button {
- color: #f56c6c;
- border: 1rpx solid #f56c6c;
+ opacity: 0.8 !important;
}
.stop-button-hover {
- background-color: rgba(245, 108, 108, 0.1);
-}
-
-.stop-button:active {
- background-color: rgba(245, 108, 108, 0.1);
-}
-
-.execute-button {
- color: rgba(45, 139, 247, 1);
- border: 1rpx solid rgba(45, 139, 247, 1);
+ opacity: 0.8 !important;
}
.execute-button-hover {
- background-color: rgba(45, 139, 247, 0.1);
+ opacity: 0.8 !important;
}
-.execute-button:active {
- background-color: rgba(45, 139, 247, 0.1);
+.add-button-hover {
+ opacity: 0.8;
}
\ No newline at end of file
--
Gitblit v1.8.0