引入vant4，调整框架

package.json

@@ -13,6 +13,7 @@
     "@ionic/vue-router": "^8.5.3",
     "axios": "^1.8.4",
     "core-js": "^3.8.3",
+    "vant": "^4.9.19",
     "vue": "^3.2.13",
     "vue-loader": "^17.4.2",
     "vue-router": "^4.5.0",

src/assets/styles/index.scss

@@ -7,6 +7,8 @@ html {
 
 body {
   height: 100%;
+  margin: 0;
+  padding: 0;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;

src/layout/components/BottomNav.vue

@@ -2,7 +2,7 @@
     <div class="bottom-nav">
         <a v-for="item in menuList" :key="item.path" :class="{ 'active': activeIndex === item.path }"
             @click.prevent="setActiveIndex(item.path)">
-            <ion-icon :icon="item.icon"></ion-icon>
+            <van-icon style="margin-bottom: 5px;" :name="item.icon" :color="activeIndex === item.path ? '#007BFF' : '#fff'" size="1.3rem" />
             {{ item.name }}
         </a>
     </div>
@@ -11,18 +11,18 @@
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { homeOutline, navigateCircleOutline, shieldCheckmarkOutline, helpCircleOutline, personCircleOutline } from 'ionicons/icons';
+// import { homeOutline, navigateCircleOutline, shieldCheckmarkOutline, helpCircleOutline, personCircleOutline } from 'ionicons/icons';
 
 const menuList = [
-    { name: '首页', icon: homeOutline, path: '/index' },
-    { name: '一张图', icon: navigateCircleOutline, path: '/onepic' },
-    { name: '督查', icon: shieldCheckmarkOutline, path: '/inspect' },
-    { name: '问题', icon: helpCircleOutline, path: '/inspect' },
-    { name: '我的', icon: personCircleOutline, path: '/inspect' },
+    { name: '首页', icon: 'wap-home-o', path: '/home' },
+    { name: '一张图', icon: 'location-o', path: '/map' },
+    { name: '督查', icon: 'completed-o', path: '/inspect' },
+    { name: '问题', icon: 'orders-o', path: '/question' },
+    { name: '我的', icon: 'user-o', path: '/about' },
 ]
 
 // 定义当前激活的导航索引
-const activeIndex = ref('/index');
+const activeIndex = ref('/home');
 const router = useRouter();
 
 // 定义设置激活索引的方法
@@ -47,24 +47,15 @@ const setActiveIndex = (path) => {
 .bottom-nav a {
     color: white;
     text-decoration: none;
-    padding: 10px;
+    padding: 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    font-size: .8rem;
+    font-size: .7rem;
+    border-radius: 10px;
 }
 
 .bottom-nav a.active {
     color: #007BFF;
 }
-</style>
-<style>
-.bottom-nav ion-icon {
-    font-size: 1.5rem;
-    color: #fff;
-}
-
-.bottom-nav .active ion-icon {
-    color: #007BFF;
-}
 </style>

src/layout/index.vue

@@ -26,8 +26,9 @@ const theme = ref(localStorage.getItem('theme'))
     top: 41px;
     left: 0;
     width: 100%;
-    height: calc(100% - 102px);
+    height: calc(100% - 100px);
     overflow: auto;
+    background-color: #ebecf0;
   }
 
 }

src/main.js

@@ -1,28 +1,14 @@
-/* Core CSS required for Ionic components to work properly */
-import '@ionic/vue/css/core.css';
-
-/* Basic CSS for apps built with Ionic */
-import '@ionic/vue/css/normalize.css';
-import '@ionic/vue/css/structure.css';
-import '@ionic/vue/css/typography.css';
-
-/* Optional CSS utils that can be commented out */
-import '@ionic/vue/css/padding.css';
-import '@ionic/vue/css/float-elements.css';
-import '@ionic/vue/css/text-alignment.css';
-import '@ionic/vue/css/text-transformation.css';
-import '@ionic/vue/css/flex-utils.css';
-import '@ionic/vue/css/display.css';
+import { createApp } from 'vue';
+import Vant from 'vant';
+import App from './App.vue';
+import router from './router';
 
+import 'vant/lib/index.css';
 import '@/assets/styles/index.scss';
 
-import {createApp} from 'vue';
-import App from './App.vue';
-import router from './router';
-import {IonicVue} from '@ionic/vue';
+const app = createApp(App).use(Vant).use(router);
 
-const app = createApp(App).use(IonicVue).use(router);
+// Lazyload 指令需要单独进行注册
+app.use(Vant.Lazyload);
 
-router.isReady().then(() => {
-    app.mount('#app');
-});
+app.mount('#app');

src/router/index.js

@@ -1,22 +1,38 @@
-import {createRouter, createWebHistory} from '@ionic/vue-router';
+// import {createRouter, createWebHistory} from '@ionic/vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import layout from '@/layout/index.vue'
 
 const routes = [
     {
         path: '/',
-        redirect: '/index',
+        redirect: '/home',
         component: layout,
         children: [
             {
-                path: 'index',
+                path: 'home',
                 name: 'home',
                 component: () => import('@/views/HomeView.vue'),
             },
+            {
+                path: 'map',
+                name: 'map',
+                component: () => import('@/views/Map/index.vue'),
+            },
+            {
+                path: 'inspect',
+                name: 'inspect',
+                component: () => import('@/views/Inspect/index.vue'),
+            },
+            {
+                path: 'question',
+                name: 'question',
+                component: () => import('@/views/Question/index.vue'),
+            },
             {
                 path: 'about',
                 name: 'about',
                 component: () => import('@/views/AboutView.vue'),
-                meta: {title: '我的'}
+                meta: { title: '我的' }
             },
         ],
     },

src/utils/request.js

@@ -19,7 +19,7 @@ service.interceptors.request.use(
             !config.url.startsWith("/gx_api") &&
             !validURL(config.url)
         ) {
-            config.url = process.env.BASE_API + config.url;
+            config.url = process.env.VUE_APP_BASE_API + config.url;
         }
         // 是否需要设置 token
         const isToken = (config.headers || {}).isToken === false;

src/views/Inspect/current.vue

@@ -0,0 +1,12 @@
+<template>
+
+</template>
+<script setup>
+
+import { onMounted } from "vue";
+import { getRStLLMaxDate } from "@/api/home";
+
+onMounted(() => {
+})
+</script>
+<style lang="scss" scoped></style>

src/views/Inspect/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <!-- <ion-segment>
+    <ion-segment-button value="first" content-id="first">
+      <ion-label>当前</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="second" content-id="second">
+      <ion-label>历史</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+  <ion-segment-view class="inspect-segment">
+    <ion-segment-content id="first">
+      <current-component></current-component>
+    </ion-segment-content>
+    <ion-segment-content id="second">
+      lishi
+    </ion-segment-content>
+  </ion-segment-view> -->
+  <div class="filter-wrapper">
+      <ion-select class="filter-item" aria-label="类型" value="当前">
+        <ion-select-option value="当前">当前</ion-select-option>
+        <ion-select-option value="历史">历史</ion-select-option>
+      </ion-select>
+      <ion-select class="filter-item" aria-label="督察类型" value="稽查工作">
+        <ion-select-option value="稽查工作">稽查工作</ion-select-option>
+      </ion-select>
+  </div>
+</template>
+<script setup>
+import { onMounted } from "vue";
+import CurrentComponent from "./current.vue";
+import { getRStLLMaxDate } from "@/api/home";
+
+onMounted(() => {
+  getRStLLMaxDate().then(res => {
+    console.log(res)
+  })
+})
+</script>
+<style lang="scss" scoped>
+.filter-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 10px;
+  margin: 5px;
+
+  .filter-item {
+    width: auto;
+    padding: 0 10px;
+  }
+
+}
+
+ion-segment-view.inspect-segment {
+  height: calc(100% - 48px);
+}
+</style>

src/views/Supervision/index.vue → src/views/Map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    aaa
+    Map
   </div>
 </template>
 <script setup>

src/views/Question/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    question
+  </div>
+</template>
+<script setup>
+
+import {onMounted} from "vue";
+import {getRStLLMaxDate} from "@/api/home";
+
+onMounted(() => {
+  getRStLLMaxDate().then(res => {
+    console.log(res)
+  })
+})
+</script>
+<style scoped>
+.container {
+  padding: 20px;
+  overflow-y: auto;
+}
+
+.card {
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.btn {
+  display: inline-block;
+  background-color: #007BFF;
+  color: white;
+  padding: 10px 20px;
+  text-decoration: none;
+  border-radius: 5px;
+}
+</style>

vue.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
+const { VantResolver } = require('@vant/auto-import-resolver');
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口