Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0d0b9d70 1 parent 5626cd04

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

- 将px单位转换为rpx以适配不同屏幕
- 调整状态标签位置至车辆信息区域
- 简化按钮样式并移除冗余形状属性
- 更新弹窗标题为更友好的提示文本
- 增加价格字体大小以提升可读性
Inline Side-by-side
Showing 4 changed files with 74 additions and 80 deletions
.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;
height: 150px;
margin-bottom: 30px;
width: 400rpx;
height: 300rpx;
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;
margin-bottom: 20px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 32rpx;
margin-bottom: 40rpx;
padding: 40rpx;
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: 8px;
gap: 16rpx;
margin-top: 16rpx;
margin-bottom: 24rpx;
}
.status-badge {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 12px;
font-size: 22px;
gap: 8rpx;
padding: 8rpx 16rpx;
border-radius: 24rpx;
font-size: 22rpx;
color: white;
&.verified {
......@@ -89,15 +86,15 @@
}
.status-icon {
width: 16px;
height: 16px;
width: 32rpx;
height: 32rpx;
}
/* 车辆图片 */
.car-image-container {
width: 100%;
height: 150px;
border-radius: 12px;
height: 300rpx;
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;
margin-bottom: 12px;
gap: 32rpx;
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;
font-size: 28px;
gap: 24rpx;
font-size: 28rpx;
color: #666;
}
/* 没有更多数据 */
.no-more {
text-align: center;
padding: 40px 0;
font-size: 28px;
padding: 80rpx 0;
font-size: 28rpx;
color: #999;
}
/* 响应式适配 */
@media (max-width: 750px) {
@media (max-width: 750rpx) {
.car-list {
padding: 15px;
padding: 30rpx;
}
.car-card {
padding: 15px;
margin-bottom: 15px;
padding: 30rpx;
margin-bottom: 30rpx;
}
.car-title {
font-size: 32px;
font-size: 32rpx;
}
.detail-item {
font-size: 24px;
padding: 3px 10px;
font-size: 24rpx;
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;
padding: 3px 6px;
font-size: 20rpx;
padding: 6rpx 12rpx;
}
.status-icon {
width: 14px;
height: 14px;
width: 28rpx;
height: 28rpx;
}
}
......
<!--
* @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"
......
<!--
* @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">
......
<!--
* @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>
......