up

webM/src/router/index.js

@@ -24,6 +24,12 @@ const routes = [
         component: () => import('../views/Visit/index.vue'),
         meta: { myTitle: 'Visit', topColor: '#c3ac8d' },
       },
+      {
+        path: '/Layout/VisitInfo',
+        name: 'VisitInfo',
+        component: () => import('../views/Visit/VisitInfo.vue'),
+        meta: { myTitle: 'Reservation', topColor: '#c3ac8d' },
+      },
     ]
   }
 ]

webM/src/views/Layout/index.vue

@@ -230,6 +230,7 @@ export default {
     // 封装一个地址栏改变监听$route的方法
     routeChange() {
       this.menaInd = this.$route.path;
+      if(this.$route.path.indexOf('/Layout/Visit/')>-1) this.menaInd=null
       this.meanPage = false;
       this.$nextTick(() => {
         setTimeout(() => {}, 100);
@@ -244,6 +245,7 @@ export default {
     },
     skip(path) {
        this.$router.push(path).catch(() => {});
+      this.meanPage = false;
     },
     toTop() {
       let dom = this.$refs.Layout;

webM/src/views/Visit/Visit1.vue

@@ -1,46 +0,0 @@
-<template>
-<div class='Visit1'>
-  <div id="demo">123</div>
-  <h1 v-for="i in 20" :key="i">快乐</h1>
-</div>
-</template>
-
-<script>
-export default {
-name:'Visit1',
-components: {},
-data() {
-//这里存放数据
-return {
-
-};
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-//@import url(); 引入公共css类
-
-</style>

webM/src/views/Visit/Visit2.vue

@@ -1,43 +0,0 @@
-<template>
-<div class='Visit2'>Visit2</div>
-</template>
-
-<script>
-export default {
-name:'Visit2',
-components: {},
-data() {
-//这里存放数据
-return {
-
-};
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
-</script>
-<style lang='less' scoped>
-//@import url(); 引入公共css类
-
-</style>

webM/src/views/Visit/VisitInfo.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="VisitInfo">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/Visit/ban.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VisitInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.VisitInfo{
+  width: 100%;
+    .ban {
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+  }
+}
+</style>

webM/src/views/Visit/index.vue

@@ -7,7 +7,7 @@
       <div class="mainBox" :class="{ curSorll: menaSon }">
         <div class="rowAll">
           <div
-            @click="cutTab(item.path)"
+            @click="cutTab(item.path, index)"
             class="row"
             v-for="(item, index) in tabData"
             :key="index"
@@ -46,7 +46,7 @@
         <p class="dd">+86 (10) 63393339</p>
         <p class="cc">Group visitors</p>
         <p class="dd">+86 (10) 63370458</p>
-        <div class="more">See More</div>
+        <div class="more" @click="$router.push('/Layout/VisitInfo')">See More</div>
       </div>
       <!-- 3 -->
       <div id="Visit3">
@@ -208,6 +208,15 @@ export default {
     $route() {
       this.routeChange();
     },
+    idMate(val) {
+      // 获取二级选中元素距离左侧的距离
+      let sonScroll = document.querySelectorAll(".rowAll .row");
+      let sonScrollAll = document.querySelector(".mainBox");
+      sonScrollAll.scrollTo({
+        left: sonScroll[val].offsetLeft - 100,
+        behavior: "smooth",
+      });
+    },
   },
   //方法集合
   methods: {
@@ -231,45 +240,22 @@ export default {
       // 获取地址栏参数id
       let id = this.$route.params.id;
       id = Number(id);
-      this.idMate = id - 1;
-      this.$nextTick(() => {
-        setTimeout(() => {
-          // 获取顶部元素ban的高度
-          let banDom = this.$refs.ban;
-          // 获取滚动的总元素
-          let scrollDom = document.querySelector(".Layout");
-          // 获取顶部固定栏
-          let LayoutTop = document.querySelector(".Layout .top");
-          scrollDom.onscroll = () => {
-            if (scrollDom.scrollTop > banDom.offsetHeight) {
-              LayoutTop.style.display = "none";
-              this.menaSon = true;
-            } else {
-              LayoutTop.style.display = "flex";
-              this.menaSon = false;
-            }
-          };
-          // 获取二级选中元素距离左侧的距离
-          let sonScroll = document.querySelectorAll(".rowAll .row");
-          let sonScrollAll = document.querySelector(".mainBox");
-          sonScrollAll.scrollTo({
-            left: sonScroll[id - 1].offsetLeft - 100,
-            behavior: "smooth",
-          });
-        }, 100);
-      });
+
       // 滚动
       // 获取元素距离顶部的距离
       let dom = document.querySelector(`#Visit${id}`);
       // 获取主滚动元素
       let domScroll = document.querySelector(".Layout");
       setTimeout(() => {
-        if(this.menaSon) domScroll.scrollTo({ top: dom.offsetTop - 70 });
+        if (this.menaSon) domScroll.scrollTo({ top: dom.offsetTop - 70 });
         else domScroll.scrollTo({ top: dom.offsetTop - 140 });
       }, 100);
     },
-    cutTab(path) {
+    cutTab(path, index) {
       this.$router.replace(path).catch(() => {});
+      setTimeout(() => {
+        this.idMate = index;
+      }, 200);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -277,6 +263,71 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.routeChange();
+    this.$nextTick(() => {
+      setTimeout(() => {
+        // 获取地址栏参数id
+        let id = this.$route.params.id;
+        id = Number(id);
+
+        // 获取顶部元素ban的高度
+        let banDom = this.$refs.ban;
+        // 获取滚动的总元素
+        let scrollDom = document.querySelector(".Layout");
+        // 获取顶部固定栏
+        let LayoutTop = document.querySelector(".Layout .top");
+        // 动态改变idMate高亮效果
+        let Visit1 = document.querySelector("#Visit1");
+        let Visit2 = document.querySelector("#Visit2");
+        let Visit3 = document.querySelector("#Visit3");
+        let Visit4 = document.querySelector("#Visit4");
+        let Visit5 = document.querySelector("#Visit5");
+        let Visit6 = document.querySelector("#Visit6");
+        scrollDom.onscroll = () => {
+          if (scrollDom.scrollTop > banDom.offsetHeight) {
+            LayoutTop.style.display = "none";
+            this.menaSon = true;
+          } else {
+            LayoutTop.style.display = "flex";
+            this.menaSon = false;
+          }
+          if (this.idMate !== null) {
+            if (
+              scrollDom.scrollTop <
+              Visit1.offsetTop + Visit1.offsetHeight - 70
+            )
+              this.idMate = 0;
+            else if (
+              scrollDom.scrollTop <
+              Visit2.offsetTop + Visit2.offsetHeight - 70
+            )
+              this.idMate = 1;
+            else if (
+              scrollDom.scrollTop <
+              Visit3.offsetTop + Visit3.offsetHeight - 70
+            )
+              this.idMate = 2;
+            else if (
+              scrollDom.scrollTop <
+              Visit4.offsetTop + Visit4.offsetHeight - 70
+            )
+              this.idMate = 3;
+            else if (
+              scrollDom.scrollTop <
+              Visit5.offsetTop + Visit5.offsetHeight - 70
+            )
+              this.idMate = 4;
+            else if (
+              scrollDom.scrollTop <
+              Visit6.offsetTop + Visit6.offsetHeight - 70
+            )
+              this.idMate = 5;
+            else this.idMate = 6;
+          } else {
+            this.idMate = id - 1;
+          }
+        };
+      }, 100);
+    });
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前