team/qncV4uni-app
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

f

Browse Source
This commit is contained in:
Mrx
2026-05-22 16:28:50 +08:00
parent d18feb3090
commit ae6dce5546
34 changed files with 2456 additions and 1015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/pages/index.vue
View File

@@ -32,9 +32,6 @@ const caseList = ref<CaseItem[]>([
const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
/** 首页展示的前5个车辆服务 + "更多"入口（2×3） */
const vehicleGridItems = computed(() => vehicleItems.value.slice(0, 5))
/** 首页热门工具 2×3 网格 */
const hotTools = computed(() =>
['tianqishiju', 'jieqi', 'blood', 'zodiac', 'saylove', 'nethot']
@@ -78,10 +75,6 @@ function goInquireFeature(feature: string) {
uni.navigateTo({ url: `/pages/inquire/index?feature=${encodeURIComponent(feature)}` })
}
function goVinClaim() { goInquireFeature('toc_VehicleClaimDetail') }
function goVinMaintain() { goInquireFeature('toc_VehicleMaintenanceDetail') }
function goEvHealth() { uni.showToast({ title: '功能开发中', icon: 'none' }) }
function goToolboxItem(key: string) {
uni.navigateTo({ url: `/pages/toolbox/query?key=${encodeURIComponent(key)}` })
}
@@ -109,46 +102,24 @@ function goVehicleList() {
<text class="title">车辆查询服务</text>
<text class="sub">专业车况核验</text>
</view>
<!-- 核心服务：三大金刚 -->
<view class="core-row">
<view class="core-item" @tap="goVinClaim">
<view class="core-item-icon-wrap" style="background: linear-gradient(135deg, #e8f0fe, #d4e4fd)">
<view class="core-item-icon i-carbon-document" style="color: #1768ff" />
</view>
<text class="core-item-name">出险详版</text>
</view>
<view class="core-item" @tap="goVinMaintain">
<view class="core-item-icon-wrap" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2)">
<view class="core-item-icon i-carbon-tools" style="color: #fa8c16" />
</view>
<text class="core-item-name">维保详版</text>
</view>
<view class="core-item" @tap="goEvHealth">
<view class="core-item-icon-wrap" style="background: linear-gradient(135deg, #e0f7fa, #b2ebf2)">
<view class="core-item-icon i-carbon-battery-half" style="color: #00838f" />
</view>
<text class="core-item-name">电池健康</text>
</view>
</view>
<!-- 更多车辆服务 -->
<view class="vehicle-grid">
<view
v-for="item in vehicleGridItems"
v-for="item in vehicleItems.slice(0, 7)"
:key="item.feature"
class="vehicle-cell"
@tap="goInquireFeature(item.feature)"
>
<view class="vehicle-icon-wrap">
<image class="vehicle-icon" :src="getInquiryItemIconUrl(item)" mode="aspectFit" />
<text class="vehicle-name">{{ item.name }}</text>
</view>
<text class="vehicle-name">{{ item.name }}</text>
</view>
<!-- 更多服务入口 -->
<view class="vehicle-cell vehicle-cell--more" @tap="goVehicleList">
<view class="vehicle-icon-wrap vehicle-icon-wrap--more">
<view class="i-carbon-overflow-menu-horizontal vehicle-more-icon" />
<text class="vehicle-name">更多服务</text>
</view>
<text class="vehicle-name">更多服务</text>
</view>
</view>
</view>
@@ -172,8 +143,8 @@ function goVehicleList() {
>
<view class="hot-tool-icon-wrap">
<view :class="item.icon" class="hot-tool-icon" />
<text class="hot-tool-name">{{ item.name }}</text>
</view>
<text class="hot-tool-name">{{ item.name }}</text>
</view>
</view>
</view>
@@ -200,8 +171,8 @@ function goVehicleList() {
>
<view class="daily-icon-wrap">
<view :class="item.icon" class="daily-icon" />
<text class="daily-name">{{ item.name }}</text>
</view>
<text class="daily-name">{{ item.name }}</text>
</view>
</view>
</view>
@@ -267,42 +238,6 @@ page {
display: block;
}
/* 核心服务行（三大金刚） */
.core-row {
display: flex;
gap: 16rpx;
margin-bottom: 20rpx;
}
.core-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0 16rpx;
border-radius: 20rpx;
background: #f7f8fa;
}
.core-item:active {
background: #eef1f5;
}
.core-item-icon-wrap {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10rpx;
}
.core-item-icon {
font-size: 36rpx;
}
.core-item-name {
font-size: 22rpx;
color: #333;
font-weight: 500;
}
/* 区块通用 */
.section {
background: #fff;
@@ -340,54 +275,66 @@ page {
color: #86909c;
}
/* 车辆查询 2×3 网格 */
/* 车辆查询 2×4 网格 */
.vehicle-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
grid-template-columns: repeat(4, 1fr);
gap: 12rpx;
}
.vehicle-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24rpx 8rpx;
border-radius: 20rpx;
position: relative;
border-radius: 16rpx;
background: #f7f8fa;
height: 160rpx;
overflow: hidden;
}
.vehicle-cell:active {
background: #eef1f5;
}
.vehicle-icon-wrap {
width: 80rpx;
height: 80rpx;
border-radius: 24rpx;
position: relative;
width: 100%;
height: 100%;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.vehicle-icon-wrap--more {
background: #f7f8fa;
}
.vehicle-icon {
width: 90rpx;
height: 90rpx;
opacity: 1;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12rpx;
background: linear-gradient(135deg, #e8f0fe, #d4e4fd);
}
.vehicle-icon-wrap--more {
background: linear-gradient(135deg, #fff7e6, #ffe7ba);
}
.vehicle-icon {
width: 44rpx;
height: 44rpx;
object-fit: contain;
}
.vehicle-more-icon {
font-size: 36rpx;
font-size: 80rpx;
opacity: 1;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: #fa8c16;
}
.vehicle-name {
font-size: 22rpx;
flex: 0 0 auto;
font-size: 20rpx;
color: #333;
text-align: center;
line-height: 1.3;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
padding: 0 4rpx 6rpx;
}
/* 热门工具 2×3 网格 */
@@ -397,26 +344,27 @@ page {
gap: 16rpx;
}
.hot-tool-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24rpx 8rpx;
position: relative;
padding: 0;
border-radius: 20rpx;
background: #f7f8fa;
transition: background 0.2s;
height: 200rpx;
overflow: hidden;
}
.hot-tool-card:active {
background: #eef1f5;
}
.hot-tool-icon-wrap {
width: 80rpx;
height: 80rpx;
border-radius: 24rpx;
position: relative;
width: 100%;
height: 100%;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 12rpx;
overflow: hidden;
}
.hot-tool-card--c0 .hot-tool-icon-wrap {
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
@@ -430,27 +378,37 @@ page {
.hot-tool-card--c3 .hot-tool-icon-wrap {
background: linear-gradient(135deg, #f3e5f5, #e1bee7);
}
.hot-tool-icon {
font-size: 100rpx;
opacity: 0.15;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.hot-tool-card--c0 .hot-tool-icon {
font-size: 40rpx;
color: #43a047;
}
.hot-tool-card--c1 .hot-tool-icon {
font-size: 40rpx;
color: #1e88e5;
}
.hot-tool-card--c2 .hot-tool-icon {
font-size: 40rpx;
color: #e53935;
}
.hot-tool-card--c3 .hot-tool-icon {
font-size: 40rpx;
color: #8e24aa;
}
.hot-tool-name {
flex: 0 0 auto;
font-size: 22rpx;
color: #333;
text-align: center;
line-height: 1.3;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4rpx 8rpx;
}
/* 每日推荐 */
@@ -491,25 +449,26 @@ page {
gap: 14rpx;
}
.daily-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx 4rpx;
position: relative;
padding: 0;
border-radius: 16rpx;
background: #f7f8fa;
height: 180rpx;
overflow: hidden;
}
.daily-card:active {
background: #eef1f5;
}
.daily-icon-wrap {
width: 64rpx;
height: 64rpx;
border-radius: 18rpx;
position: relative;
width: 100%;
height: 100%;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
overflow: hidden;
}
.daily-card--c0 .daily-icon-wrap {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
@@ -524,7 +483,13 @@ page {
background: linear-gradient(135deg, #f3e5f5, #e1bee7);
}
.daily-icon {
font-size: 32rpx;
font-size: 90rpx;
opacity: 0.15;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.daily-card--c0 .daily-icon {
color: #ef6c00;
@@ -539,14 +504,19 @@ page {
color: #7b1fa2;
}
.daily-name {
flex: 0 0 auto;
font-size: 20rpx;
color: #333;
text-align: center;
line-height: 1.3;
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4rpx 8rpx;
}
/* 案例 */