From 6137c69034fb5dfbc479f2b65aab39b92c864b86 Mon Sep 17 00:00:00 2001
From: Mrx <18278715334@163.com>
Date: Thu, 21 May 2026 12:00:38 +0800
Subject: [PATCH] f

---
 pages.config.js                      |   8 +-
 src/config/toolboxRegistry.js        |  74 ++-
 src/pages.json                       |  20 +-
 src/pages/index.vue                  | 874 ++++++++++++++-------------
 src/pages/inquire/index.vue          | 115 ++--
 src/pages/inquire/list.vue           | 190 ++++++
 src/pages/mine.vue                   | 840 +++++++++++++------------
 src/pages/toolbox/category.vue       | 418 +++++++++++--
 src/pages/toolbox/index.vue          | 431 +++++++++----
 src/pages/toolbox/query.vue          | 143 ++++-
 src/static/tabbar/toolbox-active.png | Bin 0 -> 468 bytes
 src/static/tabbar/toolbox.png        | Bin 0 -> 464 bytes
 uni-pages.d.ts                       |   3 +-
 13 files changed, 2080 insertions(+), 1036 deletions(-)
 create mode 100644 src/pages/inquire/list.vue
 create mode 100644 src/static/tabbar/toolbox-active.png
 create mode 100644 src/static/tabbar/toolbox.png

diff --git a/pages.config.js b/pages.config.js
index c36673a..b70c6de 100644
--- a/pages.config.js
+++ b/pages.config.js
@@ -26,10 +26,10 @@ export default defineUniPages({
         selectedIconPath: 'static/tabbar/home-active.png',
       },
       {
-        pagePath: 'pages/report',
-        text: '报告',
-        iconPath: 'static/tabbar/report.png',
-        selectedIconPath: 'static/tabbar/report-active.png',
+        pagePath: 'pages/toolbox/index',
+        text: '工具',
+        iconPath: 'static/tabbar/toolbox.png',
+        selectedIconPath: 'static/tabbar/toolbox-active.png',
       },
       {
         pagePath: 'pages/mine',
diff --git a/src/config/toolboxRegistry.js b/src/config/toolboxRegistry.js
index 03bdb40..1b48bcb 100644
--- a/src/config/toolboxRegistry.js
+++ b/src/config/toolboxRegistry.js
@@ -1087,6 +1087,63 @@ export const toolboxItems = [
       index: '热度',
     },
   },
+  {
+    key: 'star',
+    name: '星座运势',
+    desc: '查询十二星座今日运势（娱乐）',
+    icon: 'i-carbon-star',
+    fields: [
+      { key: 'astro', label: '星座', type: 'select', mode: 'selector', options: [
+        { label: '白羊座', value: '白羊座' },
+        { label: '金牛座', value: '金牛座' },
+        { label: '双子座', value: '双子座' },
+        { label: '巨蟹座', value: '巨蟹座' },
+        { label: '狮子座', value: '狮子座' },
+        { label: '处女座', value: '处女座' },
+        { label: '天秤座', value: '天秤座' },
+        { label: '天蝎座', value: '天蝎座' },
+        { label: '射手座', value: '射手座' },
+        { label: '摩羯座', value: '摩羯座' },
+        { label: '水瓶座', value: '水瓶座' },
+        { label: '双鱼座', value: '双鱼座' },
+      ], placeholder: '请选择星座' },
+    ],
+    validate: (form) => (form.astro || '').length > 0,
+    validateMsg: '请选择星座',
+    resultType: 'list',
+    resultLabels: {
+      type: '运势类型',
+      content: '运势内容',
+    },
+  },
+  {
+    key: 'tianqishiju',
+    name: '天气诗句',
+    desc: '根据天气类型随机返回经典诗句',
+    icon: 'i-carbon-cloud',
+    fields: [
+      { key: 'tqtype', label: '天气类型', type: 'select', mode: 'selector', options: [
+        { label: '风', value: 1 },
+        { label: '云', value: 2 },
+        { label: '雨', value: 3 },
+        { label: '雪', value: 4 },
+        { label: '霜', value: 5 },
+        { label: '露', value: 6 },
+        { label: '雾', value: 7 },
+        { label: '雷', value: 8 },
+        { label: '晴', value: 9 },
+        { label: '阴', value: 10 },
+      ], placeholder: '可选，选择天气类型' },
+    ],
+    validate: () => true,
+    validateMsg: '',
+    resultLabels: {
+      content: '诗句',
+      author: '作者',
+      source: '出处',
+      weather: '天气',
+    },
+  },
   {
     key: 'verse',
     name: '诗词名句',
@@ -1457,7 +1514,9 @@ export const toolboxItems = [
     resultLabels: {
       name: '名称',
       type_name: '分类',
-      explain: '说明',
+      explain: '分类说明',
+      contain: '包含类型',
+      tip: '投放提示',
     },
   },
   {
@@ -2214,17 +2273,19 @@ export const toolboxItems = [
   },
   {
     key: 'anslajifenlei',
-    name: '按师垃圾分类',
-    desc: '按垃圾分类指南',
+    name: '垃圾分类问答',
+    desc: '随机出现一个物品，选出它属于哪种垃圾分类，考考你的环保知识',
     icon: 'i-carbon-recycle',
     autoQuery: true,
+    isGame: true,
     fields: [],
     validate: () => true,
     validateMsg: '',
-    resultType: 'list',
     resultLabels: {
-      name: '名称',
-      type_name: '分类',
+      name: { label: '物品名称' },
+      type: { label: '正确分类', hidden: true },
+      type_name: { label: '分类名称', hidden: true },
+      explain: { label: '分类说明', hidden: true },
     },
   },
   {
@@ -2268,6 +2329,7 @@ export const toolboxItems = [
       content: '问候语',
     },
   },
+  
   {
     key: 'story',
     name: '故事大全',
diff --git a/src/pages.json b/src/pages.json
index c93e317..0955eac 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -74,6 +74,16 @@
         "navigationBarTextStyle": "black"
       }
     },
+    {
+      "path": "pages/inquire/list",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "车辆查询服务",
+        "navigationStyle": "default",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
     {
       "path": "pages/legal/authorization",
       "type": "page",
@@ -128,7 +138,7 @@
       "path": "pages/toolbox/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "实用工具",
+        "navigationBarTitleText": "工具分类",
         "navigationStyle": "default",
         "navigationBarBackgroundColor": "#ffffff",
         "navigationBarTextStyle": "black"
@@ -161,10 +171,10 @@
         "selectedIconPath": "static/tabbar/home-active.png"
       },
       {
-        "pagePath": "pages/report",
-        "text": "报告",
-        "iconPath": "static/tabbar/report.png",
-        "selectedIconPath": "static/tabbar/report-active.png"
+        "pagePath": "pages/toolbox/index",
+        "text": "工具",
+        "iconPath": "static/tabbar/toolbox.png",
+        "selectedIconPath": "static/tabbar/toolbox-active.png"
       },
       {
         "pagePath": "pages/mine",
diff --git a/src/pages/index.vue b/src/pages/index.vue
index e0a7daf..ff48e54 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { getInquireCategoryConfig, getInquiryItemIconUrl } from '@/config/inquireCategories'
-import { toolboxCategories, getCategoryHotTools } from '@/config/toolboxRegistry'
+import { getToolboxItem } from '@/config/toolboxRegistry'
 
 definePage({
   style: {
@@ -25,571 +25,591 @@ interface ReviewItem {
   content: string
 }
 
-type QuerySection = 'free' | 'paid'
-
 const caseList = ref<CaseItem[]>([
-  {
-    id: '1',
-    tag: '新能源电池查询',
-    vin: 'LBV8********0981',
-    model: '某品牌新能源车型',
-  },
-  {
-    id: '2',
-    tag: '里程异常检测',
-    vin: 'LSGN********3389',
-    model: '凯迪拉克 XT5',
-  },
+  { id: '1', tag: '新能源电池查询', vin: 'LBV8********0981', model: '某品牌新能源车型' },
+  { id: '2', tag: '里程异常检测', vin: 'LSGN********3389', model: '凯迪拉克 XT5' },
 ])
 
 const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
-const freeToolboxCategories = computed(() => toolboxCategories)
-const activeQuerySection = ref<QuerySection>('paid')
+
+/** 首页展示的前5个车辆服务 + "更多"入口（2×3） */
+const vehicleGridItems = computed(() => vehicleItems.value.slice(0, 5))
+
+/** 首页热门工具 2×3 网格 */
+const hotTools = computed(() =>
+  ['tianqishiju', 'jieqi', 'blood', 'zodiac', 'saylove', 'nethot']
+    .map(key => getToolboxItem(key))
+    .filter(Boolean),
+)
+
+/** 每日推荐候选池 */
+const dailyPool = [
+  'jixiong', 'naowan', 'joke', 'dujitang', 'dream', 'oilprice',
+  'caihongpi', 'riddle', 'decide', 'caipu', 'godreply', 'tiangou',
+  'story', 'targa', 'hsjz', 'zimi',
+]
+
+/** 随机从候选池中抽取 n 个 */
+function pickRandom(pool: string[], n: number): string[] {
+  const shuffled = [...pool].sort(() => Math.random() - 0.5)
+  return shuffled.slice(0, n)
+}
+
+const dailyKeys = ref<string[]>(pickRandom(dailyPool, 8))
+
+const dailyPicks = computed(() =>
+  dailyKeys.value.map(key => getToolboxItem(key)).filter(Boolean),
+)
+
+function refreshDaily() {
+  dailyKeys.value = pickRandom(dailyPool, 8)
+}
 
 const reviewList = ref<ReviewItem[]>([
-  {
-    id: '1',
-    name: '陈先生',
-    content: '查完车况再成交，心里更踏实，避免了重大事故车。',
-  },
-  {
-    id: '2',
-    name: '周女士',
-    content: '报告内容很详细，维保、出险一目了然，值得推荐。',
-  },
+  { id: '1', name: '陈先生', content: '查完车况再成交，心里更踏实，避免了重大事故车。' },
+  { id: '2', name: '周女士', content: '报告内容很详细，维保、出险一目了然，值得推荐。' },
 ])
 
 function reviewInitial(name: string) {
   return name.slice(0, 1) || '?'
 }
 
-function switchQuerySection(section: QuerySection) {
-  activeQuerySection.value = section
-}
-
 function goInquireFeature(feature: string) {
-  uni.navigateTo({
-    url: `/pages/inquire/index?feature=${encodeURIComponent(feature)}`,
-  })
+  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 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)}`,
-  })
+  uni.navigateTo({ url: `/pages/toolbox/query?key=${encodeURIComponent(key)}` })
 }
 
 function goCategory(categoryKey: string) {
-  uni.navigateTo({
-    url: `/pages/toolbox/category?category=${encodeURIComponent(categoryKey)}`,
-  })
+  uni.navigateTo({ url: `/pages/toolbox/category?category=${encodeURIComponent(categoryKey)}` })
+}
+
+function goVehicleList() {
+  uni.navigateTo({ url: '/pages/inquire/list' })
 }
 </script>
 
 <template>
-  <view class="page-root">
-    <scroll-view scroll-y class="scrollarea">
-      <view class="page">
-        <view class="banner">
-          <image
-            class="banner-img"
-            src="/static/home/images/Banner.png"
-            mode="widthFix"
-          />
-        </view>
+  <view class="page-container">
+    <scroll-view scroll-y class="scroll-view">
+      <!-- 1. Banner 头部 -->
+      <view class="banner-box">
+        <image class="banner" src="/static/home/images/Banner.png" mode="widthFix" />
+      </view>
 
-        <view class="card query-zone">
-          <view class="card-header">
-            <text class="card-title">
-              查询专区
-            </text>
-            <text class="card-sub">
-              免费工具 / 付费车况
-            </text>
+      <!-- 2. 车辆查询服务 -->
+      <view class="section">
+        <view class="section-header">
+          <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="query-section-grid">
-            <view
-              class="query-section-card"
-              :class="{ active: activeQuerySection === 'free' }"
-              @tap="switchQuerySection('free')"
-            >
-              <text class="query-section-label">
-                免费查询
-              </text>
-              <text class="query-section-desc">
-                点击查看工具分类
-              </text>
+          <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>
-            <view
-              class="query-section-card"
-              :class="{ active: activeQuerySection === 'paid' }"
-              @tap="switchQuerySection('paid')"
-            >
-              <text class="query-section-label">
-                付费查询
-              </text>
-              <text class="query-section-desc">
-                车辆出险 / 维保等
-              </text>
+            <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>
-
-        <template v-if="activeQuerySection === 'paid'">
-          <view class="main-query">
-            <view class="main-left card card-img-wrap" @tap="goVinClaim">
-              <image
-                class="main-left-img"
-                src="/static/home/images/VIN.png"
-                mode="widthFix"
-              />
-            </view>
-            <view class="main-right">
-              <view class="card card-img-wrap small-card-img" @tap="goVinMaintain">
-                <image
-                  class="main-right-img"
-                  src="/static/home/images/VIN2.png"
-                  mode="aspectFill"
-                />
-              </view>
-              <view class="card card-img-wrap small-card-img" @tap="goEvHealth">
-                <image
-                  class="main-right-img"
-                  src="/static/home/images/VIN3.png"
-                  mode="aspectFill"
-                />
-              </view>
-            </view>
-          </view>
-
-          <view class="card">
-            <view class="card-header">
-              <text class="card-title">
-                车辆查询
-              </text>
-              <text class="card-sub">
-                请选择查询类型
-              </text>
-            </view>
-            <view class="inq-grid">
-              <view
-                v-for="item in vehicleItems"
-                :key="item.feature"
-                class="inq-cell"
-                @tap="goInquireFeature(item.feature)"
-              >
-                <image
-                  class="inq-icon"
-                  :src="getInquiryItemIconUrl(item)"
-                  mode="aspectFit"
-                />
-                <text class="inq-name">{{ item.name }}</text>
-              </view>
-            </view>
-          </view>
-        </template>
-
-        <template v-else>
+        <!-- 更多车辆服务 -->
+        <view class="vehicle-grid">
           <view
-            v-for="cat in freeToolboxCategories"
-            :key="cat.key"
-            class="card"
+            v-for="item in vehicleGridItems"
+            :key="item.feature"
+            class="vehicle-cell"
+            @tap="goInquireFeature(item.feature)"
           >
-            <view class="card-header">
-              <view class="card-header-left">
-                <view class="cat-badge" :style="{ background: `${cat.color}15` }">
-                  <view :class="['cat-badge-icon', cat.icon]" :style="{ color: cat.color }" />
-                </view>
-                <text class="card-title">{{ cat.name }}</text>
-              </view>
-              <text class="card-more-link" @tap="goCategory(cat.key)">
-                查看更多
-              </text>
-            </view>
-            <view class="inq-grid">
-              <view
-                v-for="item in getCategoryHotTools(cat.key)"
-                :key="item.key"
-                class="inq-cell"
-                @tap="goToolboxItem(item.key)"
-              >
-                <view class="inq-icon-custom" :style="{ color: cat.color }">
-                  <view :class="item.icon" />
-                </view>
-                <text class="inq-name">{{ item.name }}</text>
-              </view>
+            <view class="vehicle-icon-wrap">
+              <image class="vehicle-icon" :src="getInquiryItemIconUrl(item)" mode="aspectFit" />
             </view>
+            <text class="vehicle-name">{{ item.name }}</text>
           </view>
-        </template>
-
-        <view class="card">
-          <view class="card-header">
-            <text class="card-title">
-              查询案例
-            </text>
-            <text class="card-sub">
-              已服务 290000+ 车主
-            </text>
-          </view>
-          <view
-            v-for="item in caseList"
-            :key="item.id"
-            class="case-item"
-          >
-            <view class="case-line">
-              <text class="case-tag">
-                {{ item.tag }}
-              </text>
-              <text class="case-vin">
-                {{ item.vin }}
-              </text>
-              <text class="case-model">
-                {{ item.model }}
-              </text>
+          <!-- 更多服务入口 -->
+          <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" />
             </view>
+            <text class="vehicle-name">更多服务</text>
           </view>
         </view>
+      </view>
 
-        <view class="card">
-          <view class="card-header">
-            <text class="card-title">
-              客户评价
-            </text>
+      <!-- 4. 热门工具 -->
+      <view class="section">
+        <view class="section-header">
+          <text class="title">万能工具（免费查询）</text>
+          <view class="more-link" @tap="goCategory('all')">
+            <text class="more-text">查看全部</text>
+            <text class="more-arrow">›</text>
           </view>
+        </view>
+        <view class="hot-tools-grid">
           <view
-            v-for="item in reviewList"
-            :key="item.id"
-            class="review-item"
+            v-for="(item, idx) in hotTools"
+            :key="item.key"
+            class="hot-tool-card"
+            :class="['hot-tool-card--c' + (idx % 4)]"
+            @tap="goToolboxItem(item.key)"
           >
-            <view class="review-avatar">
-              <text class="review-avatar-text">
-                {{ reviewInitial(item.name) }}
-              </text>
+            <view class="hot-tool-icon-wrap">
+              <view :class="item.icon" class="hot-tool-icon" />
             </view>
+            <text class="hot-tool-name">{{ item.name }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 5. 每日推荐 -->
+      <view class="section">
+        <view class="section-header">
+          <view class="daily-title-group">
+            <text class="title">每日推荐</text>
+            <text class="daily-badge">精选</text>
+          </view>
+          <view class="refresh-btn" @tap="refreshDaily">
+            <view class="i-carbon-renew refresh-icon" :class="{ 'refresh-icon--spin': false }" />
+            <text class="refresh-text">换一批</text>
+          </view>
+        </view>
+        <view class="daily-grid">
+          <view
+            v-for="(item, idx) in dailyPicks"
+            :key="item.key"
+            class="daily-card"
+            :class="['daily-card--c' + (idx % 4)]"
+            @tap="goToolboxItem(item.key)"
+          >
+            <view class="daily-icon-wrap">
+              <view :class="item.icon" class="daily-icon" />
+            </view>
+            <text class="daily-name">{{ item.name }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 6. 真实案例 -->
+      <view class="section">
+        <view class="section-header">
+          <text class="title">真实查询案例</text>
+          <text class="sub">已服务 29万+ 车主</text>
+        </view>
+        <view class="case-list">
+          <view v-for="item in caseList" :key="item.id" class="case-item">
+            <view class="case-tag">{{ item.tag }}</view>
+            <view class="case-vin">{{ item.vin }}</view>
+            <view class="case-model">{{ item.model }}</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 6. 用户评价 -->
+      <view class="section">
+        <view class="section-header">
+          <text class="title">用户真实评价</text>
+        </view>
+        <view class="review-list">
+          <view v-for="item in reviewList" :key="item.id" class="review-item">
+            <view class="avatar">{{ reviewInitial(item.name) }}</view>
             <view class="review-content">
-              <view class="review-name">
-                {{ item.name }}
-              </view>
-              <view class="review-text">
-                {{ item.content }}
-              </view>
+              <view class="username">{{ item.name }}</view>
+              <view class="content">{{ item.content }}</view>
             </view>
           </view>
         </view>
       </view>
+
+      <view style="height: 40rpx"></view>
     </scroll-view>
   </view>
 </template>
 
 <style scoped lang="scss">
-.page-root {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%);
+page {
+  background: #f5f7fa;
 }
-
-.scrollarea {
-  flex: 1;
-  min-height: 0;
-  height: 0;
-}
-
-.page {
-  padding: 24rpx 24rpx 40rpx;
+.page-container {
+  min-height: 100vh;
+  padding: 20rpx;
   box-sizing: border-box;
 }
-
-.banner {
-  margin-bottom: 24rpx;
-  border-radius: 24rpx;
-  overflow: hidden;
-  box-shadow: 0 18rpx 40rpx rgba(15, 35, 52, 0.05);
+.scroll-view {
+  height: 100%;
 }
 
-.banner-img {
+/* Banner */
+.banner-box {
+  border-radius: 24rpx;
+  overflow: hidden;
+  margin-bottom: 24rpx;
+  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.05);
+}
+.banner {
   width: 100%;
   display: block;
 }
 
-.query-zone {
-  padding-bottom: 24rpx;
-}
-
-.query-section-grid {
+/* 核心服务行（三大金刚） */
+.core-row {
   display: flex;
   gap: 16rpx;
+  margin-bottom: 20rpx;
 }
-
-.query-section-card {
+.core-item {
   flex: 1;
-  padding: 24rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx 0 16rpx;
   border-radius: 20rpx;
   background: #f7f8fa;
-  border: 2rpx solid transparent;
 }
-
-.query-section-card.active {
-  background: linear-gradient(145deg, #eef4ff 0%, #f5f8ff 100%);
-  border-color: #1768ff;
-  box-shadow: 0 12rpx 24rpx rgba(23, 104, 255, 0.08);
+.core-item:active {
+  background: #eef1f5;
 }
-
-.query-section-label {
-  display: block;
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1d2129;
+.core-item-icon-wrap {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10rpx;
 }
-
-.query-section-desc {
-  display: block;
-  margin-top: 10rpx;
+.core-item-icon {
+  font-size: 36rpx;
+}
+.core-item-name {
   font-size: 22rpx;
-  color: #86909c;
-  line-height: 1.5;
+  color: #333;
+  font-weight: 500;
 }
 
-.card {
-  background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
+/* 区块通用 */
+.section {
+  background: #fff;
   border-radius: 24rpx;
-  padding: 24rpx 24rpx 20rpx;
+  padding: 32rpx;
   margin-bottom: 24rpx;
-  border: 1rpx solid #e5e6f0;
-  box-shadow:
-    0 16rpx 40rpx rgba(15, 35, 52, 0.04),
-    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
 }
-
-.card-header {
+.section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 24rpx;
+}
+.title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1d2129;
+}
+.sub {
+  font-size: 24rpx;
+  color: #86909c;
+}
+.more-link {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+}
+.more-text {
+  font-size: 24rpx;
+  color: #86909c;
+}
+.more-arrow {
+  font-size: 28rpx;
+  color: #86909c;
 }
 
-.card-header-left {
+/* 车辆查询 2×3 网格 */
+.vehicle-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
+}
+.vehicle-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx 8rpx;
+  border-radius: 20rpx;
+  background: #f7f8fa;
+}
+.vehicle-cell:active {
+  background: #eef1f5;
+}
+.vehicle-icon-wrap {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 24rpx;
+  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;
+}
+.vehicle-more-icon {
+  font-size: 36rpx;
+  color: #fa8c16;
+}
+.vehicle-name {
+  font-size: 22rpx;
+  color: #333;
+  text-align: center;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* 热门工具 2×3 网格 */
+.hot-tools-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
+}
+.hot-tool-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx 8rpx;
+  border-radius: 20rpx;
+  background: #f7f8fa;
+  transition: background 0.2s;
+}
+.hot-tool-card:active {
+  background: #eef1f5;
+}
+.hot-tool-icon-wrap {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12rpx;
+}
+.hot-tool-card--c0 .hot-tool-icon-wrap {
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+}
+.hot-tool-card--c1 .hot-tool-icon-wrap {
+  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+}
+.hot-tool-card--c2 .hot-tool-icon-wrap {
+  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
+}
+.hot-tool-card--c3 .hot-tool-icon-wrap {
+  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
+}
+.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 {
+  font-size: 22rpx;
+  color: #333;
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* 每日推荐 */
+.daily-title-group {
   display: flex;
   align-items: center;
   gap: 12rpx;
 }
-
-.cat-badge {
-  width: 48rpx;
-  height: 48rpx;
-  border-radius: 14rpx;
+.daily-badge {
+  font-size: 20rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+  padding: 4rpx 14rpx;
+  border-radius: 16rpx;
+}
+.refresh-btn {
   display: flex;
   align-items: center;
-  justify-content: center;
-}
-
-.cat-badge-icon {
-  font-size: 28rpx;
-}
-
-.card-more-link {
-  font-size: 22rpx;
-  color: #86909c;
-  padding: 8rpx 16rpx;
+  gap: 6rpx;
+  padding: 8rpx 18rpx;
+  border-radius: 24rpx;
   background: #f2f3f5;
-  border-radius: 20rpx;
 }
-
-.card-more-link:active {
-  opacity: 0.7;
+.refresh-btn:active {
+  background: #e5e6eb;
 }
-
-.card-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #1d2129;
+.refresh-icon {
+  font-size: 26rpx;
+  color: #86909c;
 }
-
-.card-sub {
+.refresh-text {
   font-size: 22rpx;
   color: #86909c;
 }
-
-.grid-4 {
-  display: flex;
-  justify-content: space-between;
+.daily-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 14rpx;
 }
-
-.grid-4-second {
-  margin-top: 16rpx;
-}
-
-.grid-item {
-  width: 25%;
+.daily-card {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 8rpx;
+  justify-content: center;
+  padding: 20rpx 4rpx;
+  border-radius: 16rpx;
+  background: #f7f8fa;
 }
-
-.icon-svg {
+.daily-card:active {
+  background: #eef1f5;
+}
+.daily-icon-wrap {
   width: 64rpx;
   height: 64rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-bottom: 8rpx;
 }
-
-.grid-text {
-  font-size: 24rpx;
-  color: #4e5969;
+.daily-card--c0 .daily-icon-wrap {
+  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
 }
-
-.inq-grid {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -8rpx;
+.daily-card--c1 .daily-icon-wrap {
+  background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
 }
-
-.inq-cell {
-  width: 33.333%;
-  padding: 8rpx;
-  box-sizing: border-box;
+.daily-card--c2 .daily-icon-wrap {
+  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
 }
-
-.inq-icon {
-  width: 72rpx;
-  height: 72rpx;
-  display: block;
-  margin: 0 auto 10rpx;
+.daily-card--c3 .daily-icon-wrap {
+  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
 }
-
-.inq-icon-custom {
-  width: 72rpx;
-  height: 72rpx;
-  display: block;
-  margin: 0 auto 10rpx;
-  font-size: 48rpx;
-  color: #1768ff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.daily-icon {
+  font-size: 32rpx;
 }
-
-.inq-name {
-  display: block;
-  font-size: 22rpx;
-  color: #1d2129;
+.daily-card--c0 .daily-icon {
+  color: #ef6c00;
+}
+.daily-card--c1 .daily-icon {
+  color: #00838f;
+}
+.daily-card--c2 .daily-icon {
+  color: #c62828;
+}
+.daily-card--c3 .daily-icon {
+  color: #7b1fa2;
+}
+.daily-name {
+  font-size: 20rpx;
+  color: #333;
   text-align: center;
-  line-height: 1.35;
-  padding: 0 4rpx;
-  min-height: 60rpx;
-}
-
-.main-query {
-  display: flex;
-  align-items: stretch;
-  margin-bottom: 24rpx;
-}
-
-.main-left {
-  flex: 1.2;
-  margin-right: 16rpx;
-  min-width: 0;
-}
-
-.card-img-wrap {
-  padding: 0;
+  line-height: 1.3;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 
-.main-left-img {
-  width: 100%;
-  display: block;
-}
-
-.main-right {
-  flex: 1;
+/* 案例 */
+.case-list {
+  gap: 16rpx;
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  gap: 16rpx;
 }
-
-.small-card-img {
-  flex: 1;
-  padding: 0;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.main-right-img {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.case-item + .case-item {
-  margin-top: 12rpx;
-}
-
-.case-line {
+.case-item {
+  padding: 20rpx;
+  background: #f9fafb;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
   font-size: 22rpx;
-  color: #4e5969;
 }
-
 .case-tag {
   color: #1768ff;
-  margin-right: 10rpx;
+  font-weight: 600;
+  margin-right: 12rpx;
 }
-
 .case-vin {
-  margin-right: 10rpx;
+  color: #333;
+  margin-right: 12rpx;
+}
+.case-model {
+  color: #86909c;
 }
 
+/* 评价 */
+.review-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
 .review-item {
   display: flex;
-  margin-top: 16rpx;
+  align-items: flex-start;
 }
-
-.review-avatar {
-  width: 64rpx;
-  height: 64rpx;
+.avatar {
+  width: 60rpx;
+  height: 60rpx;
   border-radius: 50%;
-  margin-right: 16rpx;
-  background: linear-gradient(145deg, #e8f0ff 0%, #d4e4ff 100%);
+  background: #eef4ff;
+  color: #1768ff;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-weight: 700;
+  margin-right: 16rpx;
   flex-shrink: 0;
 }
-
-.review-avatar-text {
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #1768ff;
-}
-
 .review-content {
   flex: 1;
 }
-
-.review-name {
+.username {
   font-size: 24rpx;
   color: #1d2129;
-  margin-bottom: 4rpx;
+  margin-bottom: 6rpx;
 }
-
-.review-text {
+.content {
   font-size: 22rpx;
   color: #4e5969;
   line-height: 1.6;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/pages/inquire/index.vue b/src/pages/inquire/index.vue
index 5033501..33ace92 100644
--- a/src/pages/inquire/index.vue
+++ b/src/pages/inquire/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { onLoad } from '@dcloudio/uni-app'
 import { computed, onUnmounted, ref } from 'vue'
 import { getProductByEn, getUserDetail, postAuthSendSmsQuery, postPayPayment, postQueryService, postUploadImage } from '@/api'
@@ -21,12 +21,7 @@ const loading = ref(true)
 const productLoadOk = ref(false)
 const submitting = ref(false)
 const paying = ref(false)
-const featureData = ref<{
-  product_name?: string
-  description?: string
-  sell_price?: number
-  product_en?: string
-}>({})
+const featureData = ref({})
 
 const queryId = ref('')
 const showPaySheet = ref(false)
@@ -35,7 +30,7 @@ const vlphotoPreviewPath = ref('')
 const imageUrlUploading = ref(false)
 
 const countdown = ref(0)
-let smsTimer: ReturnType<typeof setInterval> | null = null
+let smsTimer = null
 
 const userTypeOptions = [
   { text: 'ETC开户人', value: '1' },
@@ -78,7 +73,7 @@ const isIdCardWomanValid = computed(() => /^\d{17}[\dX]$/i.test(formData.idCardW
 const isCreditCodeValid = computed(() => /^.{18}$/.test(formData.entCode || ''))
 
 onLoad((options) => {
-  feature.value = (options?.feature as string) || ''
+  feature.value = (options?.feature) || ''
   void loadProduct()
 })
 
@@ -119,10 +114,7 @@ async function loadProduct() {
   }
   loading.value = true
   try {
-    const res = await getProductByEn(feature.value) as {
-      code?: number
-      data?: typeof featureData.value
-    }
+    const res = await getProductByEn(feature.value)
     if (res?.code === 200 && res.data) {
       featureData.value = res.data
       productLoadOk.value = true
@@ -145,7 +137,7 @@ async function loadProduct() {
   }
 }
 
-function readToken(): string {
+function readToken() {
   try {
     const t = uni.getStorageSync('token')
     return typeof t === 'string' ? t : ''
@@ -155,17 +147,14 @@ function readToken(): string {
   }
 }
 
-async function ensureLoginAndMobile(): Promise<boolean> {
+async function ensureLoginAndMobile() {
   if (!readToken()) {
     uni.showToast({ title: '请先登录', icon: 'none' })
     uni.navigateTo({ url: '/pages/login' })
     return false
   }
   try {
-    const res = await getUserDetail() as {
-      code?: number
-      data?: { userInfo?: { mobile?: string } }
-    }
+    const res = await getUserDetail()
     const mobile = (res?.data?.userInfo?.mobile || '').trim()
     if (res?.code !== 200 || !/^1[3-9]\d{9}$/.test(mobile)) {
       uni.showModal({
@@ -188,11 +177,11 @@ async function ensureLoginAndMobile(): Promise<boolean> {
 }
 
 function validateField(
-  field: string,
-  value: unknown,
-  ok: (v: unknown) => boolean,
-  msg: string,
-): boolean {
+  field,
+  value,
+  ok,
+  msg,
+) {
   if (!isHasInput(field))
     return true
   if (!ok(value)) {
@@ -202,7 +191,7 @@ function validateField(
   return true
 }
 
-function validateAll(): boolean {
+function validateAll() {
   if (!formData.agreeToTerms) {
     uni.showToast({ title: '请阅读并同意用户协议与隐私政策', icon: 'none' })
     return false
@@ -240,17 +229,17 @@ function validateAll(): boolean {
   return true
 }
 
-function onUserTypePick(e: { detail: { value: string | number } }) {
+function onUserTypePick(e) {
   const idx = Number(e.detail.value)
   formData.userType = userTypeOptions[idx]?.value ?? '1'
 }
 
-function onAuthorizedPick(e: { detail: { value: string | number } }) {
+function onAuthorizedPick(e) {
   const idx = Number(e.detail.value)
   formData.authorized = authorizedOptions[idx]?.value ?? '1'
 }
 
-function onFirstRegChange(e: { detail: { value: string } }) {
+function onFirstRegChange(e) {
   formData.firstRegistrationDate = (e.detail.value || '').slice(0, 7)
 }
 
@@ -285,7 +274,7 @@ async function sendSmsCode() {
   if (!(await ensureLoginAndMobile()))
     return
   try {
-    const res = await postAuthSendSmsQuery({ mobile: formData.mobile, captchaVerifyParam: '' }) as { code?: number }
+    const res = await postAuthSendSmsQuery({ mobile: formData.mobile, captchaVerifyParam: '' })
     if (res?.code === 200) {
       uni.showToast({ title: '验证码已发送', icon: 'none' })
       startSmsCountdown()
@@ -296,7 +285,7 @@ async function sendSmsCode() {
   }
 }
 
-function chooseImageFile(maxBytes: number): Promise<{ path: string, base64: string }> {
+function chooseImageFile(maxBytes) {
   return new Promise((resolve, reject) => {
     uni.chooseImage({
       count: 1,
@@ -338,7 +327,7 @@ async function onPickImageUrl() {
   try {
     const { base64 } = await chooseImageFile(3 * 1024 * 1024)
     imageUrlUploading.value = true
-    const up = await postUploadImage(base64) as { code?: number, data?: { url?: string }, msg?: string }
+    const up = await postUploadImage(base64)
     if (up?.code === 200 && up.data?.url)
       formData.imageUrl = up.data.url
     else if (up?.msg)
@@ -371,11 +360,7 @@ async function doCreateQuery(captchaVerifyParam = '') {
   const res = await postQueryService(feature.value, {
     data: enc,
     captchaVerifyParam,
-  }) as {
-    code?: number
-    data?: { id?: string }
-    msg?: string
-  }
+  })
   return res
 }
 
@@ -419,7 +404,7 @@ async function onConfirmPay() {
     return
   }
   try {
-    await new Promise<void>((resolve, reject) => {
+    await new Promise((resolve, reject) => {
       uni.showModal({
         title: '重要提示',
         content: '请确认您了解本服务为大数据报告查询，付款前请仔细阅读产品说明。是否继续支付？',
@@ -443,17 +428,7 @@ async function onConfirmPay() {
       id: queryId.value,
       pay_method: 'wechat',
       pay_type: 'query',
-    }) as {
-      code?: number
-      data?: {
-        prepay_data?: Record<string, string>
-        prepayData?: Record<string, string>
-        prepay_id?: string
-        prepayId?: string
-        order_no?: string
-        orderNo?: string
-      }
-    }
+    })
 
     if (payRes?.code !== 200 || !payRes.data) {
       return
@@ -478,7 +453,7 @@ async function onConfirmPay() {
       return
     }
 
-    await new Promise<void>((resolve, reject) => {
+    await new Promise((resolve, reject) => {
       uni.requestPayment({
         provider: 'wxpay',
         timeStamp: String(prepay.timeStamp ?? prepay.timestamp ?? ''),
@@ -502,7 +477,7 @@ async function onConfirmPay() {
           resolve()
         },
         fail(err) {
-          const msg = (err as { errMsg?: string })?.errMsg || '支付未完成'
+          const msg = err?.errMsg || '支付未完成'
           uni.showToast({ title: msg.replace('requestPayment:fail ', ''), icon: 'none' })
           reject(err)
         },
@@ -528,8 +503,15 @@ async function onConfirmPay() {
     </view>
     <scroll-view v-else scroll-y class="scroll page-inner">
       <view class="card-container">
+        <!-- 顶部产品长图 -->
+        <view class="inquire-banner">
+          <image class="inquire-banner-img" src="/static/home/images/VIN.png" mode="widthFix" />
+          <view class="inquire-banner-overlay">
+            <text class="inquire-banner-title">{{ featureData.product_name || '查询服务' }}</text>
+          </view>
+        </view>
         <view class="card-header">
-          {{ featureData.product_name || feature || '查询' }}
+          请输入查询信息
         </view>
 
         <view class="section-row">
@@ -577,7 +559,7 @@ async function onConfirmPay() {
         </view>
         <view v-if="isHasInput('mobile')" class="field">
           <text class="label">手机号</text>
-          <input v-model="formData.mobile" class="input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="ph">
+          <input v-model="formData.mobile" class="input" type="number" :maxlength="11" placeholder="请输入手机号" placeholder-class="ph">
         </view>
         <view v-if="isHasInput('carLicense')" class="field">
           <text class="label">车牌号</text>
@@ -654,7 +636,7 @@ async function onConfirmPay() {
 
         <view v-if="isHasInput('verificationCode')" class="field code-row">
           <text class="label">验证码</text>
-          <input v-model="formData.verificationCode" class="input flex1" maxlength="6" placeholder="请输入验证码" placeholder-class="ph">
+          <input v-model="formData.verificationCode" class="input flex1" :maxlength="6" placeholder="请输入验证码" placeholder-class="ph">
           <view class="sms-btn" :class="{ disabled: isCountingDown || !isPhoneNumberValid }" @tap="sendSmsCode">
             {{ isCountingDown ? `${countdown}s重新获取` : '获取验证码' }}
           </view>
@@ -750,6 +732,33 @@ async function onConfirmPay() {
   padding: 24rpx 24rpx 48rpx;
 }
 
+/* 顶部产品图 */
+.inquire-banner {
+  position: relative;
+  border-radius: 16rpx;
+  overflow: hidden;
+  margin-bottom: 20rpx;
+}
+.inquire-banner-img {
+  width: 100%;
+  max-height: 260rpx;
+  display: block;
+}
+.inquire-banner-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 16rpx 24rpx;
+  background: linear-gradient(transparent, rgba(0,0,0,0.4));
+}
+.inquire-banner-title {
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #fff;
+  text-shadow: 0 1rpx 4rpx rgba(0,0,0,0.3);
+}
+
 .card-container {
   background: #fff;
   border-radius: 16rpx;
diff --git a/src/pages/inquire/list.vue b/src/pages/inquire/list.vue
new file mode 100644
index 0000000..20924a3
--- /dev/null
+++ b/src/pages/inquire/list.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getInquireCategoryConfig, getInquiryItemIconUrl } from '@/config/inquireCategories'
+
+definePage({
+  style: {
+    navigationBarTitleText: '车辆查询服务',
+    navigationStyle: 'default',
+    navigationBarBackgroundColor: '#ffffff',
+    navigationBarTextStyle: 'black',
+  },
+})
+
+const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
+
+function goInquireFeature(feature: string) {
+  uni.navigateTo({ url: `/pages/inquire/index?feature=${encodeURIComponent(feature)}` })
+}
+</script>
+
+<template>
+  <view class="page-root">
+    <scroll-view scroll-y class="scrollarea">
+      <view class="page">
+        <!-- 头部统计 -->
+        <view class="list-header">
+          <view class="list-header-icon">
+            <view class="i-carbon-car" />
+          </view>
+          <view class="list-header-info">
+            <text class="list-header-title">车辆查询服务</text>
+            <text class="list-header-desc">共 {{ vehicleItems.length }} 项专业车况核验服务</text>
+          </view>
+        </view>
+
+        <!-- 服务列表 -->
+        <view class="service-list">
+          <view
+            v-for="item in vehicleItems"
+            :key="item.feature"
+            class="service-item"
+            @tap="goInquireFeature(item.feature)"
+          >
+            <view class="svc-icon-wrap">
+              <image class="svc-icon" :src="getInquiryItemIconUrl(item)" mode="aspectFit" />
+            </view>
+            <view class="svc-content">
+              <text class="svc-name">{{ item.name }}</text>
+              <text class="svc-desc">{{ item.desc }}</text>
+            </view>
+            <text class="svc-arrow">›</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.page-root {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%);
+}
+
+.scrollarea {
+  flex: 1;
+  min-height: 0;
+  height: 0;
+}
+
+.page {
+  padding: 24rpx 24rpx 40rpx;
+  box-sizing: border-box;
+}
+
+.list-header {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 28rpx 28rpx;
+  background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
+  border-radius: 24rpx;
+  border: 1rpx solid #e5e6f0;
+  margin-bottom: 24rpx;
+  box-shadow: 0 16rpx 40rpx rgba(15, 35, 52, 0.04),
+              0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
+}
+
+.list-header-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(135deg, #e8f0fe, #d4e4fd);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 38rpx;
+  color: #1768ff;
+  flex-shrink: 0;
+}
+
+.list-header-info {
+  flex: 1;
+}
+
+.list-header-title {
+  display: block;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1d2129;
+  margin-bottom: 6rpx;
+}
+
+.list-header-desc {
+  display: block;
+  font-size: 24rpx;
+  color: #86909c;
+}
+
+.service-list {
+  background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
+  border-radius: 24rpx;
+  border: 1rpx solid #e5e6f0;
+  overflow: hidden;
+  box-shadow: 0 16rpx 40rpx rgba(15, 35, 52, 0.04),
+              0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
+}
+
+.service-item {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 24rpx 28rpx;
+  border-bottom: 1rpx solid #f2f3f5;
+}
+
+.service-item:last-child {
+  border-bottom: none;
+}
+
+.service-item:active {
+  background: #f7f8fa;
+}
+
+.svc-icon-wrap {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
+  background: linear-gradient(135deg, #e8f0fe, #d4e4fd);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.svc-icon {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.svc-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.svc-name {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 4rpx;
+}
+
+.svc-desc {
+  display: block;
+  font-size: 22rpx;
+  color: #86909c;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.svc-arrow {
+  font-size: 32rpx;
+  color: #c9cdd4;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/pages/mine.vue b/src/pages/mine.vue
index f71ce3e..d50dbea 100644
--- a/src/pages/mine.vue
+++ b/src/pages/mine.vue
@@ -329,120 +329,160 @@ onUnmounted(() => {
   <view class="page-root">
     <scroll-view scroll-y class="scrollarea">
       <view class="page">
-        <view class="banner mine-banner">
-          <view class="banner-text">
-            <view class="banner-title">
-              买车先查车况，更安心
-            </view>
-            <view class="banner-sub">
-              减少隐蔽事故车、泡水车、调表车风险
-            </view>
-          </view>
-          <view class="banner-illustration">
-            <view class="car-illus" />
-          </view>
-        </view>
 
-        <view class="card mine-user">
-          <view class="mine-user-main" @tap="handleUserTap">
-            <view class="mine-avatar-placeholder" />
-            <view class="mine-user-text">
-              <view class="mine-user-name">
-                {{ isLogin ? nickname : '您还没有登录，立即登录' }}
-              </view>
-              <view class="mine-user-desc">
-                {{ isLogin ? userDesc : '登录后可同步历史报告与收藏' }}
+        <!-- ═══ 区块1: 个人信息栏 ═══ -->
+        <view class="profile-card">
+          <view class="profile-bg" />
+          <view class="profile-content" @tap="handleUserTap">
+            <view class="profile-avatar">
+              <view class="avatar-inner">
+                <view class="avatar-icon i-carbon-user" />
               </view>
             </view>
-          </view>
-          <!-- #ifdef MP-WEIXIN -->
-          <view v-if="isLogin && !hasBoundMobile" class="mine-user-extra">
-            <text class="extra-link" @tap.stop="syncWxNickname">同步微信昵称</text>
-            <text class="extra-dot">·</text>
-            <text class="extra-hint">绑定手机后优先显示手机号</text>
-          </view>
-          <!-- #endif -->
-          <view
-            v-if="isLogin && !hasBoundMobile"
-            class="mine-bind-row"
-            @tap.stop="openBindModal"
-          >
-            <text class="mine-bind-text">绑定手机号</text>
-            <text class="mine-bind-arrow">›</text>
-          </view>
-        </view>
-
-        <view class="card">
-          <view class="grid-4">
-            <view class="grid-item" @tap="goHistoryReport">
-              <view class="icon-tool i-carbon-document" />
-              <view class="grid-text">
-                历史报告
-              </view>
+            <view class="profile-info">
+              <text class="profile-name">{{ isLogin ? nickname : '点击登录' }}</text>
+              <text class="profile-desc">{{ isLogin ? userDesc : '登录后可同步历史报告与收藏' }}</text>
             </view>
-            <view class="grid-item" @tap="goFreeValuation">
-              <view class="icon-tool i-carbon-chart-line" />
-              <view class="grid-text">
-                免费估值
-              </view>
+            <view class="profile-arrow">
+              <view class="i-carbon-chevron-right" />
+            </view>
+          </view>
+          <!-- 已登录未绑定手机 -->
+          <view v-if="isLogin && !hasBoundMobile" class="profile-actions">
+            <view class="action-btn" @tap.stop="openBindModal">
+              <view class="action-icon i-carbon-phone" />
+              <text class="action-text">绑定手机号</text>
             </view>
             <!-- #ifdef MP-WEIXIN -->
-            <button class="grid-item grid-item-btn" open-type="share" hover-class="grid-item-hover">
-              <view class="icon-tool i-carbon-share" />
-              <view class="grid-text">
-                分享好友
+            <view class="action-btn" @tap.stop="syncWxNickname">
+              <view class="action-icon i-carbon-edit" />
+              <text class="action-text">同步昵称</text>
+            </view>
+            <!-- #endif -->
+          </view>
+        </view>
+
+        <!-- ═══ 区块2: 快捷功能（4宫格） ═══ -->
+        <view class="section">
+          <view class="section-title">快捷功能</view>
+          <view class="quick-grid">
+            <view class="quick-item" @tap="goHistoryReport">
+              <view class="quick-icon-wrap" style="background: rgba(23,104,255,0.08)">
+                <view class="quick-icon i-carbon-document" style="color: #1768ff" />
               </view>
+              <text class="quick-name">历史报告</text>
+            </view>
+            <view class="quick-item" @tap="goFreeValuation">
+              <view class="quick-icon-wrap" style="background: rgba(250,140,22,0.08)">
+                <view class="quick-icon i-carbon-chart-line" style="color: #fa8c16" />
+              </view>
+              <text class="quick-name">免费估值</text>
+            </view>
+            <!-- #ifdef MP-WEIXIN -->
+            <button class="quick-item quick-item-btn" open-type="share" hover-class="quick-item-hover">
+              <view class="quick-icon-wrap" style="background: rgba(19,194,94,0.08)">
+                <view class="quick-icon i-carbon-share" style="color: #13c25e" />
+              </view>
+              <text class="quick-name">分享好友</text>
             </button>
             <!-- #endif -->
             <!-- #ifndef MP-WEIXIN -->
-            <view class="grid-item" @tap="goShareFallback">
-              <view class="icon-tool i-carbon-share" />
-              <view class="grid-text">
-                分享好友
+            <view class="quick-item" @tap="goShareFallback">
+              <view class="quick-icon-wrap" style="background: rgba(19,194,94,0.08)">
+                <view class="quick-icon i-carbon-share" style="color: #13c25e" />
               </view>
+              <text class="quick-name">分享好友</text>
             </view>
             <!-- #endif -->
-            <view class="grid-item" @tap="openCoopModal">
-              <view class="icon-tool i-carbon-enterprise" />
-              <view class="grid-text">
-                商务合作
+            <view class="quick-item" @tap="openCoopModal">
+              <view class="quick-icon-wrap" style="background: rgba(114,46,209,0.08)">
+                <view class="quick-icon i-carbon-enterprise" style="color: #722ed1" />
               </view>
+              <text class="quick-name">商务合作</text>
             </view>
           </view>
         </view>
 
-        <view class="card list-card">
-          <view class="list-item" @tap="goLegalUserAgreement">
-            <view class="list-icon i-carbon-document-blank" />
-            <text class="list-text">用户协议</text>
-          </view>
-          <view class="list-item" @tap="goLegalPrivacyPolicy">
-            <view class="list-icon i-carbon-security" />
-            <text class="list-text">隐私政策</text>
-          </view>
-          <view class="list-item" @tap="goLegalAuthorization">
-            <view class="list-icon i-carbon-certificate" />
-            <text class="list-text">授权书</text>
-          </view>
-          <view class="list-item" @tap="goHelp">
-            <view class="list-icon i-carbon-help" />
-            <text class="list-text">帮助中心</text>
-          </view>
-          
-        
-  
-          <button
-            class="list-item list-item-contact no-border"
-            open-type="contact"
-            hover-class="list-item-contact-hover"
-          >
-            <view class="list-icon i-carbon-chat" />
-            <view class="service-row">
-              <text class="list-text">在线客服</text>
-              <text class="service-time">人工客服 周一至周日 9:00-20:00</text>
+        <!-- ═══ 区块3: 常用工具 ═══ -->
+        <view class="section">
+          <view class="section-title">常用工具</view>
+          <view class="tool-list">
+            <view class="tool-row" @tap="goOilPrice">
+              <view class="tool-row-icon-wrap" style="background: rgba(23,104,255,0.08)">
+                <view class="tool-row-icon i-carbon-gas-station" style="color: #1768ff" />
+              </view>
+              <text class="tool-row-name">实时油价查询</text>
+              <text class="tool-row-arrow">›</text>
             </view>
-          </button>
+            <view class="tool-row" @tap="goIllegalCode">
+              <view class="tool-row-icon-wrap" style="background: rgba(250,140,22,0.08)">
+                <view class="tool-row-icon i-carbon-search" style="color: #fa8c16" />
+              </view>
+              <text class="tool-row-name">违章代码查询</text>
+              <text class="tool-row-arrow">›</text>
+            </view>
+          </view>
         </view>
+
+        <!-- ═══ 区块4: 服务与支持 ═══ -->
+        <view class="section">
+          <view class="section-title">服务与支持</view>
+          <view class="tool-list">
+            <button class="tool-row tool-row-btn no-border" open-type="contact" hover-class="tool-row-hover">
+              <view class="tool-row-icon-wrap" style="background: rgba(19,194,94,0.08)">
+                <view class="tool-row-icon i-carbon-chat" style="color: #13c25e" />
+              </view>
+              <view class="tool-row-text">
+                <text class="tool-row-name">在线客服</text>
+                <text class="tool-row-sub">周一至周日 9:00-20:00</text>
+              </view>
+            </button>
+            <view class="tool-row" @tap="goHelp">
+              <view class="tool-row-icon-wrap" style="background: rgba(114,46,209,0.08)">
+                <view class="tool-row-icon i-carbon-help" style="color: #722ed1" />
+              </view>
+              <text class="tool-row-name">帮助中心</text>
+              <text class="tool-row-arrow">›</text>
+            </view>
+            <view class="tool-row" @tap="goAbout">
+              <view class="tool-row-icon-wrap" style="background: rgba(78,89,105,0.08)">
+                <view class="tool-row-icon i-carbon-information" style="color: #4e5969" />
+              </view>
+              <text class="tool-row-name">关于我们</text>
+              <text class="tool-row-arrow">›</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- ═══ 区块5: 法律条款 ═══ -->
+        <view class="section">
+          <view class="section-title">法律条款</view>
+          <view class="tool-list">
+            <view class="tool-row" @tap="goLegalUserAgreement">
+              <view class="tool-row-icon-wrap" style="background: rgba(78,89,105,0.06)">
+                <view class="tool-row-icon i-carbon-document-blank" style="color: #86909c" />
+              </view>
+              <text class="tool-row-name">用户协议</text>
+              <text class="tool-row-arrow">›</text>
+            </view>
+            <view class="tool-row" @tap="goLegalPrivacyPolicy">
+              <view class="tool-row-icon-wrap" style="background: rgba(78,89,105,0.06)">
+                <view class="tool-row-icon i-carbon-security" style="color: #86909c" />
+              </view>
+              <text class="tool-row-name">隐私政策</text>
+              <text class="tool-row-arrow">›</text>
+            </view>
+            <view class="tool-row no-border" @tap="goLegalAuthorization">
+              <view class="tool-row-icon-wrap" style="background: rgba(78,89,105,0.06)">
+                <view class="tool-row-icon i-carbon-certificate" style="color: #86909c" />
+              </view>
+              <text class="tool-row-name">授权书</text>
+              <text class="tool-row-arrow">›</text>
+            </view>
+          </view>
+        </view>
+
+        <view style="height: 40rpx" />
       </view>
     </scroll-view>
 
@@ -531,7 +571,7 @@ onUnmounted(() => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%);
+  background: linear-gradient(180deg, #f0f5ff 0%, #f5f7fa 30%, #f3f5fb 100%);
 }
 
 .scrollarea {
@@ -541,143 +581,355 @@ onUnmounted(() => {
 }
 
 .page {
-  padding: 24rpx 24rpx 40rpx;
+  padding: 0 24rpx 40rpx;
   box-sizing: border-box;
 }
 
-.banner {
-  display: flex;
-  padding: 32rpx 28rpx;
+/* ═══ 区块1: 个人信息栏 ═══ */
+.profile-card {
+  position: relative;
+  border-radius: 0 0 32rpx 32rpx;
+  overflow: hidden;
   margin-bottom: 24rpx;
-  background: linear-gradient(135deg, #fff7f0 0%, #ffffff 100%);
-  border-radius: 24rpx;
-  box-shadow:
-    0 18rpx 40rpx rgba(15, 35, 52, 0.05),
-    0 0 0 1rpx rgba(226, 229, 239, 0.9);
 }
 
-.banner-text {
-  flex: 1;
+.profile-bg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #1768ff 0%, #4d94ff 60%, #7bb8ff 100%);
 }
 
-.banner-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1d2129;
-  margin-bottom: 8rpx;
-}
-
-.banner-sub {
-  font-size: 24rpx;
-  color: #4e5969;
-}
-
-.banner-illustration {
-  width: 180rpx;
+.profile-content {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: center;
+  padding: 48rpx 32rpx 32rpx;
+  gap: 20rpx;
 }
 
-.car-illus {
-  width: 160rpx;
-  height: 120rpx;
-  border-radius: 16rpx;
-  background: linear-gradient(145deg, #ffe8dc 0%, #ffc9a8 100%);
-  opacity: 0.95;
-}
-
-.card {
-  background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
-  border-radius: 24rpx;
-  padding: 24rpx 24rpx 20rpx;
-  margin-bottom: 24rpx;
-  border: 1rpx solid #e5e6f0;
-  box-shadow:
-    0 16rpx 40rpx rgba(15, 35, 52, 0.04),
-    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
-}
-
-.mine-user {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.mine-user-main {
-  display: flex;
-  align-items: center;
-}
-
-.mine-avatar-placeholder {
-  width: 80rpx;
-  height: 80rpx;
-  border-radius: 50%;
-  background-color: #f2f3f5;
-  margin-right: 20rpx;
+.profile-avatar {
   flex-shrink: 0;
 }
 
-.mine-user-text {
+.avatar-inner {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3rpx solid rgba(255, 255, 255, 0.4);
+}
+
+.avatar-icon {
+  font-size: 44rpx;
+  color: #fff;
+}
+
+.profile-info {
   flex: 1;
   min-width: 0;
 }
 
-.mine-user-name {
+.profile-name {
+  display: block;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 6rpx;
+}
+
+.profile-desc {
+  display: block;
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.profile-arrow {
+  flex-shrink: 0;
+  color: rgba(255, 255, 255, 0.6);
   font-size: 28rpx;
+}
+
+.profile-actions {
+  position: relative;
+  display: flex;
+  gap: 24rpx;
+  padding: 0 32rpx 28rpx;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 24rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.action-icon {
+  font-size: 24rpx;
+  color: #fff;
+}
+
+.action-text {
+  font-size: 22rpx;
+  color: #fff;
+}
+
+/* ═══ 区块通用 ═══ */
+.section {
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 28rpx 24rpx 8rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(15, 35, 52, 0.03);
+}
+
+.section-title {
+  font-size: 26rpx;
+  font-weight: 600;
   color: #1d2129;
-  margin-bottom: 4rpx;
+  margin-bottom: 20rpx;
+  padding-left: 4rpx;
 }
 
-.mine-user-desc {
-  font-size: 22rpx;
-  color: #86909c;
-}
-
-.mine-user-extra {
-  margin-top: 16rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid #f0f0f0;
-  font-size: 22rpx;
-  color: #86909c;
+/* ═══ 区块2: 快捷功能（4宫格） ═══ */
+.quick-grid {
   display: flex;
   flex-wrap: wrap;
+  padding-bottom: 16rpx;
+}
+
+.quick-item {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  padding: 12rpx 0;
 }
 
-.extra-link {
-  color: #1768ff;
+.quick-item-btn {
+  margin: 0;
+  padding: 12rpx 0;
+  border: none;
+  background: transparent;
+  line-height: normal;
+  font-size: inherit;
+  color: inherit;
+  box-sizing: border-box;
 }
 
-.extra-dot {
-  margin: 0 8rpx;
+.quick-item-btn::after {
+  display: none;
+}
+
+.quick-item-hover {
+  opacity: 0.7;
+}
+
+.quick-icon-wrap {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10rpx;
+}
+
+.quick-icon {
+  font-size: 36rpx;
+}
+
+.quick-name {
+  font-size: 22rpx;
+  color: #4e5969;
+  text-align: center;
+}
+
+/* ═══ 区块3/4/5: 列表行 ═══ */
+.tool-list {
+  padding-bottom: 8rpx;
+}
+
+.tool-row {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 4rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.tool-row:last-child {
+  border-bottom: none;
+}
+
+.tool-row:active {
+  background: #fafbfc;
+  border-radius: 12rpx;
+}
+
+.tool-row-btn {
+  margin: 0;
+  padding: 20rpx 4rpx;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  text-align: left;
+  line-height: inherit;
+  font-size: inherit;
+  color: inherit;
+  box-sizing: border-box;
+  width: 100%;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.tool-row-btn::after {
+  display: none;
+}
+
+.tool-row-hover {
+  background: rgba(23, 104, 255, 0.04);
+}
+
+.tool-row-icon-wrap {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16rpx;
+  flex-shrink: 0;
+}
+
+.tool-row-icon {
+  font-size: 28rpx;
+}
+
+.tool-row-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.tool-row-name {
+  flex: 1;
+  font-size: 26rpx;
+  color: #1d2129;
+}
+
+.tool-row-sub {
+  display: block;
+  font-size: 20rpx;
+  color: #ffb020;
+  margin-top: 2rpx;
+}
+
+.tool-row-arrow {
+  font-size: 28rpx;
+  color: #c9cdd4;
+  flex-shrink: 0;
+  margin-left: 8rpx;
+}
+
+.no-border {
+  border-bottom: none !important;
+}
+
+/* ═══ 弹窗样式 ═══ */
+.coop-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx;
+  box-sizing: border-box;
+}
+
+.coop-dialog {
+  width: 100%;
+  max-width: 600rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  padding: 36rpx 32rpx 28rpx;
+  box-sizing: border-box;
+}
+
+.coop-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #1d2129;
+  text-align: center;
+  margin-bottom: 12rpx;
+}
+
+.coop-hint {
+  font-size: 24rpx;
+  color: #86909c;
+  text-align: center;
+  margin-bottom: 28rpx;
+  line-height: 1.5;
+}
+
+.coop-qr {
+  display: block;
+  width: 360rpx;
+  height: 360rpx;
+  margin: 0 auto 28rpx;
+  border-radius: 12rpx;
+  background: #f7f8fa;
+}
+
+.coop-qr-placeholder {
+  width: 360rpx;
+  height: 360rpx;
+  margin: 0 auto 28rpx;
+  border-radius: 12rpx;
+  border: 2rpx dashed #dcdfe6;
+  background: #fafbfc;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx;
+  box-sizing: border-box;
+  gap: 12rpx;
+}
+
+.coop-qr-placeholder-text {
+  font-size: 22rpx;
+  color: #86909c;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.coop-qr-placeholder-sub {
+  font-size: 20rpx;
   color: #c9cdd4;
 }
 
-.extra-hint {
-  color: #86909c;
-}
-
-.mine-bind-row {
-  margin-top: 12rpx;
-  padding: 16rpx 0 4rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.mine-bind-text {
-  font-size: 26rpx;
-  color: #1768ff;
-  font-weight: 500;
-}
-
-.mine-bind-arrow {
-  font-size: 36rpx;
-  color: #1768ff;
-  line-height: 1;
+.coop-close {
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  background: linear-gradient(90deg, #1768ff 0%, #4d94ff 100%);
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 600;
+  border-radius: 40rpx;
 }
 
+/* ═══ 绑定手机弹窗 ═══ */
 .bind-mask {
   position: fixed;
   left: 0;
@@ -785,198 +1037,4 @@ onUnmounted(() => {
   color: #86909c;
   padding: 12rpx;
 }
-
-.grid-4 {
-  display: flex;
-  justify-content: space-between;
-}
-
-.grid-item {
-  width: 25%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 8rpx;
-}
-
-.grid-item-btn {
-  margin: 0;
-  padding: 8rpx 0 0;
-  border: none;
-  background: transparent;
-  line-height: normal;
-  font-size: inherit;
-  color: inherit;
-  box-sizing: border-box;
-}
-
-.grid-item-btn::after {
-  display: none;
-}
-
-.grid-item-hover {
-  opacity: 0.88;
-}
-
-.coop-mask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 1001;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48rpx;
-  box-sizing: border-box;
-}
-
-.coop-dialog {
-  width: 100%;
-  max-width: 600rpx;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 36rpx 32rpx 28rpx;
-  box-sizing: border-box;
-}
-
-.coop-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #1d2129;
-  text-align: center;
-  margin-bottom: 12rpx;
-}
-
-.coop-hint {
-  font-size: 24rpx;
-  color: #86909c;
-  text-align: center;
-  margin-bottom: 28rpx;
-  line-height: 1.5;
-}
-
-.coop-qr {
-  display: block;
-  width: 360rpx;
-  height: 360rpx;
-  margin: 0 auto 28rpx;
-  border-radius: 12rpx;
-  background: #f7f8fa;
-}
-
-.coop-qr-placeholder {
-  width: 360rpx;
-  height: 360rpx;
-  margin: 0 auto 28rpx;
-  border-radius: 12rpx;
-  border: 2rpx dashed #dcdfe6;
-  background: #fafbfc;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 24rpx;
-  box-sizing: border-box;
-  gap: 12rpx;
-}
-
-.coop-qr-placeholder-text {
-  font-size: 22rpx;
-  color: #86909c;
-  line-height: 1.6;
-  text-align: center;
-}
-
-.coop-qr-placeholder-sub {
-  font-size: 20rpx;
-  color: #c9cdd4;
-}
-
-.coop-close {
-  height: 80rpx;
-  line-height: 80rpx;
-  text-align: center;
-  background: linear-gradient(90deg, #1768ff 0%, #4d94ff 100%);
-  color: #fff;
-  font-size: 28rpx;
-  font-weight: 600;
-  border-radius: 40rpx;
-}
-
-.icon-tool {
-  width: 48rpx;
-  height: 48rpx;
-  margin-bottom: 8rpx;
-  color: #1768ff;
-}
-
-.grid-text {
-  font-size: 24rpx;
-  color: #4e5969;
-}
-
-.list-card {
-  padding: 0 24rpx;
-}
-
-.list-item {
-  height: 96rpx;
-  display: flex;
-  align-items: center;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-
-.list-item-contact {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: transparent;
-  text-align: left;
-  line-height: inherit;
-  font-size: inherit;
-  color: inherit;
-  box-sizing: border-box;
-}
-
-.list-item-contact::after {
-  display: none;
-}
-
-.list-item-contact-hover {
-  background: rgba(23, 104, 255, 0.06);
-}
-
-.list-icon {
-  width: 40rpx;
-  height: 40rpx;
-  margin-right: 20rpx;
-  flex-shrink: 0;
-  color: #1768ff;
-}
-
-.no-border {
-  border-bottom-width: 0;
-}
-
-.list-text {
-  font-size: 26rpx;
-  color: #1d2129;
-}
-
-.service-row {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.service-time {
-  font-size: 22rpx;
-  color: #ffb020;
-}
 </style>
diff --git a/src/pages/toolbox/category.vue b/src/pages/toolbox/category.vue
index 52ebe5b..4bb4fea 100644
--- a/src/pages/toolbox/category.vue
+++ b/src/pages/toolbox/category.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import { toolboxCategories, getCategoryAllTools } from '@/config/toolboxRegistry'
+import { toolboxCategories, toolboxItems, getCategoryAllTools } from '@/config/toolboxRegistry'
 
 definePage({
   style: {
@@ -15,11 +15,44 @@ definePage({
 const categoryKey = ref('')
 const category = ref<any>(null)
 const tools = ref<any[]>([])
+const isAllCategories = ref(false)
+
+/** 当前选中的 tab 索引 */
+const activeTab = ref(0)
+
+/** 搜索关键词 */
+const searchKeyword = ref('')
+
+/** 当前选中分类的完整数据 */
+const activeCategory = computed(() => toolboxCategories[activeTab.value] || toolboxCategories[0])
+
+/** 当前选中分类的全部工具 */
+const activeTools = computed(() => getCategoryAllTools(activeCategory.value.key))
+
+/** 是否正在搜索（有关键词） */
+const isSearching = computed(() => searchKeyword.value.trim().length > 0)
+
+/** 搜索结果：从所有工具中匹配名称 / 描述 / key */
+const searchResults = computed(() => {
+  const kw = searchKeyword.value.trim().toLowerCase()
+  if (!kw) return []
+  return toolboxItems.filter(item =>
+    item.name.toLowerCase().includes(kw)
+    || item.desc.toLowerCase().includes(kw)
+    || item.key.toLowerCase().includes(kw),
+  )
+})
 
 onLoad((query) => {
   const key = (query?.category as string) || ''
   categoryKey.value = key
 
+  if (key === 'all') {
+    isAllCategories.value = true
+    uni.setNavigationBarTitle({ title: '全部分类' })
+    return
+  }
+
   const cat = toolboxCategories.find(c => c.key === key)
   if (cat) {
     category.value = cat
@@ -28,6 +61,15 @@ onLoad((query) => {
   }
 })
 
+function switchTab(idx: number) {
+  activeTab.value = idx
+  searchKeyword.value = ''
+}
+
+function clearSearch() {
+  searchKeyword.value = ''
+}
+
 function goTool(key: string) {
   uni.navigateTo({
     url: `/pages/toolbox/query?key=${encodeURIComponent(key)}`,
@@ -37,37 +79,137 @@ function goTool(key: string) {
 
 <template>
   <view class="page-root">
-    <scroll-view scroll-y class="scrollarea">
-      <view class="page">
-        <view v-if="category" class="cat-header">
-          <view class="cat-icon-large" :style="{ background: `${category.color}15` }">
-            <view :class="['icon', category.icon]" :style="{ color: category.color }" />
-          </view>
-          <view class="cat-info">
-            <text class="cat-name">{{ category.name }}</text>
-            <text class="cat-count">共 {{ tools.length }} 个工具</text>
-          </view>
-        </view>
-
-        <view class="tool-list">
-          <view
-            v-for="item in tools"
-            :key="item.key"
-            class="tool-item"
-            @tap="goTool(item.key)"
-          >
-            <view class="item-icon-wrap" :style="{ background: category ? `${category.color}12` : '#e8f0fe' }">
-              <view :class="['item-icon', item.icon]" :style="{ color: category?.color || '#1768ff' }" />
-            </view>
-            <view class="item-content">
-              <text class="item-name">{{ item.name }}</text>
-              <text class="item-desc">{{ item.desc }}</text>
-            </view>
-            <!-- <text class="item-arrow"></text> -->
-          </view>
+    <!-- 全部分类视图 -->
+    <template v-if="isAllCategories">
+      <!-- 搜索栏 -->
+      <view class="search-bar">
+        <view class="search-input-wrap">
+          <view class="search-icon i-carbon-search" />
+          <input
+            class="search-input"
+            type="text"
+            placeholder="搜索工具名称"
+            placeholder-class="search-placeholder"
+            :value="searchKeyword"
+            confirm-type="search"
+            @input="searchKeyword = $event.detail.value"
+          />
+          <view v-if="isSearching" class="search-clear i-carbon-close-filled" @tap="clearSearch" />
         </view>
       </view>
-    </scroll-view>
+
+      <!-- Tab 栏（搜索时隐藏） -->
+      <view v-show="!isSearching" class="tab-bar-wrap">
+        <scroll-view scroll-x class="tab-scroll" :scroll-into-view="'tab-' + activeTab" :scroll-with-animation="true">
+          <view class="tab-bar">
+            <view
+              v-for="(cat, idx) in toolboxCategories"
+              :id="'tab-' + idx"
+              :key="cat.key"
+              class="tab-item"
+              :class="{ 'tab-item--active': activeTab === idx }"
+              @tap="switchTab(idx)"
+            >
+              <text class="tab-text" :class="{ 'tab-text--active': activeTab === idx }">{{ cat.name }}</text>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="tab-indicator-track">
+          <view
+            class="tab-indicator"
+            :style="{ width: `${100 / toolboxCategories.length}%`, transform: `translateX(${activeTab * 100}%)` }"
+          />
+        </view>
+      </view>
+
+      <!-- 搜索结果 / 工具网格 -->
+      <scroll-view scroll-y class="tool-scrollarea">
+        <view class="tool-grid-page">
+          <!-- 搜索结果视图 -->
+          <template v-if="isSearching">
+            <view v-if="searchResults.length === 0" class="search-empty">
+              <view class="search-empty-icon i-carbon-search" />
+              <text class="search-empty-text">未找到相关工具</text>
+            </view>
+            <template v-else>
+              <view class="grid-header">
+                <text class="grid-header-name">搜索结果</text>
+                <text class="grid-header-count">共 {{ searchResults.length }} 个</text>
+              </view>
+              <view class="tool-grid">
+                <view
+                  v-for="item in searchResults"
+                  :key="item.key"
+                  class="tool-cell"
+                  @tap="goTool(item.key)"
+                >
+                  <view class="tool-cell-icon-wrap" style="background: #eef4ff">
+                    <view :class="['tool-cell-icon', item.icon]" style="color: #1768ff" />
+                  </view>
+                  <text class="tool-cell-name">{{ item.name }}</text>
+                </view>
+              </view>
+            </template>
+          </template>
+
+          <!-- 正常 Tab 工具网格 -->
+          <template v-else>
+            <view class="grid-header">
+              <view class="grid-header-dot" :style="{ background: activeCategory.color }" />
+              <text class="grid-header-name">{{ activeCategory.name }}</text>
+              <text class="grid-header-count">共 {{ activeTools.length }} 个</text>
+            </view>
+            <view class="tool-grid">
+              <view
+                v-for="item in activeTools"
+                :key="item.key"
+                class="tool-cell"
+                @tap="goTool(item.key)"
+              >
+                <view class="tool-cell-icon-wrap" :style="{ background: `${activeCategory.color}12` }">
+                  <view :class="['tool-cell-icon', item.icon]" :style="{ color: activeCategory.color }" />
+                </view>
+                <text class="tool-cell-name">{{ item.name }}</text>
+              </view>
+            </view>
+          </template>
+        </view>
+      </scroll-view>
+    </template>
+
+    <!-- 单分类视图 -->
+    <template v-else-if="category">
+      <scroll-view scroll-y class="scrollarea">
+        <view class="page">
+          <view class="cat-header">
+            <view class="cat-icon-large" :style="{ background: `${category.color}15` }">
+              <view :class="['icon', category.icon]" :style="{ color: category.color }" />
+            </view>
+            <view class="cat-info">
+              <text class="cat-name">{{ category.name }}</text>
+              <text class="cat-count">共 {{ tools.length }} 个工具</text>
+            </view>
+          </view>
+
+          <view class="tool-list">
+            <view
+              v-for="item in tools"
+              :key="item.key"
+              class="tool-item"
+              @tap="goTool(item.key)"
+            >
+              <view class="item-icon-wrap" :style="{ background: category ? `${category.color}12` : '#e8f0fe' }">
+                <view :class="['item-icon', item.icon]" :style="{ color: category?.color || '#1768ff' }" />
+              </view>
+              <view class="item-content">
+                <text class="item-name">{{ item.name }}</text>
+                <text class="item-desc">{{ item.desc }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </template>
   </view>
 </template>
 
@@ -79,6 +221,204 @@ function goTool(key: string) {
   background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%);
 }
 
+/* ============ 搜索栏 ============ */
+.search-bar {
+  padding: 16rpx 24rpx 12rpx;
+  background: #fff;
+  flex-shrink: 0;
+}
+
+.search-input-wrap {
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+  background: #f5f6fa;
+  border-radius: 36rpx;
+  padding: 0 24rpx;
+  gap: 12rpx;
+}
+
+.search-icon {
+  font-size: 30rpx;
+  color: #c0c4cc;
+  flex-shrink: 0;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 26rpx;
+  color: #1d2129;
+  height: 72rpx;
+  line-height: 72rpx;
+}
+
+.search-placeholder {
+  color: #c0c4cc;
+  font-size: 26rpx;
+}
+
+.search-clear {
+  font-size: 30rpx;
+  color: #c0c4cc;
+  flex-shrink: 0;
+  padding: 8rpx;
+}
+
+.search-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120rpx 0 80rpx;
+}
+
+.search-empty-icon {
+  font-size: 80rpx;
+  color: #dcdfe6;
+  margin-bottom: 20rpx;
+}
+
+.search-empty-text {
+  font-size: 26rpx;
+  color: #86909c;
+}
+
+/* ============ Tab 栏 ============ */
+.tab-bar-wrap {
+  background: #fff;
+  flex-shrink: 0;
+  border-bottom: 1rpx solid #f0f1f5;
+}
+
+.tab-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.tab-bar {
+  display: flex;
+  height: 88rpx;
+  line-height: 88rpx;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8rpx;
+  position: relative;
+}
+
+.tab-text {
+  font-size: 28rpx;
+  color: #86909c;
+  transition: color 0.25s, font-weight 0.25s;
+}
+
+.tab-text--active {
+  color: #1d2129;
+  font-weight: 600;
+}
+
+/* 下划线指示器 */
+.tab-indicator-track {
+  height: 6rpx;
+  position: relative;
+  background: transparent;
+}
+
+.tab-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 6rpx;
+  border-radius: 3rpx;
+  background: #1768ff;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============ 工具网格区域 ============ */
+.tool-scrollarea {
+  flex: 1;
+  min-height: 0;
+}
+
+.tool-grid-page {
+  padding: 24rpx 24rpx 40rpx;
+  box-sizing: border-box;
+}
+
+.grid-header {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  margin-bottom: 24rpx;
+  padding: 0 4rpx;
+}
+
+.grid-header-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 4rpx;
+}
+
+.grid-header-name {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1d2129;
+}
+
+.grid-header-count {
+  font-size: 22rpx;
+  color: #86909c;
+  margin-left: auto;
+}
+
+/* 4列网格 */
+.tool-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tool-cell {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20rpx 4rpx;
+  box-sizing: border-box;
+}
+
+.tool-cell:active {
+  opacity: 0.7;
+}
+
+.tool-cell-icon-wrap {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 24rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10rpx;
+}
+
+.tool-cell-icon {
+  font-size: 38rpx;
+}
+
+.tool-cell-name {
+  font-size: 22rpx;
+  color: #333;
+  text-align: center;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* ============ 单分类详情 ============ */
 .scrollarea {
   flex: 1;
   min-height: 0;
@@ -99,9 +439,8 @@ function goTool(key: string) {
   border-radius: 24rpx;
   border: 1rpx solid #e5e6f0;
   margin-bottom: 24rpx;
-  box-shadow:
-    0 16rpx 40rpx rgba(15, 35, 52, 0.04),
-    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0 16rpx 40rpx rgba(15, 35, 52, 0.04),
+              0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
 }
 
 .cat-icon-large {
@@ -140,9 +479,8 @@ function goTool(key: string) {
   border-radius: 24rpx;
   border: 1rpx solid #e5e6f0;
   overflow: hidden;
-  box-shadow:
-    0 16rpx 40rpx rgba(15, 35, 52, 0.04),
-    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
+  box-shadow: 0 16rpx 40rpx rgba(15, 35, 52, 0.04),
+              0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
 }
 
 .tool-item {
@@ -196,10 +534,4 @@ function goTool(key: string) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.item-arrow {
-  font-size: 24rpx;
-  color: #c9cdd4;
-  flex-shrink: 0;
-}
 </style>
diff --git a/src/pages/toolbox/index.vue b/src/pages/toolbox/index.vue
index dc1b07f..2e5c248 100644
--- a/src/pages/toolbox/index.vue
+++ b/src/pages/toolbox/index.vue
@@ -1,68 +1,185 @@
 <script setup lang="ts">
-import { toolboxCategories, getCategoryHotTools } from '@/config/toolboxRegistry'
+import { ref, computed } from 'vue'
+import { toolboxCategories, getCategoryAllTools } from '@/config/toolboxRegistry'
+import { getInquireCategoryConfig, getInquiryItemIconUrl } from '@/config/inquireCategories'
 
 definePage({
   style: {
-    navigationBarTitleText: '实用工具',
+    navigationBarTitleText: '工具分类',
     navigationStyle: 'default',
     navigationBarBackgroundColor: '#ffffff',
     navigationBarTextStyle: 'black',
   },
 })
 
-function goTool(key: string) {
-  uni.navigateTo({
-    url: `/pages/toolbox/query?key=${encodeURIComponent(key)}`,
-  })
+const vehicleItems = computed(() => getInquireCategoryConfig('vehicle')?.items ?? [])
+
+/** 左侧分类列表：热门推荐 + 车辆查询 + 所有工具分类 */
+const sidebarItems = computed(() => [
+  { key: 'hot', name: '热门推荐', icon: '', color: '#ff6b6b' },
+  { key: 'vehicle', name: '车辆查询', icon: 'i-carbon-car', color: '#1768ff' },
+  ...toolboxCategories.map(cat => ({
+    key: cat.key,
+    name: cat.name,
+    icon: cat.icon,
+    color: cat.color,
+  })),
+])
+
+const activeKey = ref('hot')
+
+/** 当前选中分类的数据（仅工具分类有） */
+const activeCategory = computed(() => {
+  if (activeKey.value === 'hot' || activeKey.value === 'vehicle') return null
+  return toolboxCategories.find(c => c.key === activeKey.value) || null
+})
+
+/** 当前分类的工具列表 */
+const activeTools = computed(() => {
+  if (activeKey.value === 'hot' || activeKey.value === 'vehicle') return []
+  return getCategoryAllTools(activeKey.value)
+})
+
+/** 热门推荐的分类卡片：车辆查询 + 所有工具分类 */
+const hotCategoryCards = computed(() => [
+  { key: 'vehicle', name: '车辆查询', icon: 'i-carbon-car', color: '#1768ff', count: vehicleItems.value.length, previews: [] },
+  ...toolboxCategories.map(cat => ({
+    key: cat.key,
+    name: cat.name,
+    icon: cat.icon,
+    color: cat.color,
+    count: getCategoryAllTools(cat.key).length,
+    previews: getCategoryAllTools(cat.key).slice(0, 4),
+  })),
+])
+
+function switchCategory(key: string) {
+  activeKey.value = key
 }
 
-function goCategory(categoryKey: string) {
-  uni.navigateTo({
-    url: `/pages/toolbox/category?category=${encodeURIComponent(categoryKey)}`,
-  })
+function goTool(key: string) {
+  uni.navigateTo({ url: `/pages/toolbox/query?key=${encodeURIComponent(key)}` })
+}
+
+function goInquireFeature(feature: string) {
+  uni.navigateTo({ url: `/pages/inquire/index?feature=${encodeURIComponent(feature)}` })
 }
 </script>
 
 <template>
   <view class="page-root">
-    <scroll-view scroll-y class="scrollarea">
-      <view class="page">
+    <view class="layout">
+      <!-- 左侧分类导航 -->
+      <scroll-view scroll-y class="sidebar">
         <view
-          v-for="cat in toolboxCategories"
-          :key="cat.key"
-          class="card"
+          v-for="item in sidebarItems"
+          :key="item.key"
+          class="sidebar-item"
+          :class="{ 'sidebar-item--active': activeKey === item.key }"
+          @tap="switchCategory(item.key)"
         >
-          <!-- 分类标题 -->
-          <view class="card-header" @tap="goCategory(cat.key)">
-            <view class="card-header-left">
-              <view class="cat-icon-wrap" :style="{ background: `${cat.color}15` }">
-                <view :class="['cat-icon', cat.icon]" :style="{ color: cat.color }" />
-              </view>
-              <text class="card-title">{{ cat.name }}</text>
+          <view v-if="activeKey === item.key" class="sidebar-indicator" />
+          <text class="sidebar-text" :class="{ 'sidebar-text--active': activeKey === item.key }">{{ item.name }}</text>
+        </view>
+      </scroll-view>
+
+      <!-- 右侧内容区 -->
+      <scroll-view scroll-y class="content" :scroll-top="0">
+        <!-- 热门推荐：分类卡片网格 -->
+        <template v-if="activeKey === 'hot'">
+          <view class="content-header">
+            <view class="content-icon-wrap" style="background: rgba(255,107,107,0.1)">
+              <view class="content-icon i-carbon-grid" style="color: #ff6b6b" />
             </view>
-            <view class="card-more">
-              <text class="more-text">查看更多</text>
-              <!-- <text class="more-arrow">></text> -->
+            <view class="content-info">
+              <text class="content-title">热门推荐</text>
+              <text class="content-count">全部分类入口</text>
             </view>
           </view>
+          <view class="cat-grid">
+            <view
+              v-for="card in hotCategoryCards"
+              :key="card.key"
+              class="cat-card"
+              @tap="switchCategory(card.key)"
+            >
+              <!-- 车辆查询用单图标 -->
+              <view v-if="card.key === 'vehicle'" class="cat-card-single-icon" :style="{ background: `${card.color}12` }">
+                <view :class="card.icon" :style="{ color: card.color, fontSize: '28rpx' }" />
+              </view>
+              <!-- 工具分类用四宫格 -->
+              <view v-else class="cat-card-grid-icon" :style="{ background: `${card.color}10` }">
+                <view
+                  v-for="(preview, pIdx) in card.previews"
+                  :key="preview.key"
+                  class="mini-icon-cell"
+                >
+                  <view :class="[preview.icon, 'mini-icon']" :style="{ color: card.color }" />
+                </view>
+              </view>
+              <view class="cat-card-text">
+                <text class="cat-card-name">{{ card.name }}</text>
+                <text class="cat-card-count">{{ card.count }}个</text>
+              </view>
+            </view>
+          </view>
+        </template>
 
-          <!-- 热门工具网格 -->
+        <!-- 车辆查询 -->
+        <template v-else-if="activeKey === 'vehicle'">
+          <view class="content-header">
+            <view class="content-icon-wrap" style="background: rgba(23,104,255,0.1)">
+              <view class="content-icon i-carbon-car" style="color: #1768ff" />
+            </view>
+            <view class="content-info">
+              <text class="content-title">车辆查询服务</text>
+              <text class="content-count">{{ vehicleItems.length }} 项专业车况核验</text>
+            </view>
+          </view>
           <view class="tool-grid">
             <view
-              v-for="item in getCategoryHotTools(cat.key)"
-              :key="item.key"
+              v-for="item in vehicleItems"
+              :key="item.feature"
               class="tool-cell"
-              @tap="goTool(item.key)"
+              @tap="goInquireFeature(item.feature)"
             >
-              <view class="tool-icon-wrap" :style="{ background: `${cat.color}12` }">
-                <view :class="['tool-icon', item.icon]" :style="{ color: cat.color }" />
+              <view class="tool-icon-wrap" style="background: rgba(23,104,255,0.08)">
+                <image class="tool-icon-img" :src="getInquiryItemIconUrl(item)" mode="aspectFit" />
               </view>
               <text class="tool-name">{{ item.name }}</text>
             </view>
           </view>
-        </view>
-      </view>
-    </scroll-view>
+        </template>
+
+        <!-- 工具分类 -->
+        <template v-else-if="activeCategory">
+          <view class="content-header">
+            <view class="content-icon-wrap" :style="{ background: `${activeCategory.color}15` }">
+              <view :class="['content-icon', activeCategory.icon]" :style="{ color: activeCategory.color }" />
+            </view>
+            <view class="content-info">
+              <text class="content-title">{{ activeCategory.name }}</text>
+              <text class="content-count">{{ activeTools.length }} 个工具</text>
+            </view>
+          </view>
+          <view class="tool-grid">
+            <view
+              v-for="item in activeTools"
+              :key="item.key"
+              class="tool-cell"
+              @tap="goTool(item.key)"
+            >
+              <view class="tool-icon-wrap" :style="{ background: `${activeCategory.color}12` }">
+                <view :class="['tool-icon-grid', item.icon]" :style="{ color: activeCategory.color }" />
+              </view>
+              <text class="tool-name">{{ item.name }}</text>
+            </view>
+          </view>
+        </template>
+
+        <view style="height: 32rpx" />
+      </scroll-view>
+    </view>
   </view>
 </template>
 
@@ -71,101 +188,201 @@ function goCategory(categoryKey: string) {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(180deg, #f8faff 0%, #f3f5fb 100%);
+  background: #f5f6fa;
 }
 
-.scrollarea {
+/* ============ 双栏布局 ============ */
+.layout {
   flex: 1;
-  min-height: 0;
-  height: 0;
-}
-
-.page {
-  padding: 24rpx 24rpx 40rpx;
-  box-sizing: border-box;
-}
-
-.card {
-  background: linear-gradient(145deg, #ffffff 0%, #f7f8ff 100%);
-  border-radius: 24rpx;
-  padding: 24rpx 24rpx 20rpx;
-  margin-bottom: 24rpx;
-  border: 1rpx solid #e5e6f0;
-  box-shadow:
-    0 16rpx 40rpx rgba(15, 35, 52, 0.04),
-    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
-}
-
-.card-header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20rpx;
+  min-height: 0;
 }
 
-.card-header-left {
+/* 左侧分类导航 */
+.sidebar {
+  width: 180rpx;
+  height: 100%;
+  background: #f0f1f5;
+  flex-shrink: 0;
+}
+
+.sidebar-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 104rpx;
+  padding: 0 8rpx;
+}
+
+.sidebar-item:active {
+  background: #e8e9ed;
+}
+
+.sidebar-item--active {
+  background: #fff;
+}
+
+.sidebar-indicator {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8rpx;
+  height: 40rpx;
+  border-radius: 0 4rpx 4rpx 0;
+  background: #1768ff;
+}
+
+.sidebar-text {
+  font-size: 24rpx;
+  color: #86909c;
+  text-align: center;
+  line-height: 1.3;
+}
+
+.sidebar-text--active {
+  color: #1d2129;
+  font-weight: 600;
+}
+
+/* 右侧内容区 */
+.content {
+  flex: 1;
+  height: 100%;
+  background: #fff;
+}
+
+.content-header {
   display: flex;
   align-items: center;
   gap: 16rpx;
+  padding: 28rpx 28rpx 16rpx;
 }
 
-.cat-icon-wrap {
-  width: 56rpx;
-  height: 56rpx;
+.content-icon-wrap {
+  width: 52rpx;
+  height: 52rpx;
+  border-radius: 14rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.content-icon {
+  font-size: 28rpx;
+}
+
+.content-info {
+  flex: 1;
+}
+
+.content-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #1d2129;
+  margin-bottom: 4rpx;
+}
+
+.content-count {
+  display: block;
+  font-size: 20rpx;
+  color: #86909c;
+}
+
+/* ============ 热门推荐：分类卡片网格 ============ */
+.cat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14rpx;
+  padding: 8rpx 20rpx;
+}
+
+.cat-card {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 14rpx;
+  padding: 20rpx 16rpx;
   border-radius: 16rpx;
+  background: #f7f8fa;
+}
+
+.cat-card:active {
+  background: #eef1f5;
+}
+
+/* 车辆查询单图标 */
+.cat-card-single-icon {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* 四宫格图标 */
+.cat-card-grid-icon {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 12rpx;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.mini-icon-cell {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.cat-icon {
-  font-size: 32rpx;
+.mini-icon {
+  font-size: 16rpx;
 }
 
-.card-title {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1d2129;
+.cat-card-text {
+  flex: 1;
+  min-width: 0;
 }
 
-.card-more {
-  display: flex;
-  align-items: center;
-  gap: 4rpx;
-  padding: 8rpx 16rpx;
-  border-radius: 20rpx;
-  background: #f2f3f5;
-}
-
-.more-text {
+.cat-card-name {
+  display: block;
   font-size: 22rpx;
+  font-weight: 500;
+  color: #1d2129;
+  margin-bottom: 2rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cat-card-count {
+  display: block;
+  font-size: 18rpx;
   color: #86909c;
 }
 
-.more-arrow {
-  font-size: 22rpx;
-  color: #c9cdd4;
-}
-
-.card-more:active {
-  opacity: 0.7;
-}
-
+/* ============ 工具网格 ============ */
 .tool-grid {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -6rpx;
+  padding: 0 16rpx;
 }
 
 .tool-cell {
-  width: 33.333%;
-  padding: 6rpx;
-  box-sizing: border-box;
+  width: 25%;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 12rpx;
-  padding-bottom: 12rpx;
+  padding: 16rpx 0;
+  box-sizing: border-box;
 }
 
 .tool-cell:active {
@@ -173,27 +390,33 @@ function goCategory(categoryKey: string) {
 }
 
 .tool-icon-wrap {
-  width: 76rpx;
-  height: 76rpx;
-  border-radius: 20rpx;
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 18rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 10rpx;
+  margin-bottom: 8rpx;
 }
 
-.tool-icon {
-  font-size: 36rpx;
+.tool-icon-grid {
+  font-size: 34rpx;
+}
+
+.tool-icon-img {
+  width: 38rpx;
+  height: 38rpx;
 }
 
 .tool-name {
-  font-size: 24rpx;
-  font-weight: 500;
-  color: #1d2129;
+  font-size: 20rpx;
+  color: #333;
   text-align: center;
+  line-height: 1.3;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding: 0 4rpx;
 }
 </style>
diff --git a/src/pages/toolbox/query.vue b/src/pages/toolbox/query.vue
index 39ffa3b..f84ee44 100644
--- a/src/pages/toolbox/query.vue
+++ b/src/pages/toolbox/query.vue
@@ -253,6 +253,14 @@ async function handleQuery() {
         if (toolKey.value === 'idiom-quiz' || toolKey.value === 'poem-fill') {
           prepareGameOptions()
         }
+        // 百科题库：准备选项
+        if (toolKey.value === 'baiketiku') {
+          prepareBaiKeOptions()
+        }
+        // 垃圾分类问答：准备选项
+        if (toolKey.value === 'anslajifenlei') {
+          prepareGarbageOptions()
+        }
         // 成语接龙：记录系统返回的成语
         if (toolKey.value === 'chengyujielong') {
           if (result.value?.word) {
@@ -354,6 +362,59 @@ const prepareGameOptions = () => {
   answered.value = false
 }
 
+// 百科题库：准备选项（A/B/C/D 四个选项，标记正确答案）
+const prepareBaiKeOptions = () => {
+  if (!result.value)
+    return
+
+  // answer 可能是选项字母标识（如 "A"），也可能是选项文本内容
+  const correctAnswer = String(result.value.answer || '').trim()
+  const optionKeys = ['answerA', 'answerB', 'answerC', 'answerD'] as const
+  const optionLabels = ['A', 'B', 'C', 'D'] as const
+  const options = optionKeys
+    .map((key, i) => {
+      const val = String(result.value[key] || '').trim()
+      if (!val) return null
+      // answer 可能是字母标识 "A"/"B"/...，也可能是选项文本本身
+      const isCorrect = correctAnswer === optionLabels[i] || correctAnswer === val
+      return { label: `${optionLabels[i]}. ${val}`, value: val, isCorrect }
+    })
+    .filter(Boolean) as Array<{ label: string; value: string; isCorrect: boolean }>
+
+  gameOptions.value = options
+  selectedOption.value = null
+  answered.value = false
+}
+
+// 垃圾分类问答：准备选项（四个分类，标记正确答案）
+const prepareGarbageOptions = () => {
+  if (!result.value)
+    return
+
+  const correctType = result.value.type
+  const typeNames: Record<number, string> = {
+    0: '可回收物',
+    1: '有害垃圾',
+    2: '厨余垃圾',
+    3: '其他垃圾',
+  }
+  const options = Object.entries(typeNames).map(([typeKey, typeName]) => ({
+    label: typeName,
+    value: typeName,
+    isCorrect: Number(typeKey) === Number(correctType),
+  }))
+
+  // 打乱顺序
+  for (let i = options.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[options[i], options[j]] = [options[j], options[i]]
+  }
+
+  gameOptions.value = options
+  selectedOption.value = null
+  answered.value = false
+}
+
 // 点击选项
 function handleOptionClick(option: { label: string; value: string; isCorrect: boolean }) {
   if (answered.value)
@@ -538,11 +599,15 @@ function handleRestart() {
 
               <!-- 题目 -->
               <view class="game-question">
-                <text class="game-question-text">{{ result.question }}</text>
+                <text v-if="toolKey === 'anslajifenlei'" class="game-question-text game-question-garbage">
+                  <text class="garbage-name">{{ result.name }}</text>
+                  <text class="garbage-prompt">属于什么垃圾？</text>
+                </text>
+                <text v-else class="game-question-text">{{ result.title || result.question }}</text>
               </view>
 
               <!-- 选项按钮 -->
-              <view class="game-options">
+              <view class="game-options" :class="{ 'game-options-col': toolKey === 'anslajifenlei' }">
                 <view
                   v-for="(option, index) in gameOptions"
                   :key="index"
@@ -551,6 +616,10 @@ function handleRestart() {
                     'game-option-selected': selectedOption === option.value,
                     'game-option-correct': answered && option.isCorrect,
                     'game-option-wrong': answered && selectedOption === option.value && !option.isCorrect,
+                    'game-option-recyclable': toolKey === 'anslajifenlei' && option.value === '可回收物',
+                    'game-option-hazardous': toolKey === 'anslajifenlei' && option.value === '有害垃圾',
+                    'game-option-kitchen': toolKey === 'anslajifenlei' && option.value === '厨余垃圾',
+                    'game-option-other': toolKey === 'anslajifenlei' && option.value === '其他垃圾',
                   }"
                   @tap="handleOptionClick(option)"
                 >
@@ -610,6 +679,30 @@ function handleRestart() {
                     <text class="game-explan-value">{{ result.note }}</text>
                   </view>
                 </template>
+
+                <!-- 百科题库：显示正确答案和解析 -->
+                <template v-else-if="toolKey === 'baiketiku'">
+                  <view class="game-answer">
+                    <text class="game-answer-label">正确答案：</text>
+                    <text class="game-answer-value">{{ result.answer }}</text>
+                  </view>
+                  <view v-if="result.analytic" class="game-explan">
+                    <text class="game-explan-label">解析：</text>
+                    <text class="game-explan-value">{{ result.analytic }}</text>
+                  </view>
+                </template>
+
+                <!-- 垃圾分类问答：显示正确分类 -->
+                <template v-else-if="toolKey === 'anslajifenlei'">
+                  <view class="game-answer">
+                    <text class="game-answer-label">正确分类：</text>
+                    <text class="game-answer-value garbage-answer-type">{{ result.type_name }}</text>
+                  </view>
+                  <view v-if="result.explain" class="game-explan">
+                    <text class="game-explan-label">说明：</text>
+                    <text class="game-explan-value">{{ result.explain }}</text>
+                  </view>
+                </template>
               </view>
             </template>
 
@@ -1473,4 +1566,50 @@ function handleRestart() {
 .chain-empty-text {
   font-size: 24rpx;
 }
+
+/* 垃圾分类游戏样式 */
+.game-question-garbage {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  align-items: center;
+}
+
+.garbage-name {
+  font-size: 56rpx;
+  font-weight: 700;
+  color: #1d2129;
+}
+
+.garbage-prompt {
+  font-size: 30rpx;
+  color: #86909c;
+  font-weight: 400;
+}
+
+.garbage-answer-type {
+  color: #00b42a;
+}
+
+/* 垃圾分类选项布局 - 单列 */
+.game-options-col {
+  grid-template-columns: 1fr;
+}
+
+/* 垃圾分类四个类别的默认色 */
+.game-option-recyclable {
+  border-left: 6rpx solid #1768ff;
+}
+
+.game-option-hazardous {
+  border-left: 6rpx solid #f53f3f;
+}
+
+.game-option-kitchen {
+  border-left: 6rpx solid #00b42a;
+}
+
+.game-option-other {
+  border-left: 6rpx solid #86909c;
+}
 </style>
diff --git a/src/static/tabbar/toolbox-active.png b/src/static/tabbar/toolbox-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..6afe81b6d2a4bee9d45763d4df9b5e11834a1ad5
GIT binary patch
literal 468
zcmeAS@N?(olHy`uVBq!ia0vp^fgsGm1|(PYdzk?##^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;>1s;*b3=DjSL74G){)!Z!hD=Wv$B>G+w>LJfJnSIC8d(0Y>`rf;<hvSs
zjSv$v<q7WZ546piotY@#Z+J{1`A^65ZE@#w_wKh?Z(TCs@8SJh?d)z>-Cx)ok$jae
zsW;TR!!+!z!nKI4#0adHy?RdKaon1E_pQxu<mK`;iu`u*uD|BEW@8rn#$&5wk4UX9
z6Ubh3ix`3HeOc)}h5Fa_FTUmYjlbVq#8UlkTli~Yor2=}Z1=6k$99Onz90Bj;dlFS
z>8?4G^A4{rCDtj(u7ACC@h!>Z9>Zf(|1zKXp?{z$<Z=TrCKx<j{an^LB{Ts5sFTWc

literal 0
HcmV?d00001

diff --git a/src/static/tabbar/toolbox.png b/src/static/tabbar/toolbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..81167c5b87962117f9cd563b572b85884accccdf
GIT binary patch
literal 464
zcmeAS@N?(olHy`uVBq!ia0vp^fgsGm1|(PYdzk?##^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;>1s;*b3=DjSL74G){)!Z!hEz`%$B>G+w>NCPSRF-JA8t3<zVs3QnL|@&
z`-SjpU3m4|u{~COc4M8*wW#d1U;X#g$Lg<_zy5u5`n$Oo9G^Y9{rv0aH#4i%O9Zml
z+;UvAF^hfUu~o81q*j*^A@F+Z;#-l~bC3Qi3$Z>Cv*-W96T{D>wOg;nf8#!u#w@VS
TWhEal78pET{an^LB{Ts5RB+Lj

literal 0
HcmV?d00001

diff --git a/uni-pages.d.ts b/uni-pages.d.ts
index 46dd4fd..010fa62 100644
--- a/uni-pages.d.ts
+++ b/uni-pages.d.ts
@@ -10,6 +10,7 @@ type _LocationUrl =
   "/pages/report" |
   "/pages/inquire/example" |
   "/pages/inquire/index" |
+  "/pages/inquire/list" |
   "/pages/legal/authorization" |
   "/pages/legal/privacy-policy" |
   "/pages/legal/user-agreement" |
@@ -24,7 +25,7 @@ interface NavigateToOptions {
 interface RedirectToOptions extends NavigateToOptions {}
 
 interface SwitchTabOptions {
-  url: "/pages/index" | "/pages/report" | "/pages/mine"
+  url: "/pages/index" | "/pages/toolbox/index" | "/pages/mine"
 }
 
 type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;