From 50433e86b718fab0d94ea1410724b29b5f53fa0a Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期三, 09 四月 2025 15:11:26 +0800
Subject: [PATCH] 更新SVG图标样式，优化灌溉计划和取水口页面逻辑，添加状态处理和信息提示功能；调整界面样式，提升用户体验。
---
pages/irrigationDetail/irrigationDetail.wxss | 256 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 182 insertions(+), 74 deletions(-)
diff --git a/pages/irrigationDetail/irrigationDetail.wxss b/pages/irrigationDetail/irrigationDetail.wxss
index faa1876..55c152d 100644
--- a/pages/irrigationDetail/irrigationDetail.wxss
+++ b/pages/irrigationDetail/irrigationDetail.wxss
@@ -2,48 +2,86 @@
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;
}
@@ -55,7 +93,7 @@
}
.scroll-content {
- padding: 0 30rpx 30rpx 30rpx;
+ padding: 20rpx;
}
.project-item {
@@ -120,115 +158,185 @@
/* 杞亴缁勫垪琛ㄦ牱寮� */
.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;
}
\ No newline at end of file
--
Gitblit v1.8.0