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 217 additions and 36 deletions
/* 我的车辆页面样式 */
.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;
......
......@@ -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-for="car in carList" :key="car.id" class="car-card">
<!-- 使用 nut-row 和 nut-col 布局 -->
<nut-row :gutter="10">
<!-- 左侧：车辆图片 -->
<nut-col :span="6">
<view class="car-image-container">
<image :src="car.front_photo" class="car-image" mode="aspectFill" />
<!-- 车辆列表 -->
<view v-else class="space-y-4">
<view
v-for="car in carList"
:key="car.id"
@tap="() => goToCarDetail(car.id)"
style="border-bottom: 1px solid #e5e7eb"
>
<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>
<!-- 右侧：车辆信息 -->
<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="flex-1 ml-4">
<text class="font-medium text-base block">{{ car.manufacture_year }}款 {{ car.brand }} {{ car.model }}</text>
<!-- 状态标识 -->
<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="detail-item">续航 {{ car.range_km }}km | 最高时速 {{ car.max_speed_kmh }}km/h</text>
</view>
<text class="text-sm text-gray-500 mt-1 block">续航{{ car.range_km }}km | 最高时速{{ car.max_speed_kmh }}km/h</text>
<!-- 审核原因 -->
<view v-if="car.review_reason" class="verification-reason mt-2">
<!-- <text class="text-xs text-red-500">审核结果：{{ car.review_reason }}</text> -->
<view v-if="car.review_reason" class="verification-reason mt-1">
<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 v-if="car.price" class="current-price">
<text :class="{ 'sold-price': car.is_sold }">¥{{ car.price }}</text>
<text v-if="car.is_sold" class="sold-label">已售出</text>
</view>
<view v-if="car.market_price && !car.is_sold" class="market-price">市场价 ¥{{ car.market_price }}</view>
<view class="mt-2 flex justify-between items-center">
<view>
<text v-if="car.price" class="text-orange-500 font-bold" style="font-size: 1.2rem;" :class="{ 'sold-price': car.is_sold }">
¥{{ car.price.toLocaleString() }}
</text>
<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">
<nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
<view v-if="!car.is_sold" class="action-buttons mt-4">
<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">
......