up

webM/src/router/index.js

@@ -269,6 +269,19 @@ const routes = [
         component: () => import('../views/bottom/Events/info4.vue'),
         meta: { myTitle: 'Events', topColor: '#9b7000' },
       },
+      {
+        path: '/Layout/EventsInfo5/:id',
+        name: 'EventsInfo5',
+        component: () => import('../views/bottom/Events/info5.vue'),
+        meta: { myTitle: 'Events', topColor: '#07736a' },
+      },
+      // 搜索
+      {
+        path: '/Layout/Search/:t',
+        name: 'Search',
+        component: () => import('../views/Search/index.vue'),
+        meta: { myTitle: 'Result', topColor: '#bd7739' },
+      },
     ]
   }
 ]

webM/src/views/About/Director.vue

@@ -2,7 +2,7 @@
   <div class="AboutDirector">
     <div class="ban">
       <img src="@/assets/img/bannerA.png" alt="" />
-      <h3>About</h3>
+      <h3 @click="$router.push('/Layout/About/1')">About</h3>
     </div>
     <div class="main">
       <h3 class="title">From the Director</h3>

webM/src/views/About/Link.vue

@@ -2,18 +2,18 @@
   <div class="AboutLink">
     <div class="ban">
       <img src="@/assets/img/bannerA.png" alt="" />
-      <h3>About</h3>
-      <div class="main">
-        <div class="box" v-for="(item, index) in data" :key="index">
-          <h3 class="title">{{ item.title }}</h3>
-          <div
-            class="row"
-            v-for="val in item.son"
-            :key="val.img"
-            @click="skip(val.url)"
-          >
-            <img :src="`/data/About/link/${val.img}.jpg`" alt="" />
-          </div>
+      <h3 @click="$router.push('/Layout/About/3')">About</h3>
+    </div>
+    <div class="main">
+      <div class="box" v-for="(item, index) in data" :key="index">
+        <h3 class="title">{{ item.title }}</h3>
+        <div
+          class="row"
+          v-for="val in item.son"
+          :key="val.img"
+          @click="skip(val.url)"
+        >
+          <img :src="`/data/About/link/${val.img}.jpg`" alt="" />
         </div>
       </div>
     </div>
@@ -208,9 +208,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    skip(url){
-      window.open(url)
-    }
+    skip(url) {
+      window.open(url);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

webM/src/views/Join/info.vue

@@ -2,7 +2,7 @@
   <div class="JoinInfo">
     <div class="ban" ref="ban">
       <img src="@/assets/img/bannerJ.png" alt="" />
-      <h3>Join & Support</h3>
+      <h3 @click="$router.push('/Layout/Join/Volunteer')">Join & Support</h3>
     </div>
     <div class="main">
       <h3>{{ data.h3 }}</h3>

webM/src/views/Layout/index.vue

@@ -17,6 +17,7 @@
         />
         <img src="@/assets/img/Layout/zhong.png" alt="" @click="toZhong" />
         <img
+        :class="{mySearch:$route.path==='/Layout/Search'}"
           src="@/assets/img/Layout/search.png"
           alt=""
           @click="searcShow = true"
@@ -39,6 +40,7 @@
           />
           <img src="@/assets/img/Layout/zhong2.png" alt="" @click="toZhong" />
           <img
+          :class="{mySearch:$route.path==='/Layout/Search'}"
             src="@/assets/img/Layout/search2.png"
             alt=""
             @click="searcShow = true"
@@ -78,10 +80,10 @@
       </div>
     </div>
     <!-- 点击搜索 -->
-    <div class="searchBox" v-if="searcShow">
+    <div class="searchBox" v-show="searcShow">
       <div class="searcTop" @keyup.enter="searcBtn">
         <div class="inco" @click="searcBtn"></div>
-        <input type="text" v-model="txt" placeholder="search......" />
+        <input type="text" v-model="txt" placeholder="search......" id="myInput"/>
         <div class="Cancel" @click="searcShow = false">Cancel</div>
       </div>
     </div>
@@ -238,19 +240,22 @@ export default {
     $route() {
       this.routeChange();
     },
-    searcShow() {
-      this.txt = "";
-    },
+    // searcShow() {
+    //   this.txt = "";
+    // },
   },
   //方法集合
   methods: {
     // 封装一个地址栏改变监听$route的方法
     routeChange() {
+      let t = this.$route.params.t
+      if(t&&t!=='null') this.txt =t
       this.menaInd = this.$route.path;
       this.meanPage = false;
     },
     searcBtn() {
-      console.log("搜索~");
+        this.$router.push(`/Layout/Search/${this.txt?this.txt:'null'}`);
+      this.searcShow=false
     },
     menaSonFu(index, path) {
       if (path) {
@@ -304,6 +309,11 @@ export default {
   position: relative;
   height: 100vh;
   overflow-y: auto;
+  // 在搜索页面隐藏搜索按钮
+  // .mySearch{
+  //   opacity: 0;
+  //   pointer-events: none;
+  // }
   .top {
     z-index: 990;
     display: flex;

webM/src/views/Learn/info.vue

@@ -2,7 +2,7 @@
   <div class="LearnInfo">
     <div class="ban">
       <img src="@/assets/img/bannerLI.png" alt="" />
-      <h3>Learn & Engage</h3>
+      <h3 @click="$router.push('/Layout/Learn/Students')">Learn & Engage</h3>
     </div>
     <div class="main">
       <h3>{{ data.title }}</h3>

webM/src/views/Search/About.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchAbout'>SearchAbout</div>
+</template>
+
+<script>
+export default {
+name:'SearchAbout',
+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/Home/index copy.vue

@@ -1,10 +1,11 @@
+<!--  -->
 <template>
-<div class='Home'>Home</div>
+<div class='SearchAll'>SearchAll</div>
 </template>
 
 <script>
 export default {
-name:'Home',
+name:'SearchAll',
 components: {},
 data() {
 //这里存放数据

webM/src/views/Search/Collections.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchCollections'>SearchCollections</div>
+</template>
+
+<script>
+export default {
+name:'SearchCollections',
+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/Search/Employment.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchEmployment'>SearchEmployment</div>
+</template>
+
+<script>
+export default {
+name:'SearchEmployment',
+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/Search/Events.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchEvents'>SearchEvents</div>
+</template>
+
+<script>
+export default {
+name:'SearchEvents',
+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/Search/Exhibitions.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchExhibitions'>SearchExhibitions</div>
+</template>
+
+<script>
+export default {
+name:'SearchExhibitions',
+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/Search/Join.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchJoin'>SearchJoin</div>
+</template>
+
+<script>
+export default {
+name:'SearchJoin',
+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/Search/Learn.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchLearn'>SearchLearn</div>
+</template>
+
+<script>
+export default {
+name:'SearchLearn',
+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/Search/Research.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchResearch'>SearchResearch</div>
+</template>
+
+<script>
+export default {
+name:'SearchResearch',
+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/Search/Terms.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchTerms'>SearchTerms</div>
+</template>
+
+<script>
+export default {
+name:'SearchTerms',
+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/Search/Visit.vue

@@ -0,0 +1,44 @@
+<!--  -->
+<template>
+<div class='SearchVisit'>SearchVisit</div>
+</template>
+
+<script>
+export default {
+name:'SearchVisit',
+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/Search/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="Search">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerRes.png" alt="" />
+      <h3>Result</h3>
+    </div>
+    <div class="mainBox" :class="{ curSorll: menaSon }">
+      <div class="rowAll">
+        <div
+          @click="cutCom(item.cut, index)"
+          class="row"
+          v-for="(item, index) in tabData"
+          :key="index"
+          :class="{ active: cut === item.cut }"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+
+    <div class="main">
+      <div class="title">
+        <span>{{ num }}</span> results
+      </div>
+      <!-- 动态组件 -->
+      <component ref="comSon" :is="cut" :num.sync="num"></component>
+    </div>
+  </div>
+</template>
+
+<script>
+import All from "./All.vue";
+import Visit from "./Visit.vue";
+import Exhibitions from "./Exhibitions.vue";
+import Collections from "./Collections.vue";
+import Learn from "./Learn.vue";
+import Research from "./Research.vue";
+import Join from "./Join.vue";
+import About from "./About.vue";
+import Events from "./Events.vue";
+import Terms from "./Terms.vue";
+import Employment from "./Employment.vue";
+
+export default {
+  name: "Search",
+  components: {
+    All,
+    Visit,
+    Exhibitions,
+    Collections,
+    Learn,
+    Research,
+    Join,
+    About,
+    Events,
+    Terms,
+    Employment,
+  },
+  data() {
+    //这里存放数据
+    return {
+      num: 0,
+      menaSon: false,
+      cut: "All",
+      tabData: [
+        { id: 1, name: "All Results", cut: "All" },
+        { id: 2, name: "Visit", cut: "Visit" },
+        { id: 3, name: "Exhibitions", cut: "Exhibitions" },
+        { id: 4, name: "Collections", cut: "Collections" },
+        { id: 5, name: "Learn & Engage", cut: "Learn" },
+        { id: 6, name: "Research & Publications", cut: "Research" },
+        { id: 7, name: "Join & Support", cut: "Join" },
+        { id: 8, name: "About", cut: "About" },
+        { id: 9, name: "Events", cut: "Events" },
+        { id: 10, name: "Terms of Use", cut: "Terms" },
+        { id: 11, name: "Employment", cut: "Employment" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.txtChange();
+    },
+  },
+  //方法集合
+  methods: {
+    cutCom(val, index) {
+      this.cut = val;
+      // 获取二级选中元素距离左侧的距离
+      let sonScroll = document.querySelectorAll(".rowAll .row");
+      let sonScrollAll = document.querySelector(".mainBox");
+      sonScrollAll.scrollTo({
+        left: sonScroll[index].offsetLeft - 100,
+        behavior: "smooth",
+      });
+    },
+    // 封装一个地址栏改变的方法
+    txtChange() {
+      //获取参数
+      let txt = this.$route.params.t;
+      if (txt && txt !== "null") {
+        // 给Layout搜索框赋值
+        // this.$nextTick(()=>{
+        //   setTimeout(() => {
+        //     let dom  = document.querySelector('#myInput')
+        //     dom.value=txt
+        //     console.log(dom);
+        //   }, 100);
+        // })
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.txtChange();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    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;
+          }
+        };
+      }, 0);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    // 获取滚动的总元素,删除滚动事件
+    let scrollDom = document.querySelector(".Layout");
+    scrollDom.onscroll = null;
+    // 获取顶部固定栏
+    let LayoutTop = document.querySelector(".Layout .top");
+    LayoutTop.style.display = "flex";
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+  color: transparent;
+}
+
+.Search {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 30px;
+      bottom: 30px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .mainBox {
+    width: 100%;
+    overflow-x: auto;
+    z-index: 10;
+    .rowAll {
+      width: 1256px;
+      padding: 20px;
+      background-color: #f7f6f3;
+      .row {
+        display: inline-block;
+        font-size: 16px;
+        height: 30px;
+        line-height: 30px;
+        margin-right: 10px;
+        padding: 0 8px;
+      }
+      .active {
+        background-color: #c1aa7b;
+        border-radius: 15px;
+        color: #fff;
+      }
+    }
+  }
+  .txt {
+    width: 80%;
+    margin: 0 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    .inco {
+      position: absolute;
+      z-index: 10;
+      content: "";
+      display: block;
+      position: absolute;
+      top: 9px;
+      left: 10px;
+      background: url("../../assets/img/Layout/search2.png");
+      background-size: 20px, 20px;
+      width: 20px;
+      height: 20px;
+    }
+    & > input {
+      width: 100%;
+      height: 38px;
+      border-radius: 19px;
+      padding-left: 40px;
+      border: 1px solid #d2b986;
+      background-color: transparent;
+    }
+  }
+  .main {
+    width: 100%;
+    padding: 30px 20px 40px;
+    .title {
+      width: calc(100% - 40px);
+      margin: 0 auto;
+      padding-left: 30px;
+      font-size: 18px;
+      background: url("../../assets/img/Layout/chosen.png") 0px center no-repeat;
+      background-size: 22px 18px;
+      & > span {
+        color: #bc1c24;
+        font-weight: 700;
+        margin-right: 10px;
+      }
+    }
+  }
+  .curSorll {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+</style>

webM/src/views/Visit/index.vue

@@ -260,7 +260,6 @@ export default {
           // 获取元素距离顶部的距离
           let dom = document.querySelector(`#Visit${index + 1}`);
           // 获取主滚动元素
-          console.log('------',dom.offsetTop);
           let domScroll = document.querySelector(".Layout");
           domScroll.scrollTo({ top: dom.offsetTop - 70 });
         }, 100);

webM/src/views/bottom/Events/info1.vue

@@ -6,13 +6,20 @@
     </div>
     <div class="main">
       <div class="box1">
-        <h3>{{data.h3}}</h3>
+        <h3>{{ data.h3 }}</h3>
         <div class="info">
-          <span class="info_1">{{data.i}}</span>
+          <span class="info_1">{{ data.i }}</span>
         </div>
       </div>
       <div class="box2">
-        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+        <p
+          v-for="(item, index) in data.txt"
+          :class="{ active: item.path == $route.params.id }"
+          :key="index"
+          @click="skip(item.path)"
+        >
+          {{ item.name }}
+        </p>
       </div>
       <div class="box3" v-html="data.main"></div>
     </div>
@@ -35,27 +42,27 @@ export default {
   computed: {},
   //监控data中的数据变化
   watch: {
-    $route(){
-      this.dataChange()
-    }
+    $route() {
+      this.dataChange();
+    },
   },
   //方法集合
   methods: {
-    skip(path){
-      this.$router.push(`/Layout/EventsInfo1/${path}`).catch(()=>{})
+    skip(path) {
+      this.$router.push(`/Layout/EventsInfo1/${path}`).catch(() => {});
     },
     // 封装获取数据的方法
     dataChange() {
       let id = this.$route.params.id;
-      id =Number(id)
-      Events.forEach(v=>{
-        if(v.id===id) this.data=v
-      })
+      id = Number(id);
+      Events.forEach((v) => {
+        if (v.id === id) this.data = v;
+      });
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.dataChange()
+    this.dataChange();
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -88,7 +95,7 @@ export default {
   }
   .main {
     padding: 20px 15px 40px;
-    background: url('../../../assets/img/bgEI.png');
+    background: url("../../../assets/img/bgEI.png");
     .box1 {
       padding: 0 15px 5px;
       border-bottom: 1px solid #ccc;
@@ -117,28 +124,31 @@ export default {
         }
       }
     }
-    .box2{
+    .box2 {
       padding: 20px 15px;
       border-bottom: 1px solid #ccc;
-      &>p{
+      & > p {
         font-size: 14px;
-        color: #6A6A6A;
+        color: #6a6a6a;
+      }
+      .active {
+        color: red;
       }
     }
-    .box3{
+    .box3 {
       padding: 20px 15px 10px;
-      /deep/.xx{
+      /deep/.xx {
         font-size: 16px;
         color: #000000;
         font-weight: 700;
       }
-      /deep/ p{
+      /deep/ p {
         font-size: 14px;
         line-height: 20px;
         margin-bottom: 15px;
-        color: #6A6A6A;
+        color: #6a6a6a;
       }
-      /deep/ img{
+      /deep/ img {
         width: 100%;
         display: block;
         margin-bottom: 15px;

webM/src/views/bottom/Events/info2.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="box2">
-        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+        <p v-for="(item,index) in data.txt" :class="{active:item.path==$route.params.id}" :key="index" @click="skip(item.path)">{{item.name}}</p>
       </div>
       <div class="box3" v-html="data.main"></div>
     </div>
@@ -124,6 +124,9 @@ export default {
         font-size: 14px;
         color: #6A6A6A;
       }
+      .active{
+        color: red;
+      }
     }
     .box3{
       padding: 20px 15px 10px;

webM/src/views/bottom/Events/info4.vue

@@ -12,7 +12,7 @@
         </div>
       </div>
       <div class="box2">
-        <p v-for="(item,index) in data.txt" :key="index" @click="skip(item.path)">{{item.name}}</p>
+        <p v-for="(item,index) in data.txt" :class="{active:item.path==$route.params.id}" :key="index" @click="skip(item.path)">{{item.name}}</p>
       </div>
       <div class="box3" v-html="data.main"></div>
     </div>
@@ -124,6 +124,9 @@ export default {
         font-size: 14px;
         color: #6A6A6A;
       }
+      .active{
+        color:red;
+      }
     }
     .box3{
       padding: 20px 15px 10px;

webM/src/views/bottom/Events/info5.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="EventsInfo5">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/5.png" alt="" />
+      <h3 @click="$router.push('/Layout/Events')">Events</h3>
+    </div>
+    <div class="main">
+      <div class="box1">
+        <h3 v-html="data.h3"></h3>
+        <div class="info">
+          <span class="info_1">{{data.i}}</span>
+        </div>
+      </div>
+      <!-- <div class="box2">
+        <p v-for="(item,index) in data.txt" :class="{active:item.path==$route.params.id}" :key="index" @click="skip(item.path)">{{item.name}}</p>
+      </div> -->
+      <div class="box3" v-html="data.main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+// <i>XXXXXXXXXXXXX</i>
+import { Events } from "./data";
+export default {
+  name: "EventsInfo5",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    skip(path){
+      this.$router.push(`/Layout/EventsInfo5/${path}`).catch(()=>{})
+    },
+    // 封装获取数据的方法
+    dataChange() {
+      let id = this.$route.params.id;
+      id =Number(id)
+      Events.forEach(v=>{
+        if(v.id===id) this.data=v
+      })
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.dataChange()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.EventsInfo5 {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 20px;
+      bottom: 20px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px 15px 40px;
+    background: url('../../../assets/img/bgEI.png');
+    .box1 {
+      padding: 0 15px 5px;
+      border-bottom: 1px solid #ccc;
+      & > h3 {
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 5px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 30px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        & > span {
+          padding: 0 0px 0 30px;
+          display: block;
+        }
+        .info_1 {
+          background: url("../../../assets/img/bg_5.png") left 5px no-repeat;
+        }
+      }
+    }
+    .box2{
+      padding: 20px 15px;
+      border-bottom: 1px solid #ccc;
+      &>p{
+        font-size: 14px;
+        color: #6A6A6A;
+      }
+      .active{
+        color:red;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /deep/ video{
+        width: 100%;
+        margin-bottom: 15px;
+      }
+      /deep/.xx{
+        font-size: 16px;
+        color: #000000;
+        font-weight: 700;
+      }
+      /deep/ p{
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 15px;
+        color: #6A6A6A;
+      }
+      /deep/ img{
+        width: 100%;
+        display: block;
+        margin-bottom: 15px;
+      }
+      /deep/ i {
+        color: #000000;
+        display: block;
+        font-size: 12px;
+        font-style: normal;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>