diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
new file mode 100644
index 0000000..cec68eb
--- /dev/null
+++ b/src/views/SpongeCulture.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
+      <div class="left">
+        <van-tag type="primary">宣传</van-tag>
+        <p class="title">{{ item.address }}</p>
+        <p>{{ item.trainTime }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.filelist[0].url" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SpongeCulture">
+import { specialNavList } from '@/api/SpongeCulture.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const tableData = ref([]);
+
+const allData = reactive({
+  newslist: [],
+});
+
+// 跳转详情
+function gotoNews(item) {
+  console.log('111');
+  router.push({
+    path: '/newsdetail',
+    query: { id: item.id },
+  });
+}
+
+/** 获取查询数据列表 */
+function getDataList() {
+  specialNavList().then((response) => {
+    tableData.value = response.data;
+  });
+}
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  //   background: red;
+  background: #ffffff00;
+
+  .newsList {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .left {
+      flex: 1;
+      margin-right: 20px;
+      overflow: auto;
+      p.title {
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden; //超出隐藏
+        white-space: nowrap; //不折行
+        text-overflow: ellipsis; //溢出显示省略号
+        font-size: 28px;
+        margin: 15px auto;
+      }
+    }
+    .right {
+      width: 250px;
+      img {
+        width: 250px;
+        height: 150px;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
new file mode 100644
index 0000000..cec68eb
--- /dev/null
+++ b/src/views/SpongeCulture.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
+      <div class="left">
+        <van-tag type="primary">宣传</van-tag>
+        <p class="title">{{ item.address }}</p>
+        <p>{{ item.trainTime }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.filelist[0].url" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SpongeCulture">
+import { specialNavList } from '@/api/SpongeCulture.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const tableData = ref([]);
+
+const allData = reactive({
+  newslist: [],
+});
+
+// 跳转详情
+function gotoNews(item) {
+  console.log('111');
+  router.push({
+    path: '/newsdetail',
+    query: { id: item.id },
+  });
+}
+
+/** 获取查询数据列表 */
+function getDataList() {
+  specialNavList().then((response) => {
+    tableData.value = response.data;
+  });
+}
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  //   background: red;
+  background: #ffffff00;
+
+  .newsList {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .left {
+      flex: 1;
+      margin-right: 20px;
+      overflow: auto;
+      p.title {
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden; //超出隐藏
+        white-space: nowrap; //不折行
+        text-overflow: ellipsis; //溢出显示省略号
+        font-size: 28px;
+        margin: 15px auto;
+      }
+    }
+    .right {
+      width: 250px;
+      img {
+        width: 250px;
+        height: 150px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
new file mode 100644
index 0000000..2d458c3
--- /dev/null
+++ b/src/views/components/Header.vue
@@ -0,0 +1,74 @@
+<template>
+  <van-nav-bar
+    safe-area-inset-top
+    :style="[{ 'margin-top': allData.barTop }]"
+    class="headerpage"
+    :title="allData.title"
+    left-text=""
+    v-if="allData.ifShowHead"
+    :left-arrow="allData.ifBack"
+    @click-left="backTo"
+    @click-right="searchContent"
+  >
+  </van-nav-bar>
+</template>
+
+<script setup name="headerPage">
+import { useRouter } from 'vue-router';
+import bus from '@/utils/utils';
+import { checkUserSystem } from '@/utils/compatible.js';
+import MapIcon from '@/assets/images/gisMap/mapIcon.png';
+
+const allData = reactive({
+  title: '',
+  ifBack: true, //返回箭头是否显示
+  ifShowHead: false, //整个头部bar是否显示
+  ifSearch: false, //筛选icon
+  ifAdd: false, //新增icon
+  isMap: false,
+  barTop: '30Px',
+});
+// 动态获取 meta
+const router = useRouter();
+const useRouterCurrent = reactive(router);
+watch(useRouterCurrent, (newValue) => {
+  const { title, ifBack, ifShowHead, ifSearch, ifAdd, isMap } = newValue.currentRoute.meta;
+  allData.title = title;
+  allData.ifBack = ifBack == undefined ? true : ifBack; //不设置默认true显示
+  allData.ifShowHead = ifShowHead == undefined ? false : ifShowHead; //不设置默认true显示
+  allData.ifSearch = ifSearch == undefined ? false : ifSearch; //不设置默认false不显示
+  allData.ifAdd = ifAdd == undefined ? false : ifAdd; //不设置默认false不显示
+  allData.isMap = isMap == undefined ? false : isMap; //不设置默认false不显示
+});
+// 返回
+const backTo = () => {
+  router.go(-1);
+};
+// 点击筛选
+const searchContent = () => {
+  bus.emit('goSearchRight', true);
+};
+onMounted(() => {
+  // 安卓，ios顶部适配
+  let sys = checkUserSystem();
+  if (sys == 'Android') {
+    allData.barTop = '30Px';
+  } else {
+    allData.barTop = '0Px';
+  }
+});
+</script>
+<style lang="less">
+.headerpage {
+  .van-nav-bar {
+    .van-icon {
+      color: #333;
+    }
+    .van-nav-bar__title {
+      color: #333;
+      font-weight: 400;
+      font-size: 32px;
+    }
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
new file mode 100644
index 0000000..cec68eb
--- /dev/null
+++ b/src/views/SpongeCulture.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
+      <div class="left">
+        <van-tag type="primary">宣传</van-tag>
+        <p class="title">{{ item.address }}</p>
+        <p>{{ item.trainTime }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.filelist[0].url" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SpongeCulture">
+import { specialNavList } from '@/api/SpongeCulture.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const tableData = ref([]);
+
+const allData = reactive({
+  newslist: [],
+});
+
+// 跳转详情
+function gotoNews(item) {
+  console.log('111');
+  router.push({
+    path: '/newsdetail',
+    query: { id: item.id },
+  });
+}
+
+/** 获取查询数据列表 */
+function getDataList() {
+  specialNavList().then((response) => {
+    tableData.value = response.data;
+  });
+}
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  //   background: red;
+  background: #ffffff00;
+
+  .newsList {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .left {
+      flex: 1;
+      margin-right: 20px;
+      overflow: auto;
+      p.title {
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden; //超出隐藏
+        white-space: nowrap; //不折行
+        text-overflow: ellipsis; //溢出显示省略号
+        font-size: 28px;
+        margin: 15px auto;
+      }
+    }
+    .right {
+      width: 250px;
+      img {
+        width: 250px;
+        height: 150px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
new file mode 100644
index 0000000..2d458c3
--- /dev/null
+++ b/src/views/components/Header.vue
@@ -0,0 +1,74 @@
+<template>
+  <van-nav-bar
+    safe-area-inset-top
+    :style="[{ 'margin-top': allData.barTop }]"
+    class="headerpage"
+    :title="allData.title"
+    left-text=""
+    v-if="allData.ifShowHead"
+    :left-arrow="allData.ifBack"
+    @click-left="backTo"
+    @click-right="searchContent"
+  >
+  </van-nav-bar>
+</template>
+
+<script setup name="headerPage">
+import { useRouter } from 'vue-router';
+import bus from '@/utils/utils';
+import { checkUserSystem } from '@/utils/compatible.js';
+import MapIcon from '@/assets/images/gisMap/mapIcon.png';
+
+const allData = reactive({
+  title: '',
+  ifBack: true, //返回箭头是否显示
+  ifShowHead: false, //整个头部bar是否显示
+  ifSearch: false, //筛选icon
+  ifAdd: false, //新增icon
+  isMap: false,
+  barTop: '30Px',
+});
+// 动态获取 meta
+const router = useRouter();
+const useRouterCurrent = reactive(router);
+watch(useRouterCurrent, (newValue) => {
+  const { title, ifBack, ifShowHead, ifSearch, ifAdd, isMap } = newValue.currentRoute.meta;
+  allData.title = title;
+  allData.ifBack = ifBack == undefined ? true : ifBack; //不设置默认true显示
+  allData.ifShowHead = ifShowHead == undefined ? false : ifShowHead; //不设置默认true显示
+  allData.ifSearch = ifSearch == undefined ? false : ifSearch; //不设置默认false不显示
+  allData.ifAdd = ifAdd == undefined ? false : ifAdd; //不设置默认false不显示
+  allData.isMap = isMap == undefined ? false : isMap; //不设置默认false不显示
+});
+// 返回
+const backTo = () => {
+  router.go(-1);
+};
+// 点击筛选
+const searchContent = () => {
+  bus.emit('goSearchRight', true);
+};
+onMounted(() => {
+  // 安卓，ios顶部适配
+  let sys = checkUserSystem();
+  if (sys == 'Android') {
+    allData.barTop = '30Px';
+  } else {
+    allData.barTop = '0Px';
+  }
+});
+</script>
+<style lang="less">
+.headerpage {
+  .van-nav-bar {
+    .van-icon {
+      color: #333;
+    }
+    .van-nav-bar__title {
+      color: #333;
+      font-weight: 400;
+      font-size: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/views/components/uploadFile.vue b/src/views/components/uploadFile.vue
new file mode 100644
index 0000000..21d0b3f
--- /dev/null
+++ b/src/views/components/uploadFile.vue
@@ -0,0 +1,209 @@
+<template>
+  <!-- 公共图片上传 -->
+  <div class="uploaderPage">
+    <!-- 上传图片 -->
+    <van-uploader
+      v-model="fileList"
+      :before-read="beforeRead"
+      @delete="deletePic"
+      :max-count="maxCount"
+      :max-size="50 * 1024 * 1024"
+      @oversize="onOversize"
+      :accept="acceptFormat"
+      :disabled="isDisabled"
+    >
+    </van-uploader>
+    <div v-if="acceptFormat == 'video/*'">
+      <!-- 显示视频列表 -->
+      <div v-if="uploadList.length > 0">
+        <p v-for="item in uploadList" :key="item.name" class="van-ellipsis blueFont" @click="checkVideo(item.url)">
+          {{ item.originalName }}
+        </p>
+      </div>
+      <!-- 查看视频弹窗 -->
+      <!-- <van-popup v-model:show="showVideo" position="center" closeable class="uploadVideo" :style="{ width: '100%' }">
+          <vue3VideoPlay width="100%" title="视频" :src="videoUrl" :autoPlay="true" />
+        </van-popup> -->
+    </div>
+  </div>
+</template>
+
+<script setup name="uploaderPage">
+import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { fileUpload, fileDelete } from '@/api/publicApi.js';
+import { useStore } from '@/pinia/store.js';
+import { getCurrentInstance } from 'vue';
+// import 'vue3-video-play/dist/style.css';
+// import vue3VideoPlay from 'vue3-video-play';
+
+const props = defineProps({
+  //最大上传数
+  maxCount: {
+    type: Number,
+    default: 1,
+  },
+  //保存的文件数组
+  saveFileArr: {
+    type: Array,
+    default: () => [],
+  },
+  // 文件格式
+  acceptFormat: {
+    type: String,
+    default: 'image/*', //  video/*
+  },
+  // 是否禁用文件上传
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const pinias = useStore();
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const fileList = ref([]); //文件列表
+const uploadList = ref([]);
+const maxCount = props.maxCount; //最大上传数
+const showVideo = ref(false);
+const videoUrl = ref('');
+
+// 查看视频弹窗
+function checkVideo(url) {
+  videoUrl.value = url;
+  console.log(videoUrl.value, '  videoUrl.value');
+  showVideo.value = true;
+}
+// 开始上传图片
+const beforeRead = async (file) => {
+  // console.log(file, '原本上传的文件--');
+  // 压缩图片,大于500kb就压缩
+  let imgFile = null;
+  if (file.size / 1024 > 500 && file.type.includes('image')) {
+    imgFile = await blobToBase64(file, file.name);
+  } else {
+    imgFile = file;
+  }
+  // console.log(imgFile, '压缩后的图片文件获取');
+  pinias.showLoading();
+  let formData = new FormData();
+  let config = {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  };
+  formData.append('file', imgFile);
+  let res = await fileUpload(formData, config);
+  if (res && res.code == 200) {
+    uploadList.value.push(res.data);
+    console.log(uploadList.value, '  uploadList.value');
+
+    emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+    proxy.showSuccessToast('上传成功');
+  } else {
+    fileList.value = [];
+    let param = {
+      id: imgFile.id,
+      name: imgFile.name,
+      status: 'error',
+    };
+    fileList.value.push(param);
+    proxy.showFailToast('上传失败');
+  }
+  pinias.hideLoading();
+};
+// 图片删除
+const deletePic = (file) => {
+  console.log('图片删除--', file);
+  let fileIndex = null;
+  uploadList.value.map((item, index) => {
+    if (file.file.name == (item.originalName || item.name)) {
+      fileIndex = index;
+    }
+  });
+  // id为空时做逻辑删除，不调用删除接口
+  let id = uploadList.value[fileIndex].id;
+  if (!!!id) {
+    uploadList.value.splice(fileIndex, 1);
+  } else {
+    let ids = [];
+    ids.push(id);
+    fileDelete(ids).then((res) => {
+      uploadList.value.splice(fileIndex, 1);
+      proxy.showSuccessToast('删除成功');
+    });
+  }
+  emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+};
+const blobToBase64 = async (blob, fileName) => {
+  const reader = await new FileReader(); // 实例化一个reader文件
+  await reader.readAsDataURL(blob); // 添加二进制文件
+  return new Promise((resolve, reject) => {
+    reader.onload = async (event) => {
+      const base64 = await event.target.result; // 获取到它的base64文件
+      const scale = 0.6; // 设置缩放比例 （0-1）
+      let file = await compressImg(base64, scale, fileName);
+      resolve(file);
+    };
+  });
+};
+// 压缩大小
+const compressImg = (base64, scale, fileName) => {
+  // 处理缩放，转换格式
+  // 用canvas来压缩
+  const img = new Image();
+  img.src = base64;
+  return new Promise((resolve, reject) => {
+    img.onload = async () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.setAttribute('width', img.width * scale);
+      canvas.setAttribute('height', img.height * scale);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      // 转成base64 文件
+      base64 = canvas.toDataURL('image/jpeg', 0.8); //0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值
+      const arr = base64.split(',');
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bytes = atob(arr[1]);
+      const bytesLength = bytes.length;
+      const u8arr = new Uint8Array(bytesLength);
+      for (let i = 0; i < bytes.length; i++) {
+        u8arr[i] = bytes.charCodeAt(i);
+      }
+      const file = await new File([u8arr], fileName, { type: mime });
+      resolve(file);
+    };
+  });
+};
+function onOversize() {
+  proxy.showFailToast('上传的文件最大为50M');
+}
+onMounted(() => {
+  console.log('修改时图片回显--', props.saveFileArr);
+  // 修改时图片回显
+  fileList.value = [];
+  uploadList.value = [];
+  props.saveFileArr.map((item) => {
+    let params = {
+      id: item.id,
+      name: item.name,
+      originalName: item.originalName,
+      file: { name: item.originalName },
+      status: 'success',
+      url: item.url,
+    };
+    fileList.value.push(params);
+    uploadList.value.push(params);
+    console.log(uploadList.value, '  uploadList.value1111');
+  });
+});
+onBeforeUnmount(() => {
+  fileList.value = [];
+});
+</script>
+<style lang="less">
+.uploaderPage {
+  width: 100%;
+  .blueFont {
+    color: #0c60e1;
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
new file mode 100644
index 0000000..cec68eb
--- /dev/null
+++ b/src/views/SpongeCulture.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
+      <div class="left">
+        <van-tag type="primary">宣传</van-tag>
+        <p class="title">{{ item.address }}</p>
+        <p>{{ item.trainTime }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.filelist[0].url" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SpongeCulture">
+import { specialNavList } from '@/api/SpongeCulture.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const tableData = ref([]);
+
+const allData = reactive({
+  newslist: [],
+});
+
+// 跳转详情
+function gotoNews(item) {
+  console.log('111');
+  router.push({
+    path: '/newsdetail',
+    query: { id: item.id },
+  });
+}
+
+/** 获取查询数据列表 */
+function getDataList() {
+  specialNavList().then((response) => {
+    tableData.value = response.data;
+  });
+}
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  //   background: red;
+  background: #ffffff00;
+
+  .newsList {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .left {
+      flex: 1;
+      margin-right: 20px;
+      overflow: auto;
+      p.title {
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden; //超出隐藏
+        white-space: nowrap; //不折行
+        text-overflow: ellipsis; //溢出显示省略号
+        font-size: 28px;
+        margin: 15px auto;
+      }
+    }
+    .right {
+      width: 250px;
+      img {
+        width: 250px;
+        height: 150px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
new file mode 100644
index 0000000..2d458c3
--- /dev/null
+++ b/src/views/components/Header.vue
@@ -0,0 +1,74 @@
+<template>
+  <van-nav-bar
+    safe-area-inset-top
+    :style="[{ 'margin-top': allData.barTop }]"
+    class="headerpage"
+    :title="allData.title"
+    left-text=""
+    v-if="allData.ifShowHead"
+    :left-arrow="allData.ifBack"
+    @click-left="backTo"
+    @click-right="searchContent"
+  >
+  </van-nav-bar>
+</template>
+
+<script setup name="headerPage">
+import { useRouter } from 'vue-router';
+import bus from '@/utils/utils';
+import { checkUserSystem } from '@/utils/compatible.js';
+import MapIcon from '@/assets/images/gisMap/mapIcon.png';
+
+const allData = reactive({
+  title: '',
+  ifBack: true, //返回箭头是否显示
+  ifShowHead: false, //整个头部bar是否显示
+  ifSearch: false, //筛选icon
+  ifAdd: false, //新增icon
+  isMap: false,
+  barTop: '30Px',
+});
+// 动态获取 meta
+const router = useRouter();
+const useRouterCurrent = reactive(router);
+watch(useRouterCurrent, (newValue) => {
+  const { title, ifBack, ifShowHead, ifSearch, ifAdd, isMap } = newValue.currentRoute.meta;
+  allData.title = title;
+  allData.ifBack = ifBack == undefined ? true : ifBack; //不设置默认true显示
+  allData.ifShowHead = ifShowHead == undefined ? false : ifShowHead; //不设置默认true显示
+  allData.ifSearch = ifSearch == undefined ? false : ifSearch; //不设置默认false不显示
+  allData.ifAdd = ifAdd == undefined ? false : ifAdd; //不设置默认false不显示
+  allData.isMap = isMap == undefined ? false : isMap; //不设置默认false不显示
+});
+// 返回
+const backTo = () => {
+  router.go(-1);
+};
+// 点击筛选
+const searchContent = () => {
+  bus.emit('goSearchRight', true);
+};
+onMounted(() => {
+  // 安卓，ios顶部适配
+  let sys = checkUserSystem();
+  if (sys == 'Android') {
+    allData.barTop = '30Px';
+  } else {
+    allData.barTop = '0Px';
+  }
+});
+</script>
+<style lang="less">
+.headerpage {
+  .van-nav-bar {
+    .van-icon {
+      color: #333;
+    }
+    .van-nav-bar__title {
+      color: #333;
+      font-weight: 400;
+      font-size: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/views/components/uploadFile.vue b/src/views/components/uploadFile.vue
new file mode 100644
index 0000000..21d0b3f
--- /dev/null
+++ b/src/views/components/uploadFile.vue
@@ -0,0 +1,209 @@
+<template>
+  <!-- 公共图片上传 -->
+  <div class="uploaderPage">
+    <!-- 上传图片 -->
+    <van-uploader
+      v-model="fileList"
+      :before-read="beforeRead"
+      @delete="deletePic"
+      :max-count="maxCount"
+      :max-size="50 * 1024 * 1024"
+      @oversize="onOversize"
+      :accept="acceptFormat"
+      :disabled="isDisabled"
+    >
+    </van-uploader>
+    <div v-if="acceptFormat == 'video/*'">
+      <!-- 显示视频列表 -->
+      <div v-if="uploadList.length > 0">
+        <p v-for="item in uploadList" :key="item.name" class="van-ellipsis blueFont" @click="checkVideo(item.url)">
+          {{ item.originalName }}
+        </p>
+      </div>
+      <!-- 查看视频弹窗 -->
+      <!-- <van-popup v-model:show="showVideo" position="center" closeable class="uploadVideo" :style="{ width: '100%' }">
+          <vue3VideoPlay width="100%" title="视频" :src="videoUrl" :autoPlay="true" />
+        </van-popup> -->
+    </div>
+  </div>
+</template>
+
+<script setup name="uploaderPage">
+import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { fileUpload, fileDelete } from '@/api/publicApi.js';
+import { useStore } from '@/pinia/store.js';
+import { getCurrentInstance } from 'vue';
+// import 'vue3-video-play/dist/style.css';
+// import vue3VideoPlay from 'vue3-video-play';
+
+const props = defineProps({
+  //最大上传数
+  maxCount: {
+    type: Number,
+    default: 1,
+  },
+  //保存的文件数组
+  saveFileArr: {
+    type: Array,
+    default: () => [],
+  },
+  // 文件格式
+  acceptFormat: {
+    type: String,
+    default: 'image/*', //  video/*
+  },
+  // 是否禁用文件上传
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const pinias = useStore();
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const fileList = ref([]); //文件列表
+const uploadList = ref([]);
+const maxCount = props.maxCount; //最大上传数
+const showVideo = ref(false);
+const videoUrl = ref('');
+
+// 查看视频弹窗
+function checkVideo(url) {
+  videoUrl.value = url;
+  console.log(videoUrl.value, '  videoUrl.value');
+  showVideo.value = true;
+}
+// 开始上传图片
+const beforeRead = async (file) => {
+  // console.log(file, '原本上传的文件--');
+  // 压缩图片,大于500kb就压缩
+  let imgFile = null;
+  if (file.size / 1024 > 500 && file.type.includes('image')) {
+    imgFile = await blobToBase64(file, file.name);
+  } else {
+    imgFile = file;
+  }
+  // console.log(imgFile, '压缩后的图片文件获取');
+  pinias.showLoading();
+  let formData = new FormData();
+  let config = {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  };
+  formData.append('file', imgFile);
+  let res = await fileUpload(formData, config);
+  if (res && res.code == 200) {
+    uploadList.value.push(res.data);
+    console.log(uploadList.value, '  uploadList.value');
+
+    emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+    proxy.showSuccessToast('上传成功');
+  } else {
+    fileList.value = [];
+    let param = {
+      id: imgFile.id,
+      name: imgFile.name,
+      status: 'error',
+    };
+    fileList.value.push(param);
+    proxy.showFailToast('上传失败');
+  }
+  pinias.hideLoading();
+};
+// 图片删除
+const deletePic = (file) => {
+  console.log('图片删除--', file);
+  let fileIndex = null;
+  uploadList.value.map((item, index) => {
+    if (file.file.name == (item.originalName || item.name)) {
+      fileIndex = index;
+    }
+  });
+  // id为空时做逻辑删除，不调用删除接口
+  let id = uploadList.value[fileIndex].id;
+  if (!!!id) {
+    uploadList.value.splice(fileIndex, 1);
+  } else {
+    let ids = [];
+    ids.push(id);
+    fileDelete(ids).then((res) => {
+      uploadList.value.splice(fileIndex, 1);
+      proxy.showSuccessToast('删除成功');
+    });
+  }
+  emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+};
+const blobToBase64 = async (blob, fileName) => {
+  const reader = await new FileReader(); // 实例化一个reader文件
+  await reader.readAsDataURL(blob); // 添加二进制文件
+  return new Promise((resolve, reject) => {
+    reader.onload = async (event) => {
+      const base64 = await event.target.result; // 获取到它的base64文件
+      const scale = 0.6; // 设置缩放比例 （0-1）
+      let file = await compressImg(base64, scale, fileName);
+      resolve(file);
+    };
+  });
+};
+// 压缩大小
+const compressImg = (base64, scale, fileName) => {
+  // 处理缩放，转换格式
+  // 用canvas来压缩
+  const img = new Image();
+  img.src = base64;
+  return new Promise((resolve, reject) => {
+    img.onload = async () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.setAttribute('width', img.width * scale);
+      canvas.setAttribute('height', img.height * scale);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      // 转成base64 文件
+      base64 = canvas.toDataURL('image/jpeg', 0.8); //0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值
+      const arr = base64.split(',');
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bytes = atob(arr[1]);
+      const bytesLength = bytes.length;
+      const u8arr = new Uint8Array(bytesLength);
+      for (let i = 0; i < bytes.length; i++) {
+        u8arr[i] = bytes.charCodeAt(i);
+      }
+      const file = await new File([u8arr], fileName, { type: mime });
+      resolve(file);
+    };
+  });
+};
+function onOversize() {
+  proxy.showFailToast('上传的文件最大为50M');
+}
+onMounted(() => {
+  console.log('修改时图片回显--', props.saveFileArr);
+  // 修改时图片回显
+  fileList.value = [];
+  uploadList.value = [];
+  props.saveFileArr.map((item) => {
+    let params = {
+      id: item.id,
+      name: item.name,
+      originalName: item.originalName,
+      file: { name: item.originalName },
+      status: 'success',
+      url: item.url,
+    };
+    fileList.value.push(params);
+    uploadList.value.push(params);
+    console.log(uploadList.value, '  uploadList.value1111');
+  });
+});
+onBeforeUnmount(() => {
+  fileList.value = [];
+});
+</script>
+<style lang="less">
+.uploaderPage {
+  width: 100%;
+  .blueFont {
+    color: #0c60e1;
+  }
+}
+</style>
diff --git a/src/views/news/newsdetail.vue b/src/views/news/newsdetail.vue
new file mode 100644
index 0000000..3eed15f
--- /dev/null
+++ b/src/views/news/newsdetail.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="newsdetailpage">
+    <div class="main">
+      <div class="tit">{{ detailData.address }}</div>
+      <div class="time">{{ detailData.trainTime }}</div>
+      <div class="content" v-html="detailData.content"></div>
+    </div>
+  </div>
+</template>
+
+<script setup name="newsdetail">
+import { useRoute } from 'vue-router';
+import { specialNavDetail } from '@/api/SpongeCulture.js';
+const route = useRoute();
+const detailData = ref({});
+// 获取详情数据
+async function getDetail(id) {
+  specialNavDetail(id).then((res) => {
+    if (res && res.code == 200) {
+      detailData.value = res.data;
+      console.log(detailData.value, 'detailData.value');
+    }
+  });
+}
+onMounted(() => {
+  getDetail(route.query.id);
+});
+</script>
+<style lang="less">
+.newsdetailpage {
+  width: 100%;
+  height: 92%;
+  position: relative;
+  background-color: #fff;
+  min-height: 50%;
+  overflow: auto;
+
+  .main {
+    width: 690px;
+    margin: 0 auto;
+    padding-top: 16px;
+
+    .tit {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 36px;
+      color: #121212;
+      line-height: 1.5;
+      padding: 16px auto;
+      text-align: center;
+    }
+
+    .time {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #7b7b7e;
+      line-height: 3;
+    }
+
+    .content {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #121212;
+      line-height: 1.8;
+      margin: 30px auto;
+    }
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
new file mode 100644
index 0000000..cec68eb
--- /dev/null
+++ b/src/views/SpongeCulture.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
+      <div class="left">
+        <van-tag type="primary">宣传</van-tag>
+        <p class="title">{{ item.address }}</p>
+        <p>{{ item.trainTime }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.filelist[0].url" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SpongeCulture">
+import { specialNavList } from '@/api/SpongeCulture.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const tableData = ref([]);
+
+const allData = reactive({
+  newslist: [],
+});
+
+// 跳转详情
+function gotoNews(item) {
+  console.log('111');
+  router.push({
+    path: '/newsdetail',
+    query: { id: item.id },
+  });
+}
+
+/** 获取查询数据列表 */
+function getDataList() {
+  specialNavList().then((response) => {
+    tableData.value = response.data;
+  });
+}
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  //   background: red;
+  background: #ffffff00;
+
+  .newsList {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .left {
+      flex: 1;
+      margin-right: 20px;
+      overflow: auto;
+      p.title {
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden; //超出隐藏
+        white-space: nowrap; //不折行
+        text-overflow: ellipsis; //溢出显示省略号
+        font-size: 28px;
+        margin: 15px auto;
+      }
+    }
+    .right {
+      width: 250px;
+      img {
+        width: 250px;
+        height: 150px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
new file mode 100644
index 0000000..2d458c3
--- /dev/null
+++ b/src/views/components/Header.vue
@@ -0,0 +1,74 @@
+<template>
+  <van-nav-bar
+    safe-area-inset-top
+    :style="[{ 'margin-top': allData.barTop }]"
+    class="headerpage"
+    :title="allData.title"
+    left-text=""
+    v-if="allData.ifShowHead"
+    :left-arrow="allData.ifBack"
+    @click-left="backTo"
+    @click-right="searchContent"
+  >
+  </van-nav-bar>
+</template>
+
+<script setup name="headerPage">
+import { useRouter } from 'vue-router';
+import bus from '@/utils/utils';
+import { checkUserSystem } from '@/utils/compatible.js';
+import MapIcon from '@/assets/images/gisMap/mapIcon.png';
+
+const allData = reactive({
+  title: '',
+  ifBack: true, //返回箭头是否显示
+  ifShowHead: false, //整个头部bar是否显示
+  ifSearch: false, //筛选icon
+  ifAdd: false, //新增icon
+  isMap: false,
+  barTop: '30Px',
+});
+// 动态获取 meta
+const router = useRouter();
+const useRouterCurrent = reactive(router);
+watch(useRouterCurrent, (newValue) => {
+  const { title, ifBack, ifShowHead, ifSearch, ifAdd, isMap } = newValue.currentRoute.meta;
+  allData.title = title;
+  allData.ifBack = ifBack == undefined ? true : ifBack; //不设置默认true显示
+  allData.ifShowHead = ifShowHead == undefined ? false : ifShowHead; //不设置默认true显示
+  allData.ifSearch = ifSearch == undefined ? false : ifSearch; //不设置默认false不显示
+  allData.ifAdd = ifAdd == undefined ? false : ifAdd; //不设置默认false不显示
+  allData.isMap = isMap == undefined ? false : isMap; //不设置默认false不显示
+});
+// 返回
+const backTo = () => {
+  router.go(-1);
+};
+// 点击筛选
+const searchContent = () => {
+  bus.emit('goSearchRight', true);
+};
+onMounted(() => {
+  // 安卓，ios顶部适配
+  let sys = checkUserSystem();
+  if (sys == 'Android') {
+    allData.barTop = '30Px';
+  } else {
+    allData.barTop = '0Px';
+  }
+});
+</script>
+<style lang="less">
+.headerpage {
+  .van-nav-bar {
+    .van-icon {
+      color: #333;
+    }
+    .van-nav-bar__title {
+      color: #333;
+      font-weight: 400;
+      font-size: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/views/components/uploadFile.vue b/src/views/components/uploadFile.vue
new file mode 100644
index 0000000..21d0b3f
--- /dev/null
+++ b/src/views/components/uploadFile.vue
@@ -0,0 +1,209 @@
+<template>
+  <!-- 公共图片上传 -->
+  <div class="uploaderPage">
+    <!-- 上传图片 -->
+    <van-uploader
+      v-model="fileList"
+      :before-read="beforeRead"
+      @delete="deletePic"
+      :max-count="maxCount"
+      :max-size="50 * 1024 * 1024"
+      @oversize="onOversize"
+      :accept="acceptFormat"
+      :disabled="isDisabled"
+    >
+    </van-uploader>
+    <div v-if="acceptFormat == 'video/*'">
+      <!-- 显示视频列表 -->
+      <div v-if="uploadList.length > 0">
+        <p v-for="item in uploadList" :key="item.name" class="van-ellipsis blueFont" @click="checkVideo(item.url)">
+          {{ item.originalName }}
+        </p>
+      </div>
+      <!-- 查看视频弹窗 -->
+      <!-- <van-popup v-model:show="showVideo" position="center" closeable class="uploadVideo" :style="{ width: '100%' }">
+          <vue3VideoPlay width="100%" title="视频" :src="videoUrl" :autoPlay="true" />
+        </van-popup> -->
+    </div>
+  </div>
+</template>
+
+<script setup name="uploaderPage">
+import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { fileUpload, fileDelete } from '@/api/publicApi.js';
+import { useStore } from '@/pinia/store.js';
+import { getCurrentInstance } from 'vue';
+// import 'vue3-video-play/dist/style.css';
+// import vue3VideoPlay from 'vue3-video-play';
+
+const props = defineProps({
+  //最大上传数
+  maxCount: {
+    type: Number,
+    default: 1,
+  },
+  //保存的文件数组
+  saveFileArr: {
+    type: Array,
+    default: () => [],
+  },
+  // 文件格式
+  acceptFormat: {
+    type: String,
+    default: 'image/*', //  video/*
+  },
+  // 是否禁用文件上传
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const pinias = useStore();
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const fileList = ref([]); //文件列表
+const uploadList = ref([]);
+const maxCount = props.maxCount; //最大上传数
+const showVideo = ref(false);
+const videoUrl = ref('');
+
+// 查看视频弹窗
+function checkVideo(url) {
+  videoUrl.value = url;
+  console.log(videoUrl.value, '  videoUrl.value');
+  showVideo.value = true;
+}
+// 开始上传图片
+const beforeRead = async (file) => {
+  // console.log(file, '原本上传的文件--');
+  // 压缩图片,大于500kb就压缩
+  let imgFile = null;
+  if (file.size / 1024 > 500 && file.type.includes('image')) {
+    imgFile = await blobToBase64(file, file.name);
+  } else {
+    imgFile = file;
+  }
+  // console.log(imgFile, '压缩后的图片文件获取');
+  pinias.showLoading();
+  let formData = new FormData();
+  let config = {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  };
+  formData.append('file', imgFile);
+  let res = await fileUpload(formData, config);
+  if (res && res.code == 200) {
+    uploadList.value.push(res.data);
+    console.log(uploadList.value, '  uploadList.value');
+
+    emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+    proxy.showSuccessToast('上传成功');
+  } else {
+    fileList.value = [];
+    let param = {
+      id: imgFile.id,
+      name: imgFile.name,
+      status: 'error',
+    };
+    fileList.value.push(param);
+    proxy.showFailToast('上传失败');
+  }
+  pinias.hideLoading();
+};
+// 图片删除
+const deletePic = (file) => {
+  console.log('图片删除--', file);
+  let fileIndex = null;
+  uploadList.value.map((item, index) => {
+    if (file.file.name == (item.originalName || item.name)) {
+      fileIndex = index;
+    }
+  });
+  // id为空时做逻辑删除，不调用删除接口
+  let id = uploadList.value[fileIndex].id;
+  if (!!!id) {
+    uploadList.value.splice(fileIndex, 1);
+  } else {
+    let ids = [];
+    ids.push(id);
+    fileDelete(ids).then((res) => {
+      uploadList.value.splice(fileIndex, 1);
+      proxy.showSuccessToast('删除成功');
+    });
+  }
+  emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+};
+const blobToBase64 = async (blob, fileName) => {
+  const reader = await new FileReader(); // 实例化一个reader文件
+  await reader.readAsDataURL(blob); // 添加二进制文件
+  return new Promise((resolve, reject) => {
+    reader.onload = async (event) => {
+      const base64 = await event.target.result; // 获取到它的base64文件
+      const scale = 0.6; // 设置缩放比例 （0-1）
+      let file = await compressImg(base64, scale, fileName);
+      resolve(file);
+    };
+  });
+};
+// 压缩大小
+const compressImg = (base64, scale, fileName) => {
+  // 处理缩放，转换格式
+  // 用canvas来压缩
+  const img = new Image();
+  img.src = base64;
+  return new Promise((resolve, reject) => {
+    img.onload = async () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.setAttribute('width', img.width * scale);
+      canvas.setAttribute('height', img.height * scale);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      // 转成base64 文件
+      base64 = canvas.toDataURL('image/jpeg', 0.8); //0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值
+      const arr = base64.split(',');
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bytes = atob(arr[1]);
+      const bytesLength = bytes.length;
+      const u8arr = new Uint8Array(bytesLength);
+      for (let i = 0; i < bytes.length; i++) {
+        u8arr[i] = bytes.charCodeAt(i);
+      }
+      const file = await new File([u8arr], fileName, { type: mime });
+      resolve(file);
+    };
+  });
+};
+function onOversize() {
+  proxy.showFailToast('上传的文件最大为50M');
+}
+onMounted(() => {
+  console.log('修改时图片回显--', props.saveFileArr);
+  // 修改时图片回显
+  fileList.value = [];
+  uploadList.value = [];
+  props.saveFileArr.map((item) => {
+    let params = {
+      id: item.id,
+      name: item.name,
+      originalName: item.originalName,
+      file: { name: item.originalName },
+      status: 'success',
+      url: item.url,
+    };
+    fileList.value.push(params);
+    uploadList.value.push(params);
+    console.log(uploadList.value, '  uploadList.value1111');
+  });
+});
+onBeforeUnmount(() => {
+  fileList.value = [];
+});
+</script>
+<style lang="less">
+.uploaderPage {
+  width: 100%;
+  .blueFont {
+    color: #0c60e1;
+  }
+}
+</style>
diff --git a/src/views/news/newsdetail.vue b/src/views/news/newsdetail.vue
new file mode 100644
index 0000000..3eed15f
--- /dev/null
+++ b/src/views/news/newsdetail.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="newsdetailpage">
+    <div class="main">
+      <div class="tit">{{ detailData.address }}</div>
+      <div class="time">{{ detailData.trainTime }}</div>
+      <div class="content" v-html="detailData.content"></div>
+    </div>
+  </div>
+</template>
+
+<script setup name="newsdetail">
+import { useRoute } from 'vue-router';
+import { specialNavDetail } from '@/api/SpongeCulture.js';
+const route = useRoute();
+const detailData = ref({});
+// 获取详情数据
+async function getDetail(id) {
+  specialNavDetail(id).then((res) => {
+    if (res && res.code == 200) {
+      detailData.value = res.data;
+      console.log(detailData.value, 'detailData.value');
+    }
+  });
+}
+onMounted(() => {
+  getDetail(route.query.id);
+});
+</script>
+<style lang="less">
+.newsdetailpage {
+  width: 100%;
+  height: 92%;
+  position: relative;
+  background-color: #fff;
+  min-height: 50%;
+  overflow: auto;
+
+  .main {
+    width: 690px;
+    margin: 0 auto;
+    padding-top: 16px;
+
+    .tit {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 36px;
+      color: #121212;
+      line-height: 1.5;
+      padding: 16px auto;
+      text-align: center;
+    }
+
+    .time {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #7b7b7e;
+      line-height: 3;
+    }
+
+    .content {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #121212;
+      line-height: 1.8;
+      margin: 30px auto;
+    }
+  }
+}
+</style>
diff --git a/src/views/questionnaire.vue b/src/views/questionnaire.vue
new file mode 100644
index 0000000..fdcf969
--- /dev/null
+++ b/src/views/questionnaire.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>问卷调查</div>
+</template>

diff --git a/src/App.vue b/src/App.vue
index 2c6c248..2bd3bd4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="appContainer" v-cloak>
-    <!-- <Header /> -->
+    <Header />
     <router-view v-slot="{ Component }">
       <!-- 缓存 wrap($route.fullPath, Component)-->
       <keep-alive>
@@ -9,6 +9,14 @@
       <!-- 不缓存 -->
       <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
     </router-view>
+
+    <van-tabbar fixed route>
+      <van-tabbar-item replace to="/ElectronicMap" icon="home-o">电子地图</van-tabbar-item>
+      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
+      <van-tabbar-item replace to="/SpongeCulture" icon="user-o">海绵文化</van-tabbar-item>
+      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
+    </van-tabbar>
+
     <!-- 全局loading效果 -->
     <!-- <Loading v-if="showLoading" /> -->
     <!-- 开启底部安全区适配 -->
@@ -16,8 +24,8 @@
   </div>
 </template>
 <script setup name="appContainer">
-import { useStore } from "@/pinia/store.js";
-
+import { useStore } from '@/pinia/store.js';
+import Header from '@/views/components/Header.vue';
 const showLoading = ref(false);
 const pinias = useStore();
 
@@ -49,7 +57,7 @@
       wrapper = {
         name: wrapperName,
         render() {
-          return h("div", { className: "vaf-page-wrapper" }, component);
+          return h('div', { className: 'vaf-page-wrapper' }, component);
         },
       };
       wrapperMap.set(wrapperName, wrapper);
diff --git a/src/api/PublicAdvice.js b/src/api/PublicAdvice.js
new file mode 100644
index 0000000..59f7e4d
--- /dev/null
+++ b/src/api/PublicAdvice.js
@@ -0,0 +1,19 @@
+import request from '@/utils/request';
+
+// 公众意见 列表
+export function peopleOpinionPage(query) {
+  return request({
+    url: '/publicService/peopleOpinion/page',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 公众意见 新增
+export function peopleOpinionAdd(data) {
+  return request({
+    url: '/publicService/peopleOpinion/add',
+    method: 'post',
+    data: data,
+  });
+}
diff --git a/src/api/SpongeCulture.js b/src/api/SpongeCulture.js
new file mode 100644
index 0000000..55add52
--- /dev/null
+++ b/src/api/SpongeCulture.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 海绵文化
+export function specialNavList(query) {
+  return request({
+    url: '/publicService/trainAndPublicize/list',
+    method: 'get',
+    params: query,
+  });
+}
+
+// 海绵文化 详情
+export function specialNavDetail(id) {
+  return request({
+    url: '/publicService/trainAndPublicize/' + id,
+    method: 'get',
+  });
+}
diff --git a/src/api/publicApi.js b/src/api/publicApi.js
new file mode 100644
index 0000000..7327391
--- /dev/null
+++ b/src/api/publicApi.js
@@ -0,0 +1,20 @@
+'use strict';
+import request from '@/utils/request.js';
+// 全局公共api，不属于其他模块
+
+// 文件图片上传
+export function fileUpload(data) {
+  return request({
+    url: '/system/upload',
+    method: 'post',
+    data: data,
+    timeout: 60 * 1000,
+  });
+}
+// 文件删除
+export function fileDelete(ids) {
+  return request({
+    url: '/system/' + ids,
+    method: 'delete',
+  });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 2781d13..550e1b8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,15 +5,38 @@
   routes: [
     {
       path: '/:catchAll(.*)', //错误路由地址重定向
-      redirect: '/',
+      redirect: '/ElectronicMap',
     },
     {
-      path: '/',
-      name: 'login',
-      component: () => import('@/views/login.vue'),
-      meta: { keepAlive: false, title: '登录' },
+      path: '/ElectronicMap',
+      name: 'ElectronicMap',
+      component: () => import('@/views/ElectronicMap.vue'),
+      meta: { keepAlive: false, title: '电子地图' },
     },
-
+    {
+      path: '/questionnaire',
+      name: 'questionnaire',
+      component: () => import('@/views/questionnaire.vue'),
+      meta: { keepAlive: false, title: '问卷调查' },
+    },
+    {
+      path: '/SpongeCulture',
+      name: 'SpongeCulture',
+      component: () => import('@/views/SpongeCulture.vue'),
+      meta: { keepAlive: false, title: '海绵文化' },
+    },
+    {
+      path: '/PublicAdvice',
+      name: 'PublicAdvice',
+      component: () => import('@/views/PublicAdvice.vue'),
+      meta: { keepAlive: false, title: '公众建议' },
+    },
+    {
+      path: '/newsdetail',
+      name: 'newsdetail',
+      component: () => import('@/views/news/newsdetail.vue'),
+      meta: { keepAlive: false, title: '详情', ifShowHead: true },
+    },
   ],
 });
 
diff --git a/src/utils/main.js b/src/utils/main.js
index 19d587d..aed7f99 100644
--- a/src/utils/main.js
+++ b/src/utils/main.js
@@ -11,6 +11,12 @@
 import { createPinia } from 'pinia';
 import { showSuccessToast, showFailToast } from 'vant';
 
+// vant4样式引入
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
+import 'vant/es/notify/style';
+import 'vant/es/image-preview/style';
+
 // 持久化存储pinia
 import piniaPluginPersist from 'pinia-plugin-persist';
 const pinia = createPinia();
@@ -30,7 +36,6 @@
 appXF.config.errorHandler = (err, instance, info) => {
   // 处理错误，例如：报告给一个服务
   console.log('全局异常--', err, instance, info);
-
 };
 
 appXF.use(router).use(pinia).mount('#xfApp');
diff --git a/src/utils/request.js b/src/utils/request.js
index d8a1d71..6162c20 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -66,32 +66,31 @@
   }
 );
 
-export default service;
 // 封装 GET POST 请求并导出
-// export default function request(config) {
-//   // get请求映射params参数
-//   if (config.params) {
-//     let url = config.url + '?' + tansParams(config.params);
-//     url = url.slice(0, -1);
-//     config.url = url;
-//   }
-//   const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
-//   return new Promise((resolve, reject) => {
-//     let promise = axios({
-//       method: config.method,
-//       url: baseURL,
-//       data: config.data,
-//       header: config.header || {},
-//       dataType: 'json',
-//       timeout: config.timeout || 8000,
-//     });
-//     //处理返回
-//     promise
-//       .then((res) => {
-//         resolve(res.data);
-//       })
-//       .catch((err) => {
-//         reject(err);
-//       });
-//   });
-// }
+export default function request(config) {
+  // get请求映射params参数
+  if (config.params) {
+    let url = config.url + '?' + tansParams(config.params);
+    url = url.slice(0, -1);
+    config.url = url;
+  }
+  const baseURL = import.meta.env.MODE == 'development' ? config.url : '/prod-api' + config.url;
+  return new Promise((resolve, reject) => {
+    let promise = axios({
+      method: config.method,
+      url: baseURL,
+      data: config.data,
+      header: config.header || {},
+      dataType: 'json',
+      timeout: config.timeout || 8000,
+    });
+    //处理返回
+    promise
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
diff --git a/src/views/ElectronicMap.vue b/src/views/ElectronicMap.vue
new file mode 100644
index 0000000..b922ca8
--- /dev/null
+++ b/src/views/ElectronicMap.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>电子地图</div>
+</template>
diff --git a/src/views/PublicAdvice.vue b/src/views/PublicAdvice.vue
new file mode 100644
index 0000000..9fbbb2b
--- /dev/null
+++ b/src/views/PublicAdvice.vue
@@ -0,0 +1,324 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <van-list
+      v-model:loading="allData.loading"
+      :finished="allData.finished"
+      finished-text="已经到底了~~"
+      :offset="50"
+      @load="lowerRefresh"
+    >
+      <div class="ConstrucClass" v-for="(item, index) in tableData" :key="index">
+        <div class="MainBox">
+          <div class="AvatarAppearance">
+            <div class="zp">
+              <img :src="item.headImg" alt="" class="txclass" />
+            </div>
+            <div class="NameTime">
+              <p class="Namea">{{ item.wechatName }}</p>
+              <p class="Timea">{{ item.publishTime }}</p>
+            </div>
+          </div>
+          <div class="below">
+            <p class="belowNr">
+              {{ item.opinion }}
+            </p>
+            <div class="belowZp">
+              <img
+                v-for="(item1, index) in item.filelist"
+                :key="index"
+                :src="item1.url"
+                style="width: 100px; height: 50px; margin-top: 5px; padding-left: 5px"
+                @click="clickImg(item1)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-list>
+
+    <div class="rotundity" @click="sayClick">
+      <p>我想说</p>
+    </div>
+  </div>
+  <van-form @submit="onSubmitData">
+    <van-popup v-model:show="allData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '70%' }">
+      <div class="popup_tittle">
+        <div class="tittle">留言</div>
+      </div>
+
+      <van-cell-group>
+        <!-- <van-field
+          v-model="allData.paramsDate.text"
+          label="留言标题"
+          placeholder="请输入留言标题"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言标题' }]"
+          :key="fieldKey"
+        /> -->
+
+        <van-field
+          v-model="allData.paramsDate.opinion"
+          rows="1"
+          label="留言描述"
+          type="textarea"
+          maxlength="100"
+          placeholder="请输入留言描述"
+          show-word-limit
+          required
+          :rules="[{ required: true, message: '请输入留言描述' }]"
+          style="margin-top: 10px"
+          :key="fieldKey"
+        />
+      </van-cell-group>
+
+      <div class="mediumList">
+        <span class="Title">现场图片(最多3张)</span>
+        <div class="picBox">
+          <UploadImg
+            :maxCount="3"
+            :saveFileArr="allData.paramsDate.filelist"
+            :acceptFormat="'image/*'"
+            @update:saveFileArr="getImgList"
+          />
+        </div>
+      </div>
+
+      <div class="BottomView">
+        <van-button @click="closeDaKa" class="BotBtn">返回</van-button>
+        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
+      </div>
+    </van-popup>
+  </van-form>
+</template>
+
+<script setup>
+import { peopleOpinionPage, peopleOpinionAdd } from '@/api/PublicAdvice.js';
+import UploadImg from '@/views/components/uploadFile.vue';
+import { useRouter } from 'vue-router';
+import { showImagePreview } from 'vant';
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const fieldKey = ref(0);
+const tableData = ref([]);
+const allData = reactive({
+  newslist: [],
+  loading: false,
+  finished: false,
+  showCancel: false,
+  paramsDate: {
+    opinion: '',
+    // text: '',
+    filelist: [], //获取的图片数组
+  },
+  ListPage: {
+    page: 1,
+    size: 10,
+    total: 0, //当前接口返回数据的总条数
+  },
+});
+
+//分页pageNum+1
+const lowerRefresh = (e) => {
+  console.log(allData.ListPage.page, 'allData.ListPage.page');
+  if (allData.ListPage.total > tableData.value.length) {
+    allData.ListPage.page++;
+
+    getDataList();
+  } else {
+    allData.finished = true;
+    allData.loading = false;
+  }
+};
+
+/** 获取查询数据列表 */
+function getDataList(bol) {
+  allData.finished = false;
+  allData.loading = true;
+
+  if (bol) {
+    // 初始化分页
+    allData.ListPage.page = 1;
+    allData.ListPage.size = 10;
+  }
+
+  let params = {
+    pageNum: allData.ListPage.page,
+    pageSize: allData.ListPage.size,
+  };
+  peopleOpinionPage(params).then((response) => {
+    tableData.value = response.data;
+    allData.ListPage.total = response.total;
+    // 加载状态结束 状态更新为false
+    allData.loading = false;
+  });
+}
+
+// 点击预览大图//照片弹框
+function clickImg(url) {
+  showImagePreview([url.url]);
+}
+// 我想说点击事件
+function sayClick() {
+  allData.showCancel = true;
+}
+// 获取上传的图片
+function getImgList(e) {
+  e.forEach((item) => {
+    item.refField = 'commentPhotos';
+  });
+  allData.paramsDate.filelist = e;
+}
+// 取消按钮
+function closeDaKa() {
+  allData.showCancel = false;
+  allData.paramsDate = {};
+  fieldKey.value++;
+}
+
+// 提交上报
+const onSubmitData = async () => {
+  console.log('表单数据信息：', allData.paramsDate);
+  peopleOpinionAdd(allData.paramsDate).then((response) => {
+    allData.showCancel = false;
+    getDataList();
+  });
+};
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  background: #ffffff00;
+  .ConstrucClass {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .MainBox {
+      width: 100%;
+      .AvatarAppearance {
+        width: 100%;
+        height: 120px;
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #eaeaea;
+        .zp {
+          width: 20%;
+          height: 120px;
+          // background: red;
+          .txclass {
+            width: 80px;
+            height: 80px;
+            border-radius: 50px;
+            position: relative;
+            top: 18px;
+            left: 25px;
+          }
+        }
+        .NameTime {
+          width: 80%;
+          height: 60px;
+          .Namea {
+            width: 100%;
+            color: rgba(18, 18, 18, 1);
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 28px;
+            // background: red;
+          }
+          .Timea {
+            width: 100%;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            font-size: 22px;
+            color: #7b7b7e;
+          }
+        }
+      }
+      .below {
+        width: 100%;
+        padding-bottom: 10px;
+        // background: red;
+        .belowNr {
+          width: 95%;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #121212;
+          margin-left: 15px;
+          // background: yellow;
+        }
+        .belowZp {
+          margin-left: 15px;
+          display: inline-block;
+          // background: red;
+        }
+      }
+    }
+  }
+  .rotundity {
+    width: 120px;
+    height: 120px;
+    background: rgba(20, 91, 247, 1);
+    border-radius: 100px;
+    position: absolute;
+    bottom: 120px;
+    right: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    p {
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 24px;
+      color: #ffffff;
+    }
+  }
+}
+.popup_tittle {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  // justify-content: space-between;
+  padding: 15px;
+  height: 100px;
+  // background: red;
+  .tittle {
+    font-size: 40px;
+    font-weight: bold;
+  }
+}
+.BottomView {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+  .BotBtn {
+    width: 45%;
+  }
+}
+.mediumList {
+  width: 100%;
+  height: auto;
+
+  .Title {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    display: inline-block;
+  }
+
+  .picBox {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/views/SpongeCulture.vue b/src/views/SpongeCulture.vue
new file mode 100644
index 0000000..cec68eb
--- /dev/null
+++ b/src/views/SpongeCulture.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="SpongeCultureCLass">
+    <div class="newsList" v-for="item in tableData" @click="gotoNews(item)" :key="item.id">
+      <div class="left">
+        <van-tag type="primary">宣传</van-tag>
+        <p class="title">{{ item.address }}</p>
+        <p>{{ item.trainTime }}</p>
+      </div>
+      <div class="right">
+        <img :src="item.filelist[0].url" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="SpongeCulture">
+import { specialNavList } from '@/api/SpongeCulture.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const tableData = ref([]);
+
+const allData = reactive({
+  newslist: [],
+});
+
+// 跳转详情
+function gotoNews(item) {
+  console.log('111');
+  router.push({
+    path: '/newsdetail',
+    query: { id: item.id },
+  });
+}
+
+/** 获取查询数据列表 */
+function getDataList() {
+  specialNavList().then((response) => {
+    tableData.value = response.data;
+  });
+}
+
+onMounted(() => {
+  // getDataList();
+});
+</script>
+
+<style lang="less">
+.SpongeCultureCLass {
+  height: 100%;
+  overflow: auto;
+  //   background: red;
+  background: #ffffff00;
+
+  .newsList {
+    margin: 30px 20px 30px 20px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    .left {
+      flex: 1;
+      margin-right: 20px;
+      overflow: auto;
+      p.title {
+        height: 35px;
+        line-height: 35px;
+        overflow: hidden; //超出隐藏
+        white-space: nowrap; //不折行
+        text-overflow: ellipsis; //溢出显示省略号
+        font-size: 28px;
+        margin: 15px auto;
+      }
+    }
+    .right {
+      width: 250px;
+      img {
+        width: 250px;
+        height: 150px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/components/Header.vue b/src/views/components/Header.vue
new file mode 100644
index 0000000..2d458c3
--- /dev/null
+++ b/src/views/components/Header.vue
@@ -0,0 +1,74 @@
+<template>
+  <van-nav-bar
+    safe-area-inset-top
+    :style="[{ 'margin-top': allData.barTop }]"
+    class="headerpage"
+    :title="allData.title"
+    left-text=""
+    v-if="allData.ifShowHead"
+    :left-arrow="allData.ifBack"
+    @click-left="backTo"
+    @click-right="searchContent"
+  >
+  </van-nav-bar>
+</template>
+
+<script setup name="headerPage">
+import { useRouter } from 'vue-router';
+import bus from '@/utils/utils';
+import { checkUserSystem } from '@/utils/compatible.js';
+import MapIcon from '@/assets/images/gisMap/mapIcon.png';
+
+const allData = reactive({
+  title: '',
+  ifBack: true, //返回箭头是否显示
+  ifShowHead: false, //整个头部bar是否显示
+  ifSearch: false, //筛选icon
+  ifAdd: false, //新增icon
+  isMap: false,
+  barTop: '30Px',
+});
+// 动态获取 meta
+const router = useRouter();
+const useRouterCurrent = reactive(router);
+watch(useRouterCurrent, (newValue) => {
+  const { title, ifBack, ifShowHead, ifSearch, ifAdd, isMap } = newValue.currentRoute.meta;
+  allData.title = title;
+  allData.ifBack = ifBack == undefined ? true : ifBack; //不设置默认true显示
+  allData.ifShowHead = ifShowHead == undefined ? false : ifShowHead; //不设置默认true显示
+  allData.ifSearch = ifSearch == undefined ? false : ifSearch; //不设置默认false不显示
+  allData.ifAdd = ifAdd == undefined ? false : ifAdd; //不设置默认false不显示
+  allData.isMap = isMap == undefined ? false : isMap; //不设置默认false不显示
+});
+// 返回
+const backTo = () => {
+  router.go(-1);
+};
+// 点击筛选
+const searchContent = () => {
+  bus.emit('goSearchRight', true);
+};
+onMounted(() => {
+  // 安卓，ios顶部适配
+  let sys = checkUserSystem();
+  if (sys == 'Android') {
+    allData.barTop = '30Px';
+  } else {
+    allData.barTop = '0Px';
+  }
+});
+</script>
+<style lang="less">
+.headerpage {
+  .van-nav-bar {
+    .van-icon {
+      color: #333;
+    }
+    .van-nav-bar__title {
+      color: #333;
+      font-weight: 400;
+      font-size: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/views/components/uploadFile.vue b/src/views/components/uploadFile.vue
new file mode 100644
index 0000000..21d0b3f
--- /dev/null
+++ b/src/views/components/uploadFile.vue
@@ -0,0 +1,209 @@
+<template>
+  <!-- 公共图片上传 -->
+  <div class="uploaderPage">
+    <!-- 上传图片 -->
+    <van-uploader
+      v-model="fileList"
+      :before-read="beforeRead"
+      @delete="deletePic"
+      :max-count="maxCount"
+      :max-size="50 * 1024 * 1024"
+      @oversize="onOversize"
+      :accept="acceptFormat"
+      :disabled="isDisabled"
+    >
+    </van-uploader>
+    <div v-if="acceptFormat == 'video/*'">
+      <!-- 显示视频列表 -->
+      <div v-if="uploadList.length > 0">
+        <p v-for="item in uploadList" :key="item.name" class="van-ellipsis blueFont" @click="checkVideo(item.url)">
+          {{ item.originalName }}
+        </p>
+      </div>
+      <!-- 查看视频弹窗 -->
+      <!-- <van-popup v-model:show="showVideo" position="center" closeable class="uploadVideo" :style="{ width: '100%' }">
+          <vue3VideoPlay width="100%" title="视频" :src="videoUrl" :autoPlay="true" />
+        </van-popup> -->
+    </div>
+  </div>
+</template>
+
+<script setup name="uploaderPage">
+import { onMounted, ref, onBeforeUnmount } from 'vue';
+import { fileUpload, fileDelete } from '@/api/publicApi.js';
+import { useStore } from '@/pinia/store.js';
+import { getCurrentInstance } from 'vue';
+// import 'vue3-video-play/dist/style.css';
+// import vue3VideoPlay from 'vue3-video-play';
+
+const props = defineProps({
+  //最大上传数
+  maxCount: {
+    type: Number,
+    default: 1,
+  },
+  //保存的文件数组
+  saveFileArr: {
+    type: Array,
+    default: () => [],
+  },
+  // 文件格式
+  acceptFormat: {
+    type: String,
+    default: 'image/*', //  video/*
+  },
+  // 是否禁用文件上传
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+const pinias = useStore();
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const fileList = ref([]); //文件列表
+const uploadList = ref([]);
+const maxCount = props.maxCount; //最大上传数
+const showVideo = ref(false);
+const videoUrl = ref('');
+
+// 查看视频弹窗
+function checkVideo(url) {
+  videoUrl.value = url;
+  console.log(videoUrl.value, '  videoUrl.value');
+  showVideo.value = true;
+}
+// 开始上传图片
+const beforeRead = async (file) => {
+  // console.log(file, '原本上传的文件--');
+  // 压缩图片,大于500kb就压缩
+  let imgFile = null;
+  if (file.size / 1024 > 500 && file.type.includes('image')) {
+    imgFile = await blobToBase64(file, file.name);
+  } else {
+    imgFile = file;
+  }
+  // console.log(imgFile, '压缩后的图片文件获取');
+  pinias.showLoading();
+  let formData = new FormData();
+  let config = {
+    headers: { 'Content-Type': 'multipart/form-data' },
+  };
+  formData.append('file', imgFile);
+  let res = await fileUpload(formData, config);
+  if (res && res.code == 200) {
+    uploadList.value.push(res.data);
+    console.log(uploadList.value, '  uploadList.value');
+
+    emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+    proxy.showSuccessToast('上传成功');
+  } else {
+    fileList.value = [];
+    let param = {
+      id: imgFile.id,
+      name: imgFile.name,
+      status: 'error',
+    };
+    fileList.value.push(param);
+    proxy.showFailToast('上传失败');
+  }
+  pinias.hideLoading();
+};
+// 图片删除
+const deletePic = (file) => {
+  console.log('图片删除--', file);
+  let fileIndex = null;
+  uploadList.value.map((item, index) => {
+    if (file.file.name == (item.originalName || item.name)) {
+      fileIndex = index;
+    }
+  });
+  // id为空时做逻辑删除，不调用删除接口
+  let id = uploadList.value[fileIndex].id;
+  if (!!!id) {
+    uploadList.value.splice(fileIndex, 1);
+  } else {
+    let ids = [];
+    ids.push(id);
+    fileDelete(ids).then((res) => {
+      uploadList.value.splice(fileIndex, 1);
+      proxy.showSuccessToast('删除成功');
+    });
+  }
+  emit('update:saveFileArr', uploadList.value); //绑定的传值赋值
+};
+const blobToBase64 = async (blob, fileName) => {
+  const reader = await new FileReader(); // 实例化一个reader文件
+  await reader.readAsDataURL(blob); // 添加二进制文件
+  return new Promise((resolve, reject) => {
+    reader.onload = async (event) => {
+      const base64 = await event.target.result; // 获取到它的base64文件
+      const scale = 0.6; // 设置缩放比例 （0-1）
+      let file = await compressImg(base64, scale, fileName);
+      resolve(file);
+    };
+  });
+};
+// 压缩大小
+const compressImg = (base64, scale, fileName) => {
+  // 处理缩放，转换格式
+  // 用canvas来压缩
+  const img = new Image();
+  img.src = base64;
+  return new Promise((resolve, reject) => {
+    img.onload = async () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.setAttribute('width', img.width * scale);
+      canvas.setAttribute('height', img.height * scale);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      // 转成base64 文件
+      base64 = canvas.toDataURL('image/jpeg', 0.8); //0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值
+      const arr = base64.split(',');
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bytes = atob(arr[1]);
+      const bytesLength = bytes.length;
+      const u8arr = new Uint8Array(bytesLength);
+      for (let i = 0; i < bytes.length; i++) {
+        u8arr[i] = bytes.charCodeAt(i);
+      }
+      const file = await new File([u8arr], fileName, { type: mime });
+      resolve(file);
+    };
+  });
+};
+function onOversize() {
+  proxy.showFailToast('上传的文件最大为50M');
+}
+onMounted(() => {
+  console.log('修改时图片回显--', props.saveFileArr);
+  // 修改时图片回显
+  fileList.value = [];
+  uploadList.value = [];
+  props.saveFileArr.map((item) => {
+    let params = {
+      id: item.id,
+      name: item.name,
+      originalName: item.originalName,
+      file: { name: item.originalName },
+      status: 'success',
+      url: item.url,
+    };
+    fileList.value.push(params);
+    uploadList.value.push(params);
+    console.log(uploadList.value, '  uploadList.value1111');
+  });
+});
+onBeforeUnmount(() => {
+  fileList.value = [];
+});
+</script>
+<style lang="less">
+.uploaderPage {
+  width: 100%;
+  .blueFont {
+    color: #0c60e1;
+  }
+}
+</style>
diff --git a/src/views/news/newsdetail.vue b/src/views/news/newsdetail.vue
new file mode 100644
index 0000000..3eed15f
--- /dev/null
+++ b/src/views/news/newsdetail.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="newsdetailpage">
+    <div class="main">
+      <div class="tit">{{ detailData.address }}</div>
+      <div class="time">{{ detailData.trainTime }}</div>
+      <div class="content" v-html="detailData.content"></div>
+    </div>
+  </div>
+</template>
+
+<script setup name="newsdetail">
+import { useRoute } from 'vue-router';
+import { specialNavDetail } from '@/api/SpongeCulture.js';
+const route = useRoute();
+const detailData = ref({});
+// 获取详情数据
+async function getDetail(id) {
+  specialNavDetail(id).then((res) => {
+    if (res && res.code == 200) {
+      detailData.value = res.data;
+      console.log(detailData.value, 'detailData.value');
+    }
+  });
+}
+onMounted(() => {
+  getDetail(route.query.id);
+});
+</script>
+<style lang="less">
+.newsdetailpage {
+  width: 100%;
+  height: 92%;
+  position: relative;
+  background-color: #fff;
+  min-height: 50%;
+  overflow: auto;
+
+  .main {
+    width: 690px;
+    margin: 0 auto;
+    padding-top: 16px;
+
+    .tit {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 36px;
+      color: #121212;
+      line-height: 1.5;
+      padding: 16px auto;
+      text-align: center;
+    }
+
+    .time {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #7b7b7e;
+      line-height: 3;
+    }
+
+    .content {
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #121212;
+      line-height: 1.8;
+      margin: 30px auto;
+    }
+  }
+}
+</style>
diff --git a/src/views/questionnaire.vue b/src/views/questionnaire.vue
new file mode 100644
index 0000000..fdcf969
--- /dev/null
+++ b/src/views/questionnaire.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>问卷调查</div>
+</template>
diff --git a/vite.config.js b/vite.config.js
index 63f4dd7..d6c98fd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,6 +9,10 @@
 
 const Timestamp = new Date().getTime(); //随机时间戳
 
+// const targetUrl = 'http://192.168.1.6:7300'; //杨辉
+const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上
+// http://kaifeng.wh-nf.cn/prod-api
+
 export default defineConfig({
   // 地址是和router中和ngix中配置的名称一致
   base: '/',
@@ -55,13 +59,48 @@
     host: '0.0.0.0',
     port: 3011,
     proxy: {
-      // 使用 proxy 实例
+      '/auth': {
+        target: targetUrl,
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/auth/, '/auth'),
+      },
+      '/system': {
+        target: targetUrl,
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/system/, '/system'),
+      },
+      '/code': {
+        target: targetUrl,
+        changeOrigin: true,
+        rewrite: (p) => p.replace(/^\/code/, '/code'),
+      },
+      '/requestApi': {
+        target: targetUrl,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/requestApi/, '/requestApi'),
+      },
       '/business': {
-        // target: 'http://192.168.20.49:7200', //杨辉
-        target: 'http://kaifeng.wh-nf.cn/prod-api', //线上
+        target: targetUrl,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/business/, '/business'),
       },
+      '/publicService': {
+        target: targetUrl,
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/publicService/, '/publicService'),
+      },
+      // '/sysLogin': {
+      //   // target: 'http://192.168.20.52:8865', // 杨辉
+      //   target: 'https://server1.wh-nf.cn:8132/prod-api', //测试环境
+      //   changeOrigin: true,
+      //   rewrite: (p) => p.replace(/^\/sysLogin/, '/'),
+      // },
+      // '/XKProxy': {
+      //   // target: 'http://192.168.20.52:8864', //杨辉
+      //   target: 'https://server1.wh-nf.cn:8132/prod-api', //测试环境
+      //   changeOrigin: true,
+      //   rewrite: (p) => p.replace(/^\/XKProxy/, '/'),
+      // },
     },
   },
   // 别名配置