Ver Fonte

UI优化

skyline há 4 meses atrás
pai
commit
1b28c6effa

+ 1 - 1
src/pages-user/contact/index.vue

@@ -199,7 +199,7 @@ const logoutUser = () => {
   uni.showModal({
     title: "温馨提示",
     content: "确定退出登录吗?",
-    confirmColor: "#2d9e95",
+    confirmColor: "#C6171E",
     confirmText: "确定退出",
     cancelText: "手滑了",
     success: (res) => {

+ 7 - 7
src/pages-user/wallet/index.vue

@@ -24,7 +24,7 @@
       <view class="wallet-header_detail">
         <view class="detail-item">
           <view class="detail-icon">
-            <uv-icon name="integral-fill" color="#FFB800" size="18"></uv-icon>
+            <uv-icon name="integral-fill" color="#E84545" size="18"></uv-icon>
           </view>
           <view class="detail-info">
             <text class="detail-label">充值余额</text>
@@ -34,7 +34,7 @@
         <view class="detail-divider"></view>
         <view class="detail-item">
           <view class="detail-icon">
-            <uv-icon name="gift-fill" color="#FF6B6B" size="18"></uv-icon>
+            <uv-icon name="gift-fill" color="#C6171E" size="18"></uv-icon>
           </view>
           <view class="detail-info">
             <text class="detail-label">赠款余额</text>
@@ -522,15 +522,15 @@ const handleClickDetail = (walletDetail: any) => {
             box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 
             &-1 {
-              background: linear-gradient(135deg, #67C23A, #85CE61);
+              background: linear-gradient(135deg, #C6171E, #E84545);
             }
 
             &-2 {
-              background: linear-gradient(135deg, #E6A23C, #F0B668);
+              background: linear-gradient(135deg, #E84545, #C6171E);
             }
 
             &-3 {
-              background: linear-gradient(135deg, #C6171E, #E84545);
+              background: linear-gradient(135deg, #A81212, #C6171E);
             }
           }
 
@@ -546,11 +546,11 @@ const handleClickDetail = (walletDetail: any) => {
           font-weight: 700;
           
           &.amount-positive {
-            color: #67C23A;
+            color: #E84545;
           }
 
           &.amount-negative {
-            color: #FA436A;
+            color: #C6171E;
           }
         }
       }

+ 3 - 3
src/pages-user/wallet/recharge.vue

@@ -197,7 +197,7 @@ const confirm = () => {
   position: absolute;
   top: -10rpx;
   right: -10rpx;
-  background-color: #FF6B6B;
+  background-color: #E84545;
   color: white;
   font-size: 18rpx;
   padding: 4rpx 12rpx;
@@ -206,7 +206,7 @@ const confirm = () => {
   align-items: center;
   gap: 4rpx;
   animation: giftPulse 2s infinite;
-  box-shadow: 0 2rpx 6rpx rgba(255, 107, 107, 0.3);
+  box-shadow: 0 2rpx 6rpx rgba(232, 69, 69, 0.3);
 }
 
 @keyframes giftPulse {
@@ -246,7 +246,7 @@ const confirm = () => {
   align-items: center;
   gap: 10rpx;
   font-size: 24rpx;
-  color: #FF6B6B;
+  color: #E84545;
 }
 
 .gift-amount {

+ 31 - 17
src/pages-wash/device/index.vue

@@ -30,15 +30,18 @@
         <view class="control-wrapper">
           <view 
             class="control-button"
-            :class="{ 'control-button--active': state.device?.state === 'busy' }"
+            :class="{ 'control-button--active': state.device?.state !== 'idle' }"
             @click="debounceStartStopDevice"
           >
             <view class="button-icon">
-              <uv-icon 
-                :name="state.device?.state==='idle' ? 'play-circle' : 'stop-circle'" 
-                size="60" 
-                color="#fff"
-              ></uv-icon>
+              <!-- 空闲状态显示播放图标 -->
+              <view v-if="state.device?.state==='idle'" class="icon-play">
+                <uv-icon name="play-circle-fill" size="48" color="#fff"></uv-icon>
+              </view>
+              <!-- 忙碌状态显示停止图标 -->
+              <view v-else class="icon-stop">
+                <uv-icon name="pause-circle-fill" size="48" color="#fff"></uv-icon>
+              </view>
             </view>
             <text class="button-text" v-if="state.device?.state==='idle'">启动设备</text>
             <text class="button-text" v-else>停止设备</text>
@@ -446,16 +449,16 @@ const handleGotoRechage = () => {
     align-items: center;
     
     .control-button {
-      width: 320rpx;
-      height: 320rpx;
+      width: 240rpx;
+      height: 240rpx;
       border-radius: 50%;
       background: linear-gradient(135deg, #C6171E 0%, #E84545 100%);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      gap: 12rpx;
-      box-shadow: 0 16rpx 40rpx rgba(198, 23, 30, 0.3);
+      gap: 8rpx;
+      box-shadow: 0 12rpx 32rpx rgba(198, 23, 30, 0.3);
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
@@ -475,7 +478,7 @@ const handleGotoRechage = () => {
       
       &:active {
         transform: scale(0.95);
-        box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
+        box-shadow: 0 6rpx 20rpx rgba(198, 23, 30, 0.3);
         
         &::before {
           transform: scale(1);
@@ -483,26 +486,37 @@ const handleGotoRechage = () => {
       }
       
       .button-icon {
-        margin-bottom: 8rpx;
+        margin-bottom: 4rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        .icon-play,
+        .icon-stop {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          line-height: 1;
+        }
       }
       
       .button-text {
-        font-size: 36rpx;
+        font-size: 32rpx;
         font-weight: 600;
         color: white;
       }
       
       .button-tip {
-        font-size: 22rpx;
+        font-size: 20rpx;
         color: rgba(255, 255, 255, 0.85);
       }
       
       &.control-button--active {
-        background: linear-gradient(135deg, #07C160 0%, #05a050 100%);
-        box-shadow: 0 16rpx 40rpx rgba(7, 193, 96, 0.3);
+        background: linear-gradient(135deg, #E84545 0%, #FF6B6B 100%);
+        box-shadow: 0 12rpx 32rpx rgba(232, 69, 69, 0.3);
         
         &:active {
-          box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+          box-shadow: 0 6rpx 20rpx rgba(232, 69, 69, 0.3);
         }
       }
     }

+ 32 - 10
src/pages-wash/station/index.vue

@@ -1,13 +1,16 @@
 <template>
   <view class="page-container">
     <!-- 自定义导航栏 -->
-    <uv-navbar 
-      leftIcon="arrow-left" 
-      @leftClick="handleLeftClick" 
-      title="门店详情"
-      bgColor="#C6171E"
-      :autoBack="true"
-    ></uv-navbar>
+    <view class="navbar-fixed">
+      <uv-navbar 
+        leftIcon="arrow-left" 
+        @leftClick="handleLeftClick" 
+        title="门店详情"
+        bgColor="#C6171E"
+        :autoBack="true"
+        height="88rpx"
+      ></uv-navbar>
+    </view>
 
     <!-- 内容区域 -->
     <scroll-view class="content-scroll" scroll-y="true">
@@ -223,11 +226,13 @@ const getDeviceStatusClass = (state: string) => {
     case 'idle':
       return 'success';
     case 'working':
+    case 'busy':
       return 'warning';
     case 'fault':
+    case 'error':
       return 'error';
     default:
-      return '';
+      return 'success'; // 默认显示为空闲状态
   }
 }
 
@@ -241,18 +246,30 @@ const getDeviceStatusClass = (state: string) => {
   background: #f5f5f5;
   display: flex;
   flex-direction: column;
+  position: relative;
+}
+
+// 导航栏固定定位
+.navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
 }
 
 // 内容滚动区
 .content-scroll {
   flex: 1;
-  height: 100%;
   width: 100%;
+  padding-top: calc(var(--status-bar-height) + 88rpx + 8rpx);
+  box-sizing: border-box;
 }
 
 // 轮播图区域
 .swiper-wrapper {
-  padding: 24rpx 30rpx;
+  padding: 16rpx 30rpx 24rpx;
+  margin-top: 8rpx;
   
   .station-swiper {
     height: 360rpx;
@@ -264,6 +281,7 @@ const getDeviceStatusClass = (state: string) => {
   .swiper-image {
     width: 100%;
     height: 100%;
+    display: block;
   }
 }
 
@@ -352,17 +370,21 @@ const getDeviceStatusClass = (state: string) => {
         padding: 6rpx 16rpx;
         border-radius: 20rpx;
         font-weight: 500;
+        border: none; // 确保没有边框
         
+        // 空闲状态 - 绿色
         &.status-success {
           background: #E8F8F0;
           color: #07C160;
         }
         
+        // 忙碌/工作中状态 - 橙色
         &.status-warning {
           background: #FFF7E6;
           color: #FAAD14;
         }
         
+        // 故障/错误状态 - 红色
         &.status-error {
           background: #FEF0F0;
           color: #F56C6C;

+ 2 - 2
src/pages.json

@@ -10,7 +10,7 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "Yeswash洗车",
+        "navigationBarTitleText": "Yeswash",
         "enablePullDownRefresh": false,
         "disableScroll": true,
         "navigationStyle": "custom"
@@ -45,7 +45,7 @@
           "path": "profile/index",
           "style": {
             "navigationStyle": "default",
-            "navigationBarTitleText": "我的信息",
+            "navigationBarTitleText": "我的车辆",
             "navigationBarBackgroundColor": "#ffffff"
           }
         },

+ 2 - 2
src/pages/index/index.vue

@@ -4,8 +4,8 @@
     <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
       <view class="navbar-content">
         <view class="navbar-title">
-          <uv-icon name="home-fill" color="white" size="20"></uv-icon>
-          <text class="title-text">Yeswash洗车</text>
+          <!-- <uv-icon name="home-fill" color="white" size="20"></uv-icon> -->
+          <text class="title-text">Yeswash</text>
         </view>
       </view>
     </view>

+ 1 - 1
src/pages/map/index.vue

@@ -50,7 +50,7 @@
             </view>
           </view>
           <view class="station_item-content-right">
-            <uv-button shape="circle" type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
+            <uv-button shape="circle" type="primary" color="#C6171E" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
           </view>
         </view>
 

+ 2 - 2
src/pages/order/index.vue

@@ -27,9 +27,9 @@
               <view class="right">¥{{ item.money }}</view>
             </view>
             <view class="action" style="text-align: right;">
-              <uv-button plain type="primary" size="mini">{{ item.payment }}</uv-button>
+              <uv-button plain type="primary" color="#C6171E" size="mini">{{ item.payment }}</uv-button>
               <view class="ml10">
-                <uv-button type="error" size="mini" class="ml10" style="margin-left: 10px;">{{ item.delete }}</uv-button>
+                <uv-button type="error" color="#F44336" size="mini" class="ml10" style="margin-left: 10px;">{{ item.delete }}</uv-button>
               </view>
               <!--              <view class="button button_pay"
                                   style="width: 36px;text-align:center;font-size: 10px;">{{ item.payment }}