细节优化

src/App.vue

@@ -1,18 +1,20 @@
 <template>
-  <NavBar
-    v-if="showNavBar"
-    :show-nav-icons="!/^\/password/.test($route.path)"
-    :fixed="true"
-  />
-  <div class="main-container" :class="{ 'white-down-md': state.bgWhite }">
-    <router-view
-      :class="[
-        'main-wrapper',
-        { 'main-wrapper-fluid': $route.path === '/invite' },
-      ]"
+  <div v-if="state.ready && $route.name !== 'NotFound'">
+    <NavBar
+      v-if="showNavBar"
+      :show-nav-icons="!/^\/password/.test($route.path)"
+      :fixed="true"
     />
+    <div class="main-container" :class="{ 'white-down-md': state.bgWhite }">
+      <router-view
+        :class="[
+          'main-wrapper',
+          { 'main-wrapper-fluid': $route.path === '/invite' },
+        ]"
+      />
+    </div>
+    <PageFooter v-if="$route.path !== '/'" />
   </div>
-  <PageFooter v-if="$route.path !== '/'" />
 </template>
 
 <script setup lang="ts">

src/components/nav-bar/index.vue

@@ -254,7 +254,7 @@ async function signOut() {
     confirmText: 'YES',
   })
   await logout()
-  router.push('/')
+  location.href = '/care/'
 }
 </script>
 

src/pages/404/index.ts

@@ -0,0 +1,8 @@
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  beforeRouteEnter() {
+    location.replace('/care/')
+  },
+  render: () => h('div'),
+})

src/pages/dashboard/index.vue

@@ -113,7 +113,7 @@ async function signOut() {
     confirmText: 'YES',
   })
   await logout()
-  router.push('/')
+  location.href = '/care/'
 }
 </script>
 

src/pages/invite/index.vue

@@ -161,6 +161,18 @@ export default defineComponent({
     @include media-breakpoint-up(md) {
       padding: 40px 0 64px;
     }
+    @include media-breakpoint-up(xl) {
+      display: block;
+      text-align: center;
+      .award,
+      .desc {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .methods {
+        margin: 36px auto 0;
+      }
+    }
   }
   .p-bottom {
     margin: auto;

src/router.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { state } from './store'
 import NProgress from 'nprogress'
 import Dashboard from './pages/dashboard/index.vue'
+import NotFound from './pages/404'
 
 NProgress.configure({ showSpinner: false })
 
@@ -94,6 +95,11 @@ const router = createRouter({
       component: Dashboard,
       meta: { auth: true },
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: NotFound,
+    },
   ],
 })
 
@@ -109,7 +115,10 @@ router.beforeEach(to => {
   }
   NProgress.start()
 })
-router.afterEach(() => NProgress.done())
+router.afterEach(() => {
+  state.ready = true
+  NProgress.done()
+})
 router.onError(() => {
   NProgress.status = null
   NProgress.remove()

src/store.ts

@@ -3,6 +3,7 @@ import * as api from '@/service/user'
 import { getOrderInfo, getDiscountInfo } from '@/service/order'
 
 export const state = reactive({
+  ready: false,
   bgWhite: false,
   userInfo: null as ApiUser.Info.Response | null,
   // 拉新优惠券信息