From 5ae97394a44dc768d3fd50d2275d1cf079432777 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Wed, 13 Aug 2025 14:54:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=9F=E8=81=98=E7=94=B3=E8=AF=B7=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A20.8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/lease/lease.vue | 180 ++++++++++++++++++++++++++++++------------
 1 file changed, 131 insertions(+), 49 deletions(-)

diff --git a/pages/lease/lease.vue b/pages/lease/lease.vue
index 7c95983..947ea90 100644
--- a/pages/lease/lease.vue
+++ b/pages/lease/lease.vue
@@ -44,21 +44,28 @@
           </view>
 
           <!-- 地址 -->
-          <view class="form-item">
+          <view class="form-item address-form-item">
             <text class="field-label">地址</text>
             <view class="address-selector" @click="selectAddress">
               <text class="address-text">{{ formData.address || '选择收货地址' }}</text>
-              <text class="map-icon">📍</text>
+              <view class="map-icon-wrapper">
+                <text class="map-icon">📍</text>
+              </view>
             </view>
           </view>
 
           <!-- 当前定位 -->
-          <view v-if="currentLocation" class="location-info">
-            <view class="location-details">
-              <text class="location-title">当前定位:{{ currentLocation.company }}</text>
-              <text class="location-address">{{ currentLocation.address }}</text>
+          <view v-if="currentLocation" class="location-suggestion">
+            <view class="location-card">
+              <view class="location-content">
+                <view class="location-header">
+                  <text class="location-title">当前定位</text>
+                  <text class="location-company">{{ currentLocation.company }}</text>
+                </view>
+                <text class="location-address">{{ currentLocation.address }}</text>
+              </view>
+              <button class="use-location-btn" @click="useCurrentLocation">使用</button>
             </view>
-            <button class="use-location-btn" @click="useCurrentLocation">使用</button>
           </view>
 
           <!-- 详细位置 -->
@@ -321,9 +328,9 @@ export default {
 
     .field-input {
       border: 2rpx solid #d81313;
-      flex: 4;
+      flex: 3;
       height: 80rpx;
-      padding: 0 76rpx;
+      padding: 0 20rpx;
       font-size: 28rpx;
 
       &:focus {
@@ -334,74 +341,144 @@ export default {
   }
 }
 
+// 地址表单项特殊样式
+.address-form-item {
+  margin-bottom: 20rpx;
+}
+
 // 地址选择器
 .address-selector {
-  flex: 5;
-  width: 100%;
-  padding-left: 76rpx;
+  flex: 3;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   height: 80rpx;
-  border: 2rpx solid #d81313;
-  font-size: 28rpx;
+  padding: 0 20rpx;
 
-  .address-text {
-    font-size: 28rpx;
-    color: #666;
+  border-radius: 12rpx;
+
+  transition: all 0.3s ease;
+
+  &:active {
+    background: #f0f0f0;
+    border-color: #ff6b6b;
   }
 
-  .map-icon {
-    font-size: 32rpx;
+  .address-text {
+    flex: 1;
+    font-size: 28rpx;
+    color: #666;
+    margin-right: 20rpx;
+  }
+
+  .map-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40rpx;
+    height: 40rpx;
+    background: #ff6b6b;
+    border-radius: 50%;
+
+    .map-icon {
+      font-size: 24rpx;
+      color: white;
+    }
   }
 }
 
-// 位置信息
-.location-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: #f5f5f5;
-  border-radius: 12rpx;
-  padding: 20rpx;
+// 位置建议卡片
+.location-suggestion {
   margin-bottom: 40rpx;
 
-  .location-details {
-    flex: 1;
+  .location-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: white;
+    border: 2rpx solid #e8f4fd;
+    border-radius: 16rpx;
+    padding: 24rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+    position: relative;
 
-    .location-title {
-      display: block;
-      font-size: 26rpx;
-      color: #333;
-      margin-bottom: 10rpx;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 6rpx;
+      background: linear-gradient(to bottom, #ff6b6b, #ff9a9e);
+      border-radius: 6rpx 0 0 6rpx;
     }
 
-    .location-address {
+    .location-content {
+      flex: 1;
+      margin-right: 20rpx;
+
+      .location-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8rpx;
+
+        .location-title {
+          font-size: 24rpx;
+          color: #ff6b6b;
+          font-weight: 500;
+          margin-right: 12rpx;
+        }
+
+        .location-company {
+          font-size: 26rpx;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+
+      .location-address {
+        font-size: 24rpx;
+        color: #666;
+        line-height: 1.4;
+      }
+    }
+
+    .use-location-btn {
+      background: linear-gradient(135deg, #ff6b6b, #ff9a9e);
+      color: white;
+      border: none;
+      border-radius: 24rpx;
+      padding: 12rpx 24rpx;
       font-size: 24rpx;
-      color: #666;
-    }
-  }
+      font-weight: 500;
+      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
+      transition: all 0.3s ease;
 
-  .use-location-btn {
-    background: #ff9a9e;
-    color: #fff;
-    border: none;
-    border-radius: 20rpx;
-    padding: 10rpx 30rpx;
-    font-size: 24rpx;
+      &:active {
+        transform: translateY(2rpx);
+        box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.4);
+      }
+    }
   }
 }
 
 // 选择器
 .selector {
-  flex: 4;
+  flex: 3;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 80rpx;
-  border: 2rpx solid #e0e0e0;
+
   border-radius: 12rpx;
   padding: 0 20rpx;
-  background: #f8f9fa;
+
+  transition: all 0.3s ease;
+
+  &:active {
+    background: #f0f0f0;
+    border-color: #ff6b6b;
+  }
 
   .selector-text {
     font-size: 28rpx;
@@ -410,7 +487,12 @@ export default {
 
   .arrow-icon {
     font-size: 24rpx;
-    color: #989;
+    color: #999;
+    transition: transform 0.3s ease;
+  }
+
+  &:active .arrow-icon {
+    transform: scale(1.2);
   }
 }