Ver código fonte

feat(news): 新增新闻详情页面- 创建新闻详情页模板结构
- 添加标题、发布时间和浏览次数展示
- 集成富文本内容显示组件
- 实现从本地存储获取新闻数据
- 添加自定义底部导航组件
- 设置页面样式和布局

nahida 6 meses atrás
pai
commit
199b0a8d24
1 arquivos alterados com 210 adições e 0 exclusões
  1. 210 0
      src/pages/investigator/index.vue

+ 210 - 0
src/pages/investigator/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <view class="min-h-screen bg-gray-50">
+    <!-- 顶部导航栏 -->
+    <view class="flex items-center justify-between bg-white p-4 border-b">
+      <text class="text-xl font-bold">湘乡市</text>
+      <view class="bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-sm">
+        已公示列表
+      </view>
+    </view>
+
+    <!-- 主要内容区域 -->
+    <view class="p-4">
+      <!-- 第一行数据卡片 -->
+      <view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+        <view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]">
+          <text class="text-gray-500 text-sm block mb-1">总发包方</text>
+          <text class="text-xl font-bold">6488</text>
+        </view>
+
+        <view class="rounded-lg p-4 shadow-sm bg-[#FFF7F8]">
+          <text class="text-gray-500 text-sm block mb-1">未开始</text>
+          <text class="text-xl font-bold">0</text>
+        </view>
+
+        <view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]">
+          <text class="text-gray-500 text-sm block mb-1">摸底中</text>
+          <text class="text-xl font-bold">6698</text>
+        </view>
+
+        <view class="rounded-lg p-4 shadow-sm bg-[#FFFBF2]">
+          <text class="text-gray-500 text-sm block mb-1">公示中</text>
+          <text class="text-xl font-bold">0</text>
+        </view>
+      </view>
+
+
+      <!-- 第二行数据卡片 -->
+      <view class="grid grid-cols-3 gap-4 mb-6">
+        <view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]">
+          <text class="text-gray-500 text-sm block mb-1">总户数</text>
+          <text class="text-xl font-bold">194115</text>
+        </view>
+
+        <view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]">
+          <text class="text-gray-500 text-sm block mb-1">已上报</text>
+          <text class="text-xl font-bold">190430</text>
+        </view>
+
+        <view class="rounded-lg p-4 shadow-sm bg-[#FFF7F7]">
+          <text class="text-gray-500 text-sm block mb-1">未上报</text>
+          <text class="text-xl font-bold text-red-500">3685</text>
+        </view>
+      </view>
+
+
+      <!-- 第三行数据卡片 -->
+      <view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+
+        <!-- 待审核 -->
+        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-pink-50">
+          <text class="text-gray-500 text-sm block mb-1">待审核</text>
+          <text class="text-xl font-bold text-pink-500">1324</text>
+        </view>
+
+        <!-- 未通过 -->
+        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-orange-50">
+          <text class="text-gray-500 text-sm block mb-1">未通过</text>
+          <text class="text-xl font-bold text-orange-500">846</text>
+        </view>
+
+        <!-- 待公示 -->
+        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-amber-50">
+          <text class="text-gray-500 text-sm block mb-1">待公示</text>
+          <text class="text-xl font-bold text-amber-500">188260</text>
+        </view>
+
+        <!-- 已公示 -->
+        <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-green-50">
+          <text class="text-gray-500 text-sm block mb-1">已公示</text>
+          <text class="text-xl font-bold text-green-500">0</text>
+        </view>
+
+      </view>
+
+      <!-- 功能按钮区域 -->
+      <view class="grid grid-cols-2 gap-4 mb-6">
+        <view
+            class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
+            @click="goTask"
+        >
+          <text class="font-medium text-blue-600 underline">现场调查任务</text>
+          <uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
+        </view>
+
+        <view
+            class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
+            @click="goArchive"
+        >
+          <text class="font-medium text-blue-600 underline">档案资料</text>
+          <uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
+        </view>
+      </view>
+
+      <!-- 乡镇数据列表 -->
+      <view class="space-y-4">
+
+        <!-- 壶天镇 -->
+        <view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+          <text class="font-medium text-base mb-3 block">湘乡市壶天镇</text>
+          <view class="grid grid-cols-4 gap-2 text-sm">
+
+            <view>
+              <text class="text-gray-500 block">总户数</text>
+              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">12071</text>
+            </view>
+
+            <view>
+              <text class="text-gray-500 block">未上报</text>
+              <text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">103</text>
+            </view>
+
+            <view>
+              <text class="text-gray-500 block">已上报</text>
+              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">11968</text>
+            </view>
+
+            <view class="flex items-end justify-between">
+              <view>
+                <text class="text-gray-500 block">已完成</text>
+                <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
+              </view>
+              <uni-icons type="right" color="#999" size="16"></uni-icons>
+            </view>
+
+          </view>
+        </view>
+
+
+        <!-- 翻江镇 -->
+        <view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+          <text class="font-medium text-base mb-3 block">湘乡市翻江镇</text>
+          <view class="grid grid-cols-4 gap-2 text-sm">
+
+            <view>
+              <text class="text-gray-500 block">总户数</text>
+              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">10593</text>
+            </view>
+
+            <view>
+              <text class="text-gray-500 block">未上报</text>
+              <text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">181</text>
+            </view>
+
+            <view>
+              <text class="text-gray-500 block">已上报</text>
+              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">10412</text>
+            </view>
+
+            <view class="flex items-end justify-between">
+              <view>
+                <text class="text-gray-500 block">已完成</text>
+                <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
+              </view>
+              <uni-icons type="right" color="#999" size="16"></uni-icons>
+            </view>
+
+          </view>
+        </view>
+
+
+        <!-- 月山镇 -->
+        <view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
+          <text class="font-medium text-base mb-3 block">湘乡市月山镇</text>
+          <view class="grid grid-cols-4 gap-2 text-sm">
+
+            <view>
+              <text class="text-gray-500 block">总户数</text>
+              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">15942</text>
+            </view>
+
+            <view>
+              <text class="text-gray-500 block">未上报</text>
+              <text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">123</text>
+            </view>
+
+            <view>
+              <text class="text-gray-500 block">已上报</text>
+              <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">15819</text>
+            </view>
+
+            <view class="flex items-end justify-between">
+              <view>
+                <text class="text-gray-500 block">已完成</text>
+                <text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">0</text>
+              </view>
+              <uni-icons type="right" color="#999" size="16"></uni-icons>
+            </view>
+
+          </view>
+        </view>
+
+      </view>
+
+    </view>
+  </view>
+</template>
+
+<script setup>
+// 无需额外逻辑,直接展示静态数据
+</script>