09/17 11:22

111

src/components/headerSection.vue

@@ -27,6 +27,8 @@
   </div>
 </template>
 <script>
+import Bus from '../views/index/blocks/eventBus'
+import { scrollAnimation } from '@/util/scroll'
 export default {
   name: 'headerSection',
   props: ['name'],
@@ -36,6 +38,9 @@ export default {
       topList: []
     }
   },
+  created () {
+
+  },
   mounted () {
     scrollTo(0, 0);
     let url = this.$route
@@ -47,6 +52,10 @@ export default {
     })
 
     window.addEventListener('scroll', this.onContentScroll, true)
+    Bus.$on('gotoDetail', (res => {
+      // 控制页面滚动
+      this.change(3, 'detail')
+    }))
   },
   methods: {
     getTop (nameList) {
@@ -60,15 +69,18 @@ export default {
     },
     change (num, name) {
       let url = this.$route.path
+      let top = document.getElementById(name).offsetTop - 76
+      const currentY = document.documentElement.scrollTop || document.body.scrollTop
       if (url != '/') {
         this.$router.push('/')
         this.checkActive = num;
-        let top = document.getElementById(name).offsetTop - 76
-        scrollTo(0, top);
+
+        scrollAnimation(currentY, top)
+        // scrollTo(0, top);
       } else {
         this.checkActive = num;
-        let top = document.getElementById(name).offsetTop - 76
-        scrollTo(0, top);
+        scrollAnimation(currentY, top)
+        // scrollTo(0, top);
       }
     },
     goKu () {

src/components/silder.vue

@@ -108,6 +108,7 @@
 import axios from "axios";
 import qs from 'qs'
 import Bus from '../views/index/blocks/eventBus'
+import { scrollAnimation } from '@/util/scroll'
 export default {
   props: ["showForm"],
   data () {
@@ -153,7 +154,8 @@ export default {
   },
   methods: {
     gotop () {
-      scrollTo(0, 0);
+      const currentY = document.documentElement.scrollTop || document.body.scrollTop
+      scrollAnimation(currentY, 0)
     },
     submitInfo () {
       this.$refs["form"].validate((res) => {

src/util/scroll.js

@@ -0,0 +1,28 @@
+/**
+ * 动画垂直滚动到页面指定位置
+ * @param { Number } currentY 当前位置
+ * @param { Number } targetY 目标位置
+ */
+function scrollAnimation (currentY, targetY) {
+  // 获取当前位置方法
+  // const currentY = document.documentElement.scrollTop || document.body.scrollTop
+
+  // 计算需要移动的距离
+  let needScrollTop = targetY - currentY
+  let _currentY = currentY
+  setTimeout(() => {
+    // 一次调用滑动帧数，每次调用会不一样
+    const dist = Math.ceil(needScrollTop / 10)
+    _currentY += dist
+    window.scrollTo(_currentY, currentY)
+    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
+    if (needScrollTop > 10 || needScrollTop < -10) {
+      scrollAnimation(_currentY, targetY)
+    } else {
+      window.scrollTo(_currentY, targetY)
+    }
+  }, 1)
+}
+module.exports = {
+  scrollAnimation
+}

src/views/index/blocks/banner.vue

@@ -16,7 +16,8 @@
       <div>
         <div class="animate__animated animate__fadeInDown delay-600ms button join "
              @click="joinIn">立即入驻</div>
-        <div class="animate__animated animate__fadeInDown delay-600ms button goinBox">考生指引</div>
+        <div class="animate__animated animate__fadeInDown delay-600ms button goinBox"
+             @click="gotoDetail">考生指引</div>
       </div>
     </div>
   </header>
@@ -94,6 +95,9 @@ export default {
   methods: {
     joinIn () {
       Bus.$emit("joinIn", true);
+    },
+    gotoDetail () {
+      Bus.$emit('gotoDetail')
     }
   }
 }

src/views/index/blocks/consult.vue

@@ -43,11 +43,15 @@
           </div>
           <div class="swiper-pagination"></div>
         </div> -->
-
+        <div @click='prev'
+             class="prev"></div>
+        <div @click='next'
+             class="next"></div>
         <el-carousel :interval="4000"
                      type="card"
                      height="400px"
-                     arrow="always"
+                     arrow="never"
+                     ref="carousel"
                      indicator-position="none">
           <el-carousel-item>
             <div class="textItem"
@@ -178,6 +182,12 @@ export default {
       });
       window.open(newpage.href, '_blank');
     },
+    prev () {
+      this.$refs.carousel.prev();
+    },
+    next () {
+      this.$refs.carousel.next();
+    }
   }
 }
 </script>
@@ -206,6 +216,7 @@ export default {
     }
     .maskCore {
       width: 740px;
+      position: relative;
       // width: 1150px;
       .textItem {
         width: 369px;
@@ -234,6 +245,35 @@ export default {
           }
         }
       }
+      .prev {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        background: url("../images/arrow.png") no-repeat center;
+        background-size: 40px 40px;
+        left: -115px;
+        top: 190px;
+        transform: rotate(180deg);
+        cursor: pointer;
+        &:hover {
+          background: url("../images/active-arrow.png") no-repeat center;
+          background-size: 40px 40px;
+        }
+      }
+      .next {
+        cursor: pointer;
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        background: url("../images/arrow.png") no-repeat center;
+        background-size: 40px 40px;
+        right: -115px;
+        top: 190px;
+        &:hover {
+          background: url("../images/active-arrow.png") no-repeat center;
+          background-size: 40px 40px;
+        }
+      }
     }
   }
 }

src/views/index/blocks/videoList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="min-height:850px;background-color: #f6f7f9;">
     <div class='projectWrap'
          v-if="activeRow">
       <div class="projectList width1200">