From ff6cbfae9288eeb7bd619a1d5476426b4ff777ab Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sat, 20 May 2023 16:56:48 +0800
Subject: [PATCH] top nav

---
 src/components/AboutUs.vue    |  2 +-
 src/components/Contact.vue    |  1 +
 src/components/Header.vue     | 13 ++++++++++++-
 src/components/HomeScreen.vue |  7 ++++++-
 src/pages/Product.vue         |  7 +++++++
 src/router/index.js           |  8 ++++++--
 6 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Product.vue

diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index d88a028..81301ac 100644
--- a/src/components/AboutUs.vue
+++ b/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="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
diff --git a/src/components/Contact.vue b/src/components/Contact.vue
index 3aa756b..a7ac801 100644
--- a/src/components/Contact.vue
+++ b/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;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 0d10958..0b330c5 100644
--- a/src/components/Header.vue
+++ b/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>
 
diff --git a/src/components/HomeScreen.vue b/src/components/HomeScreen.vue
index 4f0d4ba..306d8eb 100644
--- a/src/components/HomeScreen.vue
+++ b/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>
diff --git a/src/pages/Product.vue b/src/pages/Product.vue
new file mode 100644
index 0000000..0300d6b
--- /dev/null
+++ b/src/pages/Product.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>pro</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/router/index.js b/src/router/index.js
index c44503f..a4c3639 100644
--- a/src/router/index.js
+++ b/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,