diff --git a/src/main.ts b/src/main.ts
index 2b6acf1..bb1a319 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -37,6 +37,9 @@ import {
   Card,
   Image,
   Tag,
+  Picker,
+  DatePicker,
+  ActionSheet,
 } from 'vant'
 
 // ── Vant 样式（组件样式按需引入） ──
@@ -118,6 +121,9 @@ const vantComponents = [
   Card,
   Image,
   Tag,
+  Picker,
+  DatePicker,
+  ActionSheet,
 ]
 
 for (const component of vantComponents) {
diff --git a/src/views/inspection/detail.vue b/src/views/inspection/detail.vue
index 627a8b3..6d6d399 100644
--- a/src/views/inspection/detail.vue
+++ b/src/views/inspection/detail.vue
@@ -3,7 +3,7 @@
  * 巡检任务详情页
  *
  * 展示任务详细信息，包含基本信息和操作按钮。
- * 可通过路由 query.id 获取任务 id。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -28,16 +28,9 @@ const task = ref({
   updateTime: '2025-06-14 17:30:00',
 })
 
-const statusMap: Record<string, string> = {
-  pending: '待巡检',
-  in_progress: '巡检中',
-  completed: '已完成',
-}
-
-const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
-  pending: 'warning',
-  in_progress: 'primary',
-  completed: 'success',
+const statusMap: Record<string, string> = { pending: '待巡检', in_progress: '巡检中', completed: '已完成' }
+const statusColorMap: Record<string, 'warning' | 'primary' | 'success'> = {
+  pending: 'warning', in_progress: 'primary', completed: 'success',
 }
 
 /** 开始巡检 */
@@ -53,41 +46,90 @@ function viewRecords() {
 
 <template>
   <div class="inspection-detail-page">
-    <van-nav-bar title="任务详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="任务详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 状态标签 -->
+    <!-- Status Bar -->
     <div class="status-bar">
-      <van-tag :type="statusColorMap[task.status]" size="large">
+      <van-tag :type="statusColorMap[task.status]" size="large" round>
         {{ statusMap[task.status] }}
       </van-tag>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="任务名称" :value="task.name" />
-      <van-cell title="设施类型" :value="task.facility" />
-      <van-cell title="计划日期" :value="task.planDate" />
-      <van-cell title="巡检人员" :value="task.inspector" />
-      <van-cell title="巡检地址" :value="task.address" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">任务名称</span>
+          <span class="info-row__value">{{ task.name }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">设施类型</span>
+          <span class="info-row__value">{{ task.facility }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">计划日期</span>
+          <span class="info-row__value">{{ task.planDate }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">巡检人员</span>
+          <span class="info-row__value">{{ task.inspector }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">巡检地址</span>
+          <span class="info-row__value">{{ task.address }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 任务描述 -->
-    <van-cell-group title="任务描述" class="info-group">
-      <van-cell>
+    <!-- 任务描述 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">任务描述</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ task.description }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 时间信息 -->
-    <van-cell-group title="时间信息" class="info-group">
-      <van-cell title="创建时间" :value="task.createTime" />
-      <van-cell title="更新时间" :value="task.updateTime" />
-    </van-cell-group>
+    <!-- 时间信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">时间信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">创建时间</span>
+          <span class="info-row__value">{{ task.createTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">更新时间</span>
+          <span class="info-row__value">{{ task.updateTime }}</span>
+        </div>
+      </div>
+    </div>
 
     <!-- 操作按钮 -->
     <div class="action-buttons">
-      <van-button type="primary" block round @click="startInspection">开始巡检</van-button>
-      <van-button plain block round class="mt-sm" @click="viewRecords">查看巡检记录</van-button>
+      <van-button type="primary" block round size="large" @click="startInspection">
+        开始巡检
+      </van-button>
+      <van-button plain type="primary" block round size="large" class="btn-gap" @click="viewRecords">
+        查看巡检记录
+      </van-button>
     </div>
   </div>
 </template>
@@ -95,38 +137,65 @@ function viewRecords() {
 <style lang="scss" scoped>
 .inspection-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
+// Status Bar
 .status-bar {
-  padding: 12px 16px;
-  background: var(--color-bg-card);
+  padding: 14px 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   text-align: center;
 }
 
-.info-group {
-  margin-top: 8px;
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+  &__accent { width: 3px; height: 16px; border-radius: 2px; background: #1E74FF; flex-shrink: 0; }
+  &__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
+}
+.card-body { padding: 0 16px 14px; }
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  & + & { border-top: 1px solid var(--color-border-light); }
+  &__label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-text-secondary); }
+  &__value { flex: 1; font-size: 14px; color: var(--color-text-primary); word-break: break-all; }
 }
 
+// Description
 .desc-text {
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.7;
   color: var(--color-text-regular);
   padding: 4px 0;
 }
 
+// Action Buttons
 .action-buttons {
-  padding: 24px 16px;
+  padding: 20px 16px;
 
-  .mt-sm {
+  .btn-gap {
     margin-top: 12px;
   }
 }
diff --git a/src/views/inspection/index.vue b/src/views/inspection/index.vue
index 69ce019..14eaf08 100644
--- a/src/views/inspection/index.vue
+++ b/src/views/inspection/index.vue
@@ -41,7 +41,6 @@ const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger
 /** 筛选后的任务列表 */
 const filteredTasks = computed(() => {
   let list = mockTasks
-  // 搜索筛选
   if (searchText.value) {
     const kw = searchText.value.toLowerCase()
     list = list.filter(t =>
@@ -50,14 +49,9 @@ const filteredTasks = computed(() => {
       t.address.toLowerCase().includes(kw)
     )
   }
-  // 状态筛选
-  if (activeTab.value === 1) {
-    list = list.filter(t => t.status === 'pending')
-  } else if (activeTab.value === 2) {
-    list = list.filter(t => t.status === 'in_progress')
-  } else if (activeTab.value === 3) {
-    list = list.filter(t => t.status === 'completed')
-  }
+  if (activeTab.value === 1) list = list.filter(t => t.status === 'pending')
+  else if (activeTab.value === 2) list = list.filter(t => t.status === 'in_progress')
+  else if (activeTab.value === 3) list = list.filter(t => t.status === 'completed')
   return list
 })
 
@@ -69,39 +63,85 @@ function goDetail(id: number) {
 
 <template>
   <div class="inspection-page">
-    <van-nav-bar title="巡检任务" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar -->
+    <van-nav-bar
+      title="巡检任务"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索任务名称、设施、地址" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索任务名称、设施、地址"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="待巡检" />
       <van-tab title="巡检中" />
       <van-tab title="已完成" />
     </van-tabs>
 
+    <!-- Task List -->
     <div class="task-list">
-      <van-empty v-if="filteredTasks.length === 0" description="暂无巡检任务" />
-      <van-card
+      <van-empty
+        v-if="filteredTasks.length === 0"
+        image="search"
+        description="暂无巡检任务"
+      />
+      <div
         v-for="task in filteredTasks"
         :key="task.id"
-        :title="task.name"
-        :desc="`设施: ${task.facility}`"
+        class="task-card"
         @click="goDetail(task.id)"
       >
-        <template #tags>
-          <van-tag :type="statusColorMap[task.status]" size="medium">
+        <div class="task-card__header">
+          <h4 class="task-card__title">{{ task.name }}</h4>
+          <van-tag :type="statusColorMap[task.status]" size="medium" round>
             {{ statusMap[task.status] }}
           </van-tag>
-        </template>
-        <template #footer>
-          <div class="task-meta">
-            <span>计划日期: {{ task.planDate }}</span>
-            <span>巡检人: {{ task.inspector }}</span>
+        </div>
+        <div class="task-card__body">
+          <div class="task-card__info">
+            <span class="info-item">
+              <van-icon name="cluster-o" size="14" />
+              {{ task.facility }}
+            </span>
+            <span class="info-item">
+              <van-icon name="calendar-o" size="14" />
+              {{ task.planDate }}
+            </span>
           </div>
-          <div class="task-address">{{ task.address }}</div>
-        </template>
-      </van-card>
+          <div class="task-card__info">
+            <span class="info-item">
+              <van-icon name="user-o" size="14" />
+              {{ task.inspector }}
+            </span>
+          </div>
+        </div>
+        <div class="task-card__footer">
+          <van-icon name="location-o" size="12" color="#969799" />
+          <span class="address-text">{{ task.address }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -111,34 +151,119 @@ function goDetail(id: number) {
   min-height: 100vh;
   background: var(--color-bg-page);
 
+  // NavBar — brand blue bg, white text
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.task-list {
-  padding: 0 8px;
+// Search — rounded, white bg
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
 
-  :deep(.van-card) {
-    margin: 8px;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.task-meta {
-  display: flex;
-  gap: 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
+// Tabs — brand blue indicator
+:deep(.van-tabs) {
+  background: #fff;
 }
 
-.task-address {
-  margin-top: 4px;
+:deep(.van-tabs__wrap) {
+  padding: 0 8px;
+}
+
+:deep(.van-tab) {
+  font-size: 14px;
+}
+
+// Task List
+.task-list {
+  padding: 8px 12px 16px;
+}
+
+.task-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.task-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.task-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.task-card__info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.task-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.address-text {
   font-size: 12px;
   color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/views/inspectionProblem/detail.vue b/src/views/inspectionProblem/detail.vue
index 95b45da..1c5a067 100644
--- a/src/views/inspectionProblem/detail.vue
+++ b/src/views/inspectionProblem/detail.vue
@@ -3,10 +3,11 @@
  * 问题工单详情页
  *
  * 展示工单详细信息，支持接单/转派/解决操作。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, subtle shadows.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showToast } from 'vant'
+import { showToast, showConfirmDialog } from 'vant'
 
 const router = useRouter()
 const route = useRoute()
@@ -55,9 +56,18 @@ const severityColorMap: Record<string, string> = {
   critical: '#ee0a24',
 }
 
+const severityTagMap: Record<string, 'success' | 'warning' | 'danger'> = {
+  low: 'success',
+  medium: 'warning',
+  high: 'danger',
+  critical: 'danger',
+}
+
 /** 接单 */
 function acceptOrder() {
-  showToast('已接单')
+  showConfirmDialog({ title: '确认接单', message: '确认接单处理该工单吗？' })
+    .then(() => showToast('已接单'))
+    .catch(() => {})
 }
 
 /** 转派 */
@@ -67,53 +77,108 @@ function transferOrder() {
 
 /** 解决 */
 function resolveOrder() {
-  showToast('已标记为已解决')
+  showConfirmDialog({ title: '确认解决', message: '确认标记该工单为已解决吗？' })
+    .then(() => showToast('已标记为已解决'))
+    .catch(() => {})
 }
 </script>
 
 <template>
   <div class="detail-page">
-    <van-nav-bar title="工单详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue bg, white text -->
+    <van-nav-bar
+      title="工单详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 状态栏 -->
+    <!-- Status & Severity Bar -->
     <div class="status-bar">
-      <van-tag :type="statusColorMap[order.status]" size="large">
+      <van-tag :type="statusColorMap[order.status]" size="large" round>
         {{ statusMap[order.status] }}
       </van-tag>
-      <span class="severity-tag" :style="{ color: severityColorMap[order.severity] }">
+      <van-tag :type="severityTagMap[order.severity]" size="large" plain round>
         严重程度: {{ severityMap[order.severity] }}
-      </span>
+      </van-tag>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="工单编号" :value="`WO-${order.id}`" />
-      <van-cell title="工单标题" :value="order.title" />
-      <van-cell title="设施类型" :value="order.facility" />
-      <van-cell title="上报人员" :value="order.reporter" />
-      <van-cell title="上报时间" :value="order.reportTime" />
-      <van-cell title="问题地址" :value="order.address" />
-      <van-cell title="责任人" :value="order.assignee" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">工单编号</span>
+          <span class="info-row__value">WO-{{ order.id }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">工单标题</span>
+          <span class="info-row__value">{{ order.title }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">设施类型</span>
+          <span class="info-row__value">{{ order.facility }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">上报人员</span>
+          <span class="info-row__value">{{ order.reporter }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">上报时间</span>
+          <span class="info-row__value">{{ order.reportTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">问题地址</span>
+          <span class="info-row__value">{{ order.address }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">责任人</span>
+          <span class="info-row__value" :class="{ 'text-muted': order.assignee === '待分配' }">
+            {{ order.assignee }}
+          </span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 问题描述 -->
-    <van-cell-group title="问题描述" class="info-group">
-      <van-cell>
+    <!-- 问题描述 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">问题描述</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ order.description }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 时间信息 -->
-    <van-cell-group title="时间信息" class="info-group">
-      <van-cell title="创建时间" :value="order.createTime" />
-      <van-cell title="更新时间" :value="order.updateTime" />
-    </van-cell-group>
+    <!-- 时间信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">时间信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">创建时间</span>
+          <span class="info-row__value">{{ order.createTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">更新时间</span>
+          <span class="info-row__value">{{ order.updateTime }}</span>
+        </div>
+      </div>
+    </div>
 
     <!-- 操作按钮 -->
     <div class="action-buttons">
       <van-button type="primary" block round @click="acceptOrder">接单处理</van-button>
-      <van-button plain block round class="mt-sm" @click="transferOrder">转派他人</van-button>
-      <van-button type="success" block round class="mt-sm" @click="resolveOrder">标记已解决</van-button>
+      <van-button plain type="primary" block round class="btn-gap" @click="transferOrder">转派他人</van-button>
+      <van-button type="success" block round class="btn-gap" @click="resolveOrder">标记已解决</van-button>
     </div>
   </div>
 </template>
@@ -121,46 +186,114 @@ function resolveOrder() {
 <style lang="scss" scoped>
 .detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
+  // NavBar — brand blue
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
+// Status Bar
 .status-bar {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: 10px;
   padding: 12px 16px;
-  background: var(--color-bg-card);
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.severity-tag {
-  font-size: 13px;
-  font-weight: 500;
+// Info Card — white card with subtle shadow
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
 
-.info-group {
-  margin-top: 8px;
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+
+  &__accent {
+    width: 3px;
+    height: 16px;
+    border-radius: 2px;
+    background: #1E74FF;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
 }
 
+.card-body {
+  padding: 0 16px 14px;
+}
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+
+  & + & {
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  &__label {
+    width: 72px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  &__value {
+    flex: 1;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    word-break: break-all;
+  }
+}
+
+.text-muted {
+  color: var(--color-text-placeholder);
+}
+
+// Description Text
 .desc-text {
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.7;
   color: var(--color-text-regular);
   padding: 4px 0;
 }
 
+// Action Buttons
 .action-buttons {
-  padding: 24px 16px;
+  padding: 20px 16px;
 
-  .mt-sm {
+  .btn-gap {
     margin-top: 12px;
   }
 }
diff --git a/src/views/inspectionProblem/index.vue b/src/views/inspectionProblem/index.vue
index 5f28a61..bdc9fce 100644
--- a/src/views/inspectionProblem/index.vue
+++ b/src/views/inspectionProblem/index.vue
@@ -3,7 +3,7 @@
  * 问题工单列表页
  *
  * 支持搜索、状态筛选（全部/待处理/处理中/已解决），
- * 点击工单卡片跳转详情。
+ * 工单卡片带严重程度标签和状态徽章。
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -16,13 +16,13 @@ const searchText = ref('')
 /** 当前激活的 Tab */
 const activeTab = ref(0)
 
-/** 模拟工单数据 */
+/** 模拟工单数据（含严重程度） */
 const mockOrders = [
-  { id: 1, title: '管道渗漏-城北片区', facility: '供水管网', status: 'pending', reporter: '张工', reportTime: '2025-06-15 09:30', address: '城北工业大道12号' },
-  { id: 2, title: '阀门损坏-高新区', facility: '阀门井', status: 'processing', reporter: '李工', reportTime: '2025-06-15 11:00', address: '高新区创新路55号' },
-  { id: 3, title: '水表故障-老城区', facility: '水表', status: 'resolved', reporter: '王工', reportTime: '2025-06-14 08:00', address: '老城区中山路88号' },
-  { id: 4, title: '消防栓漏水-商业区', facility: '消防栓', status: 'pending', reporter: '孙工', reportTime: '2025-06-16 10:00', address: '商业区解放路101号' },
-  { id: 5, title: '泵站异常-东区', facility: '泵站', status: 'processing', reporter: '赵工', reportTime: '2025-06-15 14:30', address: '东区滨河路88号' },
+  { id: 1, title: '管道渗漏-城北片区', facility: '供水管网', status: 'pending', severity: '严重', reporter: '张工', reportTime: '2025-06-15 09:30', address: '城北工业大道12号' },
+  { id: 2, title: '阀门损坏-高新区', facility: '阀门井', status: 'processing', severity: '一般', reporter: '李工', reportTime: '2025-06-15 11:00', address: '高新区创新路55号' },
+  { id: 3, title: '水表故障-老城区', facility: '水表', status: 'resolved', severity: '轻微', reporter: '王工', reportTime: '2025-06-14 08:00', address: '老城区中山路88号' },
+  { id: 4, title: '消防栓漏水-商业区', facility: '消防栓', status: 'pending', severity: '一般', reporter: '孙工', reportTime: '2025-06-16 10:00', address: '商业区解放路101号' },
+  { id: 5, title: '泵站异常-东区', facility: '泵站', status: 'processing', severity: '严重', reporter: '赵工', reportTime: '2025-06-15 14:30', address: '东区滨河路88号' },
 ]
 
 /** 状态映射 */
@@ -38,6 +38,13 @@ const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger
   resolved: 'success',
 }
 
+/** 严重程度映射 */
+const severityColorMap: Record<string, 'danger' | 'warning' | 'primary'> = {
+  '严重': 'danger',
+  '一般': 'warning',
+  '轻微': 'primary',
+}
+
 /** 筛选后的工单列表 */
 const filteredOrders = computed(() => {
   let list = mockOrders
@@ -63,39 +70,105 @@ function goDetail(id: number) {
 
 <template>
   <div class="problem-page">
-    <van-nav-bar title="问题工单" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar -->
+    <van-nav-bar
+      title="问题工单"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索工单标题、设施、地址" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索工单标题、设施、地址"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="待处理" />
       <van-tab title="处理中" />
       <van-tab title="已解决" />
     </van-tabs>
 
+    <!-- Order List -->
     <div class="order-list">
-      <van-empty v-if="filteredOrders.length === 0" description="暂无问题工单" />
-      <van-card
+      <van-empty
+        v-if="filteredOrders.length === 0"
+        image="search"
+        description="暂无问题工单"
+      />
+      <div
         v-for="order in filteredOrders"
         :key="order.id"
-        :title="order.title"
-        :desc="`设施: ${order.facility}`"
+        class="order-card"
         @click="goDetail(order.id)"
       >
-        <template #tags>
-          <van-tag :type="statusColorMap[order.status]" size="medium">
+        <!-- Card Header -->
+        <div class="order-card__header">
+          <h4 class="order-card__title">{{ order.title }}</h4>
+          <van-tag
+            :type="severityColorMap[order.severity]"
+            size="medium"
+            plain
+            round
+          >
+            {{ order.severity }}
+          </van-tag>
+        </div>
+
+        <!-- Card Body -->
+        <div class="order-card__body">
+          <div class="order-info">
+            <span class="info-item">
+              <van-icon name="cluster-o" size="13" />
+              {{ order.facility }}
+            </span>
+            <span class="info-item">
+              <van-icon name="user-o" size="13" />
+              {{ order.reporter }}
+            </span>
+          </div>
+          <div class="order-info">
+            <span class="info-item">
+              <van-icon name="clock-o" size="13" />
+              {{ order.reportTime }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Card Footer -->
+        <div class="order-card__footer">
+          <span class="address-text">
+            <van-icon name="location-o" size="12" color="#969799" />
+            {{ order.address }}
+          </span>
+          <van-tag
+            :type="statusColorMap[order.status]"
+            size="medium"
+            round
+            class="status-badge"
+          >
             {{ statusMap[order.status] }}
           </van-tag>
-        </template>
-        <template #footer>
-          <div class="order-meta">
-            <span>上报人: {{ order.reporter }}</span>
-            <span>{{ order.reportTime }}</span>
-          </div>
-          <div class="order-address">{{ order.address }}</div>
-        </template>
-      </van-card>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -105,34 +178,128 @@ function goDetail(id: number) {
   min-height: 100vh;
   background: var(--color-bg-page);
 
+  // NavBar — brand blue bg, white text
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.order-list {
-  padding: 0 8px;
+// Search — rounded, white bg
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
 
-  :deep(.van-card) {
-    margin: 8px;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.order-meta {
-  display: flex;
-  gap: 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
+// Tabs
+:deep(.van-tabs) {
+  background: #fff;
 }
 
-.order-address {
-  margin-top: 4px;
+:deep(.van-tabs__wrap) {
+  padding: 0 8px;
+}
+
+:deep(.van-tab) {
+  font-size: 14px;
+}
+
+// Order List
+.order-list {
+  padding: 8px 12px 16px;
+}
+
+.order-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.order-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.order-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.order-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.order-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.order-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.address-text {
   font-size: 12px;
   color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status-badge {
+  flex-shrink: 0;
 }
 </style>
diff --git a/src/views/inspectionProblem/management.vue b/src/views/inspectionProblem/management.vue
index 4561894..9ecdb88 100644
--- a/src/views/inspectionProblem/management.vue
+++ b/src/views/inspectionProblem/management.vue
@@ -3,6 +3,7 @@
  * 问题工单管理页
  *
  * 支持工单表单编辑和流程分派。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, picker popups.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -24,7 +25,7 @@ const formData = ref({
 })
 
 /** 设施选项 */
-const facilityOptions = [
+const facilityColumns = [
   { text: '供水管网', value: '供水管网' },
   { text: '阀门井', value: '阀门井' },
   { text: '水表', value: '水表' },
@@ -33,55 +34,71 @@ const facilityOptions = [
 ]
 
 /** 严重程度选项 */
-const severityOptions = [
+const severityColumns = [
   { text: '低', value: 'low' },
   { text: '中', value: 'medium' },
   { text: '高', value: 'high' },
   { text: '紧急', value: 'critical' },
 ]
 
-/** 设施选择器状态 */
-const showFacilityPicker = ref(false)
-
-/** 严重程度选择器状态 */
-const showSeverityPicker = ref(false)
-
-/** 责任人选择器状态 */
-const showAssigneePicker = ref(false)
-
 /** 可选责任人 */
-const assigneeOptions = [
+const assigneeColumns = [
   { text: '李工', value: '李工' },
   { text: '王工', value: '王工' },
   { text: '赵工', value: '赵工' },
   { text: '孙工', value: '孙工' },
 ]
 
-/** 确认设施选择 */
+// Picker states
+const showFacilityPicker = ref(false)
+const showSeverityPicker = ref(false)
+const showAssigneePicker = ref(false)
+
+/** Confirm facility picker */
 function onConfirmFacility({ selectedOptions }: any) {
   formData.value.facility = selectedOptions[0]?.text || ''
   showFacilityPicker.value = false
 }
 
-/** 确认严重程度 */
+/** Confirm severity picker */
 function onConfirmSeverity({ selectedOptions }: any) {
   formData.value.severity = selectedOptions[0]?.value || 'medium'
   showSeverityPicker.value = false
 }
 
-/** 确认责任人 */
+/** Confirm assignee picker */
 function onConfirmAssignee({ selectedOptions }: any) {
   formData.value.assignee = selectedOptions[0]?.text || ''
   showAssigneePicker.value = false
 }
 
+/** Get severity text for display */
+function severityText(): string {
+  return severityColumns.find(o => o.value === formData.value.severity)?.text || '请选择'
+}
+
+/** Get severity tag type */
+function severityTagType(): 'success' | 'warning' | 'danger' {
+  const map: Record<string, 'success' | 'warning' | 'danger'> = {
+    low: 'success',
+    medium: 'warning',
+    high: 'danger',
+    critical: 'danger',
+  }
+  return map[formData.value.severity] || 'warning'
+}
+
 /** 提交表单 */
 function onSubmit() {
-  if (!formData.value.title) {
+  if (!formData.value.title.trim()) {
     showToast('请输入工单标题')
     return
   }
-  if (!formData.value.address) {
+  if (!formData.value.facility) {
+    showToast('请选择设施类型')
+    return
+  }
+  if (!formData.value.address.trim()) {
     showToast('请输入问题地址')
     return
   }
@@ -92,130 +109,221 @@ function onSubmit() {
 
 <template>
   <div class="management-page">
-    <van-nav-bar title="工单管理" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue bg, white text -->
+    <van-nav-bar
+      title="工单管理"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-form @submit="onSubmit" class="form-wrapper">
-      <van-cell-group title="工单信息" class="form-group">
-        <!-- 工单标题 -->
-        <van-field
-          v-model="formData.title"
-          name="title"
-          label="工单标题"
-          placeholder="请输入工单标题"
-          :rules="[{ required: true, message: '请输入工单标题' }]"
-        />
-
-        <!-- 设施类型 -->
-        <van-field
-          v-model="formData.facility"
-          is-link
-          readonly
-          name="facility"
-          label="设施类型"
-          placeholder="请选择设施类型"
-          @click="showFacilityPicker = true"
-        />
-        <van-popup v-model:show="showFacilityPicker" round position="bottom">
-          <van-picker
-            :columns="facilityOptions"
-            @confirm="onConfirmFacility"
-            @cancel="showFacilityPicker = false"
+    <van-form @submit="onSubmit">
+      <!-- 工单信息 Card -->
+      <div class="form-card">
+        <div class="card-header">
+          <span class="card-header__accent"></span>
+          <h5 class="card-header__title">工单信息</h5>
+        </div>
+        <div class="card-body">
+          <!-- 工单标题 -->
+          <van-field
+            v-model="formData.title"
+            name="title"
+            label="工单标题"
+            placeholder="请输入工单标题"
+            :rules="[{ required: true, message: '请输入工单标题' }]"
           />
-        </van-popup>
 
-        <!-- 严重程度 -->
-        <van-field
-          :model-value="severityOptions.find(o => o.value === formData.severity)?.text || '请选择'"
-          is-link
-          readonly
-          name="severity"
-          label="严重程度"
-          @click="showSeverityPicker = true"
-        />
-        <van-popup v-model:show="showSeverityPicker" round position="bottom">
-          <van-picker
-            :columns="severityOptions"
-            @confirm="onConfirmSeverity"
-            @cancel="showSeverityPicker = false"
+          <!-- 设施类型 -->
+          <van-field
+            v-model="formData.facility"
+            is-link
+            readonly
+            name="facility"
+            label="设施类型"
+            placeholder="请选择设施类型"
+            :rules="[{ required: true, message: '请选择设施类型' }]"
+            @click="showFacilityPicker = true"
           />
-        </van-popup>
 
-        <!-- 问题地址 -->
-        <van-field
-          v-model="formData.address"
-          name="address"
-          label="问题地址"
-          placeholder="请输入问题地址"
-          :rules="[{ required: true, message: '请输入问题地址' }]"
-        />
+          <!-- 严重程度 -->
+          <van-field
+            :model-value="severityText()"
+            is-link
+            readonly
+            name="severity"
+            label="严重程度"
+            @click="showSeverityPicker = true"
+          >
+            <template #extra>
+              <van-tag :type="severityTagType()" size="medium" plain>{{ severityText() }}</van-tag>
+            </template>
+          </van-field>
 
-        <!-- 问题描述 -->
-        <van-field
-          v-model="formData.description"
-          name="description"
-          label="问题描述"
-          type="textarea"
-          rows="3"
-          autosize
-          placeholder="请输入问题描述"
-          maxlength="500"
-          show-word-limit
-        />
-      </van-cell-group>
-
-      <van-cell-group title="流程分派" class="form-group">
-        <!-- 责任人 -->
-        <van-field
-          v-model="formData.assignee"
-          is-link
-          readonly
-          name="assignee"
-          label="责任人"
-          placeholder="请选择责任人"
-          @click="showAssigneePicker = true"
-        />
-        <van-popup v-model:show="showAssigneePicker" round position="bottom">
-          <van-picker
-            :columns="assigneeOptions"
-            @confirm="onConfirmAssignee"
-            @cancel="showAssigneePicker = false"
+          <!-- 问题地址 -->
+          <van-field
+            v-model="formData.address"
+            name="address"
+            label="问题地址"
+            placeholder="请输入问题地址"
+            :rules="[{ required: true, message: '请输入问题地址' }]"
           />
-        </van-popup>
-      </van-cell-group>
+
+          <!-- 问题描述 -->
+          <van-field
+            v-model="formData.description"
+            name="description"
+            label="问题描述"
+            type="textarea"
+            rows="3"
+            autosize
+            placeholder="请输入问题描述（选填）"
+            maxlength="500"
+            show-word-limit
+          />
+        </div>
+      </div>
+
+      <!-- 流程分派 Card -->
+      <div class="form-card">
+        <div class="card-header">
+          <span class="card-header__accent"></span>
+          <h5 class="card-header__title">流程分派</h5>
+        </div>
+        <div class="card-body">
+          <!-- 责任人 -->
+          <van-field
+            v-model="formData.assignee"
+            is-link
+            readonly
+            name="assignee"
+            label="责任人"
+            placeholder="请选择责任人"
+            @click="showAssigneePicker = true"
+          />
+        </div>
+      </div>
 
       <!-- 提交按钮 -->
       <div class="submit-area">
-        <van-button round block type="primary" native-type="submit">
+        <van-button round block type="primary" native-type="submit" size="large">
           提交工单
         </van-button>
       </div>
     </van-form>
+
+    <!-- Facility Picker Popup -->
+    <van-popup v-model:show="showFacilityPicker" round position="bottom">
+      <van-picker
+        :columns="facilityColumns"
+        title="选择设施类型"
+        show-toolbar
+        @confirm="onConfirmFacility"
+        @cancel="showFacilityPicker = false"
+      />
+    </van-popup>
+
+    <!-- Severity Picker Popup -->
+    <van-popup v-model:show="showSeverityPicker" round position="bottom">
+      <van-picker
+        :columns="severityColumns"
+        title="选择严重程度"
+        show-toolbar
+        @confirm="onConfirmSeverity"
+        @cancel="showSeverityPicker = false"
+      />
+    </van-popup>
+
+    <!-- Assignee Picker Popup -->
+    <van-popup v-model:show="showAssigneePicker" round position="bottom">
+      <van-picker
+        :columns="assigneeColumns"
+        title="选择责任人"
+        show-toolbar
+        @confirm="onConfirmAssignee"
+        @cancel="showAssigneePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .management-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
+  // NavBar — brand blue
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.form-wrapper {
-  margin-top: 0;
+// Form Card — white card with subtle shadow
+.form-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
 
-.form-group {
-  margin-top: 8px;
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 6px;
+
+  &__accent {
+    width: 3px;
+    height: 16px;
+    border-radius: 2px;
+    background: #1E74FF;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
 }
 
+.card-body {
+  :deep(.van-cell) {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  :deep(.van-cell::after) {
+    left: 16px;
+    right: 16px;
+  }
+}
+
+// Submit area
 .submit-area {
   padding: 24px 16px;
 }
+
+// Picker toolbar style
+:deep(.van-picker__toolbar) {
+  .van-picker__confirm {
+    color: #1E74FF;
+  }
+}
 </style>
diff --git a/src/views/inspectionRecords/detail.vue b/src/views/inspectionRecords/detail.vue
index c65a772..7335e1d 100644
--- a/src/views/inspectionRecords/detail.vue
+++ b/src/views/inspectionRecords/detail.vue
@@ -27,8 +27,8 @@ const record = ref({
 
 /** 模拟问题列表 */
 const problemList = ref([
-  { id: 1, description: 'DN200闸阀密封圈老化漏水', level: '严重', location: '高新区创新路12号阀井', photos: [] },
-  { id: 2, description: 'DN150蝶阀操作手柄锈蚀', level: '一般', location: '高新区创新路28号', photos: [] },
+  { id: 1, description: 'DN200闸阀密封圈老化漏水', level: '严重', location: '高新区创新路12号阀井', photos: ['p1', 'p2'] },
+  { id: 2, description: 'DN150蝶阀操作手柄锈蚀', level: '一般', location: '高新区创新路28号', photos: ['p3'] },
   { id: 3, description: 'DN100排气阀堵塞', level: '轻微', location: '高新区创新路45号', photos: [] },
 ])
 
@@ -40,89 +40,253 @@ const levelColorMap: Record<string, 'danger' | 'warning' | 'primary'> = {
 </script>
 
 <template>
-  <div class="record-detail-page">
-    <van-nav-bar title="记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+  <div class="detail-page">
+    <!-- NavBar -->
+    <van-nav-bar
+      title="记录详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="任务名称" :value="record.taskName" />
-      <van-cell title="巡检人员" :value="record.inspector" />
-      <van-cell title="开始时间" :value="record.startTime" />
-      <van-cell title="结束时间" :value="record.endTime" />
-      <van-cell title="巡检时长" :value="record.duration" />
-      <van-cell title="巡检结果">
-        <template #value>
-          <van-tag :type="record.result === 'normal' ? 'success' : 'danger'" size="medium">
-            {{ record.result === 'normal' ? '正常' : '异常' }}
-          </van-tag>
-        </template>
-      </van-cell>
-    </van-cell-group>
-
-    <!-- 备注 -->
-    <van-cell-group v-if="record.remark" title="备注" class="info-group">
-      <van-cell>
-        <p class="desc-text">{{ record.remark }}</p>
-      </van-cell>
-    </van-cell-group>
-
-    <!-- 问题列表 -->
-    <van-cell-group title="发现问题" class="info-group">
-      <van-empty v-if="problemList.length === 0" description="未发现问题" />
-      <div v-for="(problem, idx) in problemList" :key="problem.id" class="problem-item">
-        <div class="problem-header">
-          <span class="problem-index">#{{ idx + 1 }}</span>
-          <van-tag :type="levelColorMap[problem.level]" size="medium">
-            {{ problem.level }}
-          </van-tag>
+    <div class="detail-content">
+      <!-- Section: 基本信息 -->
+      <div class="section-card">
+        <div class="section-title">
+          <span class="accent-bar"></span>
+          <span class="title-text">基本信息</span>
         </div>
-        <p class="problem-desc">{{ problem.description }}</p>
-        <p class="problem-location">📍 {{ problem.location }}</p>
-      </div>
-    </van-cell-group>
-
-    <!-- 现场照片 -->
-    <van-cell-group title="现场照片" class="info-group">
-      <div class="photo-grid">
-        <div class="photo-placeholder" v-for="i in 3" :key="i">
-          <span>照片 {{ i }}</span>
+        <div class="info-grid">
+          <div class="info-cell">
+            <span class="info-label">任务名称</span>
+            <span class="info-value">{{ record.taskName }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-label">巡检人员</span>
+            <span class="info-value">{{ record.inspector }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-label">开始时间</span>
+            <span class="info-value">{{ record.startTime }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-label">结束时间</span>
+            <span class="info-value">{{ record.endTime }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-label">巡检时长</span>
+            <span class="info-value">{{ record.duration }}</span>
+          </div>
+          <div class="info-cell">
+            <span class="info-label">巡检结果</span>
+            <van-tag
+              :type="record.result === 'normal' ? 'success' : 'danger'"
+              size="medium"
+              round
+            >
+              {{ record.result === 'normal' ? '正常' : '异常' }}
+            </van-tag>
+          </div>
         </div>
       </div>
-    </van-cell-group>
+
+      <!-- Section: 备注 -->
+      <div v-if="record.remark" class="section-card">
+        <div class="section-title">
+          <span class="accent-bar"></span>
+          <span class="title-text">备注信息</span>
+        </div>
+        <div class="remark-content">
+          <van-icon name="info-o" size="14" color="#969799" class="remark-icon" />
+          <p class="remark-text">{{ record.remark }}</p>
+        </div>
+      </div>
+
+      <!-- Section: 发现问题 -->
+      <div class="section-card">
+        <div class="section-title">
+          <span class="accent-bar"></span>
+          <span class="title-text">发现问题</span>
+          <span class="title-badge">{{ problemList.length }}</span>
+        </div>
+        <van-empty
+          v-if="problemList.length === 0"
+          image="search"
+          description="未发现问题"
+        />
+        <div v-for="(problem, idx) in problemList" :key="problem.id" class="problem-item">
+          <div class="problem-header">
+            <span class="problem-index">#{{ idx + 1 }}</span>
+            <van-tag :type="levelColorMap[problem.level]" size="medium" round>
+              {{ problem.level }}
+            </van-tag>
+          </div>
+          <p class="problem-desc">{{ problem.description }}</p>
+          <p class="problem-location">
+            <van-icon name="location-o" size="12" color="#969799" />
+            {{ problem.location }}
+          </p>
+          <!-- Problem photos -->
+          <div v-if="problem.photos.length > 0" class="problem-photos">
+            <div
+              v-for="(_, pi) in problem.photos"
+              :key="pi"
+              class="problem-photo-thumb"
+            >
+              <van-icon name="photo-o" size="16" color="#C8C9CC" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Section: 现场照片 -->
+      <div class="section-card">
+        <div class="section-title">
+          <span class="accent-bar"></span>
+          <span class="title-text">现场照片</span>
+          <span class="title-badge">3</span>
+        </div>
+        <div class="photo-grid">
+          <div class="photo-item" v-for="i in 3" :key="i">
+            <van-icon name="photo-o" size="28" color="#C8C9CC" />
+            <span class="photo-label">照片 {{ i }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Action -->
+    <div class="bottom-action">
+      <van-button type="primary" block round>分享记录</van-button>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.record-detail-page {
+.detail-page {
   min-height: 100vh;
   background: var(--color-bg-page);
-  padding-bottom: 24px;
+  padding-bottom: 80px;
 
+  // NavBar — brand blue bg, white text
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.info-group {
-  margin-top: 8px;
+// Content
+.detail-content {
+  padding: 8px 12px;
 }
 
-.desc-text {
+// Section Card
+.section-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+// Section Title with accent bar
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.accent-bar {
+  width: 4px;
+  height: 18px;
+  background: #1E74FF;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.title-text {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+}
+
+.title-badge {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1E74FF;
+  background: #E3F2FD;
+  padding: 2px 10px;
+  border-radius: 999px;
+}
+
+// Info Grid
+.info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px 16px;
+}
+
+.info-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.info-label {
+  font-size: 12px;
+  color: var(--color-text-placeholder);
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+// Remark
+.remark-content {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  background: #F7F8FA;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.remark-icon {
+  margin-top: 1px;
+  flex-shrink: 0;
+}
+
+.remark-text {
   font-size: 14px;
   line-height: 1.6;
   color: var(--color-text-regular);
-  padding: 4px 0;
 }
 
+// Problem Items
 .problem-item {
-  padding: 12px 16px;
+  padding: 12px 0;
   border-bottom: 1px solid var(--color-border-light);
 
   &:last-child {
     border-bottom: none;
+    padding-bottom: 0;
   }
 }
 
@@ -142,31 +306,74 @@ const levelColorMap: Record<string, 'danger' | 'warning' | 'primary'> = {
 .problem-desc {
   font-size: 14px;
   color: var(--color-text-regular);
-  margin: 4px 0;
+  margin-bottom: 4px;
   line-height: 1.5;
 }
 
 .problem-location {
   font-size: 12px;
   color: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
 }
 
+// Problem Photos
+.problem-photos {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.problem-photo-thumb {
+  width: 56px;
+  height: 56px;
+  border-radius: 6px;
+  background: #F2F3F5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Photo Grid
 .photo-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
-  padding: 12px 16px;
 }
 
-.photo-placeholder {
+.photo-item {
   aspect-ratio: 1;
-  background: var(--color-bg-page);
+  background: #F2F3F5;
   border-radius: 8px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  gap: 6px;
+}
+
+.photo-label {
+  font-size: 11px;
   color: var(--color-text-placeholder);
-  border: 1px dashed var(--color-border);
+}
+
+// Bottom Action
+.bottom-action {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+  background: #fff;
+  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
+
+  :deep(.van-button--primary) {
+    height: 44px;
+    font-size: 16px;
+    font-weight: 600;
+  }
 }
 </style>
diff --git a/src/views/inspectionRecords/index.vue b/src/views/inspectionRecords/index.vue
index b2241c2..4a0aa0d 100644
--- a/src/views/inspectionRecords/index.vue
+++ b/src/views/inspectionRecords/index.vue
@@ -3,7 +3,7 @@
  * 巡检记录列表页
  *
  * 支持搜索、日期筛选（全部/今天/本周/本月），
- * 点击记录卡片跳转到记录详情。
+ * 卡片带照片缩略图，点击跳转记录详情。
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -16,13 +16,13 @@ const searchText = ref('')
 /** 当前激活的 Tab（日期筛选） */
 const activeTab = ref(0)
 
-/** 模拟记录数据 */
+/** 模拟记录数据（含照片缩略图占位） */
 const mockRecords = [
-  { id: 1, taskName: '管网巡检-城北片区', inspector: '张工', startTime: '2025-06-15 09:00', endTime: '2025-06-15 11:30', result: 'normal', problemCount: 0 },
-  { id: 2, taskName: '阀门巡检-高新区', inspector: '李工', startTime: '2025-06-15 14:00', endTime: '2025-06-15 16:00', result: 'abnormal', problemCount: 3 },
-  { id: 3, taskName: '水表巡检-老城区', inspector: '王工', startTime: '2025-06-14 08:30', endTime: '2025-06-14 10:00', result: 'normal', problemCount: 0 },
-  { id: 4, taskName: '消防栓巡检-商业区', inspector: '孙工', startTime: '2025-06-13 15:00', endTime: '2025-06-13 17:00', result: 'abnormal', problemCount: 1 },
-  { id: 5, taskName: '泵站巡检-东区', inspector: '赵工', startTime: '2025-06-10 09:00', endTime: '2025-06-10 11:00', result: 'normal', problemCount: 0 },
+  { id: 1, taskName: '管网巡检-城北片区', inspector: '张工', startTime: '2025-06-15 09:00', endTime: '2025-06-15 11:30', result: 'normal', problemCount: 0, photos: 5 },
+  { id: 2, taskName: '阀门巡检-高新区', inspector: '李工', startTime: '2025-06-15 14:00', endTime: '2025-06-15 16:00', result: 'abnormal', problemCount: 3, photos: 8 },
+  { id: 3, taskName: '水表巡检-老城区', inspector: '王工', startTime: '2025-06-14 08:30', endTime: '2025-06-14 10:00', result: 'normal', problemCount: 0, photos: 3 },
+  { id: 4, taskName: '消防栓巡检-商业区', inspector: '孙工', startTime: '2025-06-13 15:00', endTime: '2025-06-13 17:00', result: 'abnormal', problemCount: 1, photos: 6 },
+  { id: 5, taskName: '泵站巡检-东区', inspector: '赵工', startTime: '2025-06-10 09:00', endTime: '2025-06-10 11:00', result: 'normal', problemCount: 0, photos: 4 },
 ]
 
 /** 结果映射 */
@@ -62,7 +62,6 @@ function isThisMonth(dateStr: string) {
 /** 筛选后的记录列表 */
 const filteredRecords = computed(() => {
   let list = mockRecords
-  // 搜索筛选
   if (searchText.value) {
     const kw = searchText.value.toLowerCase()
     list = list.filter(r =>
@@ -70,14 +69,9 @@ const filteredRecords = computed(() => {
       r.inspector.toLowerCase().includes(kw)
     )
   }
-  // 日期筛选
-  if (activeTab.value === 1) {
-    list = list.filter(r => r.startTime.startsWith(today))
-  } else if (activeTab.value === 2) {
-    list = list.filter(r => isThisWeek(r.startTime))
-  } else if (activeTab.value === 3) {
-    list = list.filter(r => isThisMonth(r.startTime))
-  }
+  if (activeTab.value === 1) list = list.filter(r => r.startTime.startsWith(today))
+  else if (activeTab.value === 2) list = list.filter(r => isThisWeek(r.startTime))
+  else if (activeTab.value === 3) list = list.filter(r => isThisMonth(r.startTime))
   return list
 })
 
@@ -89,41 +83,105 @@ function goDetail(id: number) {
 
 <template>
   <div class="records-page">
-    <van-nav-bar title="巡检记录" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar -->
+    <van-nav-bar
+      title="巡检记录"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索任务名称、巡检人" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索任务名称、巡检人"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="今天" />
       <van-tab title="本周" />
       <van-tab title="本月" />
     </van-tabs>
 
+    <!-- Record List -->
     <div class="record-list">
-      <van-empty v-if="filteredRecords.length === 0" description="暂无巡检记录" />
-      <van-card
+      <van-empty
+        v-if="filteredRecords.length === 0"
+        image="search"
+        description="暂无巡检记录"
+      />
+      <div
         v-for="record in filteredRecords"
         :key="record.id"
-        :title="record.taskName"
-        :desc="`巡检人: ${record.inspector}`"
+        class="record-card"
         @click="goDetail(record.id)"
       >
-        <template #tags>
-          <van-tag :type="resultColorMap[record.result]" size="medium">
-            {{ resultMap[record.result] }}
-          </van-tag>
-          <van-tag v-if="record.problemCount > 0" type="danger" size="medium" plain>
-            问题 {{ record.problemCount }}
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="record-meta">
-            <span>开始: {{ record.startTime }}</span>
-            <span>结束: {{ record.endTime }}</span>
+        <!-- Card Header -->
+        <div class="record-card__header">
+          <h4 class="record-card__title">{{ record.taskName }}</h4>
+          <div class="record-card__badges">
+            <van-tag :type="resultColorMap[record.result]" size="medium" round>
+              {{ resultMap[record.result] }}
+            </van-tag>
+            <van-tag
+              v-if="record.problemCount > 0"
+              type="danger"
+              size="medium"
+              plain
+              round
+            >
+              {{ record.problemCount }}个问题
+            </van-tag>
           </div>
-        </template>
-      </van-card>
+        </div>
+
+        <!-- Card Body -->
+        <div class="record-card__body">
+          <div class="record-info">
+            <span class="info-item">
+              <van-icon name="user-o" size="13" />
+              {{ record.inspector }}
+            </span>
+            <span class="info-item">
+              <van-icon name="clock-o" size="13" />
+              {{ record.startTime }}
+            </span>
+          </div>
+          <div class="record-info">
+            <span class="info-item">
+              <van-icon name="flag-o" size="13" />
+              结束: {{ record.endTime }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Photo Thumbnails -->
+        <div class="record-card__photos" v-if="record.photos > 0">
+          <div class="photo-thumb" v-for="i in Math.min(record.photos, 4)" :key="i">
+            <van-icon name="photo-o" size="20" color="#C8C9CC" />
+          </div>
+          <div v-if="record.photos > 4" class="photo-thumb photo-thumb--more">
+            +{{ record.photos - 4 }}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -133,33 +191,134 @@ function goDetail(id: number) {
   min-height: 100vh;
   background: var(--color-bg-page);
 
+  // NavBar — brand blue bg, white text
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.record-list {
-  padding: 0 8px;
+// Search — rounded, white bg
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
 
-  :deep(.van-card) {
-    margin: 8px;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
-  }
-
-  :deep(.van-tag) {
-    margin-right: 4px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.record-meta {
+// Tabs
+:deep(.van-tabs) {
+  background: #fff;
+}
+
+:deep(.van-tabs__wrap) {
+  padding: 0 8px;
+}
+
+:deep(.van-tab) {
+  font-size: 14px;
+}
+
+// Record List
+.record-list {
+  padding: 8px 12px 16px;
+}
+
+.record-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.record-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.record-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.record-card__badges {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.record-card__body {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.record-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+// Photo Thumbnails
+.record-card__photos {
+  display: flex;
+  gap: 6px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.photo-thumb {
+  width: 52px;
+  height: 52px;
+  border-radius: 6px;
+  background: #F2F3F5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--more {
+    background: #E3F2FD;
+    color: #1E74FF;
+    font-size: 13px;
+    font-weight: 600;
+  }
 }
 </style>
diff --git a/src/views/maintenance/detail.vue b/src/views/maintenance/detail.vue
index fa0f925..e08c4d2 100644
--- a/src/views/maintenance/detail.vue
+++ b/src/views/maintenance/detail.vue
@@ -3,11 +3,11 @@
  * 养护任务详情页
  *
  * 展示养护任务详细信息，包含基本信息、任务描述和操作按钮。
- * 可通过路由 params.detail 获取任务 id。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showToast } from 'vant'
+import { showToast, showConfirmDialog } from 'vant'
 
 const router = useRouter()
 const route = useRoute()
@@ -35,7 +35,7 @@ const statusMap: Record<string, string> = {
   completed: '已完成',
 }
 
-const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
+const statusColorMap: Record<string, 'primary' | 'success' | 'warning'> = {
   pending: 'warning',
   in_progress: 'primary',
   completed: 'success',
@@ -43,7 +43,9 @@ const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger
 
 /** 开始养护 */
 function startMaintenance() {
-  showToast('开始养护')
+  showConfirmDialog({ title: '开始养护', message: '确认开始此养护任务吗？' })
+    .then(() => showToast('已开始养护'))
+    .catch(() => {})
 }
 
 /** 查看养护记录 */
@@ -54,42 +56,96 @@ function viewRecords() {
 
 <template>
   <div class="maintenance-detail-page">
-    <van-nav-bar title="养护详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="养护详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 状态标签 -->
+    <!-- Status Bar -->
     <div class="status-bar">
-      <van-tag :type="statusColorMap[task.status]" size="large">
+      <van-tag :type="statusColorMap[task.status]" size="large" round>
         {{ statusMap[task.status] }}
       </van-tag>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="任务名称" :value="task.name" />
-      <van-cell title="设施类型" :value="task.facility" />
-      <van-cell title="养护类型" :value="task.type" />
-      <van-cell title="计划日期" :value="task.planDate" />
-      <van-cell title="养护人员" :value="task.maintainer" />
-      <van-cell title="养护地址" :value="task.address" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">任务名称</span>
+          <span class="info-row__value">{{ task.name }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">设施类型</span>
+          <span class="info-row__value">{{ task.facility }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">养护类型</span>
+          <span class="info-row__value">
+            <span class="type-tag">{{ task.type }}</span>
+          </span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">计划日期</span>
+          <span class="info-row__value">{{ task.planDate }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">养护人员</span>
+          <span class="info-row__value">{{ task.maintainer }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">养护地址</span>
+          <span class="info-row__value">{{ task.address }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 任务描述 -->
-    <van-cell-group title="任务描述" class="info-group">
-      <van-cell>
+    <!-- 任务描述 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">任务描述</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ task.description }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 时间信息 -->
-    <van-cell-group title="时间信息" class="info-group">
-      <van-cell title="创建时间" :value="task.createTime" />
-      <van-cell title="更新时间" :value="task.updateTime" />
-    </van-cell-group>
+    <!-- 时间信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">时间信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">创建时间</span>
+          <span class="info-row__value">{{ task.createTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">更新时间</span>
+          <span class="info-row__value">{{ task.updateTime }}</span>
+        </div>
+      </div>
+    </div>
 
     <!-- 操作按钮 -->
     <div class="action-buttons">
-      <van-button type="primary" block round @click="startMaintenance">开始养护</van-button>
-      <van-button plain block round class="mt-sm" @click="viewRecords">查看养护记录</van-button>
+      <van-button type="primary" block round size="large" @click="startMaintenance">
+        开始养护
+      </van-button>
+      <van-button plain type="primary" block round size="large" class="btn-gap" @click="viewRecords">
+        查看养护记录
+      </van-button>
     </div>
   </div>
 </template>
@@ -97,38 +153,117 @@ function viewRecords() {
 <style lang="scss" scoped>
 .maintenance-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
+  // NavBar — brand blue
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
+// Status Bar
 .status-bar {
   padding: 12px 16px;
-  background: var(--color-bg-card);
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   text-align: center;
 }
 
-.info-group {
-  margin-top: 8px;
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
 
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+
+  &__accent {
+    width: 3px;
+    height: 16px;
+    border-radius: 2px;
+    background: #1E74FF;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+}
+
+.card-body {
+  padding: 0 16px 14px;
+}
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+
+  & + & {
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  &__label {
+    width: 72px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  &__value {
+    flex: 1;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    word-break: break-all;
+  }
+}
+
+.type-tag {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 500;
+  color: #1E74FF;
+  background: #E3F2FD;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+// Description Text
 .desc-text {
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.7;
   color: var(--color-text-regular);
   padding: 4px 0;
 }
 
+// Action Buttons
 .action-buttons {
-  padding: 24px 16px;
+  padding: 20px 16px;
 
-  .mt-sm {
+  .btn-gap {
     margin-top: 12px;
   }
 }
diff --git a/src/views/maintenance/index.vue b/src/views/maintenance/index.vue
index 919d554..77ac420 100644
--- a/src/views/maintenance/index.vue
+++ b/src/views/maintenance/index.vue
@@ -1,20 +1,183 @@
 <script setup lang="ts">
 /**
- * 养护管理模块（占位页）
+ * 养护任务列表页
  *
- * 预留养护管理功能入口，后续迭代完善。
+ * 支持搜索、类型筛选（全部/定期养护/紧急养护/专项养护），
+ * 任务卡片带状态徽章和操作入口。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, styled tabs.
  */
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+
+/** 搜索关键词 */
+const searchText = ref('')
+
+/** 当前激活的 Tab */
+const activeTab = ref(0)
+
+/** 模拟养护任务数据 */
+const mockTasks = [
+  { id: 1, name: '管网养护-城北片区', facility: '供水管网', type: '定期养护', status: 'pending', planDate: '2025-06-15', maintainer: '刘工', address: '城北工业大道1-50号' },
+  { id: 2, name: '阀门更换-高新区', facility: '阀门井', type: '紧急养护', status: 'in_progress', planDate: '2025-06-15', maintainer: '陈工', address: '高新区创新路55号' },
+  { id: 3, name: '水表检修-老城区', facility: '水表', type: '定期养护', status: 'completed', planDate: '2025-06-14', maintainer: '杨工', address: '老城区中山路88号' },
+  { id: 4, name: '消防栓检查-商业区', facility: '消防栓', type: '专项养护', status: 'pending', planDate: '2025-06-16', maintainer: '周工', address: '商业区解放路101号' },
+  { id: 5, name: '泵站保养-东区', facility: '泵站', type: '定期养护', status: 'in_progress', planDate: '2025-06-15', maintainer: '吴工', address: '东区滨河路88号' },
+]
+
+/** 状态映射 */
+const statusMap: Record<string, string> = {
+  pending: '待养护',
+  in_progress: '养护中',
+  completed: '已完成',
+}
+
+const statusColorMap: Record<string, 'primary' | 'success' | 'warning'> = {
+  pending: 'warning',
+  in_progress: 'primary',
+  completed: 'success',
+}
+
+/** 养护类型映射 */
+const typeColorMap: Record<string, string> = {
+  '定期养护': '#1E74FF',
+  '紧急养护': '#EE0A24',
+  '专项养护': '#FF976A',
+}
+
+/** 筛选后的任务列表 */
+const filteredTasks = computed(() => {
+  let list = mockTasks
+
+  // 搜索筛选
+  if (searchText.value) {
+    const kw = searchText.value.toLowerCase()
+    list = list.filter(t =>
+      t.name.toLowerCase().includes(kw) ||
+      t.facility.toLowerCase().includes(kw) ||
+      t.address.toLowerCase().includes(kw) ||
+      t.maintainer.toLowerCase().includes(kw)
+    )
+  }
+
+  // Tab 筛选
+  if (activeTab.value === 1) {
+    list = list.filter(t => t.type === '定期养护')
+  } else if (activeTab.value === 2) {
+    list = list.filter(t => t.type === '紧急养护')
+  } else if (activeTab.value === 3) {
+    list = list.filter(t => t.type === '专项养护')
+  }
+
+  return list
+})
+
+/** 跳转详情 */
+function goDetail(id: number) {
+  router.push(`/maintenance/${id}`)
+}
 </script>
 
 <template>
   <div class="maintenance-page">
-    <van-nav-bar title="养护管理" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="养护管理"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <div class="maintenance-content">
-      <van-empty image="search" description="养护管理功能开发中，敬请期待" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索任务名称、设施、地址"
+        shape="round"
+        background="transparent"
+      />
+    </div>
+
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
+      <van-tab title="全部" />
+      <van-tab title="定期养护" />
+      <van-tab title="紧急养护" />
+      <van-tab title="专项养护" />
+    </van-tabs>
+
+    <!-- Task List -->
+    <div class="task-list">
+      <van-empty
+        v-if="filteredTasks.length === 0"
+        image="search"
+        description="暂无养护任务"
+      />
+      <div
+        v-for="task in filteredTasks"
+        :key="task.id"
+        class="task-card"
+        @click="goDetail(task.id)"
+      >
+        <!-- Card Header -->
+        <div class="task-card__header">
+          <h4 class="task-card__title">{{ task.name }}</h4>
+          <span
+            class="task-card__type"
+            :style="{ color: typeColorMap[task.type], borderColor: typeColorMap[task.type] }"
+          >
+            {{ task.type }}
+          </span>
+        </div>
+
+        <!-- Card Body -->
+        <div class="task-card__body">
+          <div class="task-info">
+            <span class="info-item">
+              <van-icon name="cluster-o" size="13" />
+              {{ task.facility }}
+            </span>
+            <span class="info-item">
+              <van-icon name="user-o" size="13" />
+              {{ task.maintainer }}
+            </span>
+          </div>
+          <div class="task-info">
+            <span class="info-item">
+              <van-icon name="clock-o" size="13" />
+              {{ task.planDate }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Card Footer -->
+        <div class="task-card__footer">
+          <span class="address-text">
+            <van-icon name="location-o" size="12" color="#969799" />
+            {{ task.address }}
+          </span>
+          <van-tag
+            :type="statusColorMap[task.status]"
+            size="medium"
+            round
+            class="status-badge"
+          >
+            {{ statusMap[task.status] }}
+          </van-tag>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -22,20 +185,140 @@ const router = useRouter()
 <style lang="scss" scoped>
 .maintenance-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
+  // NavBar — brand blue bg, white text
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.maintenance-content {
+// Search — rounded, white bg
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+
+  :deep(.van-search__content) {
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+}
+
+// Tabs
+:deep(.van-tabs) {
+  background: #fff;
+}
+
+:deep(.van-tabs__wrap) {
+  padding: 0 8px;
+}
+
+:deep(.van-tab) {
+  font-size: 14px;
+}
+
+// Task List
+.task-list {
+  padding: 8px 12px 16px;
+}
+
+.task-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.task-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.task-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-card__type {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border: 1px solid;
+  border-radius: 4px;
+  flex-shrink: 0;
+  line-height: 1.4;
+}
+
+.task-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.task-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  min-height: 60vh;
+  gap: 4px;
+}
+
+.task-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.address-text {
+  font-size: 12px;
+  color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.status-badge {
+  flex-shrink: 0;
 }
 </style>
diff --git a/src/views/maintenanceCheck/index.vue b/src/views/maintenanceCheck/index.vue
index bc32c2d..546d6b7 100644
--- a/src/views/maintenanceCheck/index.vue
+++ b/src/views/maintenanceCheck/index.vue
@@ -4,6 +4,7 @@
  *
  * 支持搜索、状态筛选（全部/待检查/已检查），
  * 点击卡片查看检查详情并评分。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, styled tabs.
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -26,20 +27,12 @@ const mockChecks = [
 ]
 
 /** 状态映射 */
-const statusMap: Record<string, string> = {
-  pending: '待检查',
-  checked: '已检查',
-}
-
-const statusColorMap: Record<string, 'primary' | 'success' | 'warning' | 'danger'> = {
-  pending: 'warning',
-  checked: 'success',
-}
+const statusMap: Record<string, string> = { pending: '待检查', checked: '已检查' }
+const statusColorMap: Record<string, 'warning' | 'success'> = { pending: 'warning', checked: 'success' }
 
 /** 筛选后的检查列表 */
 const filteredChecks = computed(() => {
   let list = mockChecks
-  // 搜索筛选
   if (searchText.value) {
     const kw = searchText.value.toLowerCase()
     list = list.filter(c =>
@@ -49,61 +42,115 @@ const filteredChecks = computed(() => {
       c.address.toLowerCase().includes(kw)
     )
   }
-  // 状态筛选
-  if (activeTab.value === 1) {
-    list = list.filter(c => c.status === 'pending')
-  } else if (activeTab.value === 2) {
-    list = list.filter(c => c.status === 'checked')
-  }
+  if (activeTab.value === 1) list = list.filter(c => c.status === 'pending')
+  else if (activeTab.value === 2) list = list.filter(c => c.status === 'checked')
   return list
 })
 
-/** 跳转到检查详情 */
+/** 跳转到检查详情 → maintenanceDetail (养护详情/检查详情共用) */
 function goDetail(id: number) {
-  router.push(`/maintenance/detail?id=${id}`)
+  router.push(`/maintenance/${id}`)
 }
 </script>
 
 <template>
   <div class="check-page">
-    <van-nav-bar title="养护检查" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="养护检查"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索任务、养护人、设施、地址" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索任务、养护人、设施、地址"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="待检查" />
       <van-tab title="已检查" />
     </van-tabs>
 
+    <!-- Check List -->
     <div class="check-list">
-      <van-empty v-if="filteredChecks.length === 0" description="暂无检查任务" />
-      <van-card
+      <van-empty
+        v-if="filteredChecks.length === 0"
+        image="search"
+        description="暂无检查任务"
+      />
+      <div
         v-for="check in filteredChecks"
         :key="check.id"
-        :title="check.name"
-        :desc="`设施: ${check.facility} | 养护人: ${check.maintainer}`"
+        class="check-card"
         @click="goDetail(check.id)"
       >
-        <template #tags>
-          <van-tag :type="statusColorMap[check.status]" size="medium">
+        <!-- Card Header -->
+        <div class="check-card__header">
+          <h4 class="check-card__title">{{ check.name }}</h4>
+          <van-tag :type="statusColorMap[check.status]" size="medium" round>
             {{ statusMap[check.status] }}
           </van-tag>
-          <van-tag v-if="check.status === 'checked' && check.score" type="primary" size="medium" plain>
-            评分 {{ check.score }}
-          </van-tag>
-          <van-tag v-if="check.status === 'pending' && check.lastScore" type="primary" size="medium" plain>
-            上次 {{ check.lastScore }}分
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="check-meta">
-            <span>检查日期: {{ check.checkDate }}</span>
-            <span v-if="check.checkedBy">检查人: {{ check.checkedBy }}</span>
+        </div>
+
+        <!-- Card Body -->
+        <div class="check-card__body">
+          <div class="check-info">
+            <span class="info-item">
+              <van-icon name="cluster-o" size="13" />
+              {{ check.facility }}
+            </span>
+            <span class="info-item">
+              <van-icon name="user-o" size="13" />
+              {{ check.maintainer }}
+            </span>
           </div>
-          <div class="check-address">{{ check.address }}</div>
-        </template>
-      </van-card>
+          <div class="check-info">
+            <span class="info-item">
+              <van-icon name="clock-o" size="13" />
+              {{ check.checkDate }}
+            </span>
+            <span v-if="check.score" class="info-item score-highlight">
+              <van-icon name="star-o" size="13" />
+              评分 {{ check.score }}
+            </span>
+            <span v-else-if="check.lastScore" class="info-item">
+              <van-icon name="star-o" size="13" />
+              上次 {{ check.lastScore }}分
+            </span>
+          </div>
+        </div>
+
+        <!-- Card Footer -->
+        <div class="check-card__footer">
+          <span class="address-text">
+            <van-icon name="location-o" size="12" color="#969799" />
+            {{ check.address }}
+          </span>
+          <span v-if="check.checkedBy" class="meta-text">
+            检查人: {{ check.checkedBy }}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -111,41 +158,112 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .check-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
-.check-list {
-  padding: 0 8px;
-
-  :deep(.van-card) {
-    margin: 8px;
+// Search
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
-  }
-
-  :deep(.van-tag) {
-    margin-right: 4px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.check-meta {
+// Tabs
+:deep(.van-tabs) { background: #fff; }
+:deep(.van-tabs__wrap) { padding: 0 8px; }
+:deep(.van-tab) { font-size: 14px; }
+
+// Check List
+.check-list { padding: 8px 12px 16px; }
+
+.check-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+  &:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
+}
+
+.check-card__header {
   display: flex;
-  gap: 12px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
 }
 
-.check-address {
-  margin-top: 4px;
+.check-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.check-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.check-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.score-highlight {
+  color: #1E74FF;
+  font-weight: 500;
+}
+
+.check-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.address-text {
   font-size: 12px;
   color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.meta-text {
+  font-size: 11px;
+  color: var(--color-text-placeholder);
+  flex-shrink: 0;
 }
 </style>
diff --git a/src/views/maintenanceCheckRecords/detail.vue b/src/views/maintenanceCheckRecords/detail.vue
index 8408c12..364e36f 100644
--- a/src/views/maintenanceCheckRecords/detail.vue
+++ b/src/views/maintenanceCheckRecords/detail.vue
@@ -3,6 +3,7 @@
  * 养护检查记录详情页
  *
  * 展示检查记录的详细信息，包含基本信息、评分详情、检查内容、照片和结论。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -42,29 +43,22 @@ const record = ref({
   ],
 })
 
-const resultMap: Record<string, string> = {
-  qualified: '合格',
-  unqualified: '不合格',
+const resultMap: Record<string, string> = { qualified: '合格', unqualified: '不合格' }
+const resultColorMap: Record<string, 'success' | 'danger'> = { qualified: 'success', unqualified: 'danger' }
+
+/** 评分颜色 class */
+function scoreClass(score: number): string {
+  if (score >= 90) return 'score-green'
+  if (score >= 70) return 'score-orange'
+  return 'score-red'
 }
 
-const resultColorMap: Record<string, 'success' | 'danger'> = {
-  qualified: 'success',
-  unqualified: 'danger',
-}
-
-/** 评分颜色 */
-function scoreColor(score: number): string {
-  if (score >= 90) return '#4CAF50'
-  if (score >= 70) return '#FF9800'
-  return '#F44336'
-}
-
-/** 单项评分颜色 */
-function itemScoreColor(score: number, maxScore: number): string {
+/** 单项评分颜色 class */
+function itemScoreClass(score: number, maxScore: number): string {
   const ratio = score / maxScore
-  if (ratio >= 0.9) return '#4CAF50'
-  if (ratio >= 0.7) return '#FF9800'
-  return '#F44336'
+  if (ratio >= 0.9) return 'score-green'
+  if (ratio >= 0.7) return 'score-orange'
+  return 'score-red'
 }
 
 /** 预览照片 */
@@ -78,48 +72,98 @@ function previewPhoto(index: number) {
 
 <template>
   <div class="check-detail-page">
-    <van-nav-bar title="检查记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="检查记录详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 结果与评分 -->
+    <!-- Result & Score Bar -->
     <div class="result-bar">
-      <van-tag :type="resultColorMap[record.result]" size="large">
+      <van-tag :type="resultColorMap[record.result]" size="large" round>
         {{ resultMap[record.result] }}
       </van-tag>
-      <div class="total-score" :style="{ color: scoreColor(record.score) }">
-        {{ record.score }} 分
+      <div class="score-display">
+        <span class="score-number" :class="scoreClass(record.score)">{{ record.score }}</span>
+        <span class="score-unit">分</span>
       </div>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="检查项目" :value="record.project" />
-      <van-cell title="检查员" :value="record.inspector" />
-      <van-cell title="检查日期" :value="record.date" />
-      <van-cell title="检查时间" :value="record.time" />
-      <van-cell title="检查地址" :value="record.address" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">检查项目</span>
+          <span class="info-row__value">{{ record.project }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">检查员</span>
+          <span class="info-row__value">{{ record.inspector }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">检查日期</span>
+          <span class="info-row__value">{{ record.date }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">检查时间</span>
+          <span class="info-row__value">{{ record.time }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">检查地址</span>
+          <span class="info-row__value">{{ record.address }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 评分详情 -->
-    <van-cell-group title="评分详情" class="info-group">
-      <van-cell v-for="item in record.scoreDetail" :key="item.name" :title="item.name">
-        <template #value>
-          <span :style="{ color: itemScoreColor(item.score, item.maxScore), fontWeight: 'bold' }">
+    <!-- 评分详情 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">评分详情</h5>
+      </div>
+      <div class="card-body">
+        <div v-for="item in record.scoreDetail" :key="item.name" class="score-row">
+          <span class="score-row__name">{{ item.name }}</span>
+          <div class="score-row__bar-wrap">
+            <div
+              class="score-row__bar"
+              :class="itemScoreClass(item.score, item.maxScore)"
+              :style="{ width: (item.score / item.maxScore * 100) + '%' }"
+            ></div>
+          </div>
+          <span class="score-row__text" :class="itemScoreClass(item.score, item.maxScore)">
             {{ item.score }} / {{ item.maxScore }}
           </span>
-        </template>
-      </van-cell>
-    </van-cell-group>
+        </div>
+      </div>
+    </div>
 
-    <!-- 检查内容 -->
-    <van-cell-group title="检查内容" class="info-group">
-      <van-cell>
+    <!-- 检查内容 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">检查内容</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.content }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 现场照片 -->
-    <van-cell-group title="现场照片" class="info-group">
-      <van-cell>
+    <!-- 现场照片 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">现场照片</h5>
+      </div>
+      <div class="card-body">
         <div class="photo-grid">
           <div
             v-for="(photo, index) in record.photos"
@@ -129,84 +173,151 @@ function previewPhoto(index: number) {
           >
             <van-image
               :src="photo.url"
-              width="100%"
-              height="100"
               fit="cover"
               radius="6"
+              class="photo-img"
             />
             <p class="photo-desc">{{ photo.desc }}</p>
           </div>
         </div>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 结论与备注 -->
-    <van-cell-group title="检查结论" class="info-group">
-      <van-cell>
+    <!-- 检查结论 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">检查结论</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.conclusion }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <van-cell-group title="备注" class="info-group">
-      <van-cell>
+    <!-- 备注 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">备注</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.remark }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 时间信息 -->
-    <van-cell-group title="时间信息" class="info-group">
-      <van-cell title="创建时间" :value="record.createTime" />
-    </van-cell-group>
+    <!-- 时间信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">时间信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">创建时间</span>
+          <span class="info-row__value">{{ record.createTime }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .check-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
+}
+
+// Result Bar
+.result-bar {
+  padding: 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  text-align: center;
+}
+.score-display { margin-top: 8px; }
+.score-number {
+  font-size: 32px;
+  font-weight: 700;
+  &.score-green { color: #4CAF50; }
+  &.score-orange { color: #FF9800; }
+  &.score-red { color: #F44336; }
+}
+.score-unit {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin-left: 2px;
+}
+
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+  &__accent { width: 3px; height: 16px; border-radius: 2px; background: #1E74FF; flex-shrink: 0; }
+  &__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
+}
+.card-body { padding: 0 16px 14px; }
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  & + & { border-top: 1px solid var(--color-border-light); }
+  &__label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-text-secondary); }
+  &__value { flex: 1; font-size: 14px; color: var(--color-text-primary); word-break: break-all; }
+}
+
+// Score Rows
+.score-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  &__name { font-size: 13px; color: var(--color-text-regular); min-width: 76px; }
+  &__bar-wrap { flex: 1; height: 6px; background: #E8ECF0; border-radius: 3px; overflow: hidden; }
+  &__bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; background: #1E74FF; }
+  &__bar.score-green { background: #4CAF50; }
+  &__bar.score-orange { background: #FF9800; }
+  &__bar.score-red { background: #F44336; }
+  &__text {
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 52px;
+    text-align: right;
+    color: var(--color-text-secondary);
+    &.score-green { color: #4CAF50; }
+    &.score-orange { color: #FF9800; }
+    &.score-red { color: #F44336; }
   }
 }
 
-.result-bar {
-  padding: 12px 16px;
-  background: var(--color-bg-card);
-  text-align: center;
-}
-
-.total-score {
-  margin-top: 8px;
-  font-size: 28px;
-  font-weight: 700;
-}
-
-.info-group {
-  margin-top: 8px;
-}
-
-.desc-text {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--color-text-regular);
-  padding: 4px 0;
-}
-
+// Photos
 .photo-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
 }
-
-.photo-item {
-  cursor: pointer;
+.photo-item { cursor: pointer; }
+.photo-img {
+  aspect-ratio: 4 / 3;
+  width: 100%;
 }
-
 .photo-desc {
   margin: 4px 0 0 0;
   font-size: 11px;
@@ -216,4 +327,12 @@ function previewPhoto(index: number) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+// Description
+.desc-text {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--color-text-regular);
+  padding: 4px 0;
+}
 </style>
diff --git a/src/views/maintenanceCheckRecords/index.vue b/src/views/maintenanceCheckRecords/index.vue
index d1d981f..e7f6373 100644
--- a/src/views/maintenanceCheckRecords/index.vue
+++ b/src/views/maintenanceCheckRecords/index.vue
@@ -4,6 +4,7 @@
  *
  * 展示养护检查记录，支持搜索和结果筛选（全部/合格/不合格），
  * 卡片中显示评分，点击跳转检查记录详情。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, styled tabs.
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -26,21 +27,14 @@ const mockCheckRecords = [
 ]
 
 /** 结果映射 */
-const resultMap: Record<string, string> = {
-  qualified: '合格',
-  unqualified: '不合格',
-}
-
-const resultColorMap: Record<string, 'success' | 'danger'> = {
-  qualified: 'success',
-  unqualified: 'danger',
-}
+const resultMap: Record<string, string> = { qualified: '合格', unqualified: '不合格' }
+const resultColorMap: Record<string, 'success' | 'danger'> = { qualified: 'success', unqualified: 'danger' }
 
 /** 评分颜色 */
-function scoreColor(score: number): string {
-  if (score >= 90) return '#4CAF50'
-  if (score >= 70) return '#FF9800'
-  return '#F44336'
+function scoreClass(score: number): string {
+  if (score >= 90) return 'score-green'
+  if (score >= 70) return 'score-orange'
+  return 'score-red'
 }
 
 /** 筛选后的记录列表 */
@@ -67,40 +61,83 @@ function goDetail(id: number) {
 
 <template>
   <div class="check-records-page">
-    <van-nav-bar title="养护检查记录" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="养护检查记录"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索项目、检查员、内容" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索项目、检查员、内容"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="合格" />
       <van-tab title="不合格" />
     </van-tabs>
 
+    <!-- Record List -->
     <div class="record-list">
-      <van-empty v-if="filteredRecords.length === 0" description="暂无检查记录" />
-      <van-card
+      <van-empty
+        v-if="filteredRecords.length === 0"
+        image="search"
+        description="暂无检查记录"
+      />
+      <div
         v-for="record in filteredRecords"
         :key="record.id"
-        :title="record.project"
-        :desc="`检查员: ${record.inspector}`"
+        class="record-card"
         @click="goDetail(record.id)"
       >
-        <template #tags>
-          <van-tag :type="resultColorMap[record.result]" size="medium">
+        <!-- Card Header -->
+        <div class="record-card__header">
+          <h4 class="record-card__title">{{ record.project }}</h4>
+          <span :class="['score-badge', scoreClass(record.score)]">{{ record.score }}分</span>
+        </div>
+
+        <!-- Card Body -->
+        <div class="record-card__body">
+          <div class="record-info">
+            <span class="info-item">
+              <van-icon name="user-o" size="13" />
+              {{ record.inspector }}
+            </span>
+            <span class="info-item">
+              <van-icon name="clock-o" size="13" />
+              {{ record.date }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Card Footer -->
+        <div class="record-card__footer">
+          <span class="content-text">{{ record.content }}</span>
+          <van-tag :type="resultColorMap[record.result]" size="medium" round class="result-badge">
             {{ resultMap[record.result] }}
           </van-tag>
-          <van-tag size="medium" :color="scoreColor(record.score)" text-color="#fff">
-            {{ record.score }} 分
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="record-meta">
-            <span>{{ record.date }}</span>
-            <span>{{ record.content }}</span>
-          </div>
-        </template>
-      </van-card>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -108,35 +145,111 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .check-records-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
-.record-list {
-  padding: 0 8px;
-
-  :deep(.van-card) {
-    margin: 8px;
+// Search
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
-  }
-
-  :deep(.van-tag) {
-    margin-right: 4px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.record-meta {
+// Tabs
+:deep(.van-tabs) { background: #fff; }
+:deep(.van-tabs__wrap) { padding: 0 8px; }
+:deep(.van-tab) { font-size: 14px; }
+
+// Record List
+.record-list { padding: 8px 12px 16px; }
+
+.record-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+  &:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
+}
+
+.record-card__header {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.record-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.score-badge {
+  font-size: 13px;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: 12px;
+  flex-shrink: 0;
+  color: #fff;
+  &.score-green { background: #4CAF50; }
+  &.score-orange { background: #FF9800; }
+  &.score-red { background: #F44336; }
+}
+
+.record-card__body {
+  margin-bottom: 8px;
+}
+
+.record-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.record-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.content-text {
   font-size: 12px;
   color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.result-badge {
+  flex-shrink: 0;
 }
 </style>
diff --git a/src/views/maintenanceRecords/detail.vue b/src/views/maintenanceRecords/detail.vue
index 4a22c95..0da3722 100644
--- a/src/views/maintenanceRecords/detail.vue
+++ b/src/views/maintenanceRecords/detail.vue
@@ -3,7 +3,7 @@
  * 养护记录详情页
  *
  * 展示养护记录的基本信息、养护前后对比照片及评分详情。
- * 可通过路由 query.id 获取记录 id。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -34,149 +34,236 @@ const checkItems = ref([
   { name: '螺栓紧固', score: 5, maxScore: 5 },
   { name: '润滑保养', score: 2, maxScore: 5 },
 ])
+
+/** 结果映射 */
+const resultMap: Record<string, string> = { normal: '正常', abnormal: '异常' }
+const resultColorMap: Record<string, 'success' | 'danger'> = { normal: 'success', abnormal: 'danger' }
 </script>
 
 <template>
   <div class="record-detail-page">
-    <van-nav-bar title="养护记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="养护记录详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="任务名称" :value="record.taskName" />
-      <van-cell title="养护人员" :value="record.maintainer" />
-      <van-cell title="开始时间" :value="record.startTime" />
-      <van-cell title="结束时间" :value="record.endTime" />
-      <van-cell title="养护时长" :value="record.duration" />
-      <van-cell title="养护结果">
-        <template #value>
-          <van-tag :type="record.result === 'normal' ? 'success' : 'danger'" size="medium">
-            {{ record.result === 'normal' ? '正常' : '异常' }}
-          </van-tag>
-        </template>
-      </van-cell>
-      <van-cell title="综合评分">
-        <template #value>
-          <span class="score-value">{{ record.score }} 分</span>
-        </template>
-      </van-cell>
-    </van-cell-group>
-
-    <!-- 评分明细 -->
-    <van-cell-group title="评分明细" class="info-group">
-      <van-cell v-for="item in checkItems" :key="item.name" :title="item.name">
-        <template #value>
-          <span class="item-score">{{ item.score }} / {{ item.maxScore }}</span>
-        </template>
-      </van-cell>
-    </van-cell-group>
-
-    <!-- 养护前照片 -->
-    <van-cell-group title="养护前照片" class="info-group">
-      <div class="photo-grid">
-        <van-image
-          v-for="i in 2"
-          :key="'before-' + i"
-          width="100%"
-          height="100%"
-          fit="cover"
-          radius="8"
-          src="https://via.placeholder.com/300?text=养护前照片{{ i }}"
-          class="photo-item"
-        >
-          <template #loading>
-            <van-loading type="spinner" size="20" />
-          </template>
-          <template #error>
-            <div class="photo-placeholder">暂无照片</div>
-          </template>
-        </van-image>
+    <!-- Result & Score Bar -->
+    <div class="result-bar">
+      <van-tag :type="resultColorMap[record.result]" size="large" round>
+        {{ resultMap[record.result] }}
+      </van-tag>
+      <div class="score-display">
+        <span class="score-number">{{ record.score }}</span>
+        <span class="score-unit">分</span>
       </div>
-    </van-cell-group>
+    </div>
 
-    <!-- 养护后照片 -->
-    <van-cell-group title="养护后照片" class="info-group">
-      <div class="photo-grid">
-        <van-image
-          v-for="i in 2"
-          :key="'after-' + i"
-          width="100%"
-          height="100%"
-          fit="cover"
-          radius="8"
-          src="https://via.placeholder.com/300?text=养护后照片{{ i }}"
-          class="photo-item"
-        >
-          <template #loading>
-            <van-loading type="spinner" size="20" />
-          </template>
-          <template #error>
-            <div class="photo-placeholder">暂无照片</div>
-          </template>
-        </van-image>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
       </div>
-    </van-cell-group>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">任务名称</span>
+          <span class="info-row__value">{{ record.taskName }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">养护人员</span>
+          <span class="info-row__value">{{ record.maintainer }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">开始时间</span>
+          <span class="info-row__value">{{ record.startTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">结束时间</span>
+          <span class="info-row__value">{{ record.endTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">养护时长</span>
+          <span class="info-row__value">{{ record.duration }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 备注 -->
-    <van-cell-group v-if="record.remark" title="备注" class="info-group">
-      <van-cell>
+    <!-- 评分明细 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">评分明细</h5>
+      </div>
+      <div class="card-body">
+        <div v-for="item in checkItems" :key="item.name" class="score-row">
+          <span class="score-row__name">{{ item.name }}</span>
+          <div class="score-row__bar-wrap">
+            <div class="score-row__bar" :style="{ width: (item.score / item.maxScore * 100) + '%' }"></div>
+          </div>
+          <span class="score-row__text">{{ item.score }} / {{ item.maxScore }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 养护前照片 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">养护前照片</h5>
+      </div>
+      <div class="card-body">
+        <div class="photo-grid">
+          <van-image
+            v-for="i in 2"
+            :key="'before-' + i"
+            fit="cover"
+            radius="8"
+            class="photo-item"
+            :src="`https://via.placeholder.com/300?text=养护前照片${i}`"
+          >
+            <template #loading>
+              <van-loading type="spinner" size="20" />
+            </template>
+            <template #error>
+              <div class="photo-placeholder">暂无照片</div>
+            </template>
+          </van-image>
+        </div>
+      </div>
+    </div>
+
+    <!-- 养护后照片 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">养护后照片</h5>
+      </div>
+      <div class="card-body">
+        <div class="photo-grid">
+          <van-image
+            v-for="i in 2"
+            :key="'after-' + i"
+            fit="cover"
+            radius="8"
+            class="photo-item"
+            :src="`https://via.placeholder.com/300?text=养护后照片${i}`"
+          >
+            <template #loading>
+              <van-loading type="spinner" size="20" />
+            </template>
+            <template #error>
+              <div class="photo-placeholder">暂无照片</div>
+            </template>
+          </van-image>
+        </div>
+      </div>
+    </div>
+
+    <!-- 备注 Card -->
+    <div v-if="record.remark" class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">备注</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.remark }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .record-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
-.info-group {
+// Result Bar
+.result-bar {
+  padding: 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  text-align: center;
+}
+.score-display {
   margin-top: 8px;
 }
-
-.score-value {
-  font-weight: 600;
-  color: var(--color-primary);
-  font-size: 15px;
+.score-number {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1E74FF;
 }
-
-.item-score {
-  font-size: 13px;
-  color: var(--color-text-secondary);
-}
-
-.desc-text {
+.score-unit {
   font-size: 14px;
-  line-height: 1.6;
-  color: var(--color-text-regular);
-  padding: 4px 0;
+  color: var(--color-text-secondary);
+  margin-left: 2px;
 }
 
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+  &__accent { width: 3px; height: 16px; border-radius: 2px; background: #1E74FF; flex-shrink: 0; }
+  &__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
+}
+.card-body { padding: 0 16px 14px; }
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  & + & { border-top: 1px solid var(--color-border-light); }
+  &__label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-text-secondary); }
+  &__value { flex: 1; font-size: 14px; color: var(--color-text-primary); word-break: break-all; }
+}
+
+// Score Rows
+.score-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  &__name { font-size: 13px; color: var(--color-text-regular); min-width: 90px; }
+  &__bar-wrap { flex: 1; height: 6px; background: #E8ECF0; border-radius: 3px; overflow: hidden; }
+  &__bar { height: 100%; background: #1E74FF; border-radius: 3px; transition: width 0.4s ease; }
+  &__text { font-size: 12px; color: var(--color-text-secondary); min-width: 44px; text-align: right; }
+}
+
+// Photos
 .photo-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
-  padding: 12px 16px;
 }
-
 .photo-item {
   aspect-ratio: 4 / 3;
 }
-
 .photo-placeholder {
   width: 100%;
-  height: 100%;
   aspect-ratio: 4 / 3;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -185,4 +272,12 @@ const checkItems = ref([
   color: var(--color-text-placeholder);
   border: 1px dashed var(--color-border);
 }
+
+// Description
+.desc-text {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--color-text-regular);
+  padding: 4px 0;
+}
 </style>
diff --git a/src/views/maintenanceRecords/index.vue b/src/views/maintenanceRecords/index.vue
index 88bd665..690c083 100644
--- a/src/views/maintenanceRecords/index.vue
+++ b/src/views/maintenanceRecords/index.vue
@@ -4,11 +4,13 @@
  *
  * 支持搜索、日期筛选（全部/今天/本周/本月），
  * 点击记录卡片跳转到记录详情。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, styled tabs.
  */
 import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 const router = useRouter()
+const route = useRoute()
 
 /** 搜索关键词 */
 const searchText = ref('')
@@ -18,11 +20,11 @@ const activeTab = ref(0)
 
 /** 模拟养护记录数据 */
 const mockRecords = [
-  { id: 1, taskName: '管网养护-城北片区', maintainer: '刘工', startTime: '2025-06-15 09:00', endTime: '2025-06-15 11:30', result: 'normal', score: 95 },
-  { id: 2, taskName: '阀门养护-高新区', maintainer: '陈工', startTime: '2025-06-15 14:00', endTime: '2025-06-15 16:00', result: 'abnormal', score: 72 },
-  { id: 3, taskName: '水表养护-老城区', maintainer: '杨工', startTime: '2025-06-14 08:30', endTime: '2025-06-14 10:00', result: 'normal', score: 88 },
-  { id: 4, taskName: '消防栓养护-商业区', maintainer: '周工', startTime: '2025-06-13 15:00', endTime: '2025-06-13 17:00', result: 'abnormal', score: 65 },
-  { id: 5, taskName: '泵站养护-东区', maintainer: '吴工', startTime: '2025-06-10 09:00', endTime: '2025-06-10 11:00', result: 'normal', score: 91 },
+  { id: 1, taskName: '管网养护-城北片区', maintainer: '刘工', startTime: '2025-06-15 09:00', endTime: '2025-06-15 11:30', result: 'normal', score: 95, address: '城北工业大道1-50号' },
+  { id: 2, taskName: '阀门养护-高新区', maintainer: '陈工', startTime: '2025-06-15 14:00', endTime: '2025-06-15 16:00', result: 'abnormal', score: 72, address: '高新区创新路55号' },
+  { id: 3, taskName: '水表养护-老城区', maintainer: '杨工', startTime: '2025-06-14 08:30', endTime: '2025-06-14 10:00', result: 'normal', score: 88, address: '老城区中山路88号' },
+  { id: 4, taskName: '消防栓养护-商业区', maintainer: '周工', startTime: '2025-06-13 15:00', endTime: '2025-06-13 17:00', result: 'abnormal', score: 65, address: '商业区解放路101号' },
+  { id: 5, taskName: '泵站养护-东区', maintainer: '吴工', startTime: '2025-06-10 09:00', endTime: '2025-06-10 11:00', result: 'normal', score: 91, address: '东区滨河路88号' },
 ]
 
 /** 结果映射 */
@@ -37,14 +39,14 @@ const resultColorMap: Record<string, 'success' | 'danger'> = {
 }
 
 /** 日期筛选工具函数 */
-function getToday() {
+function getToday(): string {
   const d = new Date()
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
 
 const today = getToday()
 
-function isThisWeek(dateStr: string) {
+function isThisWeek(dateStr: string): boolean {
   const d = new Date(dateStr)
   const now = new Date()
   const startOfWeek = new Date(now)
@@ -53,7 +55,7 @@ function isThisWeek(dateStr: string) {
   return d >= startOfWeek
 }
 
-function isThisMonth(dateStr: string) {
+function isThisMonth(dateStr: string): boolean {
   const d = new Date(dateStr)
   const now = new Date()
   return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth()
@@ -62,14 +64,17 @@ function isThisMonth(dateStr: string) {
 /** 筛选后的记录列表 */
 const filteredRecords = computed(() => {
   let list = mockRecords
+
   // 搜索筛选
   if (searchText.value) {
     const kw = searchText.value.toLowerCase()
     list = list.filter(r =>
       r.taskName.toLowerCase().includes(kw) ||
-      r.maintainer.toLowerCase().includes(kw)
+      r.maintainer.toLowerCase().includes(kw) ||
+      r.address.toLowerCase().includes(kw)
     )
   }
+
   // 日期筛选
   if (activeTab.value === 1) {
     list = list.filter(r => r.startTime.startsWith(today))
@@ -78,6 +83,7 @@ const filteredRecords = computed(() => {
   } else if (activeTab.value === 3) {
     list = list.filter(r => isThisMonth(r.startTime))
   }
+
   return list
 })
 
@@ -85,45 +91,100 @@ const filteredRecords = computed(() => {
 function goDetail(id: number) {
   router.push(`/maintenanceRecords/detail?id=${id}`)
 }
+
+/** 格式化时间，只显示时间部分 */
+function formatTime(dateStr: string): string {
+  // Returns HH:MM from "YYYY-MM-DD HH:MM"
+  return dateStr.split(' ')[1] || dateStr
+}
 </script>
 
 <template>
   <div class="records-page">
-    <van-nav-bar title="养护记录" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="养护记录"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索任务名称、养护人" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索任务名称、养护人"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="今天" />
       <van-tab title="本周" />
       <van-tab title="本月" />
     </van-tabs>
 
+    <!-- Record List -->
     <div class="record-list">
-      <van-empty v-if="filteredRecords.length === 0" description="暂无养护记录" />
-      <van-card
+      <van-empty
+        v-if="filteredRecords.length === 0"
+        image="search"
+        description="暂无养护记录"
+      />
+      <div
         v-for="record in filteredRecords"
         :key="record.id"
-        :title="record.taskName"
-        :desc="`养护人: ${record.maintainer}`"
+        class="record-card"
         @click="goDetail(record.id)"
       >
-        <template #tags>
-          <van-tag :type="resultColorMap[record.result]" size="medium">
+        <!-- Card Header -->
+        <div class="record-card__header">
+          <h4 class="record-card__title">{{ record.taskName }}</h4>
+          <van-tag :type="resultColorMap[record.result]" size="medium" round>
             {{ resultMap[record.result] }}
           </van-tag>
-          <van-tag type="primary" size="medium" plain>
-            评分 {{ record.score }}
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="record-meta">
-            <span>开始: {{ record.startTime }}</span>
-            <span>结束: {{ record.endTime }}</span>
+        </div>
+
+        <!-- Card Body -->
+        <div class="record-card__body">
+          <div class="record-info">
+            <span class="info-item">
+              <van-icon name="user-o" size="13" />
+              {{ record.maintainer }}
+            </span>
+            <span class="info-item">
+              <van-icon name="star-o" size="13" />
+              评分 {{ record.score }}
+            </span>
           </div>
-        </template>
-      </van-card>
+        </div>
+
+        <!-- Card Footer -->
+        <div class="record-card__footer">
+          <span class="address-text">
+            <van-icon name="location-o" size="12" color="#969799" />
+            {{ record.address }}
+          </span>
+          <span class="time-range">
+            <van-icon name="clock-o" size="12" color="#969799" />
+            {{ formatTime(record.startTime) }} - {{ formatTime(record.endTime) }}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -131,35 +192,132 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .records-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
+  // NavBar — brand blue bg, white text
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+    background: #1E74FF;
+  }
+  :deep(.van-nav-bar__title) {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+  }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) {
+    color: #fff;
+  }
+  :deep(.van-nav-bar .van-icon) {
+    color: #fff;
   }
 }
 
-.record-list {
-  padding: 0 8px;
+// Search — rounded, white bg
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
 
-  :deep(.van-card) {
-    margin: 8px;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
-  }
-
-  :deep(.van-tag) {
-    margin-right: 4px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.record-meta {
+// Tabs
+:deep(.van-tabs) {
+  background: #fff;
+}
+
+:deep(.van-tabs__wrap) {
+  padding: 0 8px;
+}
+
+:deep(.van-tab) {
+  font-size: 14px;
+}
+
+// Record List
+.record-list {
+  padding: 8px 12px 16px;
+}
+
+.record-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.record-card__header {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.record-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.record-card__body {
+  margin-bottom: 8px;
+}
+
+.record-info {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.record-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.address-text {
   font-size: 12px;
-  color: var(--color-text-secondary);
+  color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.time-range {
+  font-size: 12px;
+  color: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
 }
 </style>
diff --git a/src/views/menuEdit/addGroup.vue b/src/views/menuEdit/addGroup.vue
index 71bc3e3..954b99a 100644
--- a/src/views/menuEdit/addGroup.vue
+++ b/src/views/menuEdit/addGroup.vue
@@ -4,10 +4,11 @@
  *
  * 使用 van-form + van-field 收集分组名称，
  * 支持添加和编辑两种模式。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
  */
 import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { showToast } from 'vant'
+import { showToast, showConfirmDialog } from 'vant'
 
 const route = useRoute()
 const router = useRouter()
@@ -56,60 +57,87 @@ function onSubmit() {
  * 删除分组（仅编辑模式）
  */
 function onDelete() {
-  // showConfirmDialog would be used here with real API
-  showToast('删除功能待接入')
+  showConfirmDialog({
+    title: '确认删除',
+    message: `确定要删除分组「${menuTitle.value}」吗？删除后不可恢复。`,
+  })
+    .then(() => {
+      showToast('删除成功')
+      router.back()
+    })
+    .catch(() => {
+      // cancelled
+    })
 }
 </script>
 
 <template>
   <div class="add-group-page">
-    <!-- 顶部导航栏 -->
-    <van-nav-bar :title="pageTitle" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      :title="pageTitle"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
     <div class="add-group-content">
-      <!-- 分组名称输入 -->
-      <div class="form-section">
-        <van-field
-          v-model="menuTitle"
-          maxlength="10"
-          placeholder="请输入分组名称"
-          label="分组名称"
-        />
+      <!-- 分组名称输入 Card -->
+      <div class="form-card">
+        <div class="card-header">
+          <span class="card-header__accent"></span>
+          <h5 class="card-header__title">分组信息</h5>
+        </div>
+        <div class="card-body">
+          <van-field
+            v-model="menuTitle"
+            maxlength="10"
+            placeholder="请输入分组名称"
+            label="分组名称"
+            :border="false"
+            input-align="right"
+          />
+        </div>
       </div>
 
       <!-- 操作按钮 -->
-      <div class="action-section" v-if="title === '添加'">
-        <van-button
-          round
-          block
-          type="primary"
-          :loading="isSubmitting"
-          loading-text="保存中..."
-          @click="onSubmit"
-        >
-          保存
-        </van-button>
-      </div>
-
-      <div class="action-section-edit" v-if="title === '编辑'">
-        <van-button
-          round
-          block
-          type="danger"
-          @click="onDelete"
-        >
-          删除
-        </van-button>
-        <van-button
-          round
-          block
-          type="primary"
-          :loading="isSubmitting"
-          loading-text="保存中..."
-          @click="onSubmit"
-        >
-          保存
-        </van-button>
+      <div class="action-section">
+        <div class="action-section__edit" v-if="title === '编辑'">
+          <van-button
+            round
+            block
+            type="danger"
+            plain
+            @click="onDelete"
+          >
+            删除分组
+          </van-button>
+          <van-button
+            round
+            block
+            type="primary"
+            :loading="isSubmitting"
+            loading-text="保存中..."
+            @click="onSubmit"
+          >
+            保存修改
+          </van-button>
+        </div>
+        <div class="action-section__add" v-else>
+          <van-button
+            round
+            block
+            type="primary"
+            size="large"
+            :loading="isSubmitting"
+            loading-text="保存中..."
+            @click="onSubmit"
+          >
+            保存
+          </van-button>
+        </div>
       </div>
     </div>
   </div>
@@ -118,46 +146,84 @@ function onDelete() {
 <style lang="scss" scoped>
 .add-group-page {
   min-height: 100vh;
-  background: #f4f7f8;
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
 .add-group-content {
   width: 100%;
 }
 
-.form-section {
-  margin: 12px;
-  border-radius: 10px;
+// Form Card
+.form-card {
   background: #fff;
+  border-radius: 10px;
+  margin: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   overflow: hidden;
 }
 
-.action-section {
-  padding: 10px 16px;
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+
+  &__accent {
+    width: 3px;
+    height: 16px;
+    border-radius: 2px;
+    background: #1E74FF;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
 }
 
-.action-section-edit {
-  padding: 10px 16px;
-  display: flex;
-  gap: 12px;
+.card-body {
+  padding: 0 0 8px;
 
-  .van-button {
-    flex: 1;
+  :deep(.van-field) {
+    padding: 8px 16px 12px;
   }
 
-  .van-button--danger {
-    flex: 0 0 30%;
+  :deep(.van-field__label) {
+    width: 72px;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+}
+
+// Action Section
+.action-section {
+  padding: 16px;
+
+  &__add {
+    padding: 0;
   }
 
-  .van-button--primary {
-    flex: 1;
+  &__edit {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .van-button--danger {
+      flex: 0 0 auto;
+      min-width: 100px;
+    }
+
+    .van-button--primary {
+      flex: 1;
+    }
   }
 }
 </style>
diff --git a/src/views/menuEdit/index.vue b/src/views/menuEdit/index.vue
index 453dd9f..4a6d1b7 100644
--- a/src/views/menuEdit/index.vue
+++ b/src/views/menuEdit/index.vue
@@ -2,10 +2,10 @@
 /**
  * 工作台设置 / 菜单编辑器
  *
- * 展示分组列表，支持拖拽排序（van-grid 展示）。
- * 点击"添加分组"跳转到 addGroup 页面。
+ * 展示分组列表，支持点击编辑和添加分组。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
  */
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -14,75 +14,86 @@ const router = useRouter()
 interface GroupItem {
   id: number
   name: string
-  moving: boolean
 }
 
-const drag = reactive({
-  list: [] as GroupItem[],
-})
+const groups = ref<GroupItem[]>([])
 
 /**
  * 模拟初始化数据
  */
 onMounted(() => {
-  drag.list = [
-    { id: 1, name: '常用功能', moving: false },
-    { id: 2, name: '管网管理', moving: false },
-    { id: 3, name: '巡检管理', moving: false },
-    { id: 4, name: '报表统计', moving: false },
+  groups.value = [
+    { id: 1, name: '常用功能' },
+    { id: 2, name: '管网管理' },
+    { id: 3, name: '巡检管理' },
+    { id: 4, name: '报表统计' },
   ]
 })
 
 /**
- * 跳转添加/编辑分组
+ * 跳转添加分组
  */
-function toAddGroup(type: number, item?: GroupItem) {
-  if (type === 0) {
-    router.push({
-      name: 'addGroup',
-      params: { title: '添加' },
-    })
-  } else if (item) {
-    router.push({
-      name: 'addGroup',
-      params: { title: '编辑' },
-      query: {
-        name: item.name,
-        groupId: item.id,
-      },
-    })
-  }
+function toAddGroup() {
+  router.push({
+    name: 'addGroup',
+    params: { title: '添加' },
+  })
+}
+
+/**
+ * 跳转编辑分组
+ */
+function toEditGroup(item: GroupItem) {
+  router.push({
+    name: 'addGroup',
+    params: { title: '编辑' },
+    query: {
+      name: item.name,
+      groupId: item.id,
+    },
+  })
 }
 </script>
 
 <template>
   <div class="menu-edit-page">
-    <!-- 顶部导航栏 -->
-    <van-nav-bar title="工作台设置" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="工作台设置"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
     <div class="menu-edit-content">
       <!-- 添加分组按钮 -->
-      <div class="add-group-btn" @click="toAddGroup(0)">
-        添加分组
+      <div class="add-group-btn" @click="toAddGroup">
+        <van-icon name="plus" size="18" />
+        <span>添加分组</span>
       </div>
 
       <!-- 分组列表 -->
-      <div class="group-list">
+      <div class="group-list" v-if="groups.length > 0">
         <div
           class="group-item"
-          v-for="item in drag.list"
+          v-for="item in groups"
           :key="item.id"
-          @click="toAddGroup(1, item)"
+          @click="toEditGroup(item)"
         >
-          <div class="group-item-name">{{ item.name }}</div>
-          <div class="group-item-actions">
-            <van-icon name="arrow" />
+          <div class="group-item__icon">
+            <van-icon name="apps-o" size="20" color="#1E74FF" />
+          </div>
+          <div class="group-item__name">{{ item.name }}</div>
+          <div class="group-item__arrow">
+            <van-icon name="arrow" size="14" color="#C8C9CC" />
           </div>
         </div>
       </div>
 
       <!-- 空状态 -->
-      <van-empty v-if="drag.list.length === 0" description="暂无分组" />
+      <van-empty v-else image="search" description="暂无分组，点击上方按钮添加" />
     </div>
   </div>
 </template>
@@ -90,14 +101,13 @@ function toAddGroup(type: number, item?: GroupItem) {
 <style lang="scss" scoped>
 .menu-edit-page {
   min-height: 100vh;
-  background: #f4f7f8;
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
 .menu-edit-content {
@@ -105,17 +115,23 @@ function toAddGroup(type: number, item?: GroupItem) {
 }
 
 .add-group-btn {
-  width: 100%;
-  height: 40px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 44px;
+  margin: 12px;
   font-size: 15px;
-  color: #3d6ffb;
-  line-height: 40px;
-  background-color: #fff;
+  font-weight: 500;
+  color: #1E74FF;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   cursor: pointer;
+  transition: background 0.15s ease;
 
   &:active {
-    background: #f5f5f5;
+    background: var(--color-primary-bg);
   }
 }
 
@@ -126,28 +142,43 @@ function toAddGroup(type: number, item?: GroupItem) {
 .group-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 12px;
   height: 56px;
-  margin: 12px 0;
-  padding: 0 12px;
+  padding: 0 16px;
   background: #fff;
   border-radius: 10px;
-  color: #333;
-  font-size: 15px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   cursor: pointer;
+  transition: box-shadow 0.15s ease;
 
   &:active {
-    background: #f5f5f5;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 
-  &-name {
-    flex: 1;
-  }
-
-  &-actions {
+  &__icon {
     display: flex;
     align-items: center;
-    color: #c8c9cc;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: var(--color-primary-bg);
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+
+  &__name {
+    flex: 1;
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__arrow {
+    flex-shrink: 0;
   }
 }
 </style>
diff --git a/src/views/problemReport/index.vue b/src/views/problemReport/index.vue
index aa93066..014506e 100644
--- a/src/views/problemReport/index.vue
+++ b/src/views/problemReport/index.vue
@@ -16,48 +16,42 @@ const reportTypes = [
     icon: 'warning-o',
     route: '/reportFloodedPoints',
     desc: '积水、淹没点位上报',
+    color: '#FF6B6B',
   },
   {
     text: '巡检问题',
     icon: 'search',
     route: '/reportInspection',
     desc: '巡检发现的问题',
+    color: '#4ECDC4',
   },
   {
     text: '设备报修',
     icon: 'setting-o',
     route: '/reportEquipmentRepair',
     desc: '设备故障报修',
+    color: '#FF976A',
   },
   {
     text: '督办问题',
     icon: 'records',
     route: '/reportSupervise',
     desc: '督办项目问题',
+    color: '#9B59B6',
   },
   {
     text: '项目问题',
     icon: 'bulb-o',
     route: '/reportProject',
     desc: '项目相关问题',
+    color: '#F39C12',
   },
   {
     text: '施工问题',
     icon: 'cluster-o',
     route: '/reportConstruction',
     desc: '施工现场问题',
-  },
-  {
-    text: '积水调查',
-    icon: 'water-o' as string,
-    route: '/reportFloodedPoints',
-    desc: '积水调查记录',
-  },
-  {
-    text: '养护上报',
-    icon: 'logistics',
-    route: '/reportEquipmentRepair',
-    desc: '养护问题上报',
+    color: '#1ABC9C',
   },
 ]
 
@@ -78,18 +72,34 @@ function goReport(route: string) {
     />
 
     <div class="report-banner">
-      <div class="banner-title">选择上报类型</div>
-      <div class="banner-desc">请根据实际情况选择对应的问题类型进行上报</div>
+      <div class="banner-icon">
+        <van-icon name="warning-o" size="28" color="#FF6B6B" />
+      </div>
+      <div class="banner-text">
+        <div class="banner-title">问题上报</div>
+        <div class="banner-desc">请根据实际情况选择对应的问题类型</div>
+      </div>
+    </div>
+
+    <div class="section-header">
+      <span class="section-title">上报类型</span>
     </div>
 
     <van-grid :column-num="3" :border="false" :gutter="12" class="report-grid">
       <van-grid-item
         v-for="item in reportTypes"
         :key="item.text"
-        :icon="item.icon"
         :text="item.text"
         @click="goReport(item.route)"
       >
+        <template #icon>
+          <div class="grid-icon-wrap" :style="{ background: item.color + '15' }">
+            <van-icon :name="item.icon" :color="item.color" size="24" />
+          </div>
+        </template>
+        <template #text>
+          <span class="grid-text">{{ item.text }}</span>
+        </template>
         <template #description>
           <span class="grid-desc">{{ item.desc }}</span>
         </template>
@@ -101,10 +111,10 @@ function goReport(route: string) {
 <style lang="scss" scoped>
 .report-index-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
@@ -112,20 +122,48 @@ function goReport(route: string) {
 }
 
 .report-banner {
-  padding: 20px 16px 12px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin: 12px 16px;
+  padding: 18px 16px;
   background: #fff;
-  margin-bottom: 12px;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 
-  .banner-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
+  .banner-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background: #FF6B6B15;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  .banner-desc {
-    margin-top: 6px;
+  .banner-text {
+    .banner-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #323233;
+    }
+
+    .banner-desc {
+      margin-top: 4px;
+      font-size: 13px;
+      color: #969799;
+    }
+  }
+}
+
+.section-header {
+  padding: 8px 20px 4px;
+
+  .section-title {
     font-size: 13px;
-    color: #999;
+    font-weight: 500;
+    color: #969799;
   }
 }
 
@@ -133,21 +171,39 @@ function goReport(route: string) {
   padding: 0 4px;
 
   :deep(.van-grid-item__content) {
-    padding: 16px 8px;
-    background: var(--color-bg-card);
+    padding: 16px 8px 12px;
+    background: #fff;
     border-radius: 10px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   }
 
   :deep(.van-grid-item__text) {
+    margin-top: 8px;
+  }
+
+  .grid-icon-wrap {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .grid-text {
     font-weight: 500;
     font-size: 14px;
-    margin-top: 6px;
+    color: #323233;
   }
 
   .grid-desc {
     font-size: 11px;
-    color: #999;
+    color: #969799;
     margin-top: 2px;
+    line-height: 1.3;
+    text-align: center;
+    display: block;
+    max-width: 90px;
   }
 }
 </style>
diff --git a/src/views/problemReport/reportConstruction.vue b/src/views/problemReport/reportConstruction.vue
index 34b96c0..a0b0ab2 100644
--- a/src/views/problemReport/reportConstruction.vue
+++ b/src/views/problemReport/reportConstruction.vue
@@ -7,7 +7,7 @@
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showToast } from 'vant'
 
 const router = useRouter()
 const route = useRoute()
@@ -21,21 +21,35 @@ const issue = ref('')
 const description = ref('')
 const photos = ref<Array<{ url: string }>>([])
 
+/** 施工点选择 */
+const showSitePicker = ref(false)
+const siteOptions = [
+  { text: '中山路施工点', value: 'site_1' },
+  { text: '解放路施工点', value: 'site_2' },
+  { text: '建设路施工点', value: 'site_3' },
+  { text: '人民路施工点', value: 'site_4' },
+  { text: '文化路施工点', value: 'site_5' },
+]
+function onSiteConfirm({ selectedOptions }: any) {
+  site.value = selectedOptions[0]?.text || ''
+  showSitePicker.value = false
+}
+
 /** 提交上报 */
 function onSubmit() {
   if (!site.value) {
-    showSuccessToast('请选择施工点')
+    showToast('请选择施工点')
     return
   }
   if (!issue.value) {
-    showSuccessToast('请填写问题')
+    showToast('请填写问题标题')
     return
   }
   if (!description.value) {
-    showSuccessToast('请填写描述')
+    showToast('请填写描述')
     return
   }
-  showSuccessToast('上报成功')
+  showToast('上报成功')
   router.back()
 }
 </script>
@@ -51,94 +65,186 @@ function onSubmit() {
     />
 
     <van-form @submit="onSubmit">
-      <van-cell-group inset>
+      <!-- 问题信息卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="cluster-o" color="#1ABC9C" size="18" />
+          <span>施工信息</span>
+        </div>
         <van-field
           v-model="site"
           name="site"
-          label="施工点"
+          label="施工点位"
           placeholder="请选择施工点"
           is-link
           readonly
+          left-icon="location-o"
           :rules="[{ required: true, message: '请选择施工点' }]"
+          @click="showSitePicker = true"
         />
         <van-field
           v-model="issue"
           name="issue"
-          label="问题"
+          label="问题标题"
           placeholder="请输入问题标题"
-          :rules="[{ required: true, message: '请填写问题' }]"
+          left-icon="edit"
+          :rules="[{ required: true, message: '请填写问题标题' }]"
         />
         <van-field
           v-model="description"
           name="description"
-          label="描述"
-          placeholder="请描述施工问题"
+          label="问题描述"
+          placeholder="请描述施工问题详情"
           type="textarea"
           rows="3"
           autosize
+          left-icon="comment-o"
           :rules="[{ required: true, message: '请填写描述' }]"
         />
-      </van-cell-group>
-
-      <div class="upload-section">
-        <div class="section-title">现场照片</div>
-        <van-uploader
-          v-model="photos"
-          :max-count="6"
-          :max-size="10 * 1024 * 1024"
-          accept="image/*"
-          multiple
-          :preview-full-image="true"
-        />
       </div>
 
+      <!-- 照片上传卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="photograph" color="#1ABC9C" size="18" />
+          <span>现场照片</span>
+        </div>
+        <div class="upload-wrap">
+          <van-uploader
+            v-model="photos"
+            :max-count="6"
+            :max-size="10 * 1024 * 1024"
+            accept="image/*"
+            multiple
+            :preview-full-image="true"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
       <div class="submit-wrap">
-        <van-button
-          type="primary"
-          block
-          round
-          native-type="submit"
-          class="submit-btn"
-        >
+        <van-button block round native-type="submit" class="submit-btn">
           提交上报
         </van-button>
       </div>
     </van-form>
+
+    <!-- 施工点选择弹窗 -->
+    <van-popup v-model:show="showSitePicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择施工点</div>
+      <van-picker
+        :columns="siteOptions"
+        @confirm="onSiteConfirm"
+        @cancel="showSitePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .report-form-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
+  padding-bottom: 30px;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
   }
 }
 
-.upload-section {
+.form-card {
   margin: 12px 16px;
-  padding: 12px;
-  background: var(--color-bg-card);
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  :deep(.van-cell-group) {
+    margin: 0;
+    --van-cell-group-inset-padding: 0;
+  }
+
+  :deep(.van-cell) {
+    padding: 14px 16px;
+    &::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+
+  :deep(.van-field__left-icon) {
+    margin-right: 8px;
+    color: #C8C9CC;
+  }
+
+  :deep(.van-field__label) {
+    color: #646566;
+    font-weight: 500;
+    width: 5.2em;
+  }
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #333;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.upload-wrap {
+  padding: 4px 16px 16px;
+
+  :deep(.van-uploader__upload) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    background: #F7F8FA;
+  }
+
+  :deep(.van-uploader__preview) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+  }
+
+  :deep(.van-uploader__preview-image) {
+    border-radius: 8px;
+  }
 }
 
 .submit-wrap {
-  padding: 24px 16px;
+  padding: 28px 16px;
 }
 
 .submit-btn {
-  height: 44px;
+  height: 46px;
+  background: #1E74FF;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  border-radius: 23px;
+  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);
+
+  :deep(.van-button__text) {
+    color: #fff;
+  }
+}
+
+// --------------- Picker Popup --------------
+.popup-title-bar {
+  padding: 14px 16px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  background: #fff;
+  border-bottom: 1px solid #EBEDF0;
 }
 </style>
diff --git a/src/views/problemReport/reportEquipmentRepair.vue b/src/views/problemReport/reportEquipmentRepair.vue
index f6a911f..2caa211 100644
--- a/src/views/problemReport/reportEquipmentRepair.vue
+++ b/src/views/problemReport/reportEquipmentRepair.vue
@@ -7,18 +7,19 @@
  */
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showToast } from 'vant'
 
 const router = useRouter()
 
 /** 表单数据 */
 const equipment = ref('')
 const faultType = ref('')
-const description = ref('')
 const urgency = ref('')
+const description = ref('')
 const photos = ref<Array<{ url: string }>>([])
 
-/** 设备选项 */
+/** 设备选择 */
+const showEquipmentPicker = ref(false)
 const equipmentOptions = [
   { text: '水泵', value: 'pump' },
   { text: '阀门', value: 'valve' },
@@ -26,8 +27,13 @@ const equipmentOptions = [
   { text: '仪表', value: 'meter' },
   { text: '管道', value: 'pipe' },
 ]
+function onEquipmentConfirm({ selectedOptions }: any) {
+  equipment.value = selectedOptions[0]?.text || ''
+  showEquipmentPicker.value = false
+}
 
-/** 故障类型 */
+/** 故障类型选择 */
+const showFaultPicker = ref(false)
 const faultTypeOptions = [
   { text: '无法启动', value: 'noStart' },
   { text: '异常噪音', value: 'noise' },
@@ -35,33 +41,42 @@ const faultTypeOptions = [
   { text: '运行不稳定', value: 'unstable' },
   { text: '其他故障', value: 'other' },
 ]
+function onFaultConfirm({ selectedOptions }: any) {
+  faultType.value = selectedOptions[0]?.text || ''
+  showFaultPicker.value = false
+}
 
-/** 紧急程度 */
-const urgencyColumns = [
-  { text: '紧急', value: 'urgent' },
-  { text: '一般', value: 'normal' },
-  { text: '低', value: 'low' },
+/** 紧急程度选择 */
+const showUrgencyPicker = ref(false)
+const urgencyOptions = [
+  { text: '紧急（立即处理）', value: 'urgent' },
+  { text: '一般（24小时内）', value: 'normal' },
+  { text: '低（计划处理）', value: 'low' },
 ]
+function onUrgencyConfirm({ selectedOptions }: any) {
+  urgency.value = selectedOptions[0]?.text || ''
+  showUrgencyPicker.value = false
+}
 
 /** 提交上报 */
 function onSubmit() {
   if (!equipment.value) {
-    showSuccessToast('请选择设备')
+    showToast('请选择设备')
     return
   }
   if (!faultType.value) {
-    showSuccessToast('请选择故障类型')
-    return
-  }
-  if (!description.value) {
-    showSuccessToast('请填写描述')
+    showToast('请选择故障类型')
     return
   }
   if (!urgency.value) {
-    showSuccessToast('请选择紧急程度')
+    showToast('请选择紧急程度')
     return
   }
-  showSuccessToast('上报成功')
+  if (!description.value) {
+    showToast('请填写故障描述')
+    return
+  }
+  showToast('上报成功')
   router.back()
 }
 </script>
@@ -77,15 +92,22 @@ function onSubmit() {
     />
 
     <van-form @submit="onSubmit">
-      <van-cell-group inset>
+      <!-- 设备信息卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="setting-o" color="#FF976A" size="18" />
+          <span>设备信息</span>
+        </div>
         <van-field
           v-model="equipment"
           name="equipment"
-          label="设备"
+          label="报修设备"
           placeholder="请选择设备"
           is-link
           readonly
+          left-icon="award-o"
           :rules="[{ required: true, message: '请选择设备' }]"
+          @click="showEquipmentPicker = true"
         />
         <van-field
           v-model="faultType"
@@ -94,7 +116,9 @@ function onSubmit() {
           placeholder="请选择故障类型"
           is-link
           readonly
+          left-icon="warning-o"
           :rules="[{ required: true, message: '请选择故障类型' }]"
+          @click="showFaultPicker = true"
         />
         <van-field
           v-model="urgency"
@@ -103,79 +127,185 @@ function onSubmit() {
           placeholder="请选择紧急程度"
           is-link
           readonly
+          left-icon="fire-o"
           :rules="[{ required: true, message: '请选择紧急程度' }]"
+          @click="showUrgencyPicker = true"
         />
         <van-field
           v-model="description"
           name="description"
-          label="描述"
-          placeholder="请描述设备故障情况"
+          label="故障描述"
+          placeholder="请详细描述设备故障情况"
           type="textarea"
           rows="3"
           autosize
-          :rules="[{ required: true, message: '请填写描述' }]"
-        />
-      </van-cell-group>
-
-      <div class="upload-section">
-        <div class="section-title">现场照片</div>
-        <van-uploader
-          v-model="photos"
-          :max-count="6"
-          :max-size="10 * 1024 * 1024"
-          accept="image/*"
-          multiple
-          :preview-full-image="true"
+          left-icon="comment-o"
+          :rules="[{ required: true, message: '请填写故障描述' }]"
         />
       </div>
 
+      <!-- 照片上传卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="photograph" color="#FF976A" size="18" />
+          <span>现场照片</span>
+        </div>
+        <div class="upload-wrap">
+          <van-uploader
+            v-model="photos"
+            :max-count="6"
+            :max-size="10 * 1024 * 1024"
+            accept="image/*"
+            multiple
+            :preview-full-image="true"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
       <div class="submit-wrap">
-        <van-button
-          type="primary"
-          block
-          round
-          native-type="submit"
-          class="submit-btn"
-        >
-          提交上报
+        <van-button block round native-type="submit" class="submit-btn">
+          提交报修
         </van-button>
       </div>
     </van-form>
+
+    <!-- 设备选择弹窗 -->
+    <van-popup v-model:show="showEquipmentPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择设备</div>
+      <van-picker
+        :columns="equipmentOptions"
+        @confirm="onEquipmentConfirm"
+        @cancel="showEquipmentPicker = false"
+      />
+    </van-popup>
+
+    <!-- 故障类型选择弹窗 -->
+    <van-popup v-model:show="showFaultPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择故障类型</div>
+      <van-picker
+        :columns="faultTypeOptions"
+        @confirm="onFaultConfirm"
+        @cancel="showFaultPicker = false"
+      />
+    </van-popup>
+
+    <!-- 紧急程度选择弹窗 -->
+    <van-popup v-model:show="showUrgencyPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择紧急程度</div>
+      <van-picker
+        :columns="urgencyOptions"
+        @confirm="onUrgencyConfirm"
+        @cancel="showUrgencyPicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .report-form-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
+  padding-bottom: 30px;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
   }
 }
 
-.upload-section {
+.form-card {
   margin: 12px 16px;
-  padding: 12px;
-  background: var(--color-bg-card);
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  :deep(.van-cell-group) {
+    margin: 0;
+    --van-cell-group-inset-padding: 0;
+  }
+
+  :deep(.van-cell) {
+    padding: 14px 16px;
+    &::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+
+  :deep(.van-field__left-icon) {
+    margin-right: 8px;
+    color: #C8C9CC;
+  }
+
+  :deep(.van-field__label) {
+    color: #646566;
+    font-weight: 500;
+    width: 5.2em;
+  }
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #333;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.upload-wrap {
+  padding: 4px 16px 16px;
+
+  :deep(.van-uploader__upload) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    background: #F7F8FA;
+  }
+
+  :deep(.van-uploader__preview) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+  }
+
+  :deep(.van-uploader__preview-image) {
+    border-radius: 8px;
+  }
 }
 
 .submit-wrap {
-  padding: 24px 16px;
+  padding: 28px 16px;
 }
 
 .submit-btn {
-  height: 44px;
+  height: 46px;
+  background: #1E74FF;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  border-radius: 23px;
+  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);
+
+  :deep(.van-button__text) {
+    color: #fff;
+  }
+}
+
+// --------------- Picker Popup --------------
+.popup-title-bar {
+  padding: 14px 16px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  background: #fff;
+  border-bottom: 1px solid #EBEDF0;
 }
 </style>
diff --git a/src/views/problemReport/reportFloodedPoints.vue b/src/views/problemReport/reportFloodedPoints.vue
index 3e955ea..d822b64 100644
--- a/src/views/problemReport/reportFloodedPoints.vue
+++ b/src/views/problemReport/reportFloodedPoints.vue
@@ -7,7 +7,7 @@
  */
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showToast } from 'vant'
 
 const router = useRouter()
 
@@ -16,18 +16,52 @@ const location = ref('')
 const waterLevel = ref('')
 const description = ref('')
 const photos = ref<Array<{ url: string }>>([])
+const reportTime = ref('')
+
+/** 位置选择 */
+const showLocationPicker = ref(false)
+const locationOptions = [
+  { text: '当前定位', value: 'gps' },
+  { text: '路口A - 中山路', value: 'loc_a' },
+  { text: '路口B - 解放路', value: 'loc_b' },
+  { text: '路段C - 建设路', value: 'loc_c' },
+]
+function onLocationConfirm({ selectedOptions }: any) {
+  location.value = selectedOptions[0]?.text || ''
+  showLocationPicker.value = false
+}
+
+/** 水位选择 */
+const showWaterLevelPicker = ref(false)
+const waterLevelColumns = Array.from({ length: 31 }, (_, i) => ({
+  text: `${i * 5} cm`,
+  value: i * 5,
+}))
+function onWaterLevelConfirm({ selectedOptions }: any) {
+  waterLevel.value = selectedOptions[0]?.text || ''
+  showWaterLevelPicker.value = false
+}
+
+/** 时间选择 */
+const showTimePicker = ref(false)
+const currentDate = ref(['2024', '01', '01', '12', '00'])
+function onTimeConfirm({ selectedValues }: any) {
+  const [y, m, d, h, min] = selectedValues
+  reportTime.value = `${y}-${String(Number(m) + 1).padStart(2, '0')}-${String(d).padStart(2, '0')} ${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}`
+  showTimePicker.value = false
+}
 
 /** 提交上报 */
 function onSubmit() {
   if (!location.value) {
-    showSuccessToast('请选择位置')
+    showToast('请选择位置')
     return
   }
   if (!description.value) {
-    showSuccessToast('请填写描述')
+    showToast('请填写描述')
     return
   }
-  showSuccessToast('上报成功')
+  showToast('上报成功')
   router.back()
 }
 </script>
@@ -43,94 +77,220 @@ function onSubmit() {
     />
 
     <van-form @submit="onSubmit">
-      <van-cell-group inset>
+      <!-- 基本信息卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="location-o" color="#1E74FF" size="18" />
+          <span>基本信息</span>
+        </div>
         <van-field
           v-model="location"
           name="location"
-          label="位置"
+          label="上报位置"
           placeholder="点击选择位置"
           is-link
           readonly
+          left-icon="location-o"
           :rules="[{ required: true, message: '请选择位置' }]"
+          @click="showLocationPicker = true"
         />
         <van-field
           v-model="waterLevel"
           name="waterLevel"
-          label="水位(cm)"
-          placeholder="请输入水位高度"
-          type="number"
+          label="水位高度"
+          placeholder="点击选择水位高度"
+          is-link
+          readonly
+          left-icon="ascending"
+          @click="showWaterLevelPicker = true"
+        />
+        <van-field
+          v-model="reportTime"
+          name="reportTime"
+          label="上报时间"
+          placeholder="点击选择上报时间"
+          is-link
+          readonly
+          left-icon="clock-o"
+          @click="showTimePicker = true"
         />
         <van-field
           v-model="description"
           name="description"
-          label="描述"
-          placeholder="请描述积水情况"
+          label="积水描述"
+          placeholder="请描述积水情况、影响范围等"
           type="textarea"
           rows="3"
           autosize
+          left-icon="comment-o"
           :rules="[{ required: true, message: '请填写描述' }]"
         />
-      </van-cell-group>
-
-      <div class="upload-section">
-        <div class="section-title">现场照片</div>
-        <van-uploader
-          v-model="photos"
-          :max-count="6"
-          :max-size="10 * 1024 * 1024"
-          accept="image/*"
-          multiple
-          :preview-full-image="true"
-        />
       </div>
 
+      <!-- 照片上传卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="photograph" color="#1E74FF" size="18" />
+          <span>现场照片</span>
+        </div>
+        <div class="upload-wrap">
+          <van-uploader
+            v-model="photos"
+            :max-count="6"
+            :max-size="10 * 1024 * 1024"
+            accept="image/*"
+            multiple
+            :preview-full-image="true"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
       <div class="submit-wrap">
-        <van-button
-          type="primary"
-          block
-          round
-          native-type="submit"
-          class="submit-btn"
-        >
+        <van-button block round native-type="submit" class="submit-btn">
           提交上报
         </van-button>
       </div>
     </van-form>
+
+    <!-- 位置选择弹窗 -->
+    <van-popup v-model:show="showLocationPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择位置</div>
+      <van-picker
+        :columns="locationOptions"
+        @confirm="onLocationConfirm"
+        @cancel="showLocationPicker = false"
+      />
+    </van-popup>
+
+    <!-- 水位选择弹窗 -->
+    <van-popup v-model:show="showWaterLevelPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择水位</div>
+      <van-picker
+        :columns="waterLevelColumns"
+        @confirm="onWaterLevelConfirm"
+        @cancel="showWaterLevelPicker = false"
+      />
+    </van-popup>
+
+    <!-- 时间选择弹窗 -->
+    <van-popup v-model:show="showTimePicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择时间</div>
+      <van-date-picker
+        v-model="currentDate"
+        type="datetime"
+        title=""
+        @confirm="onTimeConfirm"
+        @cancel="showTimePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .report-form-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
+  padding-bottom: 30px;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
   }
 }
 
-.upload-section {
+.form-card {
   margin: 12px 16px;
-  padding: 12px;
-  background: var(--color-bg-card);
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  :deep(.van-cell-group) {
+    margin: 0;
+    --van-cell-group-inset-padding: 0;
+  }
+
+  :deep(.van-cell) {
+    padding: 14px 16px;
+        &::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+
+  :deep(.van-field__left-icon) {
+    margin-right: 8px;
+    color: #C8C9CC;
+  }
+
+  :deep(.van-field__label) {
+    color: #646566;
+    font-weight: 500;
+    width: 5.2em;
+  }
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #333;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.upload-wrap {
+  padding: 4px 16px 16px;
+
+  :deep(.van-uploader__upload) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    background: #F7F8FA;
+  }
+
+  :deep(.van-uploader__preview) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+  }
+
+  :deep(.van-uploader__preview-image) {
+    border-radius: 8px;
+  }
 }
 
 .submit-wrap {
-  padding: 24px 16px;
+  padding: 28px 16px;
 }
 
 .submit-btn {
-  height: 44px;
+  height: 46px;
+  background: #1E74FF;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  border-radius: 23px;
+  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);
+
+  :deep(.van-button__text) {
+    color: #fff;
+  }
+}
+
+// --------------- Picker Popup --------------
+.popup-title-bar {
+  padding: 14px 16px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  background: #fff;
+  border-bottom: 1px solid #EBEDF0;
 }
 </style>
diff --git a/src/views/problemReport/reportInspection.vue b/src/views/problemReport/reportInspection.vue
index aae4648..723fe9f 100644
--- a/src/views/problemReport/reportInspection.vue
+++ b/src/views/problemReport/reportInspection.vue
@@ -7,7 +7,7 @@
  */
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showToast } from 'vant'
 
 const router = useRouter()
 
@@ -17,7 +17,8 @@ const problemType = ref('')
 const description = ref('')
 const photos = ref<Array<{ url: string }>>([])
 
-/** 设施选项 */
+/** 设施选择 */
+const showFacilityPicker = ref(false)
 const facilityOptions = [
   { text: '供水管网', value: 'pipe' },
   { text: '阀门井', value: 'valve' },
@@ -25,8 +26,13 @@ const facilityOptions = [
   { text: '水表', value: 'meter' },
   { text: '泵站', value: 'pump' },
 ]
+function onFacilityConfirm({ selectedOptions }: any) {
+  facility.value = selectedOptions[0]?.text || ''
+  showFacilityPicker.value = false
+}
 
-/** 问题类型选项 */
+/** 问题类型选择 */
+const showProblemTypePicker = ref(false)
 const problemTypeOptions = [
   { text: '管道渗漏', value: 'leak' },
   { text: '阀门故障', value: 'valveFault' },
@@ -34,22 +40,26 @@ const problemTypeOptions = [
   { text: '设施损坏', value: 'damage' },
   { text: '其他问题', value: 'other' },
 ]
+function onProblemTypeConfirm({ selectedOptions }: any) {
+  problemType.value = selectedOptions[0]?.text || ''
+  showProblemTypePicker.value = false
+}
 
 /** 提交上报 */
 function onSubmit() {
   if (!facility.value) {
-    showSuccessToast('请选择设施')
+    showToast('请选择设施')
     return
   }
   if (!problemType.value) {
-    showSuccessToast('请选择问题类型')
+    showToast('请选择问题类型')
     return
   }
   if (!description.value) {
-    showSuccessToast('请填写描述')
+    showToast('请填写描述')
     return
   }
-  showSuccessToast('上报成功')
+  showToast('上报成功')
   router.back()
 }
 </script>
@@ -65,15 +75,22 @@ function onSubmit() {
     />
 
     <van-form @submit="onSubmit">
-      <van-cell-group inset>
+      <!-- 基本信息卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="search" color="#4ECDC4" size="18" />
+          <span>问题信息</span>
+        </div>
         <van-field
           v-model="facility"
           name="facility"
-          label="设施"
+          label="设施类型"
           placeholder="请选择设施类型"
           is-link
           readonly
+          left-icon="wap-home-o"
           :rules="[{ required: true, message: '请选择设施' }]"
+          @click="showFacilityPicker = true"
         />
         <van-field
           v-model="problemType"
@@ -82,79 +99,175 @@ function onSubmit() {
           placeholder="请选择问题类型"
           is-link
           readonly
+          left-icon="warning-o"
           :rules="[{ required: true, message: '请选择问题类型' }]"
+          @click="showProblemTypePicker = true"
         />
         <van-field
           v-model="description"
           name="description"
-          label="描述"
-          placeholder="请描述巡检发现的问题"
+          label="问题描述"
+          placeholder="请描述巡检发现的问题详情"
           type="textarea"
           rows="3"
           autosize
+          left-icon="comment-o"
           :rules="[{ required: true, message: '请填写描述' }]"
         />
-      </van-cell-group>
-
-      <div class="upload-section">
-        <div class="section-title">现场照片</div>
-        <van-uploader
-          v-model="photos"
-          :max-count="6"
-          :max-size="10 * 1024 * 1024"
-          accept="image/*"
-          multiple
-          :preview-full-image="true"
-        />
       </div>
 
+      <!-- 照片上传卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="photograph" color="#4ECDC4" size="18" />
+          <span>现场照片</span>
+        </div>
+        <div class="upload-wrap">
+          <van-uploader
+            v-model="photos"
+            :max-count="6"
+            :max-size="10 * 1024 * 1024"
+            accept="image/*"
+            multiple
+            :preview-full-image="true"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
       <div class="submit-wrap">
-        <van-button
-          type="primary"
-          block
-          round
-          native-type="submit"
-          class="submit-btn"
-        >
+        <van-button block round native-type="submit" class="submit-btn">
           提交上报
         </van-button>
       </div>
     </van-form>
+
+    <!-- 设施选择弹窗 -->
+    <van-popup v-model:show="showFacilityPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择设施类型</div>
+      <van-picker
+        :columns="facilityOptions"
+        @confirm="onFacilityConfirm"
+        @cancel="showFacilityPicker = false"
+      />
+    </van-popup>
+
+    <!-- 问题类型选择弹窗 -->
+    <van-popup v-model:show="showProblemTypePicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择问题类型</div>
+      <van-picker
+        :columns="problemTypeOptions"
+        @confirm="onProblemTypeConfirm"
+        @cancel="showProblemTypePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .report-form-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
+  padding-bottom: 30px;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
   }
 }
 
-.upload-section {
+.form-card {
   margin: 12px 16px;
-  padding: 12px;
-  background: var(--color-bg-card);
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  :deep(.van-cell-group) {
+    margin: 0;
+    --van-cell-group-inset-padding: 0;
+  }
+
+  :deep(.van-cell) {
+    padding: 14px 16px;
+    &::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+
+  :deep(.van-field__left-icon) {
+    margin-right: 8px;
+    color: #C8C9CC;
+  }
+
+  :deep(.van-field__label) {
+    color: #646566;
+    font-weight: 500;
+    width: 5.2em;
+  }
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #333;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.upload-wrap {
+  padding: 4px 16px 16px;
+
+  :deep(.van-uploader__upload) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    background: #F7F8FA;
+  }
+
+  :deep(.van-uploader__preview) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+  }
+
+  :deep(.van-uploader__preview-image) {
+    border-radius: 8px;
+  }
 }
 
 .submit-wrap {
-  padding: 24px 16px;
+  padding: 28px 16px;
 }
 
 .submit-btn {
-  height: 44px;
+  height: 46px;
+  background: #1E74FF;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  border-radius: 23px;
+  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);
+
+  :deep(.van-button__text) {
+    color: #fff;
+  }
+}
+
+// --------------- Picker Popup --------------
+.popup-title-bar {
+  padding: 14px 16px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  background: #fff;
+  border-bottom: 1px solid #EBEDF0;
 }
 </style>
diff --git a/src/views/problemReport/reportProject.vue b/src/views/problemReport/reportProject.vue
index bd6c925..ba2039d 100644
--- a/src/views/problemReport/reportProject.vue
+++ b/src/views/problemReport/reportProject.vue
@@ -7,7 +7,7 @@
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showToast } from 'vant'
 
 const router = useRouter()
 const route = useRoute()
@@ -21,7 +21,22 @@ const issueType = ref('')
 const description = ref('')
 const photos = ref<Array<{ url: string }>>([])
 
-/** 问题类型选项 */
+/** 项目选择 */
+const showProjectPicker = ref(false)
+const projectOptions = [
+  { text: '供水管网改造项目', value: 'proj_1' },
+  { text: '污水处理项目', value: 'proj_2' },
+  { text: '雨水排放项目', value: 'proj_3' },
+  { text: '河湖治理工程', value: 'proj_4' },
+  { text: '智慧水务平台', value: 'proj_5' },
+]
+function onProjectConfirm({ selectedOptions }: any) {
+  project.value = selectedOptions[0]?.text || ''
+  showProjectPicker.value = false
+}
+
+/** 问题类型选择 */
+const showIssueTypePicker = ref(false)
 const issueTypeOptions = [
   { text: '进度延迟', value: 'delay' },
   { text: '质量问题', value: 'quality' },
@@ -29,22 +44,26 @@ const issueTypeOptions = [
   { text: '材料问题', value: 'material' },
   { text: '其他', value: 'other' },
 ]
+function onIssueTypeConfirm({ selectedOptions }: any) {
+  issueType.value = selectedOptions[0]?.text || ''
+  showIssueTypePicker.value = false
+}
 
 /** 提交上报 */
 function onSubmit() {
   if (!project.value) {
-    showSuccessToast('请选择项目')
+    showToast('请选择项目')
     return
   }
   if (!issueType.value) {
-    showSuccessToast('请选择问题类型')
+    showToast('请选择问题类型')
     return
   }
   if (!description.value) {
-    showSuccessToast('请填写描述')
+    showToast('请填写描述')
     return
   }
-  showSuccessToast('上报成功')
+  showToast('上报成功')
   router.back()
 }
 </script>
@@ -60,15 +79,22 @@ function onSubmit() {
     />
 
     <van-form @submit="onSubmit">
-      <van-cell-group inset>
+      <!-- 问题信息卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="bulb-o" color="#F39C12" size="18" />
+          <span>项目信息</span>
+        </div>
         <van-field
           v-model="project"
           name="project"
-          label="项目"
+          label="所属项目"
           placeholder="请选择项目"
           is-link
           readonly
+          left-icon="orders-o"
           :rules="[{ required: true, message: '请选择项目' }]"
+          @click="showProjectPicker = true"
         />
         <van-field
           v-model="issueType"
@@ -77,79 +103,175 @@ function onSubmit() {
           placeholder="请选择问题类型"
           is-link
           readonly
+          left-icon="warning-o"
           :rules="[{ required: true, message: '请选择问题类型' }]"
+          @click="showIssueTypePicker = true"
         />
         <van-field
           v-model="description"
           name="description"
-          label="描述"
-          placeholder="请描述项目问题"
+          label="问题描述"
+          placeholder="请描述项目相关问题详情"
           type="textarea"
           rows="3"
           autosize
+          left-icon="comment-o"
           :rules="[{ required: true, message: '请填写描述' }]"
         />
-      </van-cell-group>
-
-      <div class="upload-section">
-        <div class="section-title">现场照片</div>
-        <van-uploader
-          v-model="photos"
-          :max-count="6"
-          :max-size="10 * 1024 * 1024"
-          accept="image/*"
-          multiple
-          :preview-full-image="true"
-        />
       </div>
 
+      <!-- 照片上传卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="photograph" color="#F39C12" size="18" />
+          <span>现场照片</span>
+        </div>
+        <div class="upload-wrap">
+          <van-uploader
+            v-model="photos"
+            :max-count="6"
+            :max-size="10 * 1024 * 1024"
+            accept="image/*"
+            multiple
+            :preview-full-image="true"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
       <div class="submit-wrap">
-        <van-button
-          type="primary"
-          block
-          round
-          native-type="submit"
-          class="submit-btn"
-        >
+        <van-button block round native-type="submit" class="submit-btn">
           提交上报
         </van-button>
       </div>
     </van-form>
+
+    <!-- 项目选择弹窗 -->
+    <van-popup v-model:show="showProjectPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择项目</div>
+      <van-picker
+        :columns="projectOptions"
+        @confirm="onProjectConfirm"
+        @cancel="showProjectPicker = false"
+      />
+    </van-popup>
+
+    <!-- 问题类型选择弹窗 -->
+    <van-popup v-model:show="showIssueTypePicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择问题类型</div>
+      <van-picker
+        :columns="issueTypeOptions"
+        @confirm="onIssueTypeConfirm"
+        @cancel="showIssueTypePicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .report-form-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
+  padding-bottom: 30px;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
   }
 }
 
-.upload-section {
+.form-card {
   margin: 12px 16px;
-  padding: 12px;
-  background: var(--color-bg-card);
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  :deep(.van-cell-group) {
+    margin: 0;
+    --van-cell-group-inset-padding: 0;
+  }
+
+  :deep(.van-cell) {
+    padding: 14px 16px;
+    &::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+
+  :deep(.van-field__left-icon) {
+    margin-right: 8px;
+    color: #C8C9CC;
+  }
+
+  :deep(.van-field__label) {
+    color: #646566;
+    font-weight: 500;
+    width: 5.2em;
+  }
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #333;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.upload-wrap {
+  padding: 4px 16px 16px;
+
+  :deep(.van-uploader__upload) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    background: #F7F8FA;
+  }
+
+  :deep(.van-uploader__preview) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+  }
+
+  :deep(.van-uploader__preview-image) {
+    border-radius: 8px;
+  }
 }
 
 .submit-wrap {
-  padding: 24px 16px;
+  padding: 28px 16px;
 }
 
 .submit-btn {
-  height: 44px;
+  height: 46px;
+  background: #1E74FF;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  border-radius: 23px;
+  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);
+
+  :deep(.van-button__text) {
+    color: #fff;
+  }
+}
+
+// --------------- Picker Popup --------------
+.popup-title-bar {
+  padding: 14px 16px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  background: #fff;
+  border-bottom: 1px solid #EBEDF0;
 }
 </style>
diff --git a/src/views/problemReport/reportSupervise.vue b/src/views/problemReport/reportSupervise.vue
index 0623339..850c63e 100644
--- a/src/views/problemReport/reportSupervise.vue
+++ b/src/views/problemReport/reportSupervise.vue
@@ -3,11 +3,11 @@
  * 督办问题上报表单
  *
  * 用于上报督办项目中发现的问题，
- * 支持可选的 detail 路由参数。
+ * 支持可选的 detail 路由参数预填充项目信息。
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showSuccessToast } from 'vant'
+import { showToast } from 'vant'
 
 const router = useRouter()
 const route = useRoute()
@@ -21,21 +21,35 @@ const problem = ref('')
 const description = ref('')
 const photos = ref<Array<{ url: string }>>([])
 
+/** 项目选择 */
+const showProjectPicker = ref(false)
+const projectOptions = [
+  { text: '排水管网改造工程', value: 'proj_1' },
+  { text: '污水处理厂升级', value: 'proj_2' },
+  { text: '雨水泵站建设', value: 'proj_3' },
+  { text: '供水管道更新', value: 'proj_4' },
+  { text: '河湖治理项目', value: 'proj_5' },
+]
+function onProjectConfirm({ selectedOptions }: any) {
+  project.value = selectedOptions[0]?.text || ''
+  showProjectPicker.value = false
+}
+
 /** 提交上报 */
 function onSubmit() {
   if (!project.value) {
-    showSuccessToast('请选择督办项目')
+    showToast('请选择督办项目')
     return
   }
   if (!problem.value) {
-    showSuccessToast('请选择问题')
+    showToast('请填写问题标题')
     return
   }
   if (!description.value) {
-    showSuccessToast('请填写描述')
+    showToast('请填写描述')
     return
   }
-  showSuccessToast('上报成功')
+  showToast('上报成功')
   router.back()
 }
 </script>
@@ -51,7 +65,12 @@ function onSubmit() {
     />
 
     <van-form @submit="onSubmit">
-      <van-cell-group inset>
+      <!-- 问题信息卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="records" color="#9B59B6" size="18" />
+          <span>督办信息</span>
+        </div>
         <van-field
           v-model="project"
           name="project"
@@ -59,86 +78,173 @@ function onSubmit() {
           placeholder="请选择督办项目"
           is-link
           readonly
+          left-icon="orders-o"
           :rules="[{ required: true, message: '请选择督办项目' }]"
+          @click="showProjectPicker = true"
         />
         <van-field
           v-model="problem"
           name="problem"
-          label="问题"
+          label="问题标题"
           placeholder="请输入问题标题"
-          :rules="[{ required: true, message: '请填写问题' }]"
+          left-icon="edit"
+          :rules="[{ required: true, message: '请填写问题标题' }]"
         />
         <van-field
           v-model="description"
           name="description"
-          label="描述"
-          placeholder="请描述督办发现的问题"
+          label="问题描述"
+          placeholder="请描述督办发现的问题详情"
           type="textarea"
           rows="3"
           autosize
+          left-icon="comment-o"
           :rules="[{ required: true, message: '请填写描述' }]"
         />
-      </van-cell-group>
-
-      <div class="upload-section">
-        <div class="section-title">现场照片</div>
-        <van-uploader
-          v-model="photos"
-          :max-count="6"
-          :max-size="10 * 1024 * 1024"
-          accept="image/*"
-          multiple
-          :preview-full-image="true"
-        />
       </div>
 
+      <!-- 照片上传卡片 -->
+      <div class="form-card">
+        <div class="card-title">
+          <van-icon name="photograph" color="#9B59B6" size="18" />
+          <span>现场照片</span>
+        </div>
+        <div class="upload-wrap">
+          <van-uploader
+            v-model="photos"
+            :max-count="6"
+            :max-size="10 * 1024 * 1024"
+            accept="image/*"
+            multiple
+            :preview-full-image="true"
+          />
+        </div>
+      </div>
+
+      <!-- 提交按钮 -->
       <div class="submit-wrap">
-        <van-button
-          type="primary"
-          block
-          round
-          native-type="submit"
-          class="submit-btn"
-        >
+        <van-button block round native-type="submit" class="submit-btn">
           提交上报
         </van-button>
       </div>
     </van-form>
+
+    <!-- 项目选择弹窗 -->
+    <van-popup v-model:show="showProjectPicker" position="bottom" round :safe-area-inset-bottom="true">
+      <div class="popup-title-bar">选择督办项目</div>
+      <van-picker
+        :columns="projectOptions"
+        @confirm="onProjectConfirm"
+        @cancel="showProjectPicker = false"
+      />
+    </van-popup>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .report-form-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
+  padding-bottom: 30px;
 
   :deep(.van-nav-bar) {
-    background: var(--color-primary);
+    background: #1E74FF;
     --van-nav-bar-title-text-color: #fff;
     --van-nav-bar-text-color: #fff;
     --van-nav-bar-icon-color: #fff;
   }
 }
 
-.upload-section {
+.form-card {
   margin: 12px 16px;
-  padding: 12px;
-  background: var(--color-bg-card);
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+
+  :deep(.van-cell-group) {
+    margin: 0;
+    --van-cell-group-inset-padding: 0;
+  }
+
+  :deep(.van-cell) {
+    padding: 14px 16px;
+    &::after {
+      left: 16px;
+      right: 16px;
+    }
+  }
+
+  :deep(.van-field__left-icon) {
+    margin-right: 8px;
+    color: #C8C9CC;
+  }
+
+  :deep(.van-field__label) {
+    color: #646566;
+    font-weight: 500;
+    width: 5.2em;
+  }
 }
 
-.section-title {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-  color: #333;
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 16px 8px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.upload-wrap {
+  padding: 4px 16px 16px;
+
+  :deep(.van-uploader__upload) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+    background: #F7F8FA;
+  }
+
+  :deep(.van-uploader__preview) {
+    width: 80px;
+    height: 80px;
+    border-radius: 8px;
+  }
+
+  :deep(.van-uploader__preview-image) {
+    border-radius: 8px;
+  }
 }
 
 .submit-wrap {
-  padding: 24px 16px;
+  padding: 28px 16px;
 }
 
 .submit-btn {
-  height: 44px;
+  height: 46px;
+  background: #1E74FF;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  border-radius: 23px;
+  box-shadow: 0 4px 12px rgba(30, 116, 255, 0.3);
+
+  :deep(.van-button__text) {
+    color: #fff;
+  }
+}
+
+// --------------- Picker Popup --------------
+.popup-title-bar {
+  padding: 14px 16px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+  background: #fff;
+  border-bottom: 1px solid #EBEDF0;
 }
 </style>
diff --git a/src/views/superviseRecord/detail.vue b/src/views/superviseRecord/detail.vue
index 45647f1..a3451e4 100644
--- a/src/views/superviseRecord/detail.vue
+++ b/src/views/superviseRecord/detail.vue
@@ -3,10 +3,11 @@
  * 监督记录详情页
  *
  * 展示监督记录的详细信息，包含基本信息、监督内容、现场照片和结论。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { showToast, showImagePreview } from 'vant'
+import { showImagePreview } from 'vant'
 
 const router = useRouter()
 const route = useRoute()
@@ -61,35 +62,77 @@ function previewPhoto(index: number) {
 
 <template>
   <div class="record-detail-page">
-    <van-nav-bar title="记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="记录详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 结果标签 -->
+    <!-- Result Bar -->
     <div class="result-bar">
-      <van-tag :type="resultColorMap[record.result]" size="large">
+      <van-tag :type="resultColorMap[record.result]" size="large" round>
         {{ resultMap[record.result] }}
       </van-tag>
+      <div class="result-bar__name">{{ record.supervisorName }}</div>
+      <div class="result-bar__sub">{{ typeMap[record.type] }} · {{ record.date }}</div>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="监督人" :value="record.supervisorName" />
-      <van-cell title="所属项目" :value="record.project" />
-      <van-cell title="监督类型" :value="typeMap[record.type]" />
-      <van-cell title="监督日期" :value="record.date" />
-      <van-cell title="监督时间" :value="record.time" />
-      <van-cell title="监督地址" :value="record.address" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">监督人</span>
+          <span class="info-row__value">{{ record.supervisorName }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">所属项目</span>
+          <span class="info-row__value">{{ record.project }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">监督类型</span>
+          <span class="info-row__value">{{ typeMap[record.type] }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">监督日期</span>
+          <span class="info-row__value">{{ record.date }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">监督时间</span>
+          <span class="info-row__value">{{ record.time }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">监督地址</span>
+          <span class="info-row__value">{{ record.address }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 监督内容 -->
-    <van-cell-group title="监督内容" class="info-group">
-      <van-cell>
+    <!-- 监督内容 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">监督内容</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.content }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 现场照片 -->
-    <van-cell-group title="现场照片" class="info-group">
-      <van-cell>
+    <!-- 现场照片 Card -->
+    <div class="info-card" v-if="record.photos.length > 0">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">现场照片</h5>
+      </div>
+      <div class="card-body">
         <div class="photo-grid">
           <div
             v-for="(photo, index) in record.photos"
@@ -107,60 +150,150 @@ function previewPhoto(index: number) {
             <p class="photo-desc">{{ photo.desc }}</p>
           </div>
         </div>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 结论与备注 -->
-    <van-cell-group title="监督结论" class="info-group">
-      <van-cell>
+    <!-- 监督结论 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">监督结论</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.conclusion }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <van-cell-group title="备注" class="info-group">
-      <van-cell>
+    <!-- 备注 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">备注信息</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.remark }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
-    <!-- 时间信息 -->
-    <van-cell-group title="时间信息" class="info-group">
-      <van-cell title="创建时间" :value="record.createTime" />
-    </van-cell-group>
+    <!-- 时间信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">时间信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">创建时间</span>
+          <span class="info-row__value">{{ record.createTime }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .record-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
+}
+
+// Result Bar
+.result-bar {
+  padding: 20px 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  text-align: center;
+  margin-bottom: 10px;
+
+  &__name {
+    margin-top: 8px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  &__sub {
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--color-text-secondary);
   }
 }
 
-.result-bar {
-  padding: 12px 16px;
-  background: var(--color-bg-card);
-  text-align: center;
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
 
-.info-group {
-  margin-top: 8px;
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+
+  &__accent {
+    width: 3px;
+    height: 16px;
+    border-radius: 2px;
+    background: #1E74FF;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
 }
 
+.card-body {
+  padding: 0 16px 14px;
+}
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+
+  & + & {
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  &__label {
+    width: 72px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  &__value {
+    flex: 1;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    word-break: break-all;
+  }
+}
+
+// Description
 .desc-text {
   font-size: 14px;
-  line-height: 1.6;
+  line-height: 1.7;
   color: var(--color-text-regular);
   padding: 4px 0;
 }
 
+// Photo Grid
 .photo-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -169,6 +302,10 @@ function previewPhoto(index: number) {
 
 .photo-item {
   cursor: pointer;
+
+  :deep(.van-image) {
+    aspect-ratio: 4 / 3;
+  }
 }
 
 .photo-desc {
diff --git a/src/views/superviseRecord/index.vue b/src/views/superviseRecord/index.vue
index 682bd35..7f1c5de 100644
--- a/src/views/superviseRecord/index.vue
+++ b/src/views/superviseRecord/index.vue
@@ -4,6 +4,7 @@
  *
  * 展示第三方监督记录，支持搜索和类型筛选（全部/日常监督/专项监督/整改复查），
  * 点击卡片跳转记录详情。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -32,7 +33,7 @@ const typeMap: Record<string, string> = {
   rectify: '整改复查',
 }
 
-const typeColorMap: Record<string, string> = {
+const typeColorMap: Record<string, 'primary' | 'warning' | 'success'> = {
   daily: 'primary',
   special: 'warning',
   rectify: 'success',
@@ -74,41 +75,81 @@ function goDetail(id: number) {
 
 <template>
   <div class="record-page">
-    <van-nav-bar title="监督记录" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="监督记录"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索监督人、项目、内容" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索监督人、项目、内容"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="日常监督" />
       <van-tab title="专项监督" />
       <van-tab title="整改复查" />
     </van-tabs>
 
+    <!-- Record List -->
     <div class="record-list">
-      <van-empty v-if="filteredRecords.length === 0" description="暂无监督记录" />
-      <van-card
+      <van-empty
+        v-if="filteredRecords.length === 0"
+        image="search"
+        description="暂无监督记录"
+      />
+      <div
         v-for="record in filteredRecords"
         :key="record.id"
-        :title="record.project"
-        :desc="`监督人: ${record.supervisorName}`"
+        class="record-card"
         @click="goDetail(record.id)"
       >
-        <template #tags>
-          <van-tag :type="typeColorMap[record.type] as 'primary' | 'success' | 'warning' | 'danger'" size="medium">
-            {{ typeMap[record.type] }}
-          </van-tag>
-          <van-tag :type="resultColorMap[record.result]" size="medium" plain>
-            {{ resultMap[record.result] }}
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="record-meta">
-            <span>{{ record.date }}</span>
-            <span>{{ record.content }}</span>
+        <div class="record-card__header">
+          <h4 class="record-card__title">{{ record.supervisorName }}</h4>
+          <div class="record-card__tags">
+            <van-tag :type="typeColorMap[record.type]" size="medium" round>
+              {{ typeMap[record.type] }}
+            </van-tag>
+            <van-tag :type="resultColorMap[record.result]" size="medium" round>
+              {{ resultMap[record.result] }}
+            </van-tag>
           </div>
-        </template>
-      </van-card>
+        </div>
+        <div class="record-card__body">
+          <span class="info-item">
+            <van-icon name="orders-o" size="14" />
+            {{ record.project }}
+          </span>
+          <span class="info-item">
+            <van-icon name="calendar-o" size="14" />
+            {{ record.date }}
+          </span>
+        </div>
+        <div class="record-card__footer">
+          <p class="content-text">{{ record.content }}</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -116,35 +157,97 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .record-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
+}
+
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+
+  :deep(.van-search__content) {
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
+:deep(.van-tabs) { background: #fff; }
+:deep(.van-tabs__wrap) { padding: 0 8px; }
+:deep(.van-tab) { font-size: 14px; }
+
 .record-list {
-  padding: 0 8px;
+  padding: 8px 12px 16px;
+}
 
-  :deep(.van-card) {
-    margin: 8px;
-    border-radius: 10px;
-    background: var(--color-bg-card);
-  }
+.record-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
 
-  :deep(.van-tag) {
-    margin-right: 4px;
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 }
 
-.record-meta {
+.record-card__header {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 12px;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.record-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.record-card__tags {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.record-card__body {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+  margin-bottom: 8px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.record-card__footer {
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.content-text {
+  font-size: 13px;
+  line-height: 1.5;
   color: var(--color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/views/supervisor/detail.vue b/src/views/supervisor/detail.vue
index 017d3c3..bb6f5d3 100644
--- a/src/views/supervisor/detail.vue
+++ b/src/views/supervisor/detail.vue
@@ -2,7 +2,8 @@
 /**
  * 监督人员详情页
  *
- * 展示第三方监督人员详细信息，包含基本信息、在岗状态和履职记录。
+ * 展示第三方监督人员详细信息，包含基本信息、资质信息和履职统计。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -45,64 +46,242 @@ const statusColorMap: Record<string, 'success' | 'danger'> = {
 
 <template>
   <div class="supervisor-detail-page">
-    <van-nav-bar title="人员详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="人员详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 状态标签 -->
+    <!-- Status Bar -->
     <div class="status-bar">
-      <van-tag :type="statusColorMap[supervisor.status]" size="large">
+      <van-tag :type="statusColorMap[supervisor.status]" size="large" round>
         {{ statusMap[supervisor.status] }}
       </van-tag>
+      <div class="status-bar__name">{{ supervisor.name }}</div>
+      <div class="status-bar__sub">{{ supervisor.company }} · {{ supervisor.rating }} 分</div>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="姓名" :value="supervisor.name" />
-      <van-cell title="所属公司" :value="supervisor.company" />
-      <van-cell title="联系电话" :value="supervisor.phone" />
-      <van-cell title="所属项目" :value="supervisor.project" />
-      <van-cell title="评分" :value="`${supervisor.rating} 分`" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">姓名</span>
+          <span class="info-row__value">{{ supervisor.name }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">所属公司</span>
+          <span class="info-row__value">{{ supervisor.company }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">联系电话</span>
+          <span class="info-row__value">{{ supervisor.phone }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">所属项目</span>
+          <span class="info-row__value">{{ supervisor.project }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">评　　分</span>
+          <span class="info-row__value info-row__value--rating">
+            <van-icon name="star" size="14" color="#FF976A" />
+            {{ supervisor.rating }} 分
+          </span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 资质信息 -->
-    <van-cell-group title="资质信息" class="info-group">
-      <van-cell title="证书编号" :value="supervisor.certNo" />
-      <van-cell title="证书类型" :value="supervisor.certType" />
-      <van-cell title="学历" :value="supervisor.education" />
-      <van-cell title="专业" :value="supervisor.major" />
-    </van-cell-group>
+    <!-- 资质信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">资质信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">证书编号</span>
+          <span class="info-row__value">{{ supervisor.certNo }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">证书类型</span>
+          <span class="info-row__value">{{ supervisor.certType }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">学　　历</span>
+          <span class="info-row__value">{{ supervisor.education }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">专　　业</span>
+          <span class="info-row__value">{{ supervisor.major }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 履职统计 -->
-    <van-cell-group title="履职统计" class="info-group">
-      <van-cell title="从业年限" :value="`${supervisor.superviseYears} 年`" />
-      <van-cell title="监督次数" :value="`${supervisor.superviseCount} 次`" />
-      <van-cell title="发现问题" :value="`${supervisor.problemCount} 个`" />
-      <van-cell title="最近到岗" :value="supervisor.lastOnDuty" />
-      <van-cell title="入职日期" :value="supervisor.entryDate" />
-    </van-cell-group>
+    <!-- 履职统计 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">履职统计</h5>
+      </div>
+      <div class="card-body">
+        <div class="stat-grid">
+          <div class="stat-item">
+            <div class="stat-item__value">{{ supervisor.superviseYears }}</div>
+            <div class="stat-item__label">从业年限</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-item__value">{{ supervisor.superviseCount }}</div>
+            <div class="stat-item__label">监督次数</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-item__value">{{ supervisor.problemCount }}</div>
+            <div class="stat-item__label">发现问题</div>
+          </div>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">最近到岗</span>
+          <span class="info-row__value">{{ supervisor.lastOnDuty }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">入职日期</span>
+          <span class="info-row__value">{{ supervisor.entryDate }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .supervisor-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
+}
+
+// Status Bar
+.status-bar {
+  padding: 20px 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  text-align: center;
+  margin-bottom: 10px;
+
+  &__name {
+    margin-top: 8px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  &__sub {
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--color-text-secondary);
   }
 }
 
-.status-bar {
-  padding: 12px 16px;
-  background: var(--color-bg-card);
-  text-align: center;
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
 
-.info-group {
-  margin-top: 8px;
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 10px;
+
+  &__accent {
+    width: 3px;
+    height: 16px;
+    border-radius: 2px;
+    background: #1E74FF;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+}
+
+.card-body {
+  padding: 0 16px 14px;
+}
+
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+
+  & + & {
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  &__label {
+    width: 72px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--color-text-secondary);
+  }
+
+  &__value {
+    flex: 1;
+    font-size: 14px;
+    color: var(--color-text-primary);
+    word-break: break-all;
+
+    &--rating {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: #FF976A;
+      font-weight: 500;
+    }
+  }
+}
+
+// Stat Grid
+.stat-grid {
+  display: flex;
+  padding: 8px 0 16px;
+  gap: 0;
+
+  .stat-item {
+    flex: 1;
+    text-align: center;
+
+    &__value {
+      font-size: 22px;
+      font-weight: 700;
+      color: #1E74FF;
+      line-height: 1.2;
+    }
+
+    &__label {
+      margin-top: 4px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+  }
 }
 </style>
diff --git a/src/views/supervisor/index.vue b/src/views/supervisor/index.vue
index cc60057..1c47966 100644
--- a/src/views/supervisor/index.vue
+++ b/src/views/supervisor/index.vue
@@ -4,6 +4,7 @@
  *
  * 展示监督人员列表，支持搜索和状态筛选（全部/在岗/离岗），
  * 点击卡片跳转人员详情。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -60,40 +61,82 @@ function goDetail(id: number) {
 
 <template>
   <div class="supervisor-page">
-    <van-nav-bar title="第三方监督人员" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="第三方监督人员"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索姓名、公司、项目" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索姓名、公司、项目"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="在岗" />
       <van-tab title="离岗" />
     </van-tabs>
 
+    <!-- Supervisor List -->
     <div class="supervisor-list">
-      <van-empty v-if="filteredSupervisors.length === 0" description="暂无监督人员" />
-      <van-card
-        v-for="supervisor in filteredSupervisors"
-        :key="supervisor.id"
-        :title="supervisor.name"
-        :desc="supervisor.company"
-        @click="goDetail(supervisor.id)"
+      <van-empty
+        v-if="filteredSupervisors.length === 0"
+        image="search"
+        description="暂无监督人员"
+      />
+      <div
+        v-for="item in filteredSupervisors"
+        :key="item.id"
+        class="supervisor-card"
+        @click="goDetail(item.id)"
       >
-        <template #tags>
-          <van-tag :type="statusColorMap[supervisor.status]" size="medium">
-            {{ statusMap[supervisor.status] }}
-          </van-tag>
-          <van-tag type="primary" size="medium" plain>
-            {{ supervisor.rating }} 分
-          </van-tag>
-        </template>
-        <template #footer>
-          <div class="supervisor-meta">
-            <span>{{ supervisor.phone }}</span>
-            <span>{{ supervisor.project }}</span>
+        <div class="supervisor-card__header">
+          <div class="supervisor-card__name-row">
+            <h4 class="supervisor-card__name">{{ item.name }}</h4>
+            <div class="supervisor-card__rating">
+              <van-icon name="star" size="14" color="#FF976A" />
+              <span>{{ item.rating }}</span>
+            </div>
           </div>
-        </template>
-      </van-card>
+          <van-tag :type="statusColorMap[item.status]" size="medium" round>
+            {{ statusMap[item.status] }}
+          </van-tag>
+        </div>
+        <div class="supervisor-card__body">
+          <span class="info-item">
+            <van-icon name="user-o" size="14" />
+            {{ item.company }}
+          </span>
+          <span class="info-item">
+            <van-icon name="phone-o" size="14" />
+            {{ item.phone }}
+          </span>
+        </div>
+        <div class="supervisor-card__footer">
+          <van-icon name="location-o" size="12" color="#969799" />
+          <span class="project-text">{{ item.project }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -101,35 +144,109 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .supervisor-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
+}
+
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+
+  :deep(.van-search__content) {
+    border-radius: 10px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
+:deep(.van-tabs) { background: #fff; }
+:deep(.van-tabs__wrap) { padding: 0 8px; }
+:deep(.van-tab) { font-size: 14px; }
+
 .supervisor-list {
-  padding: 0 8px;
+  padding: 8px 12px 16px;
+}
 
-  :deep(.van-card) {
-    margin: 8px;
-    border-radius: 10px;
-    background: var(--color-bg-card);
-  }
+.supervisor-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
 
-  :deep(.van-tag) {
-    margin-right: 4px;
+  &:active {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 }
 
-.supervisor-meta {
+.supervisor-card__header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.supervisor-card__name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.supervisor-card__name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.supervisor-card__rating {
+  display: flex;
+  align-items: center;
   gap: 2px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #FF976A;
+  flex-shrink: 0;
+}
+
+.supervisor-card__body {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 8px;
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.supervisor-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.project-text {
   font-size: 12px;
-  color: var(--color-text-secondary);
+  color: var(--color-text-placeholder);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>
diff --git a/src/views/yxkjzyRecords/detail.vue b/src/views/yxkjzyRecords/detail.vue
index 3bc7f8e..9887ce3 100644
--- a/src/views/yxkjzyRecords/detail.vue
+++ b/src/views/yxkjzyRecords/detail.vue
@@ -4,6 +4,7 @@
  *
  * 展示有限空间作业的详细信息，包含基本信息、
  * 安全条件确认清单、作业审批和参与人员。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, panel accent bars.
  */
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -49,16 +50,9 @@ const record = ref({
   ],
 })
 
-const statusMap: Record<string, string> = {
-  pending: '待开始',
-  in_progress: '进行中',
-  completed: '已完成',
-}
-
-const statusColorMap: Record<string, string> = {
-  pending: 'warning',
-  in_progress: 'primary',
-  completed: 'success',
+const statusMap: Record<string, string> = { pending: '待开始', in_progress: '进行中', completed: '已完成' }
+const statusColorMap: Record<string, 'warning' | 'primary' | 'success'> = {
+  pending: 'warning', in_progress: 'primary', completed: 'success',
 }
 
 /** 安全清单统计 */
@@ -73,70 +67,153 @@ const checklistStats = computed(() => {
 
 <template>
   <div class="yxkjzy-detail-page">
-    <van-nav-bar title="作业记录详情" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="作业记录详情"
+      left-text="返回"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <!-- 状态标签 -->
+    <!-- Status Bar -->
     <div class="status-bar">
-      <van-tag :type="statusColorMap[record.status] as never" size="large">
+      <van-tag :type="statusColorMap[record.status]" size="large" round>
         {{ statusMap[record.status] }}
       </van-tag>
     </div>
 
-    <!-- 基本信息 -->
-    <van-cell-group title="基本信息" class="info-group">
-      <van-cell title="作业编号" :value="record.title" />
-      <van-cell title="作业地点" :value="record.location" />
-      <van-cell title="空间类型" :value="record.spaceType" />
-      <van-cell title="作业员" :value="record.operator" />
-      <van-cell title="监督员" :value="record.supervisor" />
-      <van-cell title="监护人" :value="record.guardian" />
-      <van-cell title="开始时间" :value="record.startTime" />
-      <van-cell title="结束时间" :value="record.endTime || '-'" />
-      <van-cell title="作业时长" :value="record.duration" />
-    </van-cell-group>
+    <!-- 基本信息 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">基本信息</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">作业编号</span>
+          <span class="info-row__value">{{ record.title }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">作业地点</span>
+          <span class="info-row__value">{{ record.location }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">空间类型</span>
+          <span class="info-row__value">{{ record.spaceType }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">作业员</span>
+          <span class="info-row__value">{{ record.operator }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">监督员</span>
+          <span class="info-row__value">{{ record.supervisor }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">监护人</span>
+          <span class="info-row__value">{{ record.guardian }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">开始时间</span>
+          <span class="info-row__value">{{ record.startTime }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">结束时间</span>
+          <span class="info-row__value">{{ record.endTime || '-' }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">作业时长</span>
+          <span class="info-row__value">{{ record.duration }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 空间参数 -->
-    <van-cell-group title="空间参数" class="info-group">
-      <van-cell title="深度" :value="record.depth" />
-      <van-cell title="直径" :value="record.diameter" />
-    </van-cell-group>
+    <!-- 空间参数 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">空间参数</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">深度</span>
+          <span class="info-row__value">{{ record.depth }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">直径</span>
+          <span class="info-row__value">{{ record.diameter }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 环境监测 -->
-    <van-cell-group title="环境监测" class="info-group">
-      <van-cell title="氧气含量" :value="record.oxygenContent" />
-      <van-cell title="有害气体" :value="record.hazardousGas" />
-      <van-cell title="温度" :value="record.temperature" />
-      <van-cell title="湿度" :value="record.humidity" />
-      <van-cell title="通风状态" :value="record.ventilation" />
-    </van-cell-group>
+    <!-- 环境监测 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">环境监测</h5>
+      </div>
+      <div class="card-body">
+        <div class="info-row">
+          <span class="info-row__label">氧气含量</span>
+          <span class="info-row__value env-ok">{{ record.oxygenContent }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">有害气体</span>
+          <span class="info-row__value env-ok">{{ record.hazardousGas }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">温度</span>
+          <span class="info-row__value">{{ record.temperature }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">湿度</span>
+          <span class="info-row__value">{{ record.humidity }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-row__label">通风状态</span>
+          <span class="info-row__value env-ok">{{ record.ventilation }}</span>
+        </div>
+      </div>
+    </div>
 
-    <!-- 安全条件确认清单 -->
-    <van-cell-group :title="`安全条件确认清单 (${checklistStats.requiredChecked}/${checklistStats.required} 必检项)`" class="info-group">
-      <van-cell v-for="item in record.safetyChecklist" :key="item.id">
-        <template #title>
-          <div class="checklist-item">
-            <van-icon
-              :name="item.checked ? 'success' : 'close'"
-              :color="item.checked ? '#4CAF50' : '#F44336'"
-              size="18"
-            />
-            <span :class="{ 'required-tag': item.required }">{{ item.required ? '【必检】' : '' }}{{ item.item }}</span>
-          </div>
-        </template>
-        <template #value>
-          <van-tag :type="item.checked ? 'success' : 'danger'" size="medium">
+    <!-- 安全条件确认清单 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">
+          安全条件确认清单
+          <span class="checklist-summary">（{{ checklistStats.requiredChecked }}/{{ checklistStats.required }} 必检项）</span>
+        </h5>
+      </div>
+      <div class="card-body">
+        <div v-for="item in record.safetyChecklist" :key="item.id" class="checklist-row">
+          <van-icon
+            :name="item.checked ? 'success' : 'close'"
+            :color="item.checked ? '#4CAF50' : '#F44336'"
+            size="18"
+          />
+          <span :class="['checklist-text', { 'required': item.required }]">
+            {{ item.required ? '【必检】' : '' }}{{ item.item }}
+          </span>
+          <van-tag :type="item.checked ? 'success' : 'danger'" size="medium" class="checklist-tag">
             {{ item.checked ? '已确认' : '未确认' }}
           </van-tag>
-        </template>
-      </van-cell>
-    </van-cell-group>
+        </div>
+      </div>
+    </div>
 
-    <!-- 作业描述 -->
-    <van-cell-group title="作业描述" class="info-group">
-      <van-cell>
+    <!-- 作业描述 Card -->
+    <div class="info-card">
+      <div class="card-header">
+        <span class="card-header__accent"></span>
+        <h5 class="card-header__title">作业描述</h5>
+      </div>
+      <div class="card-body">
         <p class="desc-text">{{ record.description }}</p>
-      </van-cell>
-    </van-cell-group>
+      </div>
+    </div>
 
     <!-- 安全提示 -->
     <div class="safety-tips">
@@ -155,46 +232,93 @@ const checklistStats = computed(() => {
 <style lang="scss" scoped>
 .yxkjzy-detail-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
   padding-bottom: 24px;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
+// Status Bar
 .status-bar {
-  padding: 12px 16px;
-  background: var(--color-bg-card);
+  padding: 14px 16px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   text-align: center;
 }
 
-.info-group {
-  margin-top: 8px;
+// Info Card
+.info-card {
+  background: #fff;
+  border-radius: 10px;
+  margin: 10px 12px 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
 }
-
-.checklist-item {
+.card-header {
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 14px 16px 10px;
+  &__accent { width: 3px; height: 16px; border-radius: 2px; background: #1E74FF; flex-shrink: 0; }
+  &__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
+}
+.checklist-summary {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+}
+.card-body { padding: 0 16px 14px; }
 
-  .required-tag {
-    color: var(--color-text-regular);
-  }
+// Info Rows
+.info-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px 0;
+  & + & { border-top: 1px solid var(--color-border-light); }
+  &__label { width: 72px; flex-shrink: 0; font-size: 13px; color: var(--color-text-secondary); }
+  &__value { flex: 1; font-size: 14px; color: var(--color-text-primary); word-break: break-all; }
 }
 
+.env-ok {
+  color: #4CAF50 !important;
+  font-weight: 500;
+}
+
+// Checklist Rows
+.checklist-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  & + & { border-top: 1px solid var(--color-border-light); }
+}
+
+.checklist-text {
+  flex: 1;
+  font-size: 13px;
+  color: var(--color-text-regular);
+  &.required { font-weight: 500; }
+}
+
+.checklist-tag {
+  flex-shrink: 0;
+}
+
+// Description
 .desc-text {
   font-size: 14px;
-  line-height: 1.8;
+  line-height: 1.7;
   color: var(--color-text-regular);
   padding: 4px 0;
   text-indent: 2em;
 }
 
+// Safety Tips
 .safety-tips {
-  margin: 12px 0;
+  margin: 12px 12px 0;
 }
 </style>
diff --git a/src/views/yxkjzyRecords/index.vue b/src/views/yxkjzyRecords/index.vue
index 5e87ab4..16a8e48 100644
--- a/src/views/yxkjzyRecords/index.vue
+++ b/src/views/yxkjzyRecords/index.vue
@@ -4,6 +4,7 @@
  *
  * 展示有限空间作业记录，支持搜索和状态筛选（全部/进行中/已完成），
  * 点击卡片跳转作业记录详情。
+ * Design: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px, styled tabs.
  */
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -27,19 +28,12 @@ const mockRecords = [
 ]
 
 /** 状态映射 */
-const statusMap: Record<string, string> = {
-  pending: '待开始',
-  in_progress: '进行中',
-  completed: '已完成',
+const statusMap: Record<string, string> = { pending: '待开始', in_progress: '进行中', completed: '已完成' }
+const statusColorMap: Record<string, 'warning' | 'primary' | 'success'> = {
+  pending: 'warning', in_progress: 'primary', completed: 'success',
 }
 
-const statusColorMap: Record<string, string> = {
-  pending: 'warning',
-  in_progress: 'primary',
-  completed: 'success',
-}
-
-/** 空间类型图标映射 */
+/** 空间类型图标 */
 const spaceIconMap: Record<string, string> = {
   '污水井': 'orders-o',
   '阀门井': 'setting-o',
@@ -73,41 +67,86 @@ function goDetail(id: number) {
 
 <template>
   <div class="yxkjzy-records-page">
-    <van-nav-bar title="有限空间作业记录" left-arrow fixed placeholder @click-left="router.back()" />
+    <!-- NavBar — brand blue -->
+    <van-nav-bar
+      title="有限空间作业记录"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="router.back()"
+    />
 
-    <van-search v-model="searchText" placeholder="搜索作业标题、位置、作业员" shape="round" />
+    <!-- Search -->
+    <div class="search-wrapper">
+      <van-search
+        v-model="searchText"
+        placeholder="搜索作业标题、位置、作业员"
+        shape="round"
+        background="transparent"
+      />
+    </div>
 
-    <van-tabs v-model:active="activeTab" sticky>
+    <!-- Tabs -->
+    <van-tabs
+      v-model:active="activeTab"
+      sticky
+      :duration="0.3"
+      swipeable
+      color="#1E74FF"
+      title-active-color="#1E74FF"
+      title-inactive-color="#646566"
+      line-width="20"
+      line-height="3"
+    >
       <van-tab title="全部" />
       <van-tab title="进行中" />
       <van-tab title="已完成" />
     </van-tabs>
 
+    <!-- Record List -->
     <div class="record-list">
-      <van-empty v-if="filteredRecords.length === 0" description="暂无作业记录" />
-      <van-card
+      <van-empty
+        v-if="filteredRecords.length === 0"
+        image="search"
+        description="暂无作业记录"
+      />
+      <div
         v-for="record in filteredRecords"
         :key="record.id"
-        :title="record.title"
-        :desc="`位置: ${record.location}`"
+        class="record-card"
         @click="goDetail(record.id)"
       >
-        <template #tags>
-          <van-tag :type="statusColorMap[record.status] as never" size="medium">
+        <!-- Card Header -->
+        <div class="record-card__header">
+          <van-icon :name="spaceIconMap[record.spaceType] || 'label-o'" size="22" color="#969799" class="space-icon" />
+          <h4 class="record-card__title">{{ record.title }}</h4>
+          <van-tag :type="statusColorMap[record.status]" size="medium" round class="status-badge">
             {{ statusMap[record.status] }}
           </van-tag>
-        </template>
-        <template #thumb>
-          <van-icon :name="spaceIconMap[record.spaceType] || 'label-o'" size="32" color="#999" />
-        </template>
-        <template #footer>
-          <div class="record-meta">
-            <span class="meta-type">空间类型: {{ record.spaceType }}</span>
-            <span>作业员: {{ record.operator }}</span>
-            <span>开始时间: {{ record.startTime }}</span>
+        </div>
+
+        <!-- Card Body -->
+        <div class="record-card__body">
+          <div class="record-info">
+            <span class="info-item">
+              <van-icon name="location-o" size="13" />
+              {{ record.location }}
+            </span>
           </div>
-        </template>
-      </van-card>
+        </div>
+
+        <!-- Card Footer -->
+        <div class="record-card__footer">
+          <span class="meta-text">
+            <van-icon name="user-o" size="12" color="#969799" />
+            {{ record.operator }}
+          </span>
+          <span class="meta-text">
+            <van-icon name="clock-o" size="12" color="#969799" />
+            {{ record.startTime }}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -115,39 +154,101 @@ function goDetail(id: number) {
 <style lang="scss" scoped>
 .yxkjzy-records-page {
   min-height: 100vh;
-  background: var(--color-bg-page);
+  background: #F4F7F8;
 
-  :deep(.van-nav-bar) {
-    background: var(--color-primary);
-    --van-nav-bar-title-text-color: #fff;
-    --van-nav-bar-text-color: #fff;
-    --van-nav-bar-icon-color: #fff;
-  }
+  :deep(.van-nav-bar) { background: #1E74FF; }
+  :deep(.van-nav-bar__title) { color: #fff; font-size: 18px; font-weight: 600; }
+  :deep(.van-nav-bar__text),
+  :deep(.van-nav-bar__arrow) { color: #fff; }
+  :deep(.van-nav-bar .van-icon) { color: #fff; }
 }
 
-.record-list {
-  padding: 0 8px;
-
-  :deep(.van-card) {
-    margin: 8px;
+// Search
+.search-wrapper {
+  padding: 8px 12px 0;
+  background: #F4F7F8;
+  :deep(.van-search__content) {
     border-radius: 10px;
-    background: var(--color-bg-card);
-  }
-
-  :deep(.van-tag) {
-    margin-right: 4px;
+    background: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
 }
 
-.record-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 12px;
-  color: var(--color-text-secondary);
+// Tabs
+:deep(.van-tabs) { background: #fff; }
+:deep(.van-tabs__wrap) { padding: 0 8px; }
+:deep(.van-tab) { font-size: 14px; }
 
-  .meta-type {
-    color: var(--color-text-regular);
-  }
+// Record List
+.record-list { padding: 8px 12px 16px; }
+
+.record-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: box-shadow 0.15s ease;
+  &:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
+}
+
+.record-card__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.space-icon {
+  flex-shrink: 0;
+}
+
+.record-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-badge {
+  flex-shrink: 0;
+}
+
+.record-card__body {
+  margin-bottom: 6px;
+}
+
+.record-info {
+  font-size: 13px;
+  color: var(--color-text-regular);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.record-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.meta-text {
+  font-size: 12px;
+  color: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 </style>