style(ui): 统一样式并优化车辆卡片布局

- 将px单位转换为rpx以适配不同屏幕 - 调整状态标签位置至车辆信息区域 - 简化按钮样式并移除冗余形状属性 - 更新弹窗标题为更友好的提示文本 - 增加价格字体大小以提升可读性

style(ui): 统一样式并优化车辆卡片布局
- 将px单位转换为rpx以适配不同屏幕 - 调整状态标签位置至车辆信息区域 - 简化按钮样式并移除冗余形状属性 - 更新弹窗标题为更友好的提示文本 - 增加价格字体大小以提升可读性
hookehuyr
Commit 0d0b9d703126d4cac8f1af86130f5fae014fcf76 0d0b9d70 1 parent 5626cd04
Showing 4 changed files with 74 additions and 80 deletions
src/pages/myCar/index.less
src/pages/myCar/index.vue
src/pages/myFavorites/index.vue
src/pages/myOrders/index.vue
--- a/src/pages/myCar/index.less
View file @0d0b9d7
+++ b/src/pages/myCar/index.less
View file @0d0b9d7
 .my-car-page {
   min-height: 100vh;
   background-color: #f5f5f5;
-  padding-bottom: 120px;
+  padding-bottom: 240rpx;
 }
     .loading-container {
         display: flex;
@@ -32,51 +32,48 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 100px 40px;
+  padding: 200rpx 80rpx;
   text-align: center;
 }
 .empty-image {
-  width: 200px;
+  width: 400rpx;
-  height: 150px;
+  height: 300rpx;
-  margin-bottom: 30px;
+  margin-bottom: 60rpx;
   opacity: 0.6;
 }
 .empty-text {
-  font-size: 32px;
+  font-size: 32rpx;
   color: #999;
-  margin-bottom: 40px;
+  margin-bottom: 80rpx;
 }
 /* 车辆卡片样式 */
 .car-card {
   background: white;
-  border-radius: 16px;
+  border-radius: 32rpx;
-  margin-bottom: 20px;
+  margin-bottom: 40rpx;
-  padding: 20px;
+  padding: 40rpx;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
   position: relative;
 }
 /* 状态标识 */
 .status-badges {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 2;
   display: flex;
-  flex-direction: column;
+  gap: 16rpx;
-  gap: 8px;
+  margin-top: 16rpx;
+  margin-bottom: 24rpx;
 }
 .status-badge {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8rpx;
-  padding: 4px 8px;
+  padding: 8rpx 16rpx;
-  border-radius: 12px;
+  border-radius: 24rpx;
-  font-size: 22px;
+  font-size: 22rpx;
   color: white;
   &.verified {
@@ -89,15 +86,15 @@
 }
 .status-icon {
-  width: 16px;
+  width: 32rpx;
-  height: 16px;
+  height: 32rpx;
 }
 /* 车辆图片 */
 .car-image-container {
   width: 100%;
-  height: 150px;
+  height: 300rpx;
-  border-radius: 12px;
+  border-radius: 24rpx;
   overflow: hidden;
 }
@@ -109,11 +106,11 @@
 /* 车辆信息 */
 .car-info {
-  padding-left: 12px;
+  padding-left: 24rpx;
 }
 .car-title {
-  font-size: 36px;
+  font-size: 36rpx;
   font-weight: bold;
   color: #333;
   margin-bottom: 0.5rem;
@@ -121,39 +118,39 @@
 .car-details {
   display: flex;
-  gap: 16px;
+  gap: 32rpx;
-  margin-bottom: 12px;
+  margin-bottom: 24rpx;
 }
 .detail-item {
-  font-size: 26px;
+  font-size: 26rpx;
   color: #666;
-  padding: 4px 12px;
+  padding: 8rpx 24rpx;
   background: #f3f4f6;
-  border-radius: 8px;
+  border-radius: 16rpx;
 }
 .car-description {
-  font-size: 28px;
+  font-size: 28rpx;
   color: #666;
   line-height: 1.5;
-  margin-bottom: 16px;
+  margin-bottom: 32rpx;
 }
 .price-section {
   display: flex;
   align-items: baseline;
-  gap: 16px;
+  gap: 32rpx;
 }
 .current-price {
-  font-size: 40px;
+  font-size: 40rpx;
   font-weight: bold;
   color: #f97316;
 }
 .market-price {
-  font-size: 24px;
+  font-size: 24rpx;
   color: #999;
   text-decoration: line-through;
 }
@@ -161,7 +158,7 @@
 /* 操作按钮 */
 .action-buttons {
   display: flex;
-  gap: 12px;
+  gap: 24rpx;
   justify-content: flex-end;
 }
@@ -169,68 +166,68 @@
 .load-more {
   display: flex;
   justify-content: center;
-  padding: 40px 0;
+  padding: 80rpx 0;
 }
 .loading-text {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 24rpx;
-  font-size: 28px;
+  font-size: 28rpx;
   color: #666;
 }
 /* 没有更多数据 */
 .no-more {
   text-align: center;
-  padding: 40px 0;
+  padding: 80rpx 0;
-  font-size: 28px;
+  font-size: 28rpx;
   color: #999;
 }
 /* 响应式适配 */
-@media (max-width: 750px) {
+@media (max-width: 750rpx) {
   .car-list {
-    padding: 15px;
+    padding: 30rpx;
   }
   .car-card {
-    padding: 15px;
+    padding: 30rpx;
-    margin-bottom: 15px;
+    margin-bottom: 30rpx;
   }
   .car-title {
-    font-size: 32px;
+    font-size: 32rpx;
   }
   .detail-item {
-    font-size: 24px;
+    font-size: 24rpx;
-    padding: 3px 10px;
+    padding: 6rpx 20rpx;
   }
   .car-description {
-    font-size: 26px;
+    font-size: 26rpx;
   }
   .current-price {
-    font-size: 36px;
+    font-size: 36rpx;
   }
   .market-price {
-    font-size: 22px;
+    font-size: 22rpx;
   }
   .action-buttons {
-    gap: 15px;
+    gap: 30rpx;
   }
   .status-badge {
-    font-size: 20px;
+    font-size: 20rpx;
-    padding: 3px 6px;
+    padding: 6rpx 12rpx;
   }
   .status-icon {
-    width: 14px;
+    width: 28rpx;
-    height: 14px;
+    height: 28rpx;
   }
 }
--- a/src/pages/myCar/index.vue
View file @0d0b9d7
+++ b/src/pages/myCar/index.vue
View file @0d0b9d7
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-03 14:32:00
+ * @LastEditTime: 2025-07-04 14:49:37
  * @FilePath: /jgdl/src/pages/myCar/index.vue
  * @Description: 文件描述
 -->
@@ -28,16 +28,6 @@
         <!-- 车辆卡片列表 -->
         <view v-else class="space-y-4 ml-4 mr-4 mt-4">
           <view v-for="car in carList" :key="car.id" class="car-card">
-            <!-- 状态标识 -->
-            <view class="status-badges">
-              <view v-if="car.isAuthenticated" class="status-badge verified">
-                <text>已认证</text>
-              </view>
-              <view v-if="car.isOffline" class="status-badge offline">
-                <text>已下架</text>
-              </view>
-            </view>
-
             <!-- 使用 nut-row 和 nut-col 布局 -->
             <nut-row :gutter="10">
               <!-- 左侧：车辆图片 -->
@@ -51,11 +41,20 @@
               <nut-col :span="16">
                 <view class="car-info">
                   <view class="car-title">{{ car.brand }} {{ car.model }}</view>
-                  <view class="car-details">
+                  <!-- 状态标识 -->
+                  <view class="status-badges">
+                    <view v-if="car.isAuthenticated" class="status-badge verified">
+                      <text>已认证</text>
+                    </view>
+                    <view v-if="car.isOffline" class="status-badge offline">
+                      <text>已下架</text>
+                    </view>
+                  </view>
+                  <!-- <view class="car-details">
                     <text class="detail-item">{{ car.year }}</text>
                     <text class="detail-item">{{ car.condition }}</text>
                     <text class="detail-item">{{ car.mileage }}公里</text>
-                  </view>
+                  </view> -->
                   <view class="car-description">{{ car.description }}</view>
                   <view class="price-section">
                     <view class="current-price">¥{{ car.price }}</view>
@@ -67,17 +66,15 @@
             <!-- 操作按钮 -->
             <view class="action-buttons mt-4">
-              <nut-button size="small" type="default" shape="square" @click="editCar(car.id)">编辑</nut-button>
+              <nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
               <nut-button
                 size="small"
-                shape="square"
                 :type="car.isOffline ? 'success' : 'warning'"
                 @click="toggleOffline(car)"
               >
                 {{ car.isOffline ? '上架' : '下架' }}
               </nut-button>
               <nut-button
-                shape="square"
                 v-if="!car.isAuthenticated"
                 size="small"
                 type="primary"
@@ -104,7 +101,7 @@
     <!-- 下架确认弹窗 -->
     <nut-dialog
       v-model:visible="offlineDialogVisible"
-      title="确认操作"
+      title="温馨提示"
       :content="offlineDialogContent"
       @confirm="confirmOffline"
       @cancel="cancelOffline"
--- a/src/pages/myFavorites/index.vue
View file @0d0b9d7
+++ b/src/pages/myFavorites/index.vue
View file @0d0b9d7
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-03 21:32:33
+ * @LastEditTime: 2025-07-04 14:30:46
  * @FilePath: /jgdl/src/pages/myFavorites/index.vue
  * @Description: 我的关注页面
 -->
@@ -40,7 +40,7 @@
                                 <text class="text-sm text-gray-500 mt-1 block">{{ item.details }}</text>
                                 <view class="mt-2 flex justify-between items-center">
                                     <view>
-                                        <text class="text-orange-500 font-bold">
+                                        <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
                                             ¥{{ item.price.toLocaleString() }}
                                         </text>
                                         <text class="text-gray-400 text-xs line-through ml-2">
--- a/src/pages/myOrders/index.vue
View file @0d0b9d7
+++ b/src/pages/myOrders/index.vue
View file @0d0b9d7
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-04 13:58:14
+ * @LastEditTime: 2025-07-04 14:34:39
  * @FilePath: /jgdl/src/pages/myOrders/index.vue
  * @Description: 订单管理页面
 -->
@@ -81,7 +81,7 @@
             <view class="order-actions">
               <!-- 买车模式：待支付状态 -->
               <template v-if="viewMode === 'bought' && order.status === 'pending'">
-                <nut-button type="primary" size="small" @click="handlePayment(order)">
+                <nut-button type="primary" size="small" @click="handlePayment(order)" color="orange">
                   去支付
                 </nut-button>
               </template>
@@ -91,7 +91,7 @@
                 <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
                   查看详情
                 </nut-button>
-                <nut-button type="primary" size="small" @click="rateOrder(order.id)" class="ml-2">
+                <nut-button type="primary" size="small" @click="rateOrder(order.id)" class="ml-2" color="orange" plain>
                   {{ order.review ? '查看评价' : '评价' }}
                 </nut-button>
               </template>