营地2.0-整合修改

src/App.vue

@@ -22,8 +22,9 @@
       }
     },
     watch: {
-      '$route.path'(val) {
-        this.$store.commit('setActiveIndex', val)
+      '$route'(val) {
+        console.log(val.query.jxcode)
+        this.$store.commit('setActiveIndex', val.path)
       }
     }
   };

src/views/base/active/ActiveInfo.vue

@@ -57,7 +57,7 @@
     </div>
     <div class="active-area">
       <div class="left-area card-box" ref="left-area">
-        <div class="left-area-box" :style="leftAreaBoxStyle">
+        <div class="left-area-box">
           <ul v-if="activeContent==1 && anchorList.length>0">
             <li v-for="(item,index) in anchorList" :key="index">
               <a @click="anchorSkip(item.id)">{{item.name}}</a>
@@ -206,7 +206,6 @@
         anchorList2: [],
         activeContent: 1,
         minHeight: '339',
-        leftAreaBoxStyle: {}
       }
     },
     created() {
@@ -216,48 +215,7 @@
       }
       this.getInfo()
     },
-    mounted() {
-      window.addEventListener('scroll', this.handleScrollY, true);
-    },
-    destroyed() {
-      window.removeEventListener('scroll', this.handleScrollY, true);
-    },
     methods: {
-      handleScrollY() {
-        // active-area距离顶部的高度
-        let activeAreaToTop = document.querySelector('.active-area').offsetTop;
-        // left-area的宽度
-        let leftAreaWidth = document.querySelector('.left-area').offsetWidth;
-        // footer的高度
-        let footerHeight = document.querySelector('.footer').offsetHeight;
-        // 页面滚动高度
-        let scrollTop = document.documentElement.scrollTop;
-        // left-area-box的高度
-        let Height = document.querySelector('.left-area-box').offsetHeight;
-        // active-info-container的高度
-        let contentHeight = document.querySelector('.active-info-container').offsetHeight;
-        // body的高度
-        let bodyHeight = document.body.offsetHeight;
-
-        if (scrollTop >= (activeAreaToTop - 20)) {
-          if (scrollTop >= (contentHeight - bodyHeight + 180) &&
-            bodyHeight <= (footerHeight + Height + 80)) {
-            this.leftAreaBoxStyle = {
-              position: 'absolute',
-              bottom: '0px',
-              width: leftAreaWidth + 'px',
-            }
-            return false;
-          }
-          this.leftAreaBoxStyle = {
-            position: 'fixed',
-            top: '100px',
-            width: leftAreaWidth + 'px',
-          }
-        } else {
-          this.leftAreaBoxStyle = {}
-        }
-      },
       // 立即报名按钮
       signUp() {
         let allToken = window.localStorage.getItem('index-token-all');
@@ -541,6 +499,7 @@
             text-align: center;
             border-bottom: 1px solid #cccccc;
             cursor: pointer;
+            border-left: 4px solid transparent;
 
             &:hover,
             &.is-active {

src/views/base/myInfo/index.vue

@@ -221,6 +221,7 @@
           margin: 10px 0;
           font-size: 15px;
           list-style: none;
+          border-left: 4px solid transparent;
 
           img {
             vertical-align: middle;

src/views/index/camp/Index.vue

@@ -315,6 +315,7 @@
           margin: 10px 0;
           font-size: 15px;
           list-style: none;
+          border-left: 4px solid transparent;
 
           img {
             vertical-align: middle;

src/views/index/recruit/Index.vue

@@ -19,7 +19,7 @@
         <!--        </div>-->
         <div class="active-area">
           <div class="left-area card-box">
-            <div class="left-area-box" :style="leftAreaBoxStyle">
+            <div class="left-area-box">
               <ul class="left" v-if="anchorList.length>0">
                 <li :key="index" v-for="(item,index) in anchorList">
                   <a @click="anchorSkip(item.id)">{{item.name}}</a>
@@ -56,7 +56,6 @@
         info: {},
         anchorList: [],
         minHeight: '339',
-        leftAreaBoxStyle: {}
       };
     },
     created() {
@@ -76,45 +75,7 @@
       }
 
     },
-    mounted() {
-      window.addEventListener('scroll', this.handleScrollY, true);
-    },
-    destroyed() {
-      window.removeEventListener('scroll', this.handleScrollY, true);
-    },
     methods: {
-      handleScrollY() {
-        // left-area的宽度
-        let leftAreaWidth = document.querySelector('.left-area').offsetWidth;
-        // footer的高度
-        let footerHeight = document.querySelector('.footer').offsetHeight;
-        // 页面滚动高度
-        let scrollTop = document.documentElement.scrollTop;
-        // left-area-box的高度
-        let Height = document.querySelector('.left-area-box').offsetHeight;
-        // index-container的高度
-        let contentHeight = document.querySelector('.index-container').offsetHeight;
-        // body的高度
-        let bodyHeight = document.body.offsetHeight;
-        if (scrollTop >= (98)) {
-          if (scrollTop >= (contentHeight - bodyHeight + 218) &&
-            bodyHeight <= (footerHeight + Height + 188)) {
-            this.leftAreaBoxStyle = {
-              position: 'absolute',
-              bottom: '0px',
-              width: leftAreaWidth + 'px',
-            }
-            return false;
-          }
-          this.leftAreaBoxStyle = {
-            position: 'fixed',
-            top: '138px',
-            width: leftAreaWidth + 'px',
-          }
-        } else {
-          this.leftAreaBoxStyle = {}
-        }
-      },
       toLogin() {
         let code = this.$store.state.indexIdentity;
         if (!window.localStorage.getItem("index-token-all")) {
@@ -299,13 +260,14 @@
           text-decoration: none;
           color: #333333;
           width: 100%;
-          font-size: 15px;
+          font-size: 18px;
           /*height: 44px;*/
           line-height: 44px;
           margin: 10px 0;
           text-align: center;
           border-bottom: 1px solid #cccccc;
           cursor: pointer;
+          border-left: 4px solid transparent;
 
           &:hover,
           &.is-active {