cb

src/main.js

@@ -5,6 +5,8 @@ import store from './store'
 import 'animate.css'
 import './assets/js/amfe-flexible'
 import Navigation from 'vue-navigation'
+import $ from 'jquery';
+window.jquery = window.$ = $;
 
 Vue.use(Navigation, {router})
 

src/views/erjiye.vue

@@ -4,8 +4,8 @@
       <div class="erjiye">
         <div class="content">
           <div class="title"></div>
-          <div class="content-box">
-            <ul>
+          <div id="content-box" class="content-box" ref="content">
+            <ul id="1">
               <li class="main-title">一、集团招采管理制度要点</li>
               <li class="sub-title">第一节：总则</li>
               <li class="sub-title">第二节：供方管理</li>
@@ -14,7 +14,7 @@
               <li class="sub-title">第五节：直接委托</li>
               <li class="sub-title">第六节：合同管理</li>
             </ul>
-            <ul>
+            <ul id="2">
               <li class="main-title">二、招采常见问题百问百答</li>
               <li class="sub-title">第一节：总则</li>
               <li class="sub-title">第二节：供方管理</li>
@@ -22,8 +22,14 @@
               <li class="sub-title">第四节：集中采购</li>
               <li class="sub-title">第五节：直接委托</li>
               <li class="sub-title">第六节：合同管理</li>
+              <li class="sub-title">第六节：合同管理</li>
+              <li class="sub-title">第六节：合同管理</li>
+              <li class="sub-title">第六节：合同管理</li>
+              <li class="sub-title">第六节：合同管理</li>
+              <li class="sub-title">第六节：合同管理</li>
+              <li class="sub-title">第六节：合同管理</li>
             </ul>
-            <ul>
+            <ul id="3">
               <li class="main-title">三、线上线下招采服务指南</li>
             </ul>
           </div>
@@ -36,7 +42,23 @@
 
 <script>
 export default {
+  mounted() {
+    this.watchMaodian()
+
+  },
   methods: {
+    watchMaodian() {
+      $eventbus.$on('maodian', (index) => {
+        console.log('index')
+        console.log(index)
+        
+        this.$nextTick(() => {
+          var height = $('#'+ index).position().top - 65;
+          $('#content-box').scrollTop(height)
+        })
+
+      })
+    },
     handleJump() {
       $eventbus.$emit('jumpPage', 'xiangqing')
     }
@@ -47,7 +69,7 @@ export default {
 <style lang="less" scoped>
 @r: 75rem;
 
-.zindex{
+.zindex {
   z-index: 97;
 }
 
@@ -117,7 +139,6 @@ export default {
   }
 }
 
-
 // 分割线
 // vue 动画样式
 
@@ -218,7 +239,6 @@ export default {
   background-color: #fff;
 }
 
-
 .flip-animation-1 {
   animation: flipBook1 17s;
 }
@@ -229,8 +249,6 @@ export default {
   background-color: #fff;
 }
 
-
-
 .flip-animation-2 {
   animation: flipBook2 13s 2s;
 }
@@ -241,8 +259,6 @@ export default {
   background-color: #fff;
 }
 
-
-
 .flip-animation-3 {
   animation: flipBook3 10s 3s;
 }

src/views/yjml.vue

 <template>
-  <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
+  <div class="book-page-box book-page-1 preserve-3d zindex" >
     <div class="book-page page-front">
       <div class="yjml">
         <div class="cuizi"></div>
@@ -8,9 +8,9 @@
           <div class="stars"></div>
         </div>
         <ul class="list">
-          <li class="list-item1"></li>
-          <li class="list-item2"></li>
-          <li class="list-item3"></li>
+          <li class="list-item1" @click="handleJump(1)"></li>
+          <li class="list-item2" @click="handleJump(2)"></li>
+          <li class="list-item3" @click="handleJump(3)"></li>
         </ul>
         <div class="button01 animated tada">
           <div class="num-box">
@@ -38,8 +38,11 @@ export default {
 
   },
   methods: {
-    handleJump() {
+    handleJump(index) {
+      console.log('一级目录的index');
+      console.log(index);
       $eventbus.$emit('jumpPage', 'erjiye')
+      $eventbus.$emit('maodian',index)
     }
   },
   components: {