找车位页面优化

pages/parkingLists/parkingLists.scss

@@ -326,7 +326,7 @@
 .address-box {
   width: calc(100% - 60rpx);
 	height: 70vh;
-  padding: 20rpx 0;
+  padding: 15rpx 0;
   position: absolute;
   left: 30rpx;
   bottom: 0;
@@ -334,8 +334,8 @@
   background-color: #f9f9f9;
 	transition: height .5s linear;
   &-down-icon {
-    width: 52rpx;
-    height: 50rpx;
+    width: 32rpx;
+    height: 28rpx;
     margin: 0 auto;
     background: url('./../../static/img/down-icon.svg') no-repeat center center;
     background-size: 100% 100%;
@@ -349,7 +349,7 @@
     overflow: hidden;
   }
   &-list {
-    padding: 30rpx;
+    padding: 12rpx 30rpx;
     &-item {
       padding: 30rpx 40rpx;
       background-color: #fff;
@@ -370,6 +370,7 @@
           font-size: 26rpx;
           color: #999;
           margin-bottom: 26rpx;
+          margin-left: 30rpx;
         }
         &-surplus {
           display: flex;
@@ -433,8 +434,8 @@
   }
 }
 .address-down {
-	height: 70vh;
+	height: 60vh;
 }
 .address-up {
-	height: 25vh;
+	height: 20vh;
 }

pages/parkingLists/parkingLists.vue

@@ -44,8 +44,10 @@
         <view class="address-box-list">
           <view class="address-box-list-item" v-for="(item, index) in nearParkingList" :key="index" @click="positionAddress(item)">
             <view class="abli-header">
-              <view class="abli-header-title">{{ item.roadName }}</view>
-              <view class="abli-header-subtitle">{{ item.areaName }}</view>
+              <view class="abli-header-title"
+                >{{ item.roadName }} <text class="abli-header-subtitle">{{ item.areaName }}</text></view
+              >
+              <!-- <view class="abli-header-subtitle">{{ item.areaName }}</view> -->
               <view class="abli-header-surplus">
                 <view class="abli-header-surplus-left"
                   >余位<text>{{ item.spaceIdle }}</text></view
@@ -58,7 +60,7 @@
                 <view class="abli-bottom-left-navigation" @click="navigation(item.latitude, item.longitude, item.areaName)">导航</view>
                 <view class="abli-bottom-left-distance">{{ item.distance | kmUnit }}</view>
               </view>
-              <view class="abli-bottom-right" @click="lookParkingRule(item)">包月规则</view>
+              <view class="abli-bottom-right" @click="lookParkingRule(item)">收费规则</view>
             </view>
           </view>
         </view>
@@ -130,7 +132,7 @@ export default {
       // 选中位置经纬度
       currentPositionHover: {},
       nearParkingObj: {
-        height: '70vh',
+        height: '60vh',
         type: 'down'
       }
     };
@@ -402,11 +404,11 @@ export default {
       }
     },
     pullDown() {
-      if (this.nearParkingObj.height === '25vh') {
-        this.nearParkingObj.height = '70vh';
+      if (this.nearParkingObj.height === '20vh') {
+        this.nearParkingObj.height = '60vh';
         this.nearParkingObj.type = 'down';
       } else {
-        this.nearParkingObj.height = '25vh';
+        this.nearParkingObj.height = '20vh';
         this.nearParkingObj.type = 'up';
       }
     }

static/img/down-icon.svg

@@ -1,14 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="52px" height="50px" viewBox="0 0 52 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>编组 9</title>
+<svg width="54px" height="54px" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 8</title>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页001备份" transform="translate(-349.000000, -622.000000)">
-            <g id="编组-9" transform="translate(350.000000, 622.000000)">
-                <g id="编组-8" transform="translate(1.762619, 4.583261)" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
-                    <polyline id="路径" stroke="#BEBEBE" points="46.4747617 20.9167389 23.2373808 40.8334778 0 20.9167389"></polyline>
-                    <polyline id="路径备份" stroke="#DEDEDE" points="46.4747617 6.19136618e-14 23.2373808 19.9167389 0 5.97024596e-14"></polyline>
-                </g>
-                <rect id="矩形" x="0" y="0" width="50" height="50"></rect>
+        <g id="首页001备份" transform="translate(-348.000000, -818.000000)">
+            <g id="编组-3" transform="translate(348.000000, 818.000000)">
+                <polyline id="路径" stroke="#BEBEBE" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" points="51.1311263 16.6586164 27 37.3413836 2.86887373 16.6586164"></polyline>
+                <rect id="矩形" x="0" y="0" width="54" height="54"></rect>
             </g>
         </g>
     </g>