style(myCar): 优化车辆列表页面的样式和布局

- 重构车辆卡片样式，使用更现代的UI设计 - 调整间距和颜色方案提升视觉一致性 - 改进操作按钮的交互样式

style(myCar): 优化车辆列表页面的样式和布局
- 重构车辆卡片样式，使用更现代的UI设计 - 调整间距和颜色方案提升视觉一致性 - 改进操作按钮的交互样式
hookehuyr
Commit 3fd0056d1d01575978408032214a0f271e27ca42 3fd0056d 1 parent 533ae635
Showing 2 changed files with 217 additions and 36 deletions
src/pages/myCar/index.less
src/pages/myCar/index.vue
--- a/src/pages/myCar/index.less
View file @3fd0056
+++ b/src/pages/myCar/index.less
View file @3fd0056
+/* 我的车辆页面样式 */
 .my-car-page {
+  background-color: #f8f9fa;
   min-height: 100vh;
-  background-color: #f5f5f5;
+}
-  padding-bottom: 240rpx;
+
+/* 车辆卡片样式 */
+.car-item {
+  background: white;
+  border-radius: 12rpx;
+  margin: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.space-y-4 {
+  > view:not(:last-child) {
+    margin-bottom: 16rpx;
+  }
+}
+
+.flex {
+  display: flex;
+}
+
+.p-4 {
+  padding: 32rpx;
+}
+
+.w-24 {
+  width: 192rpx;
+}
+
+.h-24 {
+  height: 192rpx;
+}
+
+.relative {
+  position: relative;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.object-cover {
+  object-fit: cover;
+}
+
+.rounded-lg {
+  border-radius: 16rpx;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.ml-4 {
+  margin-left: 32rpx;
+}
+
+.ml-2 {
+  margin-left: 16rpx;
+}
+
+.mr-2 {
+  margin-right: 16rpx;
+}
+
+.mt-1 {
+  margin-top: 8rpx;
+}
+
+.mt-2 {
+  margin-top: 16rpx;
+}
+
+.mt-4 {
+  margin-top: 32rpx;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.text-base {
+  font-size: 32rpx;
+}
+
+.block {
+  display: block;
+}
+
+.text-sm {
+  font-size: 28rpx;
+}
+
+.text-gray-500 {
+  color: #6b7280;
+}
+
+.text-orange-500 {
+  color: #f97316;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-gray-400 {
+  color: #9ca3af;
+}
+
+.text-xs {
+  font-size: 24rpx;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.px-3 {
+  padding-left: 24rpx;
+  padding-right: 24rpx;
+}
+
+.py-1 {
+  padding-top: 8rpx;
+  padding-bottom: 8rpx;
+}
+
+.rounded-full {
+  border-radius: 9999rpx;
+}
+
+.sold-price {
+  color: #999 !important;
+  text-decoration: line-through;
+}
+
+.sold-label {
+  color: #dc2626;
+  font-size: 26rpx;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 16rpx;
+}
+
+/* 价格样式 */
+.price-text {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #ff6b35;
+}
+
+.original-price {
+  font-size: 24rpx;
+  color: #999;
+  text-decoration: line-through;
 }
     .loading-container {
         display: flex;
--- a/src/pages/myCar/index.vue
View file @3fd0056
+++ b/src/pages/myCar/index.vue
View file @3fd0056
@@ -25,22 +25,24 @@
           <!-- <nut-button color="#f97316" @click="goToSell">发布车源</nut-button> -->
         </view>
-        <!-- 车辆卡片列表 -->
+        <!-- 车辆列表 -->
-        <view v-else class="space-y-4 ml-4 mr-4 mt-4">
+        <view v-else class="space-y-4">
-          <view v-for="car in carList" :key="car.id" class="car-card">
+          <view
-            <!-- 使用 nut-row 和 nut-col 布局 -->
+            v-for="car in carList"
-            <nut-row :gutter="10">
+            :key="car.id"
-              <!-- 左侧：车辆图片 -->
+            @tap="() => goToCarDetail(car.id)"
-              <nut-col :span="6">
+            style="border-bottom: 1px solid #e5e7eb"
-                <view class="car-image-container">
+          >
-                  <image :src="car.front_photo" class="car-image" mode="aspectFill" />
+            <view class="flex p-4">
+              <view class="w-24 h-24 relative">
+                <image
+                  :src="car.front_photo"
+                  mode="aspectFill"
+                  class="w-full h-full object-cover rounded-lg"
+                />
               </view>
-              </nut-col>
+              <view class="flex-1 ml-4">
-
+                <text class="font-medium text-base block">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</text>
-              <!-- 右侧：车辆信息 -->
-              <nut-col :span="18">
-                <view class="car-info">
-                  <view class="car-title" @click="goToCarDetail(car.id)">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</view>
                 <!-- 状态标识 -->
                 <view class="status-badges">
                   <view v-if="car.verification_status" class="status-badge" :class="getVerificationStatusClass(car.verification_status)">
@@ -54,58 +56,68 @@
                     <text>{{ reviewStatus[car.review_status] }}</text>
                   </view>
                 </view>
-                  <view class="car-details">
+                <text class="text-sm text-gray-500 mt-1 block">续航{{ car.range_km }}km | 最高时速{{ car.max_speed_kmh }}km/h</text>
-                    <text class="detail-item">续航 {{ car.range_km }}km | 最高时速 {{ car.max_speed_kmh }}km/h</text>
-                  </view>
                 <!-- 审核原因 -->
-                  <view v-if="car.review_reason" class="verification-reason mt-2">
+                <view v-if="car.review_reason" class="verification-reason mt-1">
-                    <!-- <text class="text-xs text-red-500">审核结果：{{ car.review_reason }}</text> -->
                   <nut-config-provider :theme-vars="themeVars">
                     <nut-ellipsis :content="'审核结果: ' + car.review_reason" direction="end" rows="2" expand-text="展开" collapse-text="收起"></nut-ellipsis>
                   </nut-config-provider>
                 </view>
-                  <view class="price-section">
+                <view class="mt-2 flex justify-between items-center">
-                    <view v-if="car.price" class="current-price">
+                  <view>
-                      <text :class="{ 'sold-price': car.is_sold }">¥{{ car.price }}</text>
+                    <text v-if="car.price" class="text-orange-500 font-bold" style="font-size: 1.2rem;" :class="{ 'sold-price': car.is_sold }">
-                      <text v-if="car.is_sold" class="sold-label">已售出</text>
+                      ¥{{ car.price.toLocaleString() }}
-                    </view>
+                    </text>
-                    <view v-if="car.market_price && !car.is_sold" class="market-price">市场价 ¥{{ car.market_price }}</view>
+                    <text v-if="car.is_sold" class="sold-label ml-2" style="color: red; font-size: 26rpx;">已售出</text>
+                    <text v-if="car.market_price && !car.is_sold" class="text-gray-400 text-xs line-through ml-2">
+                      ¥{{ car.market_price.toLocaleString() }}
+                    </text>
                   </view>
                 </view>
-              </nut-col>
-            </nut-row>
-
                 <!-- 操作按钮 只能修改未卖出的车 -->
-            <view v-if="!car.is_sold" class="action-buttons mt-2">
+                <view v-if="!car.is_sold" class="action-buttons mt-4">
-              <nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
+                  <nut-button
+                    @click.stop="editCar(car.id)"
+                    size="small"
+                    type="default"
+                    class="px-3 py-1 rounded-full text-sm mr-2"
+                  >
+                    编辑
+                  </nut-button>
                   <!-- 只有审核状态为3时才显示上架/下架按钮 -->
                   <nut-button
                     v-if="car.review_status === 3"
+                    @click.stop="toggleOffline(car)"
                     size="small"
                     :type="car.status === 5 ? 'success' : 'warning'"
-                @click="toggleOffline(car)"
+                    class="px-3 py-1 rounded-full text-sm mr-2"
                   >
                     {{ car.status === 5 ? '上架' : '下架' }}
                   </nut-button>
                   <nut-button
                     v-if="car.review_status === 5"
+                    @click.stop="toggleOnline(car)"
                     size="small"
                     type="success"
-                @click="toggleOnline(car)"
+                    class="px-3 py-1 rounded-full text-sm mr-2"
                   >
                     上架
                   </nut-button>
                   <nut-button
                     v-if="car.verification_status === 1 || car.verification_status === 7"
+                    @click.stop="authCar(car.id)"
                     size="small"
                     type="primary"
-                @click="authCar(car.id)"
+                    color="orange"
+                    class="px-3 py-1 rounded-full text-sm"
                   >
                     认证
                   </nut-button>
                 </view>
               </view>
             </view>
+          </view>
+        </view>
         <!-- Loading indicator -->
         <view v-if="loading" class="loading-container py-4 text-center">