up

webM/src/router/index.js

@@ -251,6 +251,24 @@ const routes = [
         component: () => import('../views/bottom/Events/info1.vue'),
         meta: { myTitle: 'Events', topColor: '#2d425a' },
       },
+      {
+        path: '/Layout/EventsInfo2/:id',
+        name: 'EventsInfo2',
+        component: () => import('../views/bottom/Events/info2.vue'),
+        meta: { myTitle: 'Events', topColor: '#4c2949' },
+      },
+      {
+        path: '/Layout/EventsInfo3/:id',
+        name: 'EventsInfo3',
+        component: () => import('../views/bottom/Events/info3.vue'),
+        meta: { myTitle: 'Events', topColor: '#712018' },
+      },
+      {
+        path: '/Layout/EventsInfo4/:id',
+        name: 'EventsInfo4',
+        component: () => import('../views/bottom/Events/info4.vue'),
+        meta: { myTitle: 'Events', topColor: '#9b7000' },
+      },
     ]
   }
 ]

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

@@ -2,7 +2,7 @@
   <div class="EventsInfo1">
     <div class="ban" ref="ban">
       <img src="/data/EventsM/1.png" alt="" />
-      <h3>Events</h3>
+      <h3 @click="$router.push('/Layout/Events')">Events</h3>
     </div>
     <div class="main">
       <div class="box1">

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="EventsInfo2">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/2.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" :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: "EventsInfo2",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    skip(path){
+      this.$router.push(`/Layout/EventsInfo2/${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>
+.EventsInfo2 {
+  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;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /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>

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

@@ -0,0 +1,160 @@
+<template>
+  <div class="EventsInfo3">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/3.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" :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: "EventsInfo3",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    // skip(path){
+    //   this.$router.push(`/Layout/EventsInfo3/${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>
+.EventsInfo3 {
+  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;
+      }
+    }
+    .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>

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

@@ -0,0 +1,156 @@
+<template>
+  <div class="EventsInfo4">
+    <div class="ban" ref="ban">
+      <img src="/data/EventsM/4.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" :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: "EventsInfo4",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route(){
+      this.dataChange()
+    }
+  },
+  //方法集合
+  methods: {
+    skip(path){
+      this.$router.push(`/Layout/EventsInfo4/${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>
+.EventsInfo4 {
+  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;
+      }
+    }
+    .box3{
+      padding: 20px 15px 10px;
+      /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>