From ea99d329e827e5784e5c76ff5b702706e5530872 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Tue, 7 Apr 2026 13:44:00 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E5=AE=B9?=
 =?UTF-8?q?=E5=99=A8=E5=A2=9E=E5=8A=A0=E6=A0=87=E9=A2=98=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mobile/src/components/PageContainer.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mobile/src/components/PageContainer.vue b/packages/mobile/src/components/PageContainer.vue
index e1e23e0..aa1057b 100644
--- a/packages/mobile/src/components/PageContainer.vue
+++ b/packages/mobile/src/components/PageContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-container">
-    <van-nav-bar title="气象预警" fixed left-arrow @click-left="onClickLeft" />
+    <van-nav-bar :title="title" fixed left-arrow @click-left="onClickLeft" />
     <div class="page-content-wrapper">
       <slot></slot>
     </div>
@@ -10,6 +10,13 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+
 const emit = defineEmits(['back'])
 
 const onClickLeft = () => {

From f0fd858f2c6b1a546a8aae0060f8a2f76270087d Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Tue, 7 Apr 2026 13:56:18 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E7=81=BE=E5=AE=B3=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DisasterManagement/DisasterManagement.vue | 290 ++++++++++++++++++
 1 file changed, 290 insertions(+)
 create mode 100644 packages/mobile/src/views/DisasterManagement/DisasterManagement.vue

diff --git a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
new file mode 100644
index 0000000..c6daf16
--- /dev/null
+++ b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
@@ -0,0 +1,290 @@
+<template>
+  <PageContainer title="灾毁阻断" @click-back="handleClickBack">
+    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch" />
+
+    <CurrentSite />
+
+    <div class="list-panel">
+      <CardItem 
+        v-for="(item, index) in list" 
+        :key="index" 
+        :title="item.title" 
+        @click="handleClickItem(item)"
+      >
+        <template #headerExtra>
+          <span :class="['status-ball', item.status === '未解除' ? 'active' : 'resolved']"></span>
+        </template>
+
+        <div class="info-block">
+          <div class="time-row">
+            <div class="time-box">
+              <span class="info-label">发生时间：</span>
+              <span class="info-value">{{ item.occurTime }}</span>
+            </div>
+            <van-icon class="jump-icon" name="arrow" />
+          </div>
+          <div class="time-box">
+            <span class="info-label">预计恢复时间：</span>
+            <span class="info-value">{{ item.estimateRecoverTime }}</span>
+          </div>
+        </div>
+      </CardItem>
+
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-wrapper">
+        <van-loading size="24px" vertical>加载中...</van-loading>
+      </div>
+
+      <!-- 空状态提示 -->
+      <EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
+    </div>
+    
+    <!-- 灾毁填报按钮 -->
+      <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd">
+      冰雪填报
+    </van-button>
+  </PageContainer>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import PageContainer from '@/components/PageContainer.vue'
+import SearchInput from '@/components/SearchInput.vue'
+import CardItem from '@/components/CardItem.vue'
+import EmptyBox from '@/components/EmptyBox.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
+
+const router = useRouter()
+
+// 搜索关键词
+const searchValue = ref('')
+
+// 列表数据
+const list = ref([])
+
+// 加载状态
+const loading = ref(false)
+
+// 空状态文本
+const emptyText = ref('暂无相关灾毁信息')
+
+// 获取灾毁列表数据（后端接口）
+const getDisasterList = async (keyword = '') => {
+  loading.value = true
+  
+  try {
+    // TODO: 替换为实际的后端接口地址
+    const response = await fetch('/api/disaster/list', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        keyword: keyword.trim()
+      })
+    })
+    
+    // 模拟接口响应格式，实际使用时根据后端返回结构调整
+    // const result = await response.json()
+    
+    // 模拟异步请求
+    // if (result.code === 200) {
+    //   list.value = result.data
+    //   emptyText.value = keyword ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
+    // } else {
+    //   showToast(result.message || '获取数据失败')
+    //   list.value = []
+    // }
+    
+    // ========== 模拟数据（实际开发时删除此部分） ==========
+    await new Promise(resolve => setTimeout(resolve, 500))
+    const mockData = [
+      {
+        id: 1,
+        title: 'G242金铃乡老窖坪发生积雪',
+        status: '未解除',
+        occurTime: '2025/10/10 20:29',
+        estimateRecoverTime: '2025/10/10 20:29'
+      },
+      {
+        id: 2,
+        title: 'S521白鹿镇X发生边坡坍塌',
+        status: '已解除',
+        occurTime: '2025/10/10 20:29',
+        estimateRecoverTime: '2025/10/10 20:29'
+      },
+      {
+        id: 3,
+        title: '彭水S523发生边坡坍塌',
+        status: '未解除',
+        occurTime: '2025/10/10 20:29',
+        estimateRecoverTime: '2025/10/10 20:29'
+      },
+      {
+        id: 4,
+        title: '梁平蟠龙镇G318发生山体滑坡',
+        status: '已解除',
+        occurTime: '2025/10/10 20:29',
+        estimateRecoverTime: '2025/10/10 20:29'
+      },
+      {
+        id: 5,
+        title: '重庆市大足区XX县G201行道树倒塌',
+        status: '已解除',
+        occurTime: '2025/10/10 20:29',
+        estimateRecoverTime: '2025/10/10 20:29'
+      }
+    ]
+    
+    // 模拟后端搜索过滤（实际由后端完成）
+    if (keyword) {
+      const filtered = mockData.filter(item => 
+        item.title.toLowerCase().includes(keyword.toLowerCase())
+      )
+      list.value = filtered
+      emptyText.value = filtered.length === 0 ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
+    } else {
+      list.value = mockData
+      emptyText.value = '暂无相关灾毁信息'
+    }
+    // ========== 模拟数据结束 ==========
+    
+  } catch (error) {
+    console.error('获取灾毁列表失败:', error)
+    showToast('获取数据失败，请稍后重试')
+    list.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索处理（调用后端接口）
+const handleSearch = () => {
+  getDisasterList(searchValue.value)
+}
+
+// 点击返回
+const handleClickBack = () => {
+  router.push('/')
+}
+
+// 点击列表项，跳转详情
+const handleClickItem = (item) => {
+  router.push({
+    path: '/disaster-detail',
+    query: {
+      id: item.id,
+      title: item.title,
+      status: item.status,
+      occurTime: item.occurTime,
+      estimateRecoverTime: item.estimateRecoverTime
+    }
+  })
+}
+
+// 灾毁填报
+const handleFillReport = () => {
+  // TODO: 跳转到灾毁填报页面
+  console.log('点击灾毁填报')
+  // router.push('/disaster-report')
+}
+
+// 页面初始化加载数据
+onMounted(() => {
+  getDisasterList()
+})
+</script>
+
+<style lang="scss" scoped>
+
+.list-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 80px;
+}
+
+.info-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.time-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.time-box {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+}
+
+.info-label {
+  font-weight: 400;
+  font-size: 13px;
+  color: #999999;
+}
+
+.info-value {
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+}
+
+.jump-icon {
+  font-size: 16px;
+  color: rgba(102, 102, 102, 0.4);
+}
+
+.status-ball {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  margin-right: 6px;
+  
+  &.active {
+    background: linear-gradient(180deg, #fd4646 0%, #fb2222 100%);
+    box-shadow: 0px 1px 4px 0px rgba(91, 8, 8, 0.34);
+  }
+  
+  &.resolved {
+    background: #52C41A;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.fab-btn {
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 32px);
+  max-width: 340px;
+  border-radius: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  z-index: 10;
+  
+  &:active {
+    opacity: 0.9;
+    transform: translateX(-50%) scale(0.98);
+  }
+}
+
+.loading-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+</style>
\ No newline at end of file

From a5b7b8040426e07d7b99ced0cf8be2714d789705 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Tue, 7 Apr 2026 14:05:20 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=8D=A1=E7=89=87=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mobile/src/components/CardItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mobile/src/components/CardItem.vue b/packages/mobile/src/components/CardItem.vue
index b272bac..1018ab6 100644
--- a/packages/mobile/src/components/CardItem.vue
+++ b/packages/mobile/src/components/CardItem.vue
@@ -39,7 +39,7 @@ const props = defineProps({
 .card-item {
   position: relative;
   width: 100%;
-  padding: 21px 50px 17px 10px;
+  padding: 20px;
   background-color: #fff;
   border-radius: 8px;
 }

From 4d236263714d7949111562e74c102736f02fe2c8 Mon Sep 17 00:00:00 2001
From: niedongsheng <605973111@qq.com>
Date: Tue, 7 Apr 2026 14:26:35 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E7=81=BE=E5=AE=B3=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E4=B8=8E=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/src/components/SearchInput.vue     |  71 ++++----
 packages/mobile/src/router/index.js           |   5 +
 .../DisasterManagement/DisasterManagement.vue | 152 +++++++-----------
 .../views/DisasterManagement/mockData.json    |  42 +++++
 packages/mobile/src/views/Home.vue            |   7 +
 5 files changed, 154 insertions(+), 123 deletions(-)
 create mode 100644 packages/mobile/src/views/DisasterManagement/mockData.json

diff --git a/packages/mobile/src/components/SearchInput.vue b/packages/mobile/src/components/SearchInput.vue
index 711cfaf..24807ad 100644
--- a/packages/mobile/src/components/SearchInput.vue
+++ b/packages/mobile/src/components/SearchInput.vue
@@ -3,18 +3,26 @@
     <div class="input-wrapper">
       <div class="input-block">
         <van-icon class="search-icon" name="search" />
-        <input class="inner-input" v-model="modelValue" :placeholder="placeholder" />
-        <van-icon class="close-icon" name="clear" v-if="modelValue !== ''" @click="modelValue = ''" />
+        <input 
+          class="inner-input" 
+          v-model="modelValue" 
+          :placeholder="placeholder" 
+        />
+        <van-icon 
+          class="close-icon" 
+          name="clear" 
+          v-if="modelValue !== ''" 
+          @click="clearInput" 
+        />
+      </div>
+      <!-- 右侧插槽：用于放置全部和筛选按钮 -->
+      <div class="slot-wrapper" v-if="$slots.extra">
+        <slot name="extra"></slot>
       </div>
-
-      <!-- 占位符 -->
-      <!-- <div class="placeholder-block" v-if="modelValue === '111'">
-        <van-icon class="search-icon" name="search" />
-        <span class="placeholder-text">{{ placeholder }}</span>
-      </div> -->
     </div>
   </div>
 </template>
+
 <script setup>
 import { onMounted, ref } from 'vue'
 
@@ -26,7 +34,13 @@ const props = defineProps({
     default: '请输入关键词'
   }
 })
+
+// 清空输入框
+const clearInput = () => {
+  modelValue.value = ''
+}
 </script>
+
 <style scoped lang="scss">
 .search-input {
   position: relative;
@@ -37,19 +51,23 @@ const props = defineProps({
 }
 
 .input-wrapper {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 100%;
   background-color: #fff;
   border-radius: 4px;
+  gap: 12px; // 输入框和按钮组间距
+  padding-right: 12px; // 右侧内边距
+  box-sizing: border-box;
 }
 
 .input-block {
   position: relative;
+  flex: 1;
+  height: 100%;
   display: flex;
   justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 0 20px;
   box-sizing: border-box;
 
   .search-icon, .close-icon {
@@ -59,10 +77,18 @@ const props = defineProps({
     transform: translateY(-50%);
     font-size: 20px;
     color: #9b9b9b;
+    pointer-events: none; // 搜索图标不阻挡点击
   }
+  
   .close-icon {
     left: unset;
     right: 20px;
+    pointer-events: auto; // 清空图标可点击
+    cursor: pointer;
+    
+    &:active {
+      opacity: 0.6;
+    }
   }
 }
 
@@ -71,28 +97,17 @@ const props = defineProps({
   border: none;
   padding: 0;
   margin: 0;
+  width: 100%;
   height: 100%;
   text-align: center;
   font-size: 14px;
+  background: transparent;
 }
 
-.placeholder-block {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.slot-wrapper {
   display: flex;
   align-items: center;
-  pointer-events: none;
-
-  .search-icon {
-    font-size: 20px;
-    margin-right: 3px;
-    color: #9b9b9b;
-  }
-
-  .placeholder-text {
-    color: #9b9b9b;
-  }
+  gap: 8px; // 按钮间距
+  flex-shrink: 0; // 防止压缩
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/mobile/src/router/index.js b/packages/mobile/src/router/index.js
index 9222cb0..d093910 100644
--- a/packages/mobile/src/router/index.js
+++ b/packages/mobile/src/router/index.js
@@ -80,6 +80,11 @@ const routes = [
     path: '/warningMessageHandle',
     name: 'WarningMessageHandle',
     component: () => import('../views/WarningMessage/WarningMessageHandle.vue')
+  },
+  {
+    path: '/disasterManagement',
+    name: 'DisasterManagement',
+    component: () => import('../views/DisasterManagement/DisasterManagement.vue')
   }
 ]
 
diff --git a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
index c6daf16..87cd869 100644
--- a/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
+++ b/packages/mobile/src/views/DisasterManagement/DisasterManagement.vue
@@ -1,33 +1,43 @@
 <template>
   <PageContainer title="灾毁阻断" @click-back="handleClickBack">
-    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch" />
+    <SearchInput v-model="searchValue" placeholder="请输入地点关键词" @search="handleSearch">
+      <template #extra>
+        <!-- 全部按钮（激活状态） -->
+        <van-button type="default" size="small" :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'"> 全部 </van-button>
+
+        <!-- 筛选按钮（带图标） -->
+        <van-button type="default" size="small" icon="filter-o" @click="showFilter = true"></van-button>
+      </template>
+    </SearchInput>
 
     <CurrentSite />
 
     <div class="list-panel">
-      <CardItem 
-        v-for="(item, index) in list" 
-        :key="index" 
-        :title="item.title" 
-        @click="handleClickItem(item)"
-      >
+      <CardItem v-for="(item, index) in list" :key="index" :title="item.title" @click="handleClickItem(item)">
         <template #headerExtra>
-          <span :class="['status-ball', item.status === '未解除' ? 'active' : 'resolved']"></span>
+          <!-- 使用 Vant Tag 组件显示状态 -->
+          <van-tag :type="item.status === '未解除' ? 'danger' : 'success'" plain size="medium">
+            {{ item.status }}
+          </van-tag>
         </template>
 
         <div class="info-block">
-          <div class="time-row">
-            <div class="time-box">
-              <span class="info-label">发生时间：</span>
-              <span class="info-value">{{ item.occurTime }}</span>
-            </div>
-            <van-icon class="jump-icon" name="arrow" />
+          <div class="time-box">
+            <span class="info-label">发生时间：</span>
+            <span class="info-value">{{ item.occurTime }}</span>
           </div>
           <div class="time-box">
             <span class="info-label">预计恢复时间：</span>
             <span class="info-value">{{ item.estimateRecoverTime }}</span>
           </div>
+          <!-- 使用 Vant Tag 组件显示灾毁类型 -->
+          <div class="disaster-type-wrapper">
+            <van-tag type="primary" size="medium" plain>{{ item.disasterType }}</van-tag>
+          </div>
         </div>
+
+        <!-- 使用绝对定位的箭头 -->
+        <van-icon class="jump-icon-absolute" name="arrow" />
       </CardItem>
 
       <!-- 加载状态 -->
@@ -38,23 +48,22 @@
       <!-- 空状态提示 -->
       <EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
     </div>
-    
+
     <!-- 灾毁填报按钮 -->
-      <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd">
-      冰雪填报
-    </van-button>
+    <van-button type="primary" class="fab-btn" icon="plus" @click="handleAdd"> 冰雪填报 </van-button>
   </PageContainer>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { showToast } from 'vant'
+import { showToast, Tag as VanTag, Loading as VanLoading, Icon as VanIcon, Button as VanButton } from 'vant'
 import PageContainer from '@/components/PageContainer.vue'
 import SearchInput from '@/components/SearchInput.vue'
 import CardItem from '@/components/CardItem.vue'
 import EmptyBox from '@/components/EmptyBox.vue'
 import CurrentSite from '@/components/CurrentSite.vue'
+import mockDataJSON from './mockData.json'
 
 const router = useRouter()
 
@@ -73,7 +82,7 @@ const emptyText = ref('暂无相关灾毁信息')
 // 获取灾毁列表数据（后端接口）
 const getDisasterList = async (keyword = '') => {
   loading.value = true
-  
+
   try {
     // TODO: 替换为实际的后端接口地址
     const response = await fetch('/api/disaster/list', {
@@ -85,10 +94,10 @@ const getDisasterList = async (keyword = '') => {
         keyword: keyword.trim()
       })
     })
-    
+
     // 模拟接口响应格式，实际使用时根据后端返回结构调整
     // const result = await response.json()
-    
+
     // 模拟异步请求
     // if (result.code === 200) {
     //   list.value = result.data
@@ -97,52 +106,14 @@ const getDisasterList = async (keyword = '') => {
     //   showToast(result.message || '获取数据失败')
     //   list.value = []
     // }
-    
+
     // ========== 模拟数据（实际开发时删除此部分） ==========
-    await new Promise(resolve => setTimeout(resolve, 500))
-    const mockData = [
-      {
-        id: 1,
-        title: 'G242金铃乡老窖坪发生积雪',
-        status: '未解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 2,
-        title: 'S521白鹿镇X发生边坡坍塌',
-        status: '已解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 3,
-        title: '彭水S523发生边坡坍塌',
-        status: '未解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 4,
-        title: '梁平蟠龙镇G318发生山体滑坡',
-        status: '已解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      },
-      {
-        id: 5,
-        title: '重庆市大足区XX县G201行道树倒塌',
-        status: '已解除',
-        occurTime: '2025/10/10 20:29',
-        estimateRecoverTime: '2025/10/10 20:29'
-      }
-    ]
-    
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    const mockData = mockDataJSON
+
     // 模拟后端搜索过滤（实际由后端完成）
     if (keyword) {
-      const filtered = mockData.filter(item => 
-        item.title.toLowerCase().includes(keyword.toLowerCase())
-      )
+      const filtered = mockData.filter((item) => item.title.toLowerCase().includes(keyword.toLowerCase()))
       list.value = filtered
       emptyText.value = filtered.length === 0 ? '未搜索到相关灾毁信息' : '暂无相关灾毁信息'
     } else {
@@ -150,7 +121,6 @@ const getDisasterList = async (keyword = '') => {
       emptyText.value = '暂无相关灾毁信息'
     }
     // ========== 模拟数据结束 ==========
-    
   } catch (error) {
     console.error('获取灾毁列表失败:', error)
     showToast('获取数据失败，请稍后重试')
@@ -179,13 +149,14 @@ const handleClickItem = (item) => {
       title: item.title,
       status: item.status,
       occurTime: item.occurTime,
-      estimateRecoverTime: item.estimateRecoverTime
+      estimateRecoverTime: item.estimateRecoverTime,
+      disasterType: item.disasterType
     }
   })
 }
 
 // 灾毁填报
-const handleFillReport = () => {
+const handleAdd = () => {
   // TODO: 跳转到灾毁填报页面
   console.log('点击灾毁填报')
   // router.push('/disaster-report')
@@ -198,7 +169,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .list-panel {
   display: flex;
   flex-direction: column;
@@ -206,16 +176,16 @@ onMounted(() => {
   padding-bottom: 80px;
 }
 
+/* CardItem 需要设置相对定位 */
+:deep(.card-item) {
+  position: relative;
+}
+
 .info-block {
   display: flex;
   flex-direction: column;
   gap: 8px;
-}
-
-.time-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  padding-right: 24px; /* 为箭头留出空间 */
 }
 
 .time-box {
@@ -236,27 +206,20 @@ onMounted(() => {
   color: #333333;
 }
 
-.jump-icon {
+/* 使用绝对定位的箭头样式 */
+.jump-icon-absolute {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
   font-size: 16px;
   color: rgba(102, 102, 102, 0.4);
+  cursor: pointer;
 }
 
-.status-ball {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  margin-right: 6px;
-  
-  &.active {
-    background: linear-gradient(180deg, #fd4646 0%, #fb2222 100%);
-    box-shadow: 0px 1px 4px 0px rgba(91, 8, 8, 0.34);
-  }
-  
-  &.resolved {
-    background: #52C41A;
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
-  }
+/* 灾毁类型标签样式 */
+.disaster-type-wrapper {
+  margin-top: 4px;
 }
 
 .fab-btn {
@@ -271,11 +234,10 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
   font-size: 16px;
   cursor: pointer;
   z-index: 10;
-  
+
   &:active {
     opacity: 0.9;
     transform: translateX(-50%) scale(0.98);
@@ -287,4 +249,4 @@ onMounted(() => {
   justify-content: center;
   padding: 40px 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/mobile/src/views/DisasterManagement/mockData.json b/packages/mobile/src/views/DisasterManagement/mockData.json
new file mode 100644
index 0000000..3eb1a93
--- /dev/null
+++ b/packages/mobile/src/views/DisasterManagement/mockData.json
@@ -0,0 +1,42 @@
+[
+  {
+    "id": 1,
+    "title": "G242金铃乡老窖坪发生积雪",
+    "status": "未解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "积雪"
+  },
+  {
+    "id": 2,
+    "title": "S521白鹿镇X发生边坡坍塌",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "边坡坍塌"
+  },
+  {
+    "id": 3,
+    "title": "彭水S523发生边坡坍塌",
+    "status": "未解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "路基沉陷"
+  },
+  {
+    "id": 4,
+    "title": "梁平蟠龙镇G318发生山体滑坡",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "山体滑坡"
+  },
+  {
+    "id": 5,
+    "title": "重庆市大足区XX县G201行道树倒塌",
+    "status": "已解除",
+    "occurTime": "2025/10/10 20:29",
+    "estimateRecoverTime": "2025/10/10 20:29",
+    "disasterType": "行道树倒塌"
+  }
+]
diff --git a/packages/mobile/src/views/Home.vue b/packages/mobile/src/views/Home.vue
index 2f54a4e..3ac4c92 100644
--- a/packages/mobile/src/views/Home.vue
+++ b/packages/mobile/src/views/Home.vue
@@ -100,6 +100,13 @@ const gridItems = [
       params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
     },
   },
+  {
+    icon: group106Icon,
+    text: "灾害管理",
+    to: {
+      name: "DisasterManagement",
+    },
+  },
   {
     icon: group105Icon,
     text: "预警信息",