PageFooter

src/App.vue

@@ -17,8 +17,9 @@
       ]"
     />
   </div>
+  <PageFooter v-if="$route.path !== '/'" />
 
-  <ul v-if="$route.path === '/'" class="contents">
+  <ul v-else class="contents">
     <li><router-link to="/login">登录</router-link></li>
     <li><router-link to="/account">账号信息</router-link></li>
     <li><router-link to="/password/reset">密码找回</router-link></li>
@@ -41,6 +42,8 @@
 import { computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { state } from './store'
+import NavBar from './components/nav-bar/index.vue'
+import PageFooter from './components/footer/index.vue'
 
 const route = useRoute()
 const navBarIgnore = ['/login', '/register']

src/components/footer/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="page-footer">
+    <div class="f1">
+      <div class="item">
+        <p class="item-name">Shop</p>
+        <ul class="item-links">
+          <li class="item-link"><a href="#">Phone Accessories</a></li>
+          <li class="item-link"><a href="#">Screen Protectors</a></li>
+          <li class="item-link"><a href="#">Tablet Accessories</a></li>
+          <li class="item-link"><a href="#">Car Accessories</a></li>
+          <li class="item-link"><a href="#">Cables and Chargers</a></li>
+        </ul>
+      </div>
+      <div class="item">
+        <p class="item-name">Company</p>
+        <ul class="item-links">
+          <li class="item-link"><a href="#">About Us</a></li>
+          <li class="item-link"><a href="#">Terms and Conditions</a></li>
+          <li class="item-link"><a href="#">Careers</a></li>
+          <li class="item-link"><a href="#">Franchise</a></li>
+          <li class="item-link"><a href="#">Blog</a></li>
+          <li class="item-link"><a href="#">Catalogues</a></li>
+          <li class="item-link"><a href="#">Privacy Policy</a></li>
+          <li class="item-link"><a href="#">Current Competitions</a></li>
+        </ul>
+      </div>
+      <div class="item">
+        <p class="item-name">PTC Care Plus</p>
+        <ul class="item-links">
+          <li class="item-link"><a href="#">Feature</a></li>
+          <li class="item-link"><a href="#">Why PTC Care plus</a></li>
+          <li class="item-link"><a href="#">Subcriber Agreement</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="f2">
+      <i class="ico"></i>
+      <div>
+        <p class="txt">Approved by</p>
+        <p class="txt">NDIS marketing</p>
+        <p class="txt">Registered NDIS Provider</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.page-footer {
+  display: none;
+  @include media-breakpoint-up(md) {
+    display: block;
+    padding: 80px;
+    background: $primary-color;
+    color: #fff;
+
+    .f1 {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 80px;
+      border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+    }
+    .item {
+      width: 478px;
+      &-name {
+        margin-bottom: 48px;
+        line-height: 58px;
+        font-size: 48px;
+        font-weight: 600;
+      }
+      &-link {
+        font-size: 32px;
+        line-height: 58px;
+      }
+    }
+
+    .f2 {
+      margin-top: 80px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .ico {
+      margin-left: 170px;
+      margin-right: 28px;
+      width: 248px;
+      height: 248px;
+      background: #eee;
+    }
+    .txt {
+      font-size: 32px;
+      line-height: 58px;
+    }
+  }
+}
+</style>

src/components/nav-bar/index.vue

@@ -49,7 +49,7 @@
       <div
         v-show="showMine"
         class="nav-menu nav-dropdown"
-        :class="{ 'is-member': 1 }"
+        :class="{ 'is-member': !1 }"
       >
         <div class="nav-menu-header">
           <i class="logo"></i>
@@ -61,7 +61,7 @@
               <p class="name">Hi, Rebecca</p>
               <p class="intro">Ordinary member</p>
             </div>
-            <div v-if="0" class="p2">
+            <div v-if="1" class="p2">
               <p class="txt">You have not purchased a member</p>
               <button class="btn">BUY</button>
             </div>
@@ -411,7 +411,11 @@ watch(
     padding: 48px 0 0 50px;
     height: 202px;
     color: $primary-color;
-    background: #e9ebf0;
+    background-color: #e9ebf0;
+    background-repeat: no-repeat;
+    background-size: 190px 190px;
+    background-position: 446px 46px;
+    background-image: url(@img/user-lg.png);
     border-radius: 8px 8px 0px 0px;
 
     .name {
@@ -436,6 +440,8 @@ watch(
     }
 
     .btn {
+      display: block;
+      margin-top: 24px;
       width: 144px;
       height: 60px;
       font-size: 32px;
@@ -524,7 +530,11 @@ watch(
     .p1,
     .role {
       color: #fff;
-      background: $primary-color;
+      background-color: $primary-color;
+    }
+    .p1 {
+      background-image: url(@img/pro-lg.png);
+      background-position: 446px 64px;
     }
   }
 
@@ -535,7 +545,7 @@ watch(
     font-size: 32px;
     font-weight: 600;
     color: #193059;
-    background: #e9ebf0;
+    background-color: #e9ebf0;
 
     @include media-breakpoint-up(md) {
       display: block;

src/main.ts

@@ -4,9 +4,5 @@ import router from './router'
 // import './utils/rem'
 import './style'
 
-import NavBar from './components/nav-bar/index.vue'
-
 const app = createApp(App)
-app.component('NavBar', NavBar)
-
 app.use(router).mount('#app')

src/pages/login/index.vue

@@ -76,7 +76,7 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import NavBar from '@/components/nav-bar/index.vue'
+// import NavBar from '@/components/nav-bar/index.vue'
 import { login } from '@/service/user'
 
 const router = useRouter()

src/pages/password/index.vue

@@ -85,7 +85,6 @@
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { state } from '@/store'
-import NavBar from '@/components/nav-bar/index.vue'
 
 const router = useRouter()
 const { query } = useRoute()