up

webM/src/router/index.js

@@ -63,7 +63,7 @@ const routes = [
             component: () => import('../views/Exhibitions/Overseas.vue'),
             meta: { myTitle: 'Exhibitions', topColor: '#bf8a6d' },
           },
-       ]
+        ]
       },
       //---------- 详情
       {
@@ -146,7 +146,7 @@ const routes = [
         name: 'Publications',
         component: () => import('../views/Publications/index.vue'),
         meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
-        redirect: { name: 'LearnStudents' },
+        redirect: { name: 'PuMagazines' },
         children: [
           // 二级路由子页面
           {
@@ -161,7 +161,6 @@ const routes = [
             component: () => import('../views/Publications/Catalogues.vue'),
             meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
           },
-
         ]
       },
       // -------------info
@@ -178,7 +177,37 @@ const routes = [
         component: () => import('../views/Publications/lookPdf.vue'),
         meta: { myTitle: 'Publications', topColor: '#74120b' },
       },
-]
+      // Join & Support页面
+      {
+        path: '/Layout/Join',
+        name: 'Join',
+        component: () => import('../views/Join/index.vue'),
+        meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
+        redirect: { name: 'JoinVo' },
+        children: [
+          // 二级路由子页面
+          {
+            path: '/Layout/Join/Volunteer',
+            name: 'JoinVo',
+            component: () => import('../views/Join/Volunteer.vue'),
+            meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
+          },
+          {
+            path: '/Layout/Join/Give',
+            name: 'JoinGi',
+            component: () => import('../views/Join/Give.vue'),
+            meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
+          },
+        ]
+      },
+      // -------------info
+      {
+        path: '/Layout/Join/Info',
+        name: 'JoinInfo',
+        component: () => import('../views/Join/info.vue'),
+        meta: { myTitle: 'Join & Support', topColor: '#b37f52' },
+      },
+    ]
   }
 ]
 

webM/src/views/Join/Give.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="JoinGi">
+    <h3>Individuals</h3>
+    <p>
+      Since the establishment of Capital Museum, we have got sufficient supports
+      from people from all walks of life. Here we only give a few examples, and
+      we show our respect to all units and individuals who have supported the
+      development of Chinese museums and have given help and supports to Capital
+      Museum.
+    </p>
+    <p>
+      • Mr. Ma Chongren, son of Ma Lianliang, donated to Capital Museum the
+      costumes of Mr. Ma Lianliang used during his lifetime, scripts and other
+      precious opera relics.
+    </p>
+    <p>
+      • Mr. Suo Daming donated to Capital Museum the old Beijing's Courtyard
+      (Siheyuan) gates, street signs, doorplates, glass refrigerator (of the
+      late Qing Dynasty) and other large amount of relics recording the
+      development history of old Beijing.
+    </p>
+    <p>
+      • Guo Musun donated the 16mm movie camera (USA) and the 16mm movie
+      projector (USA) bought by his father Mr. Guo Chengen when he founded The
+      Crafts and Refining Energy Company of China (the predecessor of China's
+      chemical industry) in Shanghai.
+    </p>
+    <p>
+      • Jin Guangqun ( the famous editor of former Beijing Publishing House ),
+      the pioneer of the compilation of tourist maps of China, donated tourist
+      maps, 312 sets of books, including the tourist maps of Beijing's famous
+      parks in different years.
+    </p>
+    <p>
+      • Li Binsheng, a well-known folk artistand cartoonist, donated a western
+      bracket clock.
+    </p>
+    <h3>Corporations & Institutions</h3>
+    <p>
+      The century-old Beijing Match Factory donated to Capital Museum a large
+      number of files and real objects which record the development of Beijing's
+      light industry in modern history, including 518 sets of high standard real
+      samples of matches, 40 volumes data, and 3 volumes of text materials of
+      sparks, etc.
+    </p>
+    <div class="poh">
+      <h3>RELICS COLLECTING AND DONATING</h3>
+      <p>+86 (10) 63370488</p>
+      <p>+86 (10) 63363388 to extension 6223</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "JoinGi",
+  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>
+.JoinGi {
+  padding: 20px 20px 40px;
+  background: url("../../assets/img/Join/bgJ.png");
+  background-size: 100% 100%;
+  & > h3 {
+    margin-bottom: 15px;
+    padding-left: 30px;
+    color: #000000;
+    font-size: 18px;
+    background: url("../../assets/img/Layout/chosen.png") left center no-repeat;
+    background-size: 22px 18px;
+  }
+  & > p {
+    color: #6a6a6a;
+    font-size: 14px;
+    line-height: 16px;
+    margin-bottom: 15px;
+  }
+  .poh{
+    padding: 15px;
+    background-color: #c1aa7b;
+    border-radius: 5px;
+    color: #fff;
+    font-size: 16px;
+    &>h3{
+      margin-bottom: 15px;
+    }
+  }
+}
+</style>

webM/src/views/Join/Volunteer.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-touch
+    class="JoinVo"
+    @swipeleft="moveSwiper(1)"
+    @swiperight="moveSwiper(0)"
+  >
+    <div
+      @click="skip(item.id)"
+      class="row"
+      :class="{ active: index === imgInd }"
+      v-for="(item, index) in imgList"
+      :key="index"
+    >
+      <!-- <p>{{ item.name }}</p> -->
+      <img
+        :src="require(`@/assets/img/Join/${item.id}.png`)" alt=""
+      />
+    </div>
+  </v-touch>
+</template>
+
+<script>
+export default {
+  name: "JoinVo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      imgInd: 0,
+      imgList: [
+        { id: 1, name: "Volunteer Team Introduction" },
+        { id: 2, name: "Volunteer Apply" },
+        { id: 3, name: "Volunteer Program" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(id) {
+      this.$router.push({
+        name: "JoinInfo",
+        query: { id },
+      });
+    },
+    moveSwiper(val) {
+      if (val === 1) {
+        // +
+        if (this.imgInd === this.imgList.length - 1) this.imgInd = 0;
+        else this.imgInd++;
+      } else {
+        // -
+        if (this.imgInd === 0) this.imgInd = this.imgList.length - 1;
+        else this.imgInd--;
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.JoinVo {
+  padding: 20px 0 40px;
+  background-color: #f7f6f3;
+  .row {
+    transition: all 0.3s;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    opacity: 0;
+    height: 0;
+    &>img{
+      width: 100%;
+    }
+  }
+  .active {
+    opacity: 1;
+    height: auto;
+  }
+}
+</style>

webM/src/views/Join/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="Join">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerJ.png" alt="" />
+      <h3>Join & Support</h3>
+    </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: "Join",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      menaSon: false,
+      idMate: "/Layout/Join/Volunteer",
+      tabData: [
+        { name: "Ways to Volunteer ", path: "/Layout/Join/Volunteer" },
+        { name: "Ways to Give ", path: "/Layout/Join/Give" },
+      ],
+    };
+  },
+  //监听属性 类似于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>
+.Join {
+  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;
+    }
+  }
+  .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/Join/info.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="JoinInfo">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerJ.png" alt="" />
+      <h3>Join & Support</h3>
+    </div>
+    <div class="main">
+      <h3>{{data.h3}}</h3>
+      <div class="txt" v-html="data.txt"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Volunteer } from "./data";
+export default {
+  name: "JoinInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      menaSon: false,
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let id = this.$route.query.id;
+    id = Number(id);
+    Volunteer.forEach((v) => {
+      if (v.id === id) this.data = v;
+    });
+    console.log(id);
+    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>
+.JoinInfo {
+  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:30px 20px;
+    background: url('../../assets/img/Join/bgD.png');
+    background-size: 100% 100%;
+    & > h3 {
+      margin-bottom: 15px;
+      padding-left: 30px;
+      color: #000000;
+      font-size: 18px;
+      background: url("../../assets/img/Layout/chosen.png") left center
+        no-repeat;
+      background-size: 22px 18px;
+    }
+    .txt{
+      /deep/p{
+        font-size: 14px;
+        color: #6A6A6A;
+        line-height: 16px;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Layout/index.vue

@@ -48,7 +48,7 @@
           <div
             :class="{
               active: index === 4 || index === 6,
-              accOne: $route.meta.myTitle === item.acc,
+              accOne: $route.meta.myTitle === item.name,
             }"
             @click="menaSonFu(index, item.path)"
             class="row"
@@ -57,7 +57,7 @@
           >
             <span>{{ item.name }}</span>
             <template
-              v-if="menaSon === index || $route.meta.myTitle === item.acc"
+              v-if="menaSon === index || $route.meta.myTitle === item.name"
             >
               <div
                 class="rowSon"
@@ -135,7 +135,6 @@ export default {
       meanPage: true,
       menaData: [
         {
-          acc: "Visit",
           name: "Visit",
           path: "",
           son: [
@@ -149,7 +148,6 @@ export default {
           ],
         },
         {
-          acc: "Exhibitions",
           name: "Exhibitions",
           path: "",
           son: [
@@ -170,7 +168,6 @@ export default {
         },
         {
           name: "Collections",
-          acc: "Collections",
           path: "/Layout/Collections",
           son: [
             { name: "Bronzes", path: "/Layout/Collections/Bronzes" },
@@ -196,7 +193,6 @@ export default {
           ],
         },
         {
-          acc:'Learn & Engage',
           name: "Learn & Engage",
           path: "",
           son: [
@@ -206,7 +202,6 @@ export default {
           ],
         },
         {
-          acc:'Publications',
           name: "Publications",
           path: "",
           son: [
@@ -219,8 +214,8 @@ export default {
           name: "Join & Support",
           path: "",
           son: [
-            { name: "Ways to Volunteer", path: "" },
-            { name: "Ways to Give", path: "" },
+            { name: "Ways to Volunteer", path: "/Layout/Join/Volunteer" },
+            { name: "Ways to Give", path: "/Layout/Join/Give" },
           ],
         },
         {