style: 地图首页扁平化与轻动效

搜索框由图片贴片改为真实胶囊控件（含按压反馈）；底部卡片/重定位按钮减影为青调柔和投影；距离筛选改圆角chips选中态浅青底；充电中悬浮胶囊品牌化+按压反馈；站点卡片入场fade-up；清理注释死代码

charge-front/src/pages/map/map.vue

@@ -4,52 +4,20 @@
     <view class="dialog" v-if="styleData.dialog" :style="styleData.dialog">
       <view class="height-88 flex-align-center bg-fff">
         <view class="dialog_logo ml-24"></view>
-        <view class="dialog_search ml-24" @click.stop="toSearch"></view>
-      </view>
-      <!-- <view class="height-72 flex" style="background-color: #f9f9f9">
-        <view class="width-half flex-center" @click.stop="checkFilterDistance">
-          <view class="fs-26 color-000-6 mr-8">距离</view>
-          <view
-            class="width-20 height-20 br-round bg-000-08 lh-10 text-center transition"
-            :style="{
-              transform: filterDialog.distanceSelector ? 'rotate(180deg)' : '',
-            }"
-          >
-            <uni-icons
-              type="bottom"
-              size="8"
-              color="rgba(0,0,0,0.4)"
-            ></uni-icons>
-          </view>
-        </view>
-        <view class="width-half flex-center">
-          <view
-            class="width-32 height-32 br-round lh-20 text-center"
-            :style="{
-              border: filterDialog.discounts
-                ? '1px solid var(--color-primary)'
-                : '1px solid rgba(0, 0, 0, 0.4)',
-              backgroundColor: filterDialog.discounts
-                ? 'var(--color-primary)'
-                : '#fff',
-            }"
-          >
-            <uni-icons
-              type="checkmarkempty"
-              size="10"
-              color="#ffffff"
-            ></uni-icons>
-          </view>
-          <view
-            :class="[
-              'fs-26',
-              'ml-8',
-              filterDialog.discounts ? 'color-primary' : 'color-000-6',
-            ]"
-            >支持省钱充电</view
-          >
+        <view
+          class="dialog_search ml-24 flex-align-center pressable"
+          hover-class="pressed"
+          hover-stay-time="80"
+          @click.stop="toSearch"
+        >
+          <uni-icons
+            type="search"
+            size="16"
+            color="rgba(28, 43, 41, 0.35)"
+          ></uni-icons>
+          <view class="fs-26 ml-12 color-999">搜索充电站</view>
         </view>
-      </view> -->
+      </view>
       <view
         class="dialog_selector"
         :style="{
@@ -63,6 +31,7 @@
           <view
             :class="[
               'type',
+              'pressable',
               'flex-shrink',
               'flex-center',
               'mt-20',
@@ -73,6 +42,8 @@
             ]"
             v-for="(item, index) in filterDialog.distanceRange"
             :key="index"
+            hover-class="pressed"
+            hover-stay-time="80"
             @click.stop="changeFilterDistance(index)"
             style="width: 117rpx"
             >{{ item.value }}km</view
@@ -168,7 +139,9 @@
     >
       <view
         v-if="mapMode"
-        class="card_location height-64 width-64 bg-fff flex-center"
+        class="card_location height-64 width-64 bg-fff flex-center pressable"
+        hover-class="pressed"
+        hover-stay-time="80"
         @touchstart.stop="resetLocation"
       >
         <image
@@ -180,7 +153,11 @@
       <block v-if="station.length">
         <!-- 列表 -->
         <block v-if="!mapMode">
-          <view class="station" v-for="(item, index) in station" :key="index">
+          <view
+            class="station anim-fade-up"
+            v-for="(item, index) in station"
+            :key="index"
+          >
             <view v-if="index !== 0" class="card_line"></view>
             <charge-station
               :title="item.stationName"
@@ -203,7 +180,7 @@
         </block>
         <block v-else>
           <!-- 单个 -->
-          <view class="station">
+          <view class="station anim-fade-up">
             <charge-station
               :title="station[markersIndex].stationName"
               :address="station[markersIndex].address"
@@ -244,7 +221,9 @@
       </block>
     </view>
     <view
-      class="charging flex-align-center"
+      class="charging flex-align-center pressable"
+      hover-class="pressed"
+      hover-stay-time="80"
       v-if="charging"
       @click="toCharging"
     >
@@ -801,12 +780,12 @@ page {
   }
 
   &_search {
-    width: 352rpx;
-    height: 100%;
-    background-position: center;
-    background-size: 100% auto;
-    background-repeat: no-repeat;
-    background-image: url("/static/images/map-input.png");
+    flex-grow: 1;
+    margin-right: 24rpx;
+    height: 64rpx;
+    padding: 0 24rpx;
+    background-color: var(--color-sec);
+    border-radius: 32rpx;
   }
 
   &_event {
@@ -815,10 +794,10 @@ page {
     .swiper {
       height: 160rpx;
       width: 100%;
-      border-radius: 16rpx;
+      border-radius: 20rpx;
       overflow: hidden;
       .swiper-item {
-        border-radius: 16rpx;
+        border-radius: 20rpx;
         overflow: hidden;
       }
       view {
@@ -830,63 +809,26 @@ page {
   }
 
   &_selector {
-    background-color: #f9f9f9;
-    transition: all 0.3s;
+    background-color: #ffffff;
+    transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
     overflow: hidden;
     .type {
-      width: 160rpx;
+      width: 117rpx;
       height: 60rpx;
       background: var(--color-sec);
-      border-radius: 4rpx;
-      color: #666;
+      border-radius: 30rpx;
+      color: #5c6b69;
       font-size: 26rpx;
-      border: 1px solid var(--color-sec);
+      transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
+        color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
     }
 
     .type-active {
-      border: 1px solid var(--color-primary);
+      background: var(--color-primary-tint-strong);
       color: var(--color-primary);
+      font-weight: 500;
     }
   }
-
-  /* .slider {
-    position: relative;
-    height: 12rpx;
-    width: 100%;
-    border-radius: 8rpx;
-    background-color: var(--color-sec);
-    margin-top: 10rpx;
-
-    &_active {
-      position: absolute;
-      left: 0;
-      top: 0;
-      background-color: var(--color-primary);
-      border-radius: 8rpx;
-      height: 12rpx;
-      width: 0%;
-    }
-
-    &_block {
-      position: absolute;
-      width: 40rpx;
-      height: 40rpx;
-      border-radius: 50%;
-      top: -15rpx;
-      left: 0;
-      background: rgba(255, 255, 255, 1);
-      box-shadow: 0px 4rpx 6rpx rgba(52, 125, 255, 0.4);
-    }
-
-    &_wx {
-      position: absolute;
-      width: 100%;
-      left: 0px;
-      top: -5px;
-      margin: 0;
-      opacity: 0;
-    }
-  } */
 }
 
 .card {
@@ -895,13 +837,13 @@ page {
   left: 0px;
   z-index: 1000;
   transition: all 0.3s;
-  box-shadow: 0px 8rpx 20rpx rgba(0, 0, 0, 0.2);
+  box-shadow: 0px -8rpx 24rpx rgba(28, 43, 41, 0.1);
   background-color: #fff;
 
   &_location {
     position: absolute;
     border-radius: 16rpx;
-    box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 8rpx 24rpx 0px rgba(28, 43, 41, 0.12);
     right: 20rpx;
     top: -104rpx;
     z-index: 99;
@@ -909,7 +851,7 @@ page {
 
   &_line {
     height: 1rpx;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--divider);
     margin-left: 30rpx;
     margin-right: 30rpx;
   }
@@ -940,7 +882,8 @@ page {
   width: 186rpx;
   height: 88rpx;
   border-radius: 88rpx 0px 0px 88rpx;
-  background: #2d9e95;
+  background: var(--color-primary);
+  box-shadow: 0px 8rpx 20rpx rgba(45, 158, 149, 0.35);
   margin-bottom: constant(safe-area-inset-bottom);
   margin-bottom: env(safe-area-inset-bottom);
 }