up

web/src/router/index.js

@@ -96,6 +96,13 @@ const routes = [
         component: () => import('../views/LearnEngage/index.vue'),
         meta: { myName: 'LearnEngage' },
       },
+      // LearnEngage详情页面
+      {
+        path: '/Layout/LearnEngageInfo',
+        name: 'LearnEngageInfo',
+        component: () => import('../views/LearnEngage/info.vue'),
+        meta: { myName: 'LearnEngage' },
+      },
     ]
   }
 ]

web/src/views/LearnEngage/index.vue

@@ -27,7 +27,12 @@
     </div>
     <!-- 内容 -->
     <div class="conten">
-      <div class="row" v-for="item in data[pageSize - 1]" :key="item.id">
+      <div
+        class="row"
+        v-for="item in data[pageSize - 1]"
+        :key="item.id"
+        @click="toInfo(item.id)"
+      >
         <div class="left">
           <h3>{{ item.h3 }}</h3>
           <p>{{ item.p }}</p>
@@ -77,9 +82,16 @@ export default {
     },
   },
   methods: {
+    // 跳转到info页面
+    toInfo(id) {
+      this.$router.push({
+        name: "LearnEngageInfo",
+        query: { id, k:this.topId,m:this.pageSize},
+      });
+    },
     // 切换页码
-    pageChange(val){
-      this.pageSize=val
+    pageChange(val) {
+      this.pageSize = val;
       window.scrollTo({ top: 300, behavior: "smooth" });
     },
     skip(url) {
@@ -91,7 +103,6 @@ export default {
       // 拿到路由参数id
       this.topId = this.$route.params.id;
       let temp = LearnEngage[this.topId];
-      console.log("----", temp);
       // 判断有多少页
       this.pageNum = Math.ceil(temp.length / 8);
       let tempArrAll = [];
@@ -104,6 +115,11 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.getData();
+    // 记录分页
+    let mm =this.$route.query.m
+    if(mm){
+      this.pageSize =Number(mm)
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

web/src/views/LearnEngage/info.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="LearnEngageInfo">
+    <div class="ban"></div>
+    <!-- 面包屑 -->
+    <div class="pos">
+      <div>
+        <span class="pos1">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home">Home></Router-link>
+        <Router-link to="/Layout/LearnEngage/Students"
+          >Learn & Engage></Router-link
+        >
+        <Router-link :to="`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`"
+          >{{ mbTxt }}></Router-link
+        >
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div class="conten">
+      <div class="title">{{ dataObj.title }}</div>
+      <div class="info">
+        <span class="info1">{{ dataObj.time }}</span>
+        <span class="info2">{{ dataObj.loc }}</span>
+        <span class="info3">{{ dataObj.ren }}</span>
+      </div>
+      <div class="main">
+        <p v-html="dataObj.top" v-if="dataObj.top"></p>
+        <img :src="`/data/LearnEngage/in/${id}.jpg`" alt="" v-if="dataObj.imgShow!==0"/>
+        <div v-html="dataObj.txt"></div>
+      </div>
+      <div class="main bottom">
+        <div class="top">{{ dataObj.tipTime }}</div>
+        <div class="m2">
+          <img src="/data/LearnEngage/m-27.jpg" alt="" />
+          <p v-html="dataObj.tip"></p>
+        </div>
+        <div
+          class="back"
+          @click="$router.push(`/Layout/LearnEngage/${mbTxt}?m=${pageSize}`)"
+        >
+          Back
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// <p class='xx'></p> <p></p> <p><br /><br /></p>
+import { LearnEngage } from "../dataAll";
+export default {
+  name: "LearnEngageInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      mbTxt: "",
+      dataObj: {},
+      id: null,
+      pageSize: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取id和面包屑
+    let id = this.$route.query.id;
+    id = Number(id);
+    this.id = id;
+    this.mbTxt = this.$route.query.k;
+    // 获取数据
+    let temp = LearnEngage[this.mbTxt];
+    temp.forEach((v) => {
+      if (v.id === id) this.dataObj = v.info;
+    });
+    // 如果有分页
+    let mm = this.$route.query.m;
+    if (mm) {
+      this.pageSize = Number(mm);
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnEngageInfo {
+  background-color: #fff;
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/LearnEngage/topBan.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    width: 100%;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    height: 50px;
+    & > div {
+      padding-top: 12px;
+      height: 48px;
+      width: 1180px;
+      overflow: hidden;
+      zoom: 1;
+      margin: 0 auto;
+      & > span {
+        font-size: 12px;
+      }
+      & > a {
+        font-size: 12px;
+      }
+    }
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+  .conten {
+    padding-top: 35px;
+    width: 1180px;
+    margin: 0 auto;
+    .title {
+      font-size: 30px;
+      line-height: 44px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+    .info {
+      font-size: 14px;
+      line-height: 36px;
+      color: #666;
+      overflow: hidden;
+      zoom: 1;
+      margin-bottom: 20px;
+      & > span {
+        padding: 0 30px;
+        display: block;
+        float: left;
+        background: url("/data/LearnEngage/info1.png") left 8px no-repeat;
+      }
+      .info2 {
+        background: url("/data/LearnEngage/info2.png") left 8px no-repeat;
+      }
+      .info3 {
+        background: url("/data/LearnEngage/info3.png") left 8px no-repeat;
+      }
+    }
+    .main {
+      padding: 30px 0;
+      background: url("/data/LearnEngage/xian.png") left top no-repeat;
+      font-size: 18px;
+      line-height: 26px;
+      & > p {
+        /deep/ p{
+          font-size: 18px;
+          line-height: 26px;
+          color: #1f1d1d;
+          margin-bottom: 15px;
+        }
+        /deep/ .centen {
+          text-align: center;
+          font-size: 20px;
+          font-weight: 700;
+        }
+        /deep/ .xx {
+          font-size: 20px;
+          font-weight: 700;
+        }
+      }
+      /deep/img {
+        display: block;
+        margin: 20px auto;
+        max-height: 580px;
+      }
+      & > div {
+        /deep/ .xx {
+          font-size: 20px;
+          font-weight: 700;
+        }
+        /deep/ span {
+          font-style: italic;
+        }
+        /deep/ i {
+          font-size: 20px;
+          font-weight: 700;
+        }
+        /deep/ p {
+          font-size: 18px;
+          line-height: 26px;
+          color: #1f1d1d;
+          margin-bottom: 15px;
+        }
+      }
+    }
+    .bottom {
+      .top {
+        color: #fff;
+        padding-left: 400px;
+        width: 1200px;
+        height: 60px;
+        background: url("/data/LearnEngage/m-26.jpg");
+        font-size: 20px;
+        line-height: 60px;
+      }
+      .m2 {
+        width: 1200px;
+        font-size: 18px;
+        line-height: 26px;
+        color: #666;
+        padding-top: 20px;
+        & > img {
+          margin-bottom: 10px;
+          margin-left: 0;
+          margin-top: 0;
+        }
+      }
+    }
+    .back {
+      height: 38px;
+      width: 160px;
+      margin: 30px auto;
+      margin-bottom: 0;
+      border: 1px solid #000;
+      font-size: 16px;
+      line-height: 38px;
+      text-align: center;
+      font-weight: bold;
+      cursor: pointer;
+      display: block;
+      background: #f1f1f1;
+    }
+  }
+}
+</style>

web/src/views/layout/data.js

@@ -45,7 +45,7 @@ export const topData = [
   },
   {
     id: 5,
-    name: "Learn & Engage",
+    name: "LearnEngage",
     url: "LearnEngage/Students",
     children: [
       {url:'/Layout/LearnEngage/Students', id: 5.1, name: "For Students" },