up

web/src/router/index.js

@@ -89,7 +89,13 @@ const routes = [
         component: () => import('../views/Collections/index.vue'),
         meta: { myName: 'Collections' },
       },
-
+      // LearnEngage页面
+      {
+        path: '/Layout/LearnEngage/:id',
+        name: 'LearnEngage',
+        component: () => import('../views/LearnEngage/index.vue'),
+        meta: { myName: 'LearnEngage' },
+      },
     ]
   }
 ]

web/src/views/Collections/index.vue

@@ -5,7 +5,7 @@
     <div class="pos">
       <span class="pos1">Your Position:&nbsp;</span>
       <Router-link to="/Layout/Home">Home></Router-link>
-      <Router-link to="/Layout/Collections">Collections></Router-link>
+      <Router-link to="/Layout/Collections/Bronzes">Collections></Router-link>
       <span>{{ mbTxt }}></span>
     </div>
     <!-- 内容 -->

web/src/views/LearnEngage/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="LearnEngage">
+    <div class="ban"></div>
+    <div class="nav_2">
+      <ul>
+        <li
+          :class="{ cur: topId === item.url }"
+          v-for="(item, index) in topLi"
+          :key="index"
+          @click="skip(item.url)"
+        >
+          <img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
+          <p>{{ item.name }}</p>
+        </li>
+      </ul>
+    </div>
+    <!-- 面包屑 -->
+    <div class="pos">
+      <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
+      >
+      <span
+        >For {{ topId === "Families" ? "Families & Children" : topId }}></span
+      >
+    </div>
+    <!-- 内容 -->
+    <div class="conten">
+      <div class="row" v-for="item in data[pageSize - 1]" :key="item.id">
+        <div class="left">
+          <h3>{{ item.h3 }}</h3>
+          <p>{{ item.p }}</p>
+          <h4 v-html="item.h4"></h4>
+        </div>
+        <div class="right">
+          <img :src="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        </div>
+      </div>
+      <!-- 分页 -->
+      <div class="page">
+        <span
+          :class="{ active: pageSize === i }"
+          v-for="i in pageNum"
+          :key="i"
+          @click="pageChange(i)"
+          >{{ i }}</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "@/views/dataAll";
+export default {
+  name: "LearnEngage",
+  components: {},
+  data() {
+    return {
+      topId: "Students",
+      topLi: [
+        { name: "For Students", url: "Students" },
+        { name: "For Adults", url: "Adults" },
+        { name: "For Families & Children", url: "Families" },
+      ],
+      data: [],
+      pageNum: 0,
+      pageSize: 1,
+    };
+  },
+  computed: {},
+  watch: {
+    // 监听地址栏参数变化
+    $route() {
+      this.getData();
+    },
+  },
+  methods: {
+    // 切换页码
+    pageChange(val){
+      this.pageSize=val
+      window.scrollTo({ top: 300, behavior: "smooth" });
+    },
+    skip(url) {
+      this.$router.push(url).catch(() => {});
+    },
+    // 封装一个处理数据的方法
+    getData() {
+      this.pageSize = 1;
+      // 拿到路由参数id
+      this.topId = this.$route.params.id;
+      let temp = LearnEngage[this.topId];
+      console.log("----", temp);
+      // 判断有多少页
+      this.pageNum = Math.ceil(temp.length / 8);
+      let tempArrAll = [];
+      for (let i = 0; i < this.pageNum; i++) {
+        tempArrAll.push(temp.slice(i * 8, (i + 1) * 8));
+      }
+      this.data = tempArrAll;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getData();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnEngage {
+  background-color: #fff;
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/LearnEngage/topBan.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .nav_2 {
+    width: 100%;
+    padding-bottom: 8px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > ul {
+      display: flex;
+      width: 1180px;
+      margin: 0 auto;
+      & > li {
+        background: #f1f1f1;
+        cursor: pointer;
+        width: 168px;
+        height: 108px;
+        text-align: center;
+        & > img {
+          margin-top: 25px;
+          // width: 49px;
+          // height: 39px;
+        }
+        & > p {
+          margin-top: 5px;
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+      .cur {
+        background: url("../../assets/images/Visit/bg_1.jpg") center top
+          no-repeat #f1f1f1;
+      }
+    }
+  }
+  .pos {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+  .conten {
+    width: 1178px;
+    margin: 0 auto;
+    .row {
+      cursor: pointer;
+      padding: 20px;
+      border: solid 1px #c7c7c7;
+      border-right: 0;
+      height: 295px;
+      margin-bottom: 20px;
+      .left {
+        width: 730px;
+        float: left;
+        & > h3 {
+          font-weight: 700;
+          font-size: 18px;
+          line-height: 22px;
+        }
+        & > p {
+          color: #a5a5a5;
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: normal;
+          padding: 10px 0 40px 0;
+        }
+        & > h4 {
+          font-size: 14px;
+          line-height: 24px;
+          font-weight: 700;
+        }
+      }
+      .right {
+        width: 375px;
+        float: right;
+        & > img {
+          width: 375px;
+          height: 255px;
+          object-fit: cover;
+        }
+      }
+    }
+    .page {
+      display: flex;
+      justify-content: center;
+      padding-bottom: 30px;
+      & > span {
+        margin-right: 8px;
+        cursor: pointer;
+      }
+      .active {
+        color: #bf2323;
+      }
+    }
+  }
+}
+</style>