框架更新

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.8.4",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
+    "vue-loader": "^17.4.2",
     "vue-router": "^4.5.0",
     "vue3-cookies": "^1.0.6"
   },

src/App.vue

@@ -1,26 +1,3 @@
 <template>
-  <div>
-      <!-- 引入头部组件 -->
-      <HeaderComponent />
-      <!-- 路由出口 -->
-      <router-view></router-view>
-      <!-- 引入底部导航组件 -->
-      <BottomNavComponent />
-  </div>
-</template>
-
-<script setup>
-import HeaderComponent from './components/HeaderComponent.vue';
-import BottomNavComponent from './components/BottomNavComponent.vue';
-</script>
-
-<style scoped>
-body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 60px; 
-  position: relative;
-  min-height: 100vh;
-}
-</style>
+  <router-view></router-view>
+</template>

src/assets/styles/index.scss

@@ -1,30 +1,24 @@
 @import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
-@import './app.scss';
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
 
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Arial, sans-serif;
 }
 
-label {
-  font-weight: 700;
-}
-
-html {
+#app {
   height: 100%;
-  box-sizing: border-box;
 }
 
-#app {
-  height: 100%;
+label {
+  font-weight: 700;
 }
 
 *,
@@ -343,8 +337,8 @@ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
 }
 
 ::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 0.2rem;
+  height: 0.2rem;
 }
 
 ::-webkit-scrollbar-track {
@@ -361,73 +355,6 @@ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
   background: #606266;
 }
 
-.gw-dialog {
-
-  .el-dialog__body {
-    padding: 10px;
-  }
-
-  .el-dialog__footer {
-    padding: 10px;
-  }
-}
-
-.gw-descriptions-table {
-  border-collapse: collapse;
-  width: 100%;
-  font-size: 1rem;
-  color: #606266;
-  border-radius: 10px;
-
-  tr:first-child th:first-child {
-    border-top-left-radius: 10px;
-  }
-
-  tr:first-child td:last-child {
-    border-top-right-radius: 10px;
-  }
-
-  tr:last-child th:first-child {
-    border-bottom-left-radius: 10px;
-  }
-
-  tr:last-child td:last-child {
-    border-bottom-right-radius: 10px;
-  }
-
-  th, td {
-    padding: 10px;
-    border: 1px solid #e6ebf5;
-    box-sizing: border-box;
-    text-align: left;
-    font-weight: normal;
-    line-height: 1.5;
-  }
-
-  th {
-    color: #909399;
-    background: #fafafa;
-  }
-
-  td {
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
-
-  .gw-col-center {
-    text-align: center;
-  }
-
-  .gw-clth {
-    cursor: pointer;
-    text-decoration: underline;
-
-    &:hover {
-      color: #0d0d13;
-    }
-  }
-}
-
 ul li {
   margin: 0;
   padding: 0;

src/layout/components/BottomNav.vue

@@ -1,24 +1,9 @@
 <template>
     <div class="bottom-nav">
-        <a :class="{ active: activeIndex === 0 }" @click.prevent="setActiveIndex(0)">
-            <i class="fa-solid fa-house"></i>
-            首页
-        </a>
-        <a :class="{ active: activeIndex === 1 }" @click.prevent="setActiveIndex(1)">
-            <i class="fa-solid fa-image"></i>
-            一张图
-        </a>
-        <a :class="{ active: activeIndex === 2 }" @click.prevent="setActiveIndex(2)">
-            <i class="fa-solid fa-binoculars"></i>
-            督查
-        </a>
-        <a :class="{ active: activeIndex === 3 }" @click.prevent="setActiveIndex(3)">
-            <i class="fa-solid fa-question"></i>
-            问题
-        </a>
-        <a :class="{ active: activeIndex === 4 }" @click.prevent="goToAboutPage">
-            <i class="fa-solid fa-user"></i>
-            我的
+        <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>
+            {{ item.name }}
         </a>
     </div>
 </template>
@@ -26,36 +11,34 @@
 <script setup>
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+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' },
+]
 
 // 定义当前激活的导航索引
-const activeIndex = ref(0);
+const activeIndex = ref('/index');
 const router = useRouter();
 
 // 定义设置激活索引的方法
-const setActiveIndex = (index) => {
-    activeIndex.value = index;
-    // 这里可以添加切换页面内容的逻辑
-    // 例如根据点击的链接加载不同的内容
-    if (index === 0) {
-        router.push('/');
-    }
-};
-
-// 定义跳转到关于页面的方法
-const goToAboutPage = () => {
-    activeIndex.value = 4;
-    router.push('/about');
+const setActiveIndex = (path) => {
+    activeIndex.value = path;
+    router.push(path);
 };
 </script>
-
-<style scoped>
+<style lang="scss" scoped>
 .bottom-nav {
     display: flex;
     justify-content: space-around;
     background-color: #333;
     color: white;
-    padding: 10px 0;
-    position: fixed; 
+    // padding: 10px 0;
+    position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
@@ -68,14 +51,20 @@ const goToAboutPage = () => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    font-size: .8rem;
 }
 
-.bottom-nav a i {
-    font-size: 24px;
-    margin-bottom: 5px;
+.bottom-nav a.active {
+    color: #007BFF;
+}
+</style>
+<style>
+.bottom-nav ion-icon {
+    font-size: 1.5rem;
+    color: #fff;
 }
 
-.bottom-nav a.active {
+.bottom-nav .active ion-icon {
     color: #007BFF;
 }
 </style>

src/layout/components/Navbar.vue

@@ -1,10 +1,12 @@
 <template>
   <header>
-    <h1>福建水利监管工作平台</h1>
+    <span>{{ route.meta.title || '福建水利监管工作平台' }}</span>
   </header>
 </template>
 <script setup>
-import {onMounted, onUnmounted} from 'vue'
+import { onMounted, onUnmounted } from 'vue'
+import { useRoute } from "vue-router";
+const route = useRoute()
 
 
 onMounted(() => {
@@ -19,6 +21,7 @@ header {
   background-color: #007BFF;
   color: white;
   text-align: center;
-  padding: 20px;
+  padding: 8px 0;
+  font-size: 1.2rem;
 }
 </style>

src/layout/components/index.js

@@ -1,2 +1,3 @@
 export {default as AppMain} from './AppMain.vue'
 export {default as Navbar} from './Navbar.vue'
+export {default as BottomNav} from './BottomNav.vue'

src/layout/index.vue

@@ -1,42 +1,33 @@
 <template>
   <div :style="{ '--current-color': theme }" class="app-wrapper">
-    <div class="main-container">
-      <!-- 顶部 -->
-      <navbar/>
-      <!-- 展示页 -->
-      <app-main/>
-    </div>
+    <!-- 顶部 -->
+    <navbar />
+    <!-- 展示页 -->
+    <app-main />
+    <!-- 底部 -->
+    <bottom-nav />
   </div>
 </template>
 <script setup>
-import {AppMain, Navbar} from '@/layout/components/index.js'
+import { ref } from 'vue';
+import { AppMain, Navbar, BottomNav } from '@/layout/components/index.js'
+
+const theme = ref(localStorage.getItem('theme'))
+
 </script>
 <style lang="scss" scoped>
 .app-wrapper {
   height: 100%;
   width: 100%;
-  pointer-events: none;
-
-  .main-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .app-main {
-      position: absolute;
-      top: 8vh;
-      left: 0;
-      width: 100%;
-      height: 92vh;
-    }
-  }
+  position: relative;
 
-  .floor-container {
-    position: fixed;
-    top: 0;
+  .app-main {
+    position: absolute;
+    top: 41px;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 102px);
+    overflow: auto;
   }
 
 }

src/main.js

@@ -14,6 +14,8 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+import '@/assets/styles/index.scss';
+
 import {createApp} from 'vue';
 import App from './App.vue';
 import router from './router';

src/router/index.js

@@ -16,6 +16,7 @@ const routes = [
                 path: 'about',
                 name: 'about',
                 component: () => import('@/views/AboutView.vue'),
+                meta: {title: '我的'}
             },
         ],
     },

vue.config.js

@@ -1,4 +1,4 @@
-const {defineConfig} = require('@vue/cli-service')
+const { defineConfig } = require('@vue/cli-service')
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
@@ -19,6 +19,9 @@ module.exports = defineConfig({
     devServer: {
         host: "0.0.0.0",
         port: port,
+        client: {
+            overlay: false,
+        },
         proxy: {
             '/pdcApi': {
                 target: 'https://27.156.118.74:19901', // 你的后端服务器地址
@@ -33,7 +36,7 @@ module.exports = defineConfig({
         loaderOptions: {
             sass: {
                 // additionalData: `@import "@/assets/styles/index.scss";`, // 不同版本的 sass，此属性不同：data、prependData、additionalData
-                sassOptions: {outputStyle: 'expanded'} // fix: 解决 element-ui 图标 icon 偶现乱码问题
+                sassOptions: { outputStyle: 'expanded' } // fix: 解决 element-ui 图标 icon 偶现乱码问题
             }
         }
     },