AI优化首页样式

src/components/station/index.vue

@@ -2,42 +2,34 @@
   <view class="station_item"
         @click="handleNavStation(item)">
     <view class="station_item-title">
-      <text class="font16 ">{{ item.stationName }}</text>
+      <text>{{ item.stationName }}</text>
     </view>
 
     <view class="station_item-status">
-<!--      <text class="station_item-status-text">{{ item.stationStatus == 'Normal' ? '营业中' : '暂停营业' }}</text>-->
       <text class="station_item-status-text">{{ fmtDictName('WashStation.status', item.stationStatus) }}</text>
     </view>
 
     <view class="station_item-content">
       <view class="station_item-content-left">
         <view class="station_item-content-left-label">
-          <view class="font12 station_item-content-left-label-left">
-            <text class="station_item-content-left-label-left_idle">{{item.businessHours}} | 空闲:{{ item.idleParkingNum }}</text>
-<!--            <text class="station_item-content-left-label-left_count">{{ item.idleParkingNum }}/{{ item.parkingNum }}</text>-->
+          <view class="station_item-content-left-label-left">
+            <text class="station_item-content-left-label-left_idle">空闲: {{ item.idleParkingNum }}</text>
+            <text class="station_item-content-left-label-left_count">{{ item.idleParkingNum }}/{{ item.parkingNum }}</text>
           </view>
-          <!--              <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>-->
-          <!--              <view class="station_item-content-left-label_func">{{ ['清洁', '泡沫', '吸尘', '消毒', '充电']?.join(" | ") }}</view>-->
         </view>
         <view class="station_item-content-left-position">
-          <uv-icon name="empty-address" size="18" color="#000"></uv-icon>
+          <uv-icon name="empty-address" size="18" color="#999999"></uv-icon>
           <text>{{ item.address }}</text>
         </view>
       </view>
       <view class="station_item-content-right">
-        <!--        <image
-                    style="width: 20px; height: 20px;color: #eeeeee;"
-                    src="/static/nav.png"
-                />-->
-<!--        <uv-icon name="map" color="#C6171E"></uv-icon>-->
-        <text class="font12"  @click.stop="handleNavMap(item)">{{ item.distance }}km</text>
-        <!--            <uv-tags text="1222km" type="warning" plain size="mini"></uv-tags>-->
+        <text @click.stop="handleNavMap(item)">{{ item.distance }}km</text>
       </view>
     </view>
 
     <view class="station_item-distance">
-      <uv-text  color="#C6171E" :text="item.parkingFee" size="11"></uv-text>
+      <text>营业时间: {{ item.businessHours }}</text>
+      <uv-text class="parking-fee" color="#C6171E" :text="item.parkingFee" size="13"></uv-text>
     </view>
   </view>
 </template>
@@ -95,106 +87,153 @@ defineExpose({
 .station_item {
   display: flex;
   flex-direction: column;
-  border-radius: 10rpx;
+  border-radius: 16rpx;
   margin-top: 20rpx;
-  padding: 15rpx;
-  background: #fafafa;
+  padding: 24rpx;
+  background: $uni-bg-color-card;
   position: relative;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  // 卡片悬停效果
+  &:hover {
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
+    transform: translateY(-2rpx);
+  }
+
+  // 卡片点击效果
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.15);
+  }
 
   &-title {
-    display: inline-flex;
-    padding-left: 5px;
-    font-weight: 600;
+    display: flex;
+    align-items: center;
+    font-weight: $uni-font-weight-semibold;
+    font-size: $uni-font-size-xl;
+    color: $uni-text-color;
+    margin-bottom: 12rpx;
   }
 
   &-status {
     position: absolute;
-    right: 6rpx;
-    top: 0;
+    right: 24rpx;
+    top: 24rpx;
 
     &-text {
       background: $uni-color-primary;
-      padding: 6rpx;
+      padding: 6rpx 16rpx;
       color: white;
-      font-size: 12px;
-      border-radius: 20rpx 6rpx;
+      font-size: $uni-font-size-xs;
+      border-radius: 16rpx;
+      box-shadow: 0 2rpx 8rpx rgba(198, 23, 30, 0.2);
     }
   }
 
   &-content {
     display: flex;
     justify-content: space-between;
+    align-items: flex-start;
     width: 100%;
+    margin-bottom: 16rpx;
 
     &-left {
       flex: 1;
       display: flex;
       flex-direction: column;
-      padding: 5rpx;
 
       &-label {
-        padding: 4rpx 8rpx;
-        display: inline-flex;
-        margin-top: 8rpx;
-        //justify-content: space-between;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12rpx;
+        margin-bottom: 12rpx;
 
         &-left {
-          //border: 1px solid $uni-color-primary;
-          border-radius: 4rpx;
+          display: flex;
+          gap: 12rpx;
 
           &_idle {
             background: $uni-color-primary;
-            padding: 6rpx;
+            padding: 8rpx 16rpx;
             color: white;
-            border-radius: 4rpx;
+            font-size: $uni-font-size-xs;
+            border-radius: 16rpx;
+            font-weight: $uni-font-weight-medium;
           }
 
           &_count {
-            //border-radius: 4rpx;
-            margin-left: 10px;
+            background: $uni-color-highlight;
+            padding: 8rpx 16rpx;
             color: $uni-color-primary;
-            font-size: 13px;
+            font-size: $uni-font-size-xs;
+            border-radius: 16rpx;
+            border: 1px solid $uni-color-primary;
           }
-
-          &_tag {
-            width: 30rpx;
-          }
-
         }
 
-
-        &_func {
-          padding-left: 50rpx;
-          font-size: 24rpx;
-          color: #aaa;
-        }
+        
       }
 
       &-position {
-        display: inline-flex;
-        font-size: 24rpx;
-        margin-top: 8rpx;
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+        font-size: $uni-font-size-sm;
+        color: $uni-text-color-secondary;
+        line-height: $uni-line-height-sm;
       }
     }
 
     &-right {
-      border-radius: 10rpx;
-      background-color: #eee;
-      //border: 1px solid $uni-color-primary;
-      width: 120rpx;
       display: flex;
       flex-direction: column;
-      justify-content: center;
-      align-content: center;
       align-items: center;
+      gap: 8rpx;
+      padding: 16rpx;
+      background: $uni-bg-color-hover;
+      border-radius: 12rpx;
+      min-width: 100rpx;
+      transition: all 0.2s ease;
+
+      text {
+        font-size: $uni-font-size-base;
+        color: $uni-color-primary;
+        font-weight: $uni-font-weight-semibold;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          color: $uni-color-primary-dark;
+        }
 
+        &:active {
+          transform: scale(0.94);
+          opacity: 0.9;
+        }
+      }
+
+      &:active {
+        transform: scale(0.96);
+        background: $uni-border-color-light;
+      }
     }
   }
 
   &-distance {
-    font-size: 24rpx;
-    padding-left: 5px;
-    margin-top: 8rpx;
+    font-size: $uni-font-size-sm;
+    color: $uni-text-color-tertiary;
+    padding-top: 12rpx;
+    border-top: 1px solid $uni-border-color-light;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .parking-fee {
+      font-weight: $uni-font-weight-medium;
+      color: $uni-color-primary;
+    }
   }
 }
 

src/components/tab-bar/index.vue

@@ -106,13 +106,12 @@ view {
   left: 0;
   width: 100%;
   height: 140rpx;
-  //box-shadow: 0 0 3px #999;
   display: flex;
   align-items: center;
-  padding: 25rpx 0;
-  //color: #999999;
-
-  box-shadow: 0 -2px 5px #efefef;
+  padding: 20rpx 0 30rpx 0;
+  background-color: $uni-bg-color-card;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+  z-index: 999;
 }
 
 .tabbar-container .tabbar-item {
@@ -123,10 +122,13 @@ view {
   justify-content: center;
   align-items: center;
   text-align: center;
+  transition: all 0.2s ease;
+  cursor: pointer;
 }
 
 .tabbar-container .item-active {
   color: $uni-color-primary;
+  font-weight: 500;
 }
 
 .tabbar-container .center-item {
@@ -135,49 +137,82 @@ view {
 }
 
 .tabbar-container .tabbar-item .item-top {
-  width: 70rpx;
-  height: 70rpx;
-  padding: 10rpx;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 8rpx;
 }
 
 .tabbar-container .center-item .item-top {
-  //flex-shrink: 0;
-  width: 120rpx;
-  height: 120rpx;
+  width: 140rpx;
+  height: 140rpx;
   position: absolute;
-  top: -60rpx;
-  left: calc(50% - 60rpx);
+  top: -80rpx;
+  left: calc(50% - 70rpx);
   border-radius: 50%;
-  background-color: #ffffff;
+  background: linear-gradient(135deg, $uni-color-primary, $uni-color-primary-light);
   display: flex;
   justify-content: center;
   align-items: center;
-  align-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
+  transition: all 0.3s ease;
+  animation: pulse 2s infinite;
+}
+
+// 脉冲动画效果
+@keyframes pulse {
+  0% {
+    box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
+  }
+  50% {
+    box-shadow: 0 12rpx 32rpx rgba(198, 23, 30, 0.4);
+  }
+  100% {
+    box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
+  }
+}
 
-  box-shadow: 0 0 10px #efefef; /* 阴影效果 */
+// 点击动画效果
+.tabbar-container .center-item .item-top:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 16rpx rgba(198, 23, 30, 0.2);
 }
 
 .tabbar-container .center-item .item-top image {
-  //width: 110rpx !important;
-  //height: 110rpx !important;
+  width: 70rpx;
+  height: 70rpx;
+  filter: brightness(0) invert(1); // 确保图标在彩色背景上是白色
 }
 
 .tabbar-container .tabbar-item .item-top image {
   width: 100%;
   height: 100%;
+  transition: all 0.2s ease;
+}
+
+// 激活状态的图标放大效果
+.tabbar-container .tabbar-item:not(.center-item).item-active .item-top image {
+  transform: scale(1.1);
 }
 
 .tabbar-container .tabbar-item .item-bottom {
-  font-size: 22rpx;
+  font-size: 12px;
+  color: $uni-text-color-tertiary;
   width: 100%;
+  transition: all 0.2s ease;
 }
 
 .tabbar-container .center-item .item-bottom {
   position: absolute;
   bottom: 0;
+  color: $uni-color-primary;
+  font-weight: 500;
 }
 
-.ios {
-  bottom: 30rpx !important;
+// iOS适配
+.ios11 {
+  padding-bottom: 20rpx;
 }
 </style>

src/pages-order/detail/index.vue

@@ -257,7 +257,7 @@ page {
 
     .price-dsc {
       font-size: 26rpx;
-      color: $uni-text-color-grey;
+      color: $uni-text-color-tertiary;
     }
 
     .step-box {

src/pages/index/index.vue

@@ -357,7 +357,7 @@ const handleOAload = (e) => {
 
 <style scoped lang="scss">
 page {
-  background: #fafafa;
+  background: $uni-bg-color-page;
 }
 
 .content {
@@ -365,9 +365,7 @@ page {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  border-radius: 8rpx;
-
+  background-color: $uni-bg-color-page;
 }
 
 .logo {
@@ -378,8 +376,44 @@ page {
 
 .menu-content {
   width: 100%;
-  padding: 0 20rpx;
-  border-radius: 8rpx;
+  padding: 30rpx 20rpx;
+  background-color: $uni-bg-color-card;
+  margin-top: -20rpx;
+  border-radius: 20rpx 20rpx 0 0;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+// 菜单按钮交互效果
+.uv-grid-item {
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border-radius: 16rpx;
+  padding: 20rpx 0;
+  margin: 0 10rpx;
+}
+
+.uv-grid-item:active {
+  transform: scale(0.95);
+  background-color: $uni-bg-color-hover;
+}
+
+.grid-text {
+  font-size: $uni-font-size-xs !important;
+  color: $uni-text-color-secondary;
+  margin-top: 12rpx;
+  transition: color 0.2s ease;
+}
+
+.uv-grid-item:active .grid-text {
+  color: $uni-color-primary;
+}
+
+.uv-grid-item image {
+  transition: all 0.2s ease;
+}
+
+.uv-grid-item:active image {
+  transform: scale(0.9);
 }
 
 .qrcode-content {
@@ -395,14 +429,37 @@ page {
 
 .gap {
   width: 100%;
-  height: 36rpx;
-  background-color: #f5f3f3;
-  margin-top: 15rpx;
-  margin-bottom: 10rpx;
+  height: 20rpx;
+  background-color: $uni-bg-color-page;
 }
 
 .swiper-content {
-  //overflow: hidden;
+  width: 100%;
+  border-radius: 0 0 20rpx 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+// 轮播图样式增强
+.swiper-content swiper {
+  border-radius: 0 0 20rpx 20rpx;
+}
+
+.swiper-content swiper-item {
+  border-radius: 0 0 20rpx 20rpx;
+  overflow: hidden;
+  position: relative;
+}
+
+// 轮播图点击效果
+.swiper-content swiper-item image {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.swiper-content swiper-item:active image {
+  transform: scale(0.98);
+  opacity: 0.95;
 }
 
 .guide-content {
@@ -415,16 +472,15 @@ page {
 }
 
 .content_station {
-
-  height: calc(100vh - 810rpx);
-  overflow: scroll;
+  padding: 0 20rpx 200rpx;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .customer-service {
   height: 100rpx;
   width: 100rpx;
 
-
   image {
     width: 80rpx !important;
     height: 80rpx !important;
@@ -445,7 +501,7 @@ page {
   .movable-view {
     width: 100rpx !important;
     height: 100rpx !important;
-    pointer-events: auto; // 恢复鼠标事件
+    pointer-events: auto;
   }
 }
 
@@ -456,11 +512,11 @@ movable-area {
   width: 750rpx;
   top: 0;
   position: fixed;
-  pointer-events: none; // 鼠标事件可以渗透
+  pointer-events: none;
   movable-view {
     width: $all_width;
     height: $all_height;
-    pointer-events: auto; // 恢复鼠标事件
+    pointer-events: auto;
     image {
       width: $all_width;
       height: $all_height;
@@ -469,24 +525,30 @@ movable-area {
 }
 
 .parking_box {
-  width: 450rpx;
-  height: 450rpx;
+  width: 500rpx;
+  background-color: $uni-bg-color-card;
+  padding: 40rpx;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  border-radius: 4px;
-  image{
-    //border: 1px solid $uni-color-primary;
-    border-radius: 3px;
+  border-radius: 16rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
+  
+  text {
+    padding-bottom: 30rpx;
+    font-size: 16px;
+    color: $uni-text-color;
+    font-weight: 500;
+    text-align: center;
+    line-height: 1.5;
+  }
+  
+  image {
+    border-radius: 12rpx;
     width: 420rpx;
     height: 420rpx;
-  }
-
-  text {
-    padding-top: 30rpx;
-    font-size: 12px;
-    color: $uni-color-primary;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
   }
 }
 </style>