添加事件

src/views/home/homeView.vue

@@ -34,8 +34,32 @@ export default {
     const prevSlide = () => {
       currentIndex.value = (currentIndex.value - 1 + slides.length) % slides.length
     }
+    function tiaoZhuan(id) {
+      const element = document.getElementById(id)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
     const geet = () => {
-      alert(`欢迎咨询`)
+      alert(`欢迎咨询！`)
+    }
+    const tiJiao = () => {
+      alert('提交成功！')
+    }
+    const shouye = (id) => {
+      tiaoZhuan(id)
+    }
+    const canPingFangan = (id) => {
+      tiaoZhuan(id)
+    }
+    const jieJuewenTi = (id) => {
+      tiaoZhuan(id)
+    }
+    const keHuanLi = (id) => {
+      tiaoZhuan(id)
+    }
+    const yuanYuwoMen = (id) => {
+      tiaoZhuan(id)
     }
     // 自动播放
     onMounted(() => {
@@ -48,6 +72,13 @@ export default {
       nextSlide,
       prevSlide,
       geet,
+      shouye,
+      canPingFangan,
+      tiaoZhuan,
+      jieJuewenTi,
+      keHuanLi,
+      yuanYuwoMen,
+      tiJiao,
     }
   },
 }
@@ -58,18 +89,18 @@ export default {
       <el-container>
         <!-- 顶部 -->
         <el-header>
-          <div class="dhl">
+          <div class="dhl" id="dhl">
             <div class="left-box">
               <img class="img-1" :src="imagePath.logo" alt="Logo" />
               <span class="sys-title">辉擎科技</span>
             </div>
             <div class="right-box">
               <div class="dhl-x">
-                <div>首页</div>
-                <div>产品方案</div>
-                <div>行业解决问题</div>
-                <div>客户案例</div>
-                <div>关于我们</div>
+                <div><a href="#" @click="shouye('dhl')">首页</a></div>
+                <div><a href="#" @click="canPingFangan('bk')">产品方案</a></div>
+                <div><a href="#" @click="jieJuewenTi('fan-mk')">行业解决问题</a></div>
+                <div><a href="#" @click="keHuanLi('bk-2')">客户案例</a></div>
+                <div><a href="#" @click="yuanYuwoMen('lx-mk')">关于我们</a></div>
               </div>
               <el-button @click="geet" class="an-3" type="primary">免费咨询</el-button>
             </div>
@@ -84,8 +115,10 @@ export default {
                   <div class="em-3">
                     辉擎成都科技有限公司致力于提供创新的软件开发解决方案，帮助企业实现数字化转型提升竞争力。
                   </div>
-                  <el-button class="an-1" type="primary">联系我们</el-button>
-                  <el-button class="an-2">了解服务</el-button>
+                  <el-button class="an-1" type="primary" @click="yuanYuwoMen('lx-mk')"
+                    >联系我们</el-button
+                  >
+                  <el-button class="an-2" @click="canPingFangan('bk')">了解服务</el-button>
                 </div>
                 <img :src="slide.image" alt="Slide Image" />
               </div>
@@ -93,7 +126,7 @@ export default {
             <!-- <button class="prev" @click="prevSlide">&#10094;</button>
             <button class="next" @click="nextSlide">&#10095;</button> -->
           </div>
-          <div class="bk">
+          <div class="bk" id="bk">
             <div class="em-4">我们的服务</div>
             <div class="em-5">
               辉擎科技提供全方位的软件开发服务，从需求分析到部署维护，我们用技术为您的业务赋能。
@@ -130,7 +163,7 @@ export default {
             </div>
           </div>
           <!--  -->
-          <div class="bk-2">
+          <div class="bk-2" id="bk-2">
             <div>
               <div class="em-4">成功案例</div>
               <div class="em-5">服务超过1000家企业客户,助力企业数字化转型。</div>
@@ -258,7 +291,7 @@ export default {
             </div>
           </div>
           <!--  -->
-          <div class="fan-mk">
+          <div class="fan-mk" id="fan-mk">
             <div class="fan-bt">解决方案</div>
             <div class="fan-nr">
               <div class="fan-left">
@@ -282,7 +315,7 @@ export default {
             </div>
           </div>
           <!--  -->
-          <div class="lx-mk">
+          <div class="lx-mk" id="lx-mk">
             <div class="lx-left">
               <div class="lx-wb">联系我们</div>
               <div>
@@ -309,7 +342,7 @@ export default {
                   />
                 </div>
                 <div class="lx-an-tj">
-                  <el-button class="lx-an-tj-1" type="primary">提交</el-button>
+                  <el-button class="lx-an-tj-1" type="primary" @click="tiJiao">提交</el-button>
                 </div>
               </div>
             </div>
@@ -350,6 +383,10 @@ export default {
   </div>
 </template>
 <style scoped>
+.dhl-x a {
+  text-decoration: none;
+  color: inherit;
+}
 .lx-an-tj-1 {
   width: 600px;
 }
@@ -395,7 +432,7 @@ export default {
 
   background-color: #fff;
   width: 600px;
-  margin-top: 50px;
+
   border-radius: 15px;
 }
 .lx-wb-1 {
@@ -416,7 +453,7 @@ export default {
 }
 .lx-mk {
   display: flex;
-
+  justify-content: space-around;
   margin-top: 180px;
   height: 700px;
   background-color: #f7f6f6;
@@ -793,6 +830,8 @@ export default {
   justify-content: space-around;
   align-items: center;
   background-color: #fff;
+  position: fixed;
+  z-index: 1;
 }
 .el-link {
   margin-right: 25px;