✨ feat(headTop): 添加手机头部menu

src/components/headTop.vue

@@ -1,38 +1,39 @@
 <template>
-  <div>
-    <div class="header">
-      <div class="box">
-        <div class="logoImg">
-          <router-link to="/index"
-            ><img src="../assets/Layer_1.png" alt=""
-          /></router-link>
-        </div>
-        <nav>
-          <router-link to="/Payments" active-class="active">Payments</router-link>
-          <router-link to="/AboutUs" active-class="active">About Us</router-link>
-          <router-link to="/FAQ" active-class="active">FAQ</router-link>
-          <router-link to="/ContactUs" active-class="active">Contact Us</router-link>
-        </nav>
-        <!-- phone and email -->
+  <header class="header">
+    <div class="header-container">
+      <div class="header-logo-wrap" @click="linkHome">
+        <img class="header-logo-img" src="../assets/Layer_1.png" alt="首页" />
       </div>
-      <div class="phoneInfo">
-        <div class="phone" @click="call">
+
+      <nav class="header-link-wrap">
+        <router-link class="header-link" v-for="link in links" :to="link.path" active-class="header-link-active">{{
+        link.name }}</router-link>
+      </nav>
+
+      <div class="header-info">
+        <div class="header-info-phone" @click="call">
           <svg-icon icon-class="tel" class="icon" />
           <p>1300 67 61 61</p>
         </div>
-        <div class="email" @click="sendEmail" >
+        <div class="header-info-email" @click="sendEmail">
           <svg-icon icon-class="email" class="icon" />
           <p>sales@trustypay.com.au</p>
         </div>
       </div>
 
-      <router-link to="/ContactUs"
-        ><el-button type="primary" class="btnInfo"
-          >Sign up</el-button
-        ></router-link
-      >
+      <div class="header-mobile-tool">
+        <i class="el-icon-edit" @click.stop="toggleMenu()"></i>
+      </div>
+
+      <router-link class="header-tool" to="/ContactUs">Sign up</router-link>
+    </div>
+    <div class="header-menu-wrap" v-show="isShowMenu">
+      <div class="header-link" @click="toggleMenu(link.path)" v-for="link in links" :to="link.path"
+        active-class="header-link-active">{{
+        link.name }}</div>
+      <div class="header-tool" @click="toggleMenu('/ContactUs')" to="/ContactUs">Sign up</div>
     </div>
-  </div>
+  </header>
 </template>
 
 <script>
@@ -44,17 +45,45 @@ export default {
   },
   data() {
     return {
-     
+      isShowMenu: false,
+      links: [
+        { name: "Payments", path: "/Payments" },
+        { name: "About Us", path: "/AboutUs" },
+        { name: "FAQ", path: "/FAQ" },
+        { name: "Contact Us", path: "/ContactUs" },
+      ]
     };
   },
   methods: {
- 
+    // 切换菜单
+    toggleMenu(routePath = null) {
+      const app = document.getElementById("app");
+      this.isShowMenu = !this.isShowMenu;
+      if (routePath !== null) {
+        this.isShowMenu = false;
+      }
+      // 显示时禁止滚动
+      if (this.isShowMenu) {
+        document.body.style.overflow = 'hidden';
+        app.style.overflowY = 'hidden';
+      } else {
+        document.body.style.overflow = 'auto';
+        app.style.overflowY = 'auto';
+      }
+      if (routePath !== this.$route.path && routePath) {
+        return this.$router.push(routePath);
+      }
+    },
     call() {
       window.location.href = "tel:1300676161";
     },
     sendEmail() {
       window.location.href = "mailto:sales@trustypay.com.au";
     },
+    linkHome() {
+      if (this.$route.name === "index") return;
+      this.$router.push("/");
+    },
   },
 };
 </script>
@@ -65,73 +94,186 @@ export default {
   align-items: center;
   justify-content: center;
   height: 100px;
-  margin: 0 auto;
-  padding-top: 20px;
-  gap: 100px;
-  .box {
+
+  &-container {
+    height: 60px;
+    width: 1280px;
     display: flex;
     align-items: center;
-    .logoImg {
+    padding-right: 100px;
+
+    .header-logo-wrap {
       width: 295px;
       height: 60px;
-      img {
-        width: 295px;
-        height: 60px;
+      cursor: pointer;
+
+      .header-logo-img {
+        width: 100%;
+        height: 100%;
       }
     }
 
-    nav {
+
+    .header-link-wrap {
       display: flex;
-      align-items: center;
-      
-      .active {
-      font-weight: bold;
-      color: #3d9ee6; 
+      line-height: 60px;
+      margin-left: 50px;
+
+      .header-link {
+        text-decoration: none;
+        padding: 0px 24px;
+        font-size: 16px;
+        color: #000;
+      }
+
+      .header-link-active {
+        font-weight: bold;
+        color: #3d9ee6;
+      }
     }
+
+
+    .header-info {
+      margin-left: 34px;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .header-info-phone {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        p {
+          margin: 0;
+          padding: 6px 10px;
+        }
+      }
+
+      .header-info-email {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        p {
+          margin: 0;
+          padding: 8px 10px;
+        }
+      }
     }
-    nav a {
-      text-decoration: none;
-      margin: 0px 40px;
+
+    .header-tool {
+      margin-left: 30px;
+      width: 121px;
+      height: 38px;
+      line-height: 38px;
+      border-radius: 7px;
+      background: #00a0e8;
       font-size: 16px;
-      color: #000;
+      box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.08);
+      color: white;
+      align-content: center;
+      text-align: center;
+      text-decoration: none;
     }
-  }
-  .btnInfo {
-    width: 121px;
-    height: 38px;
-    border-radius: 10px;
-    background: #00a0e8;
-    font-size: 16px;
-  }
-  input {
-    height: 26px;
-    outline: none;
-    border: none;
-    border: 1px solid #00a0e8;
-  }
-  .phoneInfo {
-    .icon {
-      width: 20px;
-      height: 20px;
+
+    .header-mobile-tool {
+      display: none;
     }
-    .phone {
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .header {
+    height: 150px;
+    width: 100%;
+    align-items: flex-start;
+    padding-top: 32px;
+
+    .header-menu-wrap {
+      position: fixed;
+      top: 182px;
+      left: 0;
+      width: 100%;
       display: flex;
-      align-items: center;
-      cursor: pointer;
-      p {
-        margin: 0;
-        padding: 8px 10px;
+      flex-direction: column;
+      background: #00a0e8;
+      height: calc(100vh - 182px);
+      z-index: 99999;
+      color: white;
+      padding: 50px 0 0 40px;
+
+      .header-link {
+        color: white;
+        text-decoration: none;
+        font-size: 16px;
+        line-height: 24px;
+        margin-top: 50px;
+      }
+
+      .header-tool {
+        width: 121px;
+        height: 38px;
+        line-height: 38px;
+        border-radius: 7px;
+        background: white;
+        font-size: 16px;
+        box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.08);
+        color: #00a0e8;
+        align-content: center;
+        text-align: center;
+        text-decoration: none;
+        margin-top: 50px;
       }
     }
-    .email {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      p {
-        margin: 0;
-        padding: 8px 10px;
+
+    &-container {
+      width: 100%;
+      flex-wrap: wrap;
+      padding-right: 0;
+
+      .header-logo-wrap {
+        width: 164px;
+        height: 33px;
+        cursor: pointer;
+        margin-left: 20px;
+      }
+
+      .header-link-wrap {
+        display: none;
+      }
+
+      .header-tool {
+        display: none;
       }
+
+      .header-info {
+        flex: 1;
+        margin-left: 0;
+        order: 3;
+        margin-top: 24px;
+
+        &-phone,
+        &-email {
+          justify-content: center;
+        }
+      }
+
+      .header-mobile-tool {
+        display: block;
+        font-size: 30px;
+        cursor: pointer;
+        flex: 1;
+        order: 2;
+        text-align: right;
+        margin-right: 20px;
+      }
+
+
     }
+
   }
 }
 </style>

src/router/index.js

@@ -5,61 +5,61 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-{path:'/',
-redirect:'/index'
-
-},
+  {
+    path: '/',
+    redirect: '/index'
+  },
   {
     path: '/index',
     name: 'index',
-    component:()=>import('@/views/index.vue')   
+    component: () => import('@/views/index.vue')
   },
   {
     path: '/termsUse',
     name: 'termsUse',
-    component:()=>import('@/views/TermsUse.vue')
+    component: () => import('@/views/TermsUse.vue')
   },
   {
-    path:'/privacy',
-    name:'privacy',
-    component:()=>import('@/views/Privacy.vue')
+    path: '/privacy',
+    name: 'privacy',
+    component: () => import('@/views/Privacy.vue')
   },
   {
-    path:'/FAQ',
-    name:'FAQ',
-    component:()=>import('@/views/Faq.vue')
+    path: '/FAQ',
+    name: 'FAQ',
+    component: () => import('@/views/Faq.vue')
   },
   {
-    path:'/ContactUs',
-    name:'ContactUs',
-    component:()=>import('@/views/ContactUs.vue')
+    path: '/ContactUs',
+    name: 'ContactUs',
+    component: () => import('@/views/ContactUs.vue')
   },
   {
-    path:'/Copyright',
-    name:'Copyright',
-    component:()=>import('@/views/Copyright.vue')
+    path: '/Copyright',
+    name: 'Copyright',
+    component: () => import('@/views/Copyright.vue')
   },
   {
-    path:'/AboutUs',
-    name:'AboutUs',
-    component:()=>import('@/views/AboutUs.vue')
+    path: '/AboutUs',
+    name: 'AboutUs',
+    component: () => import('@/views/AboutUs.vue')
   },
   {
-    path:'/Payments',
-    name:'Payments',
-    component:()=>import('@/views/Payments.vue')
+    path: '/Payments',
+    name: 'Payments',
+    component: () => import('@/views/Payments.vue')
   },
   {
-    path:'/ToOnMobile',
-    name:'ToOnMobile',
+    path: '/ToOnMobile',
+    name: 'ToOnMobile',
     // component:ToonMobile
-    component:()=>import('@/views/ToonMobile.vue')
+    component: () => import('@/views/ToonMobile.vue')
   },
- 
+
 ]
 
 const router = new VueRouter({
-  
+
   routes
 })
 

src/views/index.vue

@@ -468,7 +468,6 @@ export default {
         footerMenu,
         Panel,
         Sales,
-
     },
     data() {
         return {
@@ -476,24 +475,28 @@ export default {
             isShow: true,
             input: '',
             activeNames: ['1'],
-
+            isMobile: window.innerWidth < 768,
         }
     },
     created() {
         // 获取window的宽度
-        let width = window.innerWidth;
-        if (width < 768) {
-            window.confirm('We are currently undergoing maintenance for the adaptive functions on the mobile end. We apologize for any inconvenience caused.');
-        }
+        // let width = window.innerWidth;
+        // if (width < 768) {
+        //     window.confirm('We are currently undergoing maintenance for the adaptive functions on the mobile end. We apologize for any inconvenience caused.');
+        // }
+        window.addEventListener('resize', this.updateIsMobile);
+    },
+    // 页面销毁时移除监听
+    destroyed() {
+        window.removeEventListener('resize', this.updateIsMobile);
     },
-
     methods: {
+        updateIsMobile() {
+            this.isMobile = window.innerWidth < 768;
+        },
         handleChange(val) {
             console.log(val);
         },
-
-
-
     }
 }
 </script>