优化组件树

src/App.vue

@@ -1,9 +1,118 @@
 <template>
-  <router-view />
+  <div id="app">
+    <transition name="fade-out">
+      <HomeFadeIn
+        v-if="isShowFadeInMask"
+        class="fade-in-mask"
+      />
+    </transition>
+    <router-view />
+
+    <nav
+      :style="{
+        bottom: isShowNavBar ? '0' : '-112px',
+      }"
+    >
+      <button
+        class="tab-item"
+        :class="{
+          active: activeNavItemIdx === 0
+        }"
+        @click="activeNavItemIdx = 0"
+      >
+        概述总览
+        <img
+          class="decorator"
+          src="@/assets/images/nav-item-active-decorator.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        class="tab-item"
+        :class="{
+          active: activeNavItemIdx === 1
+        }"
+        @click="activeNavItemIdx = 1"
+      >
+        历史回顾
+        <img
+          class="decorator"
+          src="@/assets/images/nav-item-active-decorator.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        class="tab-item"
+        :class="{
+          active: activeNavItemIdx === 2
+        }"
+        @click="activeNavItemIdx = 2"
+      >
+        国之重器
+        <img
+          class="decorator"
+          src="@/assets/images/nav-item-active-decorator.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button
+        class="tab-item"
+        :class="{
+          active: activeNavItemIdx === 3
+        }"
+        @click="activeNavItemIdx = 3"
+      >
+        工业元宇宙
+        <img
+          class="decorator"
+          src="@/assets/images/nav-item-active-decorator.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </nav>
+    <button
+      class="show-hide"
+      :style="{
+        backgroundImage: isShowNavBar ? `url(${require(`@/assets/images/arrow-down.png`)})` : `url(${require(`@/assets/images/arrow-up.png`)})`,
+      }"
+      @click="isShowNavBar = !isShowNavBar"
+    />
+  </div>
 </template>
 
 <script>
+import HomeFadeIn from "@/components/HomeFadeIn.vue"
+import {
+  computed,
+  onMounted,
+  reactive,
+  ref,
+} from 'vue'
+
 export default {
+  components: {
+    HomeFadeIn,
+  },
+  setup () {
+    const isShowFadeInMask = ref(false)
+    onMounted(() => {
+      setTimeout(() => {
+        isShowFadeInMask.value = false
+      }, 2000)
+    })
+
+    const isShowNavBar = ref(true)
+    const activeNavItemIdx = ref(0)
+    return {
+      isShowFadeInMask,
+      isShowNavBar,
+      activeNavItemIdx,
+    }
+  },
   mounted() {
     this.$mitt.on('test', e => {
       console.log('test', e)
@@ -21,7 +130,14 @@ html, body {
 
 #app {
   height: 100%;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/main-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
 }
+
 // * {
 //   user-select: none;
 //   -webkit-touch-callout: none;
@@ -82,4 +198,70 @@ html, body {
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
+</style>
+<style scoped lang="less">
+#app {
+  >.fade-in-mask {
+    z-index: 5;
+  }
+  >nav {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 112px;
+    border-radius: 5px 5px 0 0;
+    border-top: solid 1px #D2BD84;
+    box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.5s;
+    >button.tab-item {
+      font-size: 30px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      margin-left: 200px;
+      opacity: 0.5;
+      position: relative;
+      >img.decorator {
+        display: none;
+      }
+      &:first-of-type {
+        margin-left: initial;
+      }
+      &.active {
+        opacity: initial;
+        >img.decorator {
+          display: initial;
+          position: absolute;
+          left: 50%;
+          bottom: -15px;
+          transform: translateX(-50%);
+          width: 150%;
+        }
+      }
+    }
+    @media only screen and (max-width: 1400px) {
+      >button.tab-item {
+        margin-left: 100px;
+      }
+    }
+  }
+  >button.show-hide {
+    position: absolute;
+    right: 82px;
+    bottom: 34px;
+    width: 36px;
+    height: 36px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  @media only screen and (max-width: 1400px) {
+    >button.show-hide {
+      right: 10px;
+    }
+  }
+}
 </style>

src/router/index.js

@@ -1,12 +1,13 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import HomeView from '../views/Home.vue'
+import GeneralView from '../views/General.vue'
 // import store from '@/store/index.js'
 
 const routes = [
+  { path: '/', redirect: '/general' },
   {
-    path: '/',
-    name: 'home-view',
-    component: HomeView,
+    path: '/general',
+    name: 'GeneralView',
+    component: GeneralView,
   },
 ]
 
@@ -15,11 +16,11 @@ const router = createRouter({
   routes
 })
 
-router.beforeEach((to, from) => {
-  // 生产环境下强制每次都从首页进入
-  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'home-view') {
-    return '/'
-  }
-})
+// router.beforeEach((to, from) => {
+//   // 生产环境下强制每次都从首页进入
+//   if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'home-view') {
+//     return '/'
+//   }
+// })
 
 export default router

src/views/Home.vue

@@ -2,12 +2,6 @@
   <div
     class="home"
   >
-    <transition name="fade-out">
-      <HomeFadeIn
-        v-if="isShowFadeInMask"
-        class="fade-in-mask"
-      />
-    </transition>
     <h1 :title="'离开的监管机构'">
       离开的监管机构
     </h1>
@@ -69,84 +63,10 @@
         </div>
       </li>
     </ul>
-    <nav
-      :style="{
-        bottom: isShowNavBar ? '0' : '-112px',
-      }"
-    >
-      <button
-        class="tab-item"
-        :class="{
-          active: activeNavItemIdx === 0
-        }"
-        @click="activeNavItemIdx = 0"
-      >
-        概述总览
-        <img
-          class="decorator"
-          src="@/assets/images/nav-item-active-decorator.png"
-          alt=""
-          draggable="false"
-        >
-      </button>
-      <button
-        class="tab-item"
-        :class="{
-          active: activeNavItemIdx === 1
-        }"
-        @click="activeNavItemIdx = 1"
-      >
-        历史回顾
-        <img
-          class="decorator"
-          src="@/assets/images/nav-item-active-decorator.png"
-          alt=""
-          draggable="false"
-        >
-      </button>
-      <button
-        class="tab-item"
-        :class="{
-          active: activeNavItemIdx === 2
-        }"
-        @click="activeNavItemIdx = 2"
-      >
-        国之重器
-        <img
-          class="decorator"
-          src="@/assets/images/nav-item-active-decorator.png"
-          alt=""
-          draggable="false"
-        >
-      </button>
-      <button
-        class="tab-item"
-        :class="{
-          active: activeNavItemIdx === 3
-        }"
-        @click="activeNavItemIdx = 3"
-      >
-        工业元宇宙
-        <img
-          class="decorator"
-          src="@/assets/images/nav-item-active-decorator.png"
-          alt=""
-          draggable="false"
-        >
-      </button>
-    </nav>
-    <button
-      class="show-hide"
-      :style="{
-        backgroundImage: isShowNavBar ? `url(${require(`@/assets/images/arrow-down.png`)})` : `url(${require(`@/assets/images/arrow-up.png`)})`,
-      }"
-      @click="isShowNavBar = !isShowNavBar"
-    />
   </div>
 </template>
 
 <script>
-import HomeFadeIn from "@/views/HomeFadeIn.vue"
 import {
   computed,
   onMounted,
@@ -158,19 +78,9 @@ import deepClone from 'lodash/cloneDeep'
 export default {
   name: 'HomeView',
   components: {
-    HomeFadeIn,
   },
 
   setup () {
-    const isShowFadeInMask = ref(false)
-    onMounted(() => {
-      setTimeout(() => {
-        isShowFadeInMask.value = false
-      }, 2000)
-    })
-
-    const isShowNavBar = ref(true)
-    const activeNavItemIdx = ref(0)
 
     const filterKeyword = ref('')
 
@@ -259,9 +169,6 @@ export default {
     const activeCorpId = ref(null)
 
     return {
-      isShowFadeInMask,
-      isShowNavBar,
-      activeNavItemIdx,
       filterKeyword,
       corpListMap,
       activeCorpId,
@@ -292,15 +199,6 @@ export default {
 
 <style lang="less" scoped>
 .home {
-  width: 100%;
-  height: 100%;
-  background-image: url(@/assets/images/main-bg.jpg);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center center;
-  >.fade-in-mask {
-    z-index: 5;
-  }
   >h1 {
     position: absolute;
     top: 51px;
@@ -502,64 +400,5 @@ export default {
       }
     }
   }
-  >nav {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    height: 112px;
-    border-radius: 5px 5px 0 0;
-    border-top: solid 1px #D2BD84;
-    box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.5s;
-    >button.tab-item {
-      font-size: 30px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #FFFFFF;
-      margin-left: 200px;
-      opacity: 0.5;
-      position: relative;
-      >img.decorator {
-        display: none;
-      }
-      &:first-of-type {
-        margin-left: initial;
-      }
-      &.active {
-        opacity: initial;
-        >img.decorator {
-          display: initial;
-          position: absolute;
-          left: 50%;
-          bottom: -15px;
-          transform: translateX(-50%);
-          width: 150%;
-        }
-      }
-    }
-    @media only screen and (max-width: 1400px) {
-      >button.tab-item {
-        margin-left: 100px;
-      }
-    }
-  }
-  >button.show-hide {
-    position: absolute;
-    right: 82px;
-    bottom: 34px;
-    width: 36px;
-    height: 36px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-  }
-  @media only screen and (max-width: 1400px) {
-    >button.show-hide {
-      right: 10px;
-    }
-  }
 }
 </style>