Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3fd0056d 1 parent 533ae635

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

- 重构车辆卡片样式，使用更现代的UI设计
- 调整间距和颜色方案提升视觉一致性
- 改进操作按钮的交互样式
Inline Side-by-side
Showing 2 changed files with 256 additions and 75 deletions
1 +/* 我的车辆页面样式 */
1 .my-car-page { 2 .my-car-page {
3 + background-color: #f8f9fa;
2 min-height: 100vh; 4 min-height: 100vh;
3 - background-color: #f5f5f5; 5 +}
4 - padding-bottom: 240rpx; 6 +
7 +/* 车辆卡片样式 */
8 +.car-item {
9 + background: white;
10 + border-radius: 12rpx;
11 + margin: 16rpx;
12 + padding: 24rpx;
13 + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
14 +}
15 +
16 +.space-y-4 {
17 + > view:not(:last-child) {
18 + margin-bottom: 16rpx;
19 + }
20 +}
21 +
22 +.flex {
23 + display: flex;
24 +}
25 +
26 +.p-4 {
27 + padding: 32rpx;
28 +}
29 +
30 +.w-24 {
31 + width: 192rpx;
32 +}
33 +
34 +.h-24 {
35 + height: 192rpx;
36 +}
37 +
38 +.relative {
39 + position: relative;
40 +}
41 +
42 +.w-full {
43 + width: 100%;
44 +}
45 +
46 +.h-full {
47 + height: 100%;
48 +}
49 +
50 +.object-cover {
51 + object-fit: cover;
52 +}
53 +
54 +.rounded-lg {
55 + border-radius: 16rpx;
56 +}
57 +
58 +.flex-1 {
59 + flex: 1;
60 +}
61 +
62 +.ml-4 {
63 + margin-left: 32rpx;
64 +}
65 +
66 +.ml-2 {
67 + margin-left: 16rpx;
68 +}
69 +
70 +.mr-2 {
71 + margin-right: 16rpx;
72 +}
73 +
74 +.mt-1 {
75 + margin-top: 8rpx;
76 +}
77 +
78 +.mt-2 {
79 + margin-top: 16rpx;
80 +}
81 +
82 +.mt-4 {
83 + margin-top: 32rpx;
84 +}
85 +
86 +.font-medium {
87 + font-weight: 500;
88 +}
89 +
90 +.text-base {
91 + font-size: 32rpx;
92 +}
93 +
94 +.block {
95 + display: block;
96 +}
97 +
98 +.text-sm {
99 + font-size: 28rpx;
100 +}
101 +
102 +.text-gray-500 {
103 + color: #6b7280;
104 +}
105 +
106 +.text-orange-500 {
107 + color: #f97316;
108 +}
109 +
110 +.font-bold {
111 + font-weight: 700;
112 +}
113 +
114 +.text-gray-400 {
115 + color: #9ca3af;
116 +}
117 +
118 +.text-xs {
119 + font-size: 24rpx;
120 +}
121 +
122 +.line-through {
123 + text-decoration: line-through;
124 +}
125 +
126 +.justify-between {
127 + justify-content: space-between;
128 +}
129 +
130 +.items-center {
131 + align-items: center;
132 +}
133 +
134 +.px-3 {
135 + padding-left: 24rpx;
136 + padding-right: 24rpx;
137 +}
138 +
139 +.py-1 {
140 + padding-top: 8rpx;
141 + padding-bottom: 8rpx;
142 +}
143 +
144 +.rounded-full {
145 + border-radius: 9999rpx;
146 +}
147 +
148 +.sold-price {
149 + color: #999 !important;
150 + text-decoration: line-through;
151 +}
152 +
153 +.sold-label {
154 + color: #dc2626;
155 + font-size: 26rpx;
156 +}
157 +
158 +.action-buttons {
159 + display: flex;
160 + gap: 16rpx;
161 +}
162 +
163 +/* 价格样式 */
164 +.price-text {
165 + font-size: 32rpx;
166 + font-weight: bold;
167 + color: #ff6b35;
168 +}
169 +
170 +.original-price {
171 + font-size: 24rpx;
172 + color: #999;
173 + text-decoration: line-through;
5 } 174 }
6 .loading-container { 175 .loading-container {
7 display: flex; 176 display: flex;
......
...@@ -25,84 +25,96 @@ ...@@ -25,84 +25,96 @@
25 <!-- <nut-button color="#f97316" @click="goToSell">发布车源</nut-button> --> 25 <!-- <nut-button color="#f97316" @click="goToSell">发布车源</nut-button> -->
26 </view> 26 </view>
27 27
28 - <!-- 车辆卡片列表 --> 28 + <!-- 车辆列表 -->
29 - <view v-else class="space-y-4 ml-4 mr-4 mt-4"> 29 + <view v-else class="space-y-4">
30 - <view v-for="car in carList" :key="car.id" class="car-card"> 30 + <view
31 - <!-- 使用 nut-row 和 nut-col 布局 --> 31 + v-for="car in carList"
32 - <nut-row :gutter="10"> 32 + :key="car.id"
33 - <!-- 左侧：车辆图片 --> 33 + @tap="() => goToCarDetail(car.id)"
34 - <nut-col :span="6"> 34 + style="border-bottom: 1px solid #e5e7eb"
35 - <view class="car-image-container"> 35 + >
36 - <image :src="car.front_photo" class="car-image" mode="aspectFill" /> 36 + <view class="flex p-4">
37 - </view> 37 + <view class="w-24 h-24 relative">
38 - </nut-col> 38 + <image
39 - 39 + :src="car.front_photo"
40 - <!-- 右侧：车辆信息 --> 40 + mode="aspectFill"
41 - <nut-col :span="18"> 41 + class="w-full h-full object-cover rounded-lg"
42 - <view class="car-info"> 42 + />
43 - <view class="car-title" @click="goToCarDetail(car.id)">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</view> 43 + </view>
44 - <!-- 状态标识 --> 44 + <view class="flex-1 ml-4">
45 - <view class="status-badges"> 45 + <text class="font-medium text-base block">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</text>
46 - <view v-if="car.verification_status" class="status-badge" :class="getVerificationStatusClass(car.verification_status)"> 46 + <!-- 状态标识 -->
47 - <text>{{ verifyStatus[car.verification_status] }}</text> 47 + <view class="status-badges">
48 - </view> 48 + <view v-if="car.verification_status" class="status-badge" :class="getVerificationStatusClass(car.verification_status)">
49 - <!-- 审核状态为3时显示上架/下架状态，否则显示审核状态 --> 49 + <text>{{ verifyStatus[car.verification_status] }}</text>
50 - <view v-if="car.review_status === 3 && car.status === 5" class="status-badge offline">
51 - <text>{{ carStatus[car.status] }}</text>
52 - </view>
53 - <view v-else-if="car.review_status && car.review_status !== 3" class="status-badge review">
54 - <text>{{ reviewStatus[car.review_status] }}</text>
55 - </view>
56 </view> 50 </view>
57 - <view class="car-details"> 51 + <!-- 审核状态为3时显示上架/下架状态，否则显示审核状态 -->
58 - <text class="detail-item">续航 {{ car.range_km }}km | 最高时速 {{ car.max_speed_kmh }}km/h</text> 52 + <view v-if="car.review_status === 3 && car.status === 5" class="status-badge offline">
53 + <text>{{ carStatus[car.status] }}</text>
59 </view> 54 </view>
60 - <!-- 审核原因 --> 55 + <view v-else-if="car.review_status && car.review_status !== 3" class="status-badge review">
61 - <view v-if="car.review_reason" class="verification-reason mt-2"> 56 + <text>{{ reviewStatus[car.review_status] }}</text>
62 - <!-- <text class="text-xs text-red-500">审核结果：{{ car.review_reason }}</text> -->
63 - <nut-config-provider :theme-vars="themeVars">
64 - <nut-ellipsis :content="'审核结果: ' + car.review_reason" direction="end" rows="2" expand-text="展开" collapse-text="收起"></nut-ellipsis>
65 - </nut-config-provider>
66 </view> 57 </view>
67 - <view class="price-section"> 58 + </view>
68 - <view v-if="car.price" class="current-price"> 59 + <text class="text-sm text-gray-500 mt-1 block">续航{{ car.range_km }}km | 最高时速{{ car.max_speed_kmh }}km/h</text>
69 - <text :class="{ 'sold-price': car.is_sold }">¥{{ car.price }}</text> 60 + <!-- 审核原因 -->
70 - <text v-if="car.is_sold" class="sold-label">已售出</text> 61 + <view v-if="car.review_reason" class="verification-reason mt-1">
71 - </view> 62 + <nut-config-provider :theme-vars="themeVars">
72 - <view v-if="car.market_price && !car.is_sold" class="market-price">市场价 ¥{{ car.market_price }}</view> 63 + <nut-ellipsis :content="'审核结果: ' + car.review_reason" direction="end" rows="2" expand-text="展开" collapse-text="收起"></nut-ellipsis>
64 + </nut-config-provider>
65 + </view>
66 + <view class="mt-2 flex justify-between items-center">
67 + <view>
68 + <text v-if="car.price" class="text-orange-500 font-bold" style="font-size: 1.2rem;" :class="{ 'sold-price': car.is_sold }">
69 + ¥{{ car.price.toLocaleString() }}
70 + </text>
71 + <text v-if="car.is_sold" class="sold-label ml-2" style="color: red; font-size: 26rpx;">已售出</text>
72 + <text v-if="car.market_price && !car.is_sold" class="text-gray-400 text-xs line-through ml-2">
73 + ¥{{ car.market_price.toLocaleString() }}
74 + </text>
73 </view> 75 </view>
74 </view> 76 </view>
75 - </nut-col> 77 + <!-- 操作按钮 只能修改未卖出的车 -->
76 - </nut-row> 78 + <view v-if="!car.is_sold" class="action-buttons mt-4">
77 - 79 + <nut-button
78 - <!-- 操作按钮 只能修改未卖出的车 --> 80 + @click.stop="editCar(car.id)"
79 - <view v-if="!car.is_sold" class="action-buttons mt-2"> 81 + size="small"
80 - <nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button> 82 + type="default"
81 - <!-- 只有审核状态为3时才显示上架/下架按钮 --> 83 + class="px-3 py-1 rounded-full text-sm mr-2"
82 - <nut-button 84 + >
83 - v-if="car.review_status === 3" 85 + 编辑
84 - size="small" 86 + </nut-button>
85 - :type="car.status === 5 ? 'success' : 'warning'" 87 + <!-- 只有审核状态为3时才显示上架/下架按钮 -->
86 - @click="toggleOffline(car)" 88 + <nut-button
87 - > 89 + v-if="car.review_status === 3"
88 - {{ car.status === 5 ? '上架' : '下架' }} 90 + @click.stop="toggleOffline(car)"
89 - </nut-button> 91 + size="small"
90 - <nut-button 92 + :type="car.status === 5 ? 'success' : 'warning'"
91 - v-if="car.review_status === 5" 93 + class="px-3 py-1 rounded-full text-sm mr-2"
92 - size="small" 94 + >
93 - type="success" 95 + {{ car.status === 5 ? '上架' : '下架' }}
94 - @click="toggleOnline(car)" 96 + </nut-button>
95 - > 97 + <nut-button
96 - 上架 98 + v-if="car.review_status === 5"
97 - </nut-button> 99 + @click.stop="toggleOnline(car)"
98 - <nut-button 100 + size="small"
99 - v-if="car.verification_status === 1 || car.verification_status === 7" 101 + type="success"
100 - size="small" 102 + class="px-3 py-1 rounded-full text-sm mr-2"
101 - type="primary" 103 + >
102 - @click="authCar(car.id)" 104 + 上架
103 - > 105 + </nut-button>
104 - 认证 106 + <nut-button
105 - </nut-button> 107 + v-if="car.verification_status === 1 || car.verification_status === 7"
108 + @click.stop="authCar(car.id)"
109 + size="small"
110 + type="primary"
111 + color="orange"
112 + class="px-3 py-1 rounded-full text-sm"
113 + >
114 + 认证
115 + </nut-button>
116 + </view>
117 + </view>
106 </view> 118 </view>
107 </view> 119 </view>
108 </view> 120 </view>
......