From 50433e86b718fab0d94ea1410724b29b5f53fa0a Mon Sep 17 00:00:00 2001
From: zuoxiao <zuoxiao>
Date: 星期三, 09 四月 2025 15:11:26 +0800
Subject: [PATCH] 更新SVG图标样式，优化灌溉计划和取水口页面逻辑，添加状态处理和信息提示功能；调整界面样式，提升用户体验。
---
pages/waterIntake/waterIntake.wxss | 454 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 363 insertions(+), 91 deletions(-)
diff --git a/pages/waterIntake/waterIntake.wxss b/pages/waterIntake/waterIntake.wxss
index 9c65252..d538a5b 100644
--- a/pages/waterIntake/waterIntake.wxss
+++ b/pages/waterIntake/waterIntake.wxss
@@ -1,141 +1,126 @@
-/* pages/waterIntake/waterIntake.wxss */
-/* index.wxss */
.container {
- padding-left: 20rpx;
- padding-right: 20rpx;
- padding-top: 5rpx;
- padding-bottom: 5rpx;
+ padding: 0;
background-color: #fff;
width: 100%;
height: 100vh;
- overflow: hidden;
- /* 闃叉搴曢儴鍖哄煙婊氬姩 */
display: flex;
flex-direction: column;
+ overflow: hidden;
}
.tabs {
display: flex;
justify-content: space-around;
- position: relative;
width: 100%;
border-bottom: 1px solid #eee;
- /* Tabs 鍗犳弧鏁翠釜妯悜灞忓箷 */
}
.tab {
font-size: 16px;
padding: 10px;
- cursor: pointer;
- position: relative;
width: 50%;
- /* Tabs 骞冲垎鏁翠釜妯悜灞忓箷 */
text-align: center;
- /* 鏂囧瓧灞呬腑 */
-}
-
-list-container
-
-.list {
- margin-top: 20px;
-}
-
-.item {
- padding: 10px;
- border-bottom: 1px solid #eee;
-}
-
-
-.search-container {
- display: flex;
- align-items: center;
- padding: 10rpx;
- border-bottom: 1px solid #eee;
-}
-
-/* 鎼滅储妗� */
-.search-input {
- flex: 1;
- height: 80rpx;
- padding: 0 20rpx;
- border: 1px solid #ccc;
- border-radius: 20rpx;
- font-size: 30rpx;
-}
-
-/* 鎼滅储鎸夐挳 */
-.search-button {
- display: flex;
- margin-left: 10rpx;
- height: 60rpx;
-
- background-color: #1890FF;
- color: white;
- border: none;
- border-radius: 20rpx;
- font-size: 30rpx;
- text-align: center;
- align-items: center;
+ position: relative;
}
.list-container {
+ flex: 1;
+ overflow-y: auto;
+ z-index: 0;
display: flex;
flex-direction: column;
- justify-content: flex-start;
- /* 纭繚鍐呭灞呬笂 */
- height: 100%;
+ padding: 20rpx;
+ background-color: #f5f5f5;
+ box-sizing: border-box;
+ /* 闅愯棌婊氬姩鏉� */
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
}
-.all-waterIntake {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- /* 纭繚鍐呭灞呬笂 */
- height: 100%;
- width: 100%;
+.list-container::-webkit-scrollbar {
+ display: none;
+ width: 0;
+ height: 0;
+ color: transparent;
+ background: transparent;
+}
+
+/* 涓哄井淇″皬绋嬪簭娣诲姞鐗瑰畾鏍峰紡 */
+.list-container {
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ overflow: -moz-scrollbars-none;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 10px;
- /* 閫傚綋璋冩暣闂磋窛 */
+ padding: 30rpx;
+ margin: 0 20rpx 20rpx 10rpx;
+ background-color: #ffffff;
+ border-radius: 12rpx;
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ box-sizing: border-box;
+ width: calc(100% - 20rpx);
+}
+
+.item:active {
+ transform: scale(0.98);
+ box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.1);
}
.item-left {
display: flex;
align-items: center;
+ flex: 1;
+ padding-right: 20rpx;
}
-.item-right {
- display: flex;
- align-items: center;
+.item-img-left {
+ width: 48rpx;
+ height: 48rpx;
+ margin-right: 20rpx;
+}
+
+.water-intake-name {
+ font-size: 36rpx !important;
+ color: #333;
+ font-weight: 500;
}
.item-img {
- width: 40rpx;
- /* 鏍规嵁闇�瑕佽皟鏁村浘鏍囧ぇ灏� */
- height: 40rpx;
- /* 鏍规嵁闇�瑕佽皟鏁村浘鏍囧ぇ灏� */
- margin-left: 20rpx;
+ width: 32rpx;
+ height: 32rpx;
+ margin-left: 16rpx;
}
.item-button {
display: flex;
- height: 60rpx;
- padding: 0 60rpx;
- background-color: #1890FF;
+ height: 64rpx;
+ min-width: 120rpx;
+ padding: 0 32rpx;
+ background: linear-gradient(135deg, #1890FF, #096DD9);
color: white;
border: none;
- border-radius: 20rpx;
- font-size: 30rpx;
+ border-radius: 32rpx;
+ font-size: 28rpx;
+ font-weight: 500;
align-items: center;
justify-content: center;
+ box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);
+ transition: all 0.3s ease;
+ margin-left: auto;
}
-.item-left text{
- font-size: 40rpx;
+
+.item-button:active {
+ transform: scale(0.95);
+ box-shadow: 0 2rpx 6rpx rgba(24, 144, 255, 0.2);
}
+
.indicator {
width: 100%;
height: 3px;
@@ -143,8 +128,6 @@
position: absolute;
bottom: 0;
left: 0;
- transform: translateX(0);
- /* 鍒濆鍖栦綅缃� */
}
.noMore-View {
@@ -156,11 +139,300 @@
flex-direction: column;
}
-.noMore-img{
+.noMore-img {
width: 300rpx;
height: 300rpx;
}
-.noMore-text{
- color:#969494;
-}
\ No newline at end of file
+.noMore-text {
+ color: #969494;
+}
+
+.search-container {
+ display: flex;
+ align-items: center;
+ padding: 10rpx;
+ border-bottom: 1px solid #eee;
+}
+
+.search-input {
+ flex: 1;
+ height: 80rpx;
+ padding: 0 20rpx;
+ border: 1px solid #ccc;
+ border-radius: 20rpx;
+ font-size: 30rpx;
+}
+
+.search-button {
+ margin-left: 10rpx;
+ height: 60rpx;
+ background-color: #1890FF;
+ color: white;
+ border: none;
+ border-radius: 20rpx;
+ font-size: 30rpx;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.all-waterIntake {
+ width: 100%;
+ flex: 1;
+ overflow-y: auto;
+ z-index: 0;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 10rpx; /* 澧炲姞搴曢儴濉厖 */
+}
+
+.error-dialog{
+ --td-dialog-title-color:red;
+ --td-dialog-title-font-size:45rpx;
+}
+
+.search-results {
+ position: absolute;
+ top: 100rpx; /* 鏍规嵁鎼滅储妗嗙殑楂樺害璋冩暣 */
+ left: 30rpx;
+ right: 30rpx;
+ bottom: 0;
+ background-color: rgba(255, 255, 255, 0.90); /* 璁剧疆鐧借壊鑳屾櫙 */
+ z-index: 1;
+ overflow-y: auto;
+}
+
+.result-item {
+ padding: 20rpx;
+ border-bottom: 1px solid #eaeaea;
+}
+
+.item-balance-img {
+ width: 50rpx;
+ height: 40rpx;
+ }
+
+ .item-bottom {
+ display: flex;
+ margin-top: 10rpx;
+ align-items: center;
+ /* 鍨傜洿灞呬腑 */
+ }
+
+ .item-card {
+ margin-left: 10rpx;
+ }
+
+ .item-card text {
+ font-size: 35rpx;
+ color: #fff;
+ }
+
+ .item-balance-text {
+ color: #fff;
+ font-size: 50rpx;
+ margin-left: 5rpx;
+ }
+
+ .item-balance-text-red {
+ color: #FF6A6A;
+ font-size: 50rpx;
+ margin-left: 5rpx;
+ }
+
+ .item-button-gray {
+ margin-left: auto;
+ /* 灏嗘寜閽浐瀹氬湪鍙宠竟 */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* 浣挎寜閽唴閮ㄦ按骞冲拰鍨傜洿灞呬腑 */
+ background-color: #8B8989;
+ color: #FF6A6A;
+ padding-left: 40rpx;
+ padding-right: 40rpx;
+ padding-bottom: 10rpx;
+ padding-top: 10rpx;
+ border-radius: 30rpx;
+ font-size: 35rpx;
+ border: none;
+ }
+
+ .item-balance-text-yuan {
+ color: white;
+ margin-left: 10rpx;
+ margin-bottom: 10rpx;
+ font-size: 30rpx;
+ }
+
+ .item-balance-text-yuan-red {
+ color: #FF6A6A;
+ margin-left: 10rpx;
+ margin-bottom: 10rpx;
+ font-size: 30rpx;
+ }
+
+ .item-balance {
+ display: flex;
+ align-items: flex-end;
+ /* 搴曢儴瀵归綈 */
+ }
+
+ .dialog {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80%;
+ z-index: 999;
+ /* 淇濊瘉 Dialog 鍦ㄨ挋灞備箣涓� */
+ }
+
+ .dialog-content {
+ margin-top: 50rpx;
+ padding: 20px;
+ /* Optional: 璁剧疆鏈�澶ч珮搴︼紝浠ラ槻鍐呭杩囧 */
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ .dialog-title {
+ font-size: 38rpx;
+ margin-bottom: 20rpx;
+ text-align: center;
+ }
+
+ .dialog-title-text {
+ font-size: 38rpx;
+ margin-bottom: 20rpx;
+ text-align: center;
+ }
+
+ .dialog-title-img {
+ width: 50rpx;
+ height: 50rpx;
+ position: absolute;
+ left: 0; /* 闈犲乏瀵归綈 */
+ margin-left: 40rpx;
+ }
+
+ button {
+ display: block;
+ width: 100%;
+ margin: 10rpx 0;
+ padding: 10rpx;
+ border: none;
+ background-color: #007aff;
+ color: #fff;
+ border-radius: 15rpx;
+ text-align: center;
+ font-size: 30rpx;
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ /* 榛戣壊鍗婇�忔槑 */
+ z-index: 998;
+ /* 淇濊瘉钂欏眰鍦ㄦ渶涓婂眰 */
+ }
+
+ .close {
+ left: 50%;
+ width: 80rpx;
+ height: 80rpx;
+ z-index: 1000;
+ margin-top: -50rpx;
+ position: absolute;
+ transform: translate(-50%);
+ }
+
+ .row {
+ display: flex;
+ justify-content: space-around;
+ }
+
+ .chose-wrapper {
+ display: flex;
+ align-items: flex-end;
+ /* 搴曢儴瀵归綈 */
+ justify-content: center;
+ /* 姘村钩灞呬腑 */
+ }
+
+ .chose-number {
+ font-size: 40rpx;
+ }
+
+ .chose-label {
+ font-size: 30rpx;
+ margin-left: 5rpx;
+ margin-bottom: 5rpx;
+ }
+
+ .choseitem text {
+ color: #1890FF;
+ }
+
+
+
+
+ .choseitem {
+ background-color: rgba(80, 78, 78, 0.082);
+ border-radius: 5px;
+ width: 100%;
+ height: 5vh;
+ margin-left: 20rpx;
+ margin-top: 10rpx;
+ margin-right: 20rpx;
+ margin-bottom: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .choseitemactive {
+ background-color: #1890FF;
+ border-radius: 5px;
+ width: 100%;
+ height: 5vh;
+ margin-left: 20rpx;
+ margin-top: 10rpx;
+ margin-right: 20rpx;
+ margin-bottom: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .box {
+ padding: 32rpx;
+ display: flex;
+ justify-content: space-between;
+ background-color: var(--td-bg-color-container, #fff);
+ }
+
+ .open-time {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ margin-bottom: 20rpx;
+ font-size: 30rpx;
+ }
+
+ .item-gray {
+ background-color: #D3D3D3;
+ margin-top: 20rpx;
+ margin-left: 20rpx;
+ margin-right: 20rpx;
+ padding: 30rpx;
+ border-radius: 30rpx;
+ }
+
\ No newline at end of file
--
Gitblit v1.8.0