top nav

src/components/AboutUs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about_us_container">
+  <div class="about_us_container" id="about_us">
     <HeadLine
       title="关于我们"
       line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"

src/components/Contact.vue

@@ -190,6 +190,7 @@ import Email from '@/static/img/10.png'
         border-radius: 22px;
         font-size: 18px;
         font-weight: 300;
+        cursor: pointer;
         color: #fafafa;
         display: flex;
         align-items: center;

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header_container">
-    <img :src="Logo" alt="logo" class="logo_img" />
+    <img :src="Logo" alt="logo" class="logo_img" @click="toHome()" />
     <ul class="tab_group">
       <li :class="activeTab == 0 ? 'active' : ''" @click="changeActiveTab(0)">
         首页
@@ -20,10 +20,21 @@
 
 <script setup>
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 import Logo from '@/static/img/2.png'
 const activeTab = ref(0)
+const router = useRouter()
 const changeActiveTab = index => {
   activeTab.value = index
+  if (index == 2) {
+    router.push('/product')
+  }
+  if (index == 0) {
+    toHome()
+  }
+}
+const toHome = () => {
+  router.push('/')
 }
 </script>
 

src/components/HomeScreen.vue

@@ -4,7 +4,7 @@
     <h1 class="main_title">
       做铁路相关的设备<span class="sign">研发和制造</span>
     </h1>
-    <div class="to_bottom">
+    <div class="to_bottom" @click="toNextPage()">
       <img :src="Arrow" alt="arrow" class="arrow" />
     </div>
   </div>
@@ -13,6 +13,11 @@
 <script setup>
 import Header from '@/components/Header'
 import Arrow from '@/static/img/jiantou.png'
+const toNextPage = () => {
+  document.getElementById('about_us').scrollIntoView({
+    behavior: 'smooth',
+  })
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/Product.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>pro</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/router/index.js

@@ -1,8 +1,12 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import Home from '@/pages'
+const Home = () => import('@/pages')
+const Product = () => import('@/pages/Product')
 
 // 配置路由信息
-const routes = [{ path: '/', component: Home }]
+const routes = [
+  { path: '/', component: Home },
+  { path: '/product', component: Product },
+]
 
 const router = createRouter({
   routes,