style: 充电核心流程页扁平化与状态动效

站点卡片去描边/价格区浅青底/chips化并加按压反馈；充电桩列表状态徽章浅底化；订单页清理重复工具类与hover死代码、卡片按压+入场动效；状态选择弹层滑入动效；充电中呼吸动效、结束弹入、停止倒计时遮罩减重；金额卡去渐变改纯色

charge-front/src/components/charge-station/charge-station.vue

@@ -1,12 +1,11 @@
 <template>
   <view
-      class="charge-station"
+      class="charge-station pressable"
+      hover-class="pressed"
+      hover-stay-time="80"
       :style="{
-      border: border ? '1rpx solid rgba(0, 0, 0, 0.1)' : 'none',
       'border-radius': fromMap ? '20rpx 20rpx 0 0' : '20rpx',
     }"
-      @touchstart="touchstart"
-      @touchend="touchend"
   >
     <view class="flex-between">
       <view>
@@ -31,9 +30,9 @@
       </view>
       <view
           @click.top="nav"
-          class="nav flex-center flex-shrink"
-          @touchstart="touchstart"
-          @touchend.stop="touchend"
+          class="nav flex-center flex-shrink pressable"
+          hover-class="pressed"
+          hover-stay-time="80"
       >
         <image src="/static/images/icon-nav.png" mode="widthFix"/>
         <text>导航</text>
@@ -89,7 +88,9 @@
         </block>
       </view>
       <view
-          class="btn flex-shrink flex-column flex-center"
+          class="btn flex-shrink flex-column flex-center pressable"
+          hover-class="pressed"
+          hover-stay-time="80"
           @tap.stop="collect" >
 
         <uni-icons
@@ -133,7 +134,6 @@ export default {
     availableParkingNum: Number,
     parkingNum: Number,
     distance: String,
-    border: Boolean,
     fromMap: Boolean,
     activityList: Array
   },
@@ -151,7 +151,6 @@ export default {
   },
   data() {
     return {
-      touchtime: 0,
       collected: false,
       tagMap: [
         "",
@@ -238,15 +237,6 @@ export default {
       });
       return length;
     },
-    touchstart() {
-      this.touchtime = new Date().getTime();
-    },
-    touchend(e: any) {
-      const current = new Date().getTime();
-      // if (current - this.touchtime < 100) {
-      //   this[e.currentTarget.dataset.method]();
-      // }
-    },
   },
 };
 </script>
@@ -263,8 +253,8 @@ export default {
     padding: 0px 6rpx;
     height: 34rpx;
     background: var(--color-sec);
-    border-radius: 4rpx;
-    color: #999999;
+    border-radius: 12rpx;
+    color: #8c9997;
     font-size: 22rpx;
   }
 
@@ -283,8 +273,8 @@ export default {
   }
 
   .status {
-    background: var(--color-sec);
-    border-radius: 10rpx;
+    background: var(--color-primary-tint);
+    border-radius: 12rpx;
     padding: 16rpx 20rpx;
     position: relative;
   }
@@ -303,9 +293,8 @@ export default {
     height: 118rpx;
     width: 64rpx;
     margin-left: 10rpx;
-    background: var(--color-sec);
-    border-radius: 10rpx;
-    transition: all 0.3s;
+    background: var(--color-primary-tint);
+    border-radius: 12rpx;
   }
 }
 
@@ -314,9 +303,9 @@ export default {
   justify-content: space-between;
   align-items: center;
   color: #fff;
-  background-color: #2d9e95;
+  background-color: var(--color-primary);
   font-size: 14rpx;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
   padding: 0rpx 6rpx;
   text {
     font-size: 24rpx;

charge-front/src/pages-charge/machines/charge-machine/charge-machine.vue

@@ -1,6 +1,8 @@
 <template>
   <view
-    class="charge-point flex-align-center mt-20"
+    :class="['charge-point', 'flex-align-center', 'mt-20', 'pressable']"
+    hover-class="pressed"
+    hover-stay-time="80"
     v-for="(item, index) in list"
     :key="index"
     @click="toOrdering(index)"
@@ -113,7 +115,6 @@ export default {
 .charge-point {
   background-color: #fff;
   border-radius: 20rpx;
-  transition: all 0.3s;
   overflow: hidden;
   padding: 30rpx;
   &_icon {
@@ -121,43 +122,44 @@ export default {
     width: 56rpx;
     border-radius: 50%;
     &-255 {
-      background: #f43636;
+      background: var(--color-error);
     }
     &-0 {
-      background-color: #b1b1b1;
+      background-color: #b7c2c0;
     }
     &-1 {
-      background: #2d9e95;
+      background: var(--color-primary);
     }
     &-2,
     &-3,
     &-4 {
-      background: rgb(154, 168, 168);
+      background: #9daaa8;
     }
   }
   .tag {
     height: 38rpx;
-    padding: 0rpx 8rpx;
+    padding: 0rpx 10rpx;
     box-sizing: border-box;
-    border-radius: 8rpx;
+    border-radius: 12rpx;
+    font-size: 24rpx;
   }
   .tag-255 {
-    color: #f43636;
-    background: rgba(244, 54, 54, 0.1);
+    color: var(--color-error);
+    background: rgba(244, 54, 54, 0.08);
   }
   .tag-0 {
-    color: #abadb0;
-    background-color: rgb(255, 255, 255);
+    color: #8c9997;
+    background: rgba(28, 43, 41, 0.06);
   }
   .tag-1 {
-    color: #2d9e95;
-    background: rgb(255, 255, 255);
+    color: var(--color-primary);
+    background: var(--color-primary-tint);
   }
   .tag-2,
   .tag-3,
   .tag-4 {
-    color: rgba(171, 173, 176);
-    background: rgb(255, 255, 255);
+    color: #8c9997;
+    background: rgba(28, 43, 41, 0.06);
   }
 }
 </style>

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

@@ -151,24 +151,26 @@
         @close="closeDialog"
     ></PriceDesc>
     <view
-        class="dialog flex-align-end"
+        class="dialog flex-align-end anim-fade-in"
         v-if="dialogVisible && dialogType === 'status'"
     >
-      <view class="status-dialog">
+      <view class="status-dialog anim-slide-up">
         <view class="status-dialog_head flex-center">
           <view class="fw-500 color-000" style="font-size: 16px"
           >选择充电桩状态
           </view
           >
           <view class="close" @click="closeDialog">
-            <uni-icons type="closeempty" size="24" color="#2D284B"></uni-icons>
+            <uni-icons type="closeempty" size="24" color="#1c2b29"></uni-icons>
           </view>
         </view>
         <view class="status-dialog_body">
           <view class="status">
             <view
-                :class="['fs-32', 'flex-align-center']"
-                :style="{ color: status === index ? '#2d9e95' : '#2d284b' }"
+                :class="['fs-32', 'flex-align-center', 'pressable']"
+                hover-class="pressed"
+                hover-stay-time="80"
+                :style="{ color: status === index ? 'var(--color-primary)' : '#1c2b29' }"
                 v-for="(statusItem, index) in statusList"
                 :key="index"
                 @click="changeStatus(index)"
@@ -371,7 +373,7 @@ const showStationCoupon = () => {
 @use "../../styles/dialog.scss";
 
 page {
-  background-color: #f5f5f5;
+  background-color: var(--bg-page);
 }
 
 .banner {
@@ -408,7 +410,7 @@ page {
   }
 
   .foot {
-    border-top: 1px dashed rgba(0, 0, 0, 0.1);
+    border-top: 1rpx dashed var(--divider);
     height: 96rpx;
   }
 }
@@ -421,7 +423,7 @@ page {
 
   & > view {
     height: 90rpx;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1rpx solid var(--divider);
 
     &:first-child {
       border-top: none;
@@ -430,10 +432,10 @@ page {
 }
 
 .status-dialog {
-  background-color: transparent;
+  background-color: #fff;
   width: 100%;
   overflow: hidden;
-  border-radius: 20rpx 20rpx 0px 0px;
+  border-radius: 24rpx 24rpx 0px 0px;
 
   &_head {
     padding: 24rpx 0px;
@@ -458,7 +460,7 @@ page {
     .status {
       & > view {
         height: 92rpx;
-        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        border-top: 1rpx solid var(--divider);
 
         &:first-child {
           border-top: none;
@@ -474,9 +476,9 @@ page {
   justify-content: space-between;
   align-items: center;
   color: #fff;
-  background-color: #2d9e95;
+  background-color: var(--color-primary);
   font-size: 14rpx;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
   padding: 0rpx 6rpx;
 
   text {

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

@@ -238,23 +238,13 @@ onLoad((options: any) => {
 
 /* 金额卡片 */
 .amount-card {
-  background: linear-gradient(135deg, var(--color-primary) 0%, #26847d 100%);
-  transition: all 0.3s ease;
-  
-  &:hover {
-    transform: translateY(-4rpx);
-    box-shadow: 0 8rpx 24rpx rgba(45, 158, 149, 0.3);
-  }
+  background: var(--color-primary);
+  box-shadow: 0 8rpx 24rpx rgba(45, 158, 149, 0.25);
 }
 
 /* 信息卡片 */
 .info-card {
-  transition: all 0.3s ease;
-  
-  &:hover {
-    transform: translateY(-2rpx);
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  }
+  box-shadow: 0 2rpx 8rpx rgba(28, 43, 41, 0.04);
 }
 
 /* 充电详情网格 */
@@ -264,29 +254,15 @@ onLoad((options: any) => {
   gap: 16rpx;
 }
 
-.detail-item {
-  transition: all 0.3s ease;
-  
-  &:hover {
-    transform: translateY(-2rpx);
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-  }
-}
-
 /* 操作按钮 */
 .btn-theme {
-  background: linear-gradient(135deg, var(--color-primary) 0%, #26847d 100%);
-  transition: all 0.3s ease;
-  box-shadow: 0 4rpx 12rpx rgba(45, 158, 149, 0.3);
-  
-  &:hover {
-    transform: translateY(-2rpx);
-    box-shadow: 0 6rpx 16rpx rgba(45, 158, 149, 0.4);
-  }
-  
-  &:active {
-    transform: translateY(0);
-  }
+  background: var(--color-primary);
+  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: 0 4rpx 12rpx rgba(45, 158, 149, 0.25);
+}
+
+.btn-theme.button-press {
+  background: var(--color-primary-deep);
 }
 
 /* 加载状态 */
@@ -309,7 +285,7 @@ onLoad((options: any) => {
 
 /* 工具类 */
 .bg-f5f7fa {
-  background-color: #f5f7fa;
+  background-color: var(--bg-page);
 }
 
 .bg-fff {
@@ -475,11 +451,11 @@ onLoad((options: any) => {
 }
 
 .shadow-sm {
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2rpx 8rpx rgba(28, 43, 41, 0.04);
 }
 
 .shadow-md {
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4rpx 16rpx rgba(28, 43, 41, 0.06);
 }
 
 .color-333 {

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

@@ -30,14 +30,14 @@
           </block>
           <block v-else-if="step === 2">
             <image
-              class="icon"
+              class="icon anim-breathe"
               src="../static/charge-ordering-icon.png"
             />
             <view class="fs-26 mt-10">充电中...</view>
           </block>
           <block v-else-if="step === 3">
             <image
-              class="icon"
+              class="icon anim-pop"
               src="../static/charge-ordering-finish.png"
             />
             <view class="fs-26 mt-10">充电结束</view>
@@ -684,7 +684,7 @@ onShow(() => {
         top: 50%;
         transform: translate(-50%, -50%);
         background: linear-gradient(180deg, #ffffff 0%, #e7f3f1 100%);
-        box-shadow: 0px 18rpx 30rpx rgba(0, 0, 0, 0.1);
+        box-shadow: 0px 18rpx 30rpx rgba(28, 43, 41, 0.08);
         border-radius: 50%;
         .icon {
           width: 152rpx;
@@ -705,6 +705,23 @@ onShow(() => {
   }
 }
 
+/* 结束态单次弹入 */
+.anim-pop {
+  animation: pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes pop {
+  from {
+    transform: scale(0.92);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 // 停止充电倒计时遮罩样式
 .stop-countdown-mask {
   position: fixed;
@@ -712,7 +729,7 @@ onShow(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(12, 24, 22, 0.45);
   z-index: 9999;
   display: flex;
   align-items: center;
@@ -725,6 +742,7 @@ onShow(() => {
   border-radius: 24rpx;
   padding: 60rpx 40rpx;
   text-align: center;
+  animation: pop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
 .stop-countdown-title {

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

@@ -3,8 +3,10 @@
     <!-- 订单列表 -->
     <view class="order-list pl-30 pr-30 pt-20" v-if="infiniteScroller.list && infiniteScroller.list.length">
       <block v-for="(item, index) in infiniteScroller.list" :key="index">
-        <view 
-          class="order-card bg-fff br-16 mb-24 shadow-sm" 
+        <view
+          class="order-card anim-fade-up pressable"
+          hover-class="pressed"
+          hover-stay-time="80"
           @click="detail(index)"
           v-if="!item.hidden"
         >
@@ -280,7 +282,7 @@ onReachBottom(() => {
 
 <style lang="scss">
 .page-container {
-  background-color: #f5f7fa;
+  background-color: var(--bg-page);
   min-height: 100vh;
 }
 
@@ -290,16 +292,11 @@ onReachBottom(() => {
 
 .order-card {
   background-color: #ffffff;
-  border-radius: 16rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
+  border-radius: 20rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(28, 43, 41, 0.04);
   position: relative;
   overflow: hidden;
-  
-  &:hover {
-    transform: translateY(-2rpx);
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  }
 }
 
 .checkbox-container {
@@ -310,7 +307,7 @@ onReachBottom(() => {
 }
 
 .order-header {
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid var(--divider);
   padding-bottom: 20rpx;
 }
 
@@ -390,35 +387,11 @@ onReachBottom(() => {
 
 .foot {
   height: 112rpx;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #ffffff;
-}
-
-/* 工具类 */
-.shadow-sm {
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-}
-
-.bg-fff {
+  border-top: 1rpx solid var(--divider);
   background-color: #ffffff;
 }
 
-.br-16 {
-  border-radius: 16rpx;
-}
-
-.br-12 {
-  border-radius: 12rpx;
-}
-
-.br-8 {
-  border-radius: 8rpx;
-}
-
-.br-6 {
-  border-radius: 6rpx;
-}
-
+/* 工具类（全局未定义的补充；通用工具类已在 App.vue/styles 全局声明，勿重复） */
 .p-20 {
   padding: 20rpx;
 }
@@ -433,189 +406,25 @@ onReachBottom(() => {
   padding-bottom: 8rpx;
 }
 
-.mb-24 {
-  margin-bottom: 24rpx;
-}
-
-.mr-28 {
-  margin-right: 28rpx;
-}
-
-.mr-12 {
-  margin-right: 12rpx;
-}
-
-.mr-8 {
-  margin-right: 8rpx;
-}
-
-.ml-8 {
-  margin-left: 8rpx;
-}
-
-.ml-16 {
-  margin-left: 16rpx;
-}
-
-.ml-24 {
-  margin-left: 24rpx;
-}
-
-.mt-24 {
-  margin-top: 24rpx;
-}
-
-.mt-20 {
-  margin-top: 20rpx;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-align-center {
-  display: flex;
-  align-items: center;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.flex-inline {
-  display: inline-flex;
-}
-
 .justify-between {
   justify-content: space-between;
 }
 
-.bg-fff {
-  background-color: #ffffff;
-}
-
-.color-333 {
-  color: #333333;
-}
-
-.color-666 {
-  color: #666666;
-}
-
-.color-999 {
-  color: #999999;
-}
-
-.color-primary {
-  color: var(--color-primary);
-}
-
 .color-theme {
   color: var(--color-primary);
 }
 
-.color-fff {
-  color: #ffffff;
-}
-
-.bg-primary {
-  background-color: var(--color-primary);
-}
-
 .bg-theme {
   background-color: var(--color-primary);
 }
 
 .cancel-btn {
-  transition: all 0.3s ease;
   border: 2rpx solid var(--color-primary);
   background-color: transparent;
-  
-  &:hover {
-    background-color: rgba(45, 158, 149, 0.05);
-    transform: translateY(-2rpx);
-    box-shadow: 0 2rpx 8rpx rgba(45, 158, 149, 0.2);
-  }
-  
+  transition: background-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+
   &:active {
-    background-color: rgba(45, 158, 149, 0.1);
-    transform: translateY(0);
+    background-color: var(--color-primary-tint);
   }
 }
-
-.fs-20 {
-  font-size: 20rpx;
-}
-
-.fs-24 {
-  font-size: 24rpx;
-}
-
-.fs-28 {
-  font-size: 28rpx;
-}
-
-.fs-30 {
-  font-size: 30rpx;
-}
-
-.fs-32 {
-  font-size: 32rpx;
-}
-
-.fs-36 {
-  font-size: 36rpx;
-}
-
-.fw-500 {
-  font-weight: 500;
-}
-
-.fw-600 {
-  font-weight: 600;
-}
-
-.height-46 {
-  height: 46rpx;
-}
-
-.height-72 {
-  height: 72rpx;
-}
-
-.height-80 {
-  height: 80rpx;
-}
-
-.width-96 {
-  width: 96rpx;
-}
-
-.pl-30 {
-  padding-left: 30rpx;
-}
-
-.pr-30 {
-  padding-right: 30rpx;
-}
-
-.pt-20 {
-  padding-top: 20rpx;
-}
-
-.pt-28 {
-  padding-top: 28rpx;
-}
-
-.pb-28 {
-  padding-bottom: 28rpx;
-}
-
 </style>