up

webM/src/router/index.js

@@ -105,6 +105,42 @@ const routes = [
         component: () => import('../views/Collections/Detail.vue'),
         meta: { myTitle: 'Collections', topColor: '#656567' },
       },
+      // Learn页面
+      {
+        path: '/Layout/Learn',
+        name: 'Learn',
+        component: () => import('../views/Learn/index.vue'),
+        meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+        redirect: { name: 'LearnStudents' },
+        children: [
+          // 二级路由子页面
+          {
+            path: '/Layout/Learn/Students',
+            name: 'LearnStudents',
+            component: () => import('../views/Learn/Students.vue'),
+            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+          },
+          {
+            path: '/Layout/Learn/Adults',
+            name: 'LearnAdults',
+            component: () => import('../views/Learn/Adults.vue'),
+            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+          },
+          {
+            path: '/Layout/Learn/Families',
+            name: 'LearnFamilies',
+            component: () => import('../views/Learn/Families.vue'),
+            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+          },
+        ]
+      },
+      {
+        path: '/Layout/Learn/Info',
+        name: 'LearnInfo',
+        component: () => import('../views/Learn/info.vue'),
+        meta: { myTitle: 'Learn & Engage', topColor: '#764032' },
+      },
+
     ]
   }
 ]

webM/src/views/Collections/Detail.vue

@@ -60,6 +60,8 @@ export default {
     }
     .txt {
       padding: 20px 20px 40px;
+      background: url('../../assets/img/Collections/bgCD.png');
+      background-size: 100% 100%;
       & > h3 {
         padding: 0 0 0 30px;
         font-size: 22px;

webM/src/views/Exhibitions/Detail.vue

@@ -287,9 +287,8 @@ export default {
       zoom: 1;
       margin-bottom: 20px;
       & > span {
-        padding: 0 30px;
+        padding: 0 0px 0 30px;
         display: block;
-        float: left;
       }
       .info_1 {
         background: url("../../assets/img/bg_5.png") left 8px no-repeat;

webM/src/views/Layout/index.vue

@@ -196,12 +196,13 @@ export default {
           ],
         },
         {
+          acc:'Learn & Engage',
           name: "Learn & Engage",
           path: "",
           son: [
-            { name: "For Students", path: "" },
-            { name: "For Adults", path: "" },
-            { name: "For Families & Children", path: "" },
+            { name: "For Students", path: "/Layout/Learn/Students" },
+            { name: "For Adults", path: "/Layout/Learn/Adults" },
+            { name: "For Families & Children", path: "/Layout/Learn/Families" },
           ],
         },
         {
@@ -210,7 +211,7 @@ export default {
           son: [
             { name: "Magazines", path: "" },
             { name: "Exhibition Catalogues", path: "" },
-            { name: "Research", path: "" },
+            // { name: "Research", path: "" },
           ],
         },
         {

webM/src/views/Learn/Adults.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="LearnAdults">
+    <div class="main">
+      <div class="row" @click="skip(item.id)" v-for="(item, index) in data" :key="index">
+        <img v-lazy="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        <div class="txt" v-if="item.info">
+          <h3>{{item.info.title}}</h3>
+          <p>Date：{{item.info.time}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnAdults",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+        skip(id) {
+      this.$router.push({
+        name: "LearnInfo",
+        query: { id, k: "Adults" },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.data = LearnEngage.Adults;
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnAdults {
+  width: 100%;
+  .main {
+    width: 100%;
+    padding: 0px 20px 30px;
+    .row {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+      }
+      .txt{
+        padding: 15px;
+        &>h3{
+          font-size: 16px;
+        }
+        &>p{
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Learn/Families.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="LearnFamilies">
+    <div class="main">
+      <div class="row" @click="skip(item.id)" v-for="(item, index) in data" :key="index">
+        <img v-lazy="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        <div class="txt" v-if="item.info">
+          <h3>{{item.info.title}}</h3>
+          <p>Date：{{item.info.time}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnFamilies",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+        skip(id) {
+      this.$router.push({
+        name: "LearnInfo",
+        query: { id, k: "Families" },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.data = LearnEngage.Families;
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnFamilies {
+  width: 100%;
+  .main {
+    width: 100%;
+    padding: 0px 20px 30px;
+    .row {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+      }
+      .txt{
+        padding: 15px;
+        &>h3{
+          font-size: 16px;
+        }
+        &>p{
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Learn/Students.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="LearnStudents">
+    <div class="main">
+      <div
+        class="row"
+        @click="skip(item.id)"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <img v-lazy="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        <div class="txt" v-if="item.info">
+          <h3>{{ item.info.title }}</h3>
+          <p>Date：{{ item.info.time }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnStudents",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(id) {
+      this.$router.push({
+        name: "LearnInfo",
+        query: { id, k: "Students" },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.data = LearnEngage.Students;
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnStudents {
+  width: 100%;
+  .main {
+    width: 100%;
+    padding: 0px 20px 30px;
+    .row {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+      }
+      .txt {
+        padding: 15px;
+        & > h3 {
+          font-size: 16px;
+        }
+        & > p {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Learn/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="Learn">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerL.png" alt="" />
+    </div>
+    <div class="rowAll" :class="{ curSorll: menaSon }">
+      <div
+        @click="cutTab(item.path)"
+        class="row"
+        v-for="(item, index) in tabData"
+        :key="index"
+        :class="{ active: idMate === item.path }"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <Router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Learn",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      menaSon: false,
+      idMate: "/Layout/Learn/Students",
+      tabData: [
+        { name: "Students", path: "/Layout/Learn/Students" },
+        { name: "Adults", path: "/Layout/Learn/Adults" },
+        { name: "Families & Children", path: "/Layout/Learn/Families" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.idMate = this.$route.path;
+    },
+  },
+  //方法集合
+  methods: {
+    cutTab(path) {
+      this.$router.push(path).catch(() => {});
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.idMate = this.$route.path;
+  },
+  //生命周期 - 挂载完成（可以访问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>
+.Learn {
+  width: 100%;
+  background-color: #f7f6f3;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+  }
+  .rowAll {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #f7f6f3;
+    .row {
+      font-size: 16px;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 8px;
+    }
+    .active {
+      background-color: #c1aa7b;
+      border-radius: 15px;
+      color: #fff;
+    }
+  }
+  .curSorll {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+</style>

webM/src/views/Learn/info.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="LearnInfo">
+    <div class="ban">
+      <img src="@/assets/img/bannerLI.png" alt="" />
+      <h3>Learn & Engage</h3>
+    </div>
+    <div class="main">
+      <h3>{{ data.title }}</h3>
+      <div class="info">
+        <span class="info_1">{{ data.time }}</span>
+        <span class="info_2">{{ data.loc }}</span>
+        <span class="info_3">{{ data.ren }}</span>
+      </div>
+      <div class="txt">
+        <p v-html="data.top" v-if="data.top"></p>
+        <img
+          :src="`/data/LearnEngage/in/${$route.query.id}.jpg`"
+          alt=""
+          v-if="data.imgShow !== 0"
+        />
+        <div v-html="data.txt"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let { id, k } = this.$route.query;
+    id = Number(id);
+    let temp = LearnEngage[k];
+    temp.forEach((v) => {
+      if (v.id === id) this.data = v.info;
+    });
+    setTimeout(() => {
+      document.title = this.data.title;
+    }, 100);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnInfo {
+  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;
+    }
+  }
+  .main {
+    padding: 20px;
+    & > h3 {
+      font-size: 18px;
+      margin-bottom: 15px;
+    }
+    .info {
+      font-size: 14px;
+      line-height: 36px;
+      color: #666;
+      overflow: hidden;
+      zoom: 1;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 20px;
+      & > span {
+        padding: 0 0px 0 30px;
+        display: block;
+      }
+      .info_1 {
+        background: url("../../assets/img/bg_5.png") left 8px no-repeat;
+      }
+      .info_2 {
+        background: url("../../assets/img/bg_6.png") left 8px no-repeat;
+      }
+      .info_3 {
+        background: url("../../assets/img/bg_7.png") left 8px no-repeat;
+      }
+    }
+    .txt{
+      &>img{
+        width: 100%;
+        margin-bottom: 15px;
+      }
+      /deep/ p {
+        font-size: 14px;
+        color: #6A6A6A;
+        margin-bottom: 15px;
+        line-height: 18px;
+      }
+    }
+  }
+}
+</style>