Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/ShouBo

webM/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "pdfh5": "^1.4.2",
         "vant": "^2.12.47",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0",
@@ -9612,6 +9613,11 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/pdfh5": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/pdfh5/-/pdfh5-1.4.2.tgz",
+      "integrity": "sha512-1BL8HIx/EEZowRPBgas7/WokbGEv1gxKNRmmHSimG113178mKxIBH4pxWBc0tj6d25Sy+EwnlQwv9cUUmQa42w=="
+    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",
@@ -22210,6 +22216,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "pdfh5": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmmirror.com/pdfh5/-/pdfh5-1.4.2.tgz",
+      "integrity": "sha512-1BL8HIx/EEZowRPBgas7/WokbGEv1gxKNRmmHSimG113178mKxIBH4pxWBc0tj6d25Sy+EwnlQwv9cUUmQa42w=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz",

webM/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "pdfh5": "^1.4.2",
     "vant": "^2.12.47",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

webM/src/components/card.vue

@@ -3,19 +3,32 @@
   <div :class="`cardCom ${keyval}`">
     <div
       class="row"
-      @click="cutInfo"
       v-for="(item, index) in cardData"
       :key="index"
       :style="`top:${index * 15}px;width:${100 - index * 5}%;opacity:${
         1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
       }; z-index: ${cardData.length - index};`"
     >
-      <img :src="info.cover" alt="" />
-      <span class="page" v-if="index === 0">{{ cardInd + 1 }} / {{cardData.length}}</span>
-      <div class="txt" v-if="index === 0">
+      <v-touch
+        tag="img"
+        @swipeleft="moveSwiper(1)"
+        @swiperight="moveSwiper(0)"
+        :src="info.cover"
+        alt=""
+        v-if="index === 0"
+      />
+      <span class="page" v-if="index === 0"
+        >{{ cardInd + 1 }} / {{ cardData.length }}</span
+      >
+      <v-touch
+        class="txt"
+        @swipeleft="moveSwiper(1)"
+        @swiperight="moveSwiper(0)"
+        v-if="index === 0"
+      >
         <h3>{{ info.h3 }}</h3>
         <p v-html="info.p"></p>
-      </div>
+      </v-touch>
     </div>
   </div>
 </template>
@@ -47,12 +60,20 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    cutInfo() {
+    // 封装一个滑动的方法
+    moveSwiper(val) {
       let dom = document.querySelector(`.${this.keyval}`);
       dom.style.opacity = 0;
       setTimeout(() => {
-        if (this.cardInd < this.cardData.length - 1) this.cardInd++;
-        else this.cardInd = 0;
+        if (val === 0) {
+          // 右滑减小
+          if (this.cardInd === 0) this.cardInd = this.cardData.length - 1;
+          else this.cardInd--;
+        } else {
+          //左滑增加
+          if (this.cardInd < this.cardData.length - 1) this.cardInd++;
+          else this.cardInd = 0;
+        }
         this.info = this.cardData[this.cardInd];
         dom.style.opacity = 1;
       }, 300);
@@ -115,17 +136,19 @@ export default {
     flex-direction: column;
     & > img {
       width: 100%;
+      height: 254px;
+      object-fit: cover;
     }
     .page {
       position: absolute;
       font-weight: 700;
       right: 5px;
       bottom: 5px;
-      font-size: 16px;
+      font-size: 14px;
     }
 
     .txt {
-      height: 250px;
+      height: 260px;
       overflow-y: auto;
       padding: 20px 20px 0;
       & > h3 {

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,10 +161,53 @@ const routes = [
             component: () => import('../views/Publications/Catalogues.vue'),
             meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
           },
-
         ]
       },
-]
+      // -------------info
+      {
+        path: '/Layout/Publications/Info',
+        name: 'PublicationsInfo',
+        component: () => import('../views/Publications/info.vue'),
+        meta: { myTitle: 'Publications', topColor: 'rgba(110,148,141,.9)' },
+      },
+      //pdf
+      {
+        path: '/Layout/Publications/Pdf',
+        name: 'PublicationsPdf',
+        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/Exhibitions/Detail.vue

@@ -19,7 +19,6 @@
         <div class="card">
           <div
             class="row"
-            @click="cutInfo"
             v-for="(item, index) in data.page"
             :key="index"
             :style="`top:${index * 15}px;width:${100 - index * 5}%;opacity:${
@@ -29,10 +28,15 @@
             <span class="page" v-if="index === 0"
               >{{ cardInd + 1 }} / {{ data.page.length }}</span
             >
-            <div class="txt" v-if="index === 0">
+            <v-touch
+              class="txt"
+              v-if="index === 0"
+              @swipeleft="OverSwiper(1)"
+              @swiperight="OverSwiper(0)"
+            >
               <h3>{{ info.tit }}</h3>
               <div v-html="info.article"></div>
-            </div>
+            </v-touch>
           </div>
         </div>
       </div>
@@ -134,25 +138,25 @@ export default {
     },
     // Over的滑动
     // 封装一个滑动的方法
-    // OverSwiper(val) {
-    //   let dom = document.querySelector(".card");
-    //   let domScroll = document.querySelector(".txt");
-    //   domScroll.scrollTo({ top: 0 });
-    //   dom.style.opacity = 0;
-    //   setTimeout(() => {
-    //     if (val === 0) {
-    //       // 右滑减小
-    //       if (this.cardInd === 0) this.cardInd = this.data.page.length - 1;
-    //       else this.cardInd--;
-    //     } else {
-    //       //左滑增加
-    //       if (this.cardInd < this.data.page.length - 1) this.cardInd++;
-    //       else this.cardInd = 0;
-    //     }
-    //     this.info = this.data.page[this.cardInd];
-    //     dom.style.opacity = 1;
-    //   }, 300);
-    // },
+    OverSwiper(val) {
+      let dom = document.querySelector(".card");
+      let domScroll = document.querySelector(".txt");
+      domScroll.scrollTo({ top: 0 });
+      dom.style.opacity = 0;
+      setTimeout(() => {
+        if (val === 0) {
+          // 右滑减小
+          if (this.cardInd === 0) this.cardInd = this.data.page.length - 1;
+          else this.cardInd--;
+        } else {
+          //左滑增加
+          if (this.cardInd < this.data.page.length - 1) this.cardInd++;
+          else this.cardInd = 0;
+        }
+        this.info = this.data.page[this.cardInd];
+        dom.style.opacity = 1;
+      }, 300);
+    },
     imgLook(url) {
       ImagePreview({
         images: [url],
@@ -168,19 +172,19 @@ export default {
       if (this.ObjInd === 1) this.ObjInd = this.ObjLength;
       else this.ObjInd--;
     },
-    cutInfo() {
-      if (this.data.page.length <= 1) return;
-      let dom = document.querySelector(".card");
-      let domScroll = document.querySelector(".txt");
-      domScroll.scrollTo({ top: 0 });
-      dom.style.opacity = 0;
-      setTimeout(() => {
-        if (this.cardInd < this.data.page.length - 1) this.cardInd++;
-        else this.cardInd = 0;
-        this.info = this.data.page[this.cardInd];
-        dom.style.opacity = 1;
-      }, 300);
-    },
+    // cutInfo() {
+    //   if (this.data.page.length <= 1) return;
+    //   let dom = document.querySelector(".card");
+    //   let domScroll = document.querySelector(".txt");
+    //   domScroll.scrollTo({ top: 0 });
+    //   dom.style.opacity = 0;
+    //   setTimeout(() => {
+    //     if (this.cardInd < this.data.page.length - 1) this.cardInd++;
+    //     else this.cardInd = 0;
+    //     this.info = this.data.page[this.cardInd];
+    //     dom.style.opacity = 1;
+    //   }, 300);
+    // },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -406,7 +410,7 @@ export default {
     /deep/.van-swipe__indicator--active {
       background-color: #fff;
     }
-    .bottImg{
+    .bottImg {
       width: 100%;
       height: 250px;
       object-fit: cover;

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" },
           ],
         },
         {

webM/src/views/Publications/Catalogues.vue

@@ -1,43 +1,150 @@
 <template>
-<div class='PuCatalogues'>PuCatalogues</div>
+  <div class="PuCatalogues">
+    <div class="card">
+      <span class="page">{{ infoInd + 1 }} / {{ imgList.length }}</span>
+      <div
+        class="row"
+        v-for="(item, index) in imgList"
+        :key="item.id"
+        :style="`left:${index * 15}px;height:${100 - index * 5}%;opacity:${
+          1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
+        }; z-index: ${imgList.length - index};`"
+      >
+        <v-touch
+          @click.native="toPdf(info.id)"
+          v-if="index === 0"
+          tag="img"
+          @swipeleft="moveSwiper(1)"
+          @swiperight="moveSwiper(0)"
+          :src="info.imgUrl"
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-name:'PuCatalogues',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "PuCatalogues",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      imgList: [
+        {
+          id: 1,
+          imgUrl: "/data/Publications/Exhibition/1.jpg",
+          name: "A_brief_history_of_Beijing.pdf",
+        },
+        {
+          id: 2,
+          imgUrl: "/data/Publications/Exhibition/2.jpg",
+          name: "Geneva.pdf",
+        },
+        {
+          id: 3,
+          imgUrl: "/data/Publications/Exhibition/3.jpg",
+          name: "Renaissance.pdf",
+        },
+        {
+          id: 4,
+          imgUrl: "/data/Publications/Exhibition/4.jpg",
+          name: "TheMetropolisesandtheProsperities.pdf",
+        },
+        {
+          id: 5,
+          imgUrl: "/data/Publications/Exhibition/5.jpg",
+          name: "Andes.pdf",
+        },
+        {
+          id: 6,
+          imgUrl: "/data/Publications/Exhibition/6.jpg",
+          name: "smileofkhmer.pdf",
+        },
+      ],
+      info: {},
+      infoInd: 0,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    toPdf(id) {
+      this.$router.push({
+        name: "PublicationsPdf",
+        query: { id },
+      });
+    },
+    // 封装一个滑动的方法
+    moveSwiper(val) {
+      let dom = document.querySelector(".card");
+      dom.style.opacity = 0;
+      setTimeout(() => {
+        if (val === 0) {
+          // 右滑减小
+          if (this.infoInd === 0) this.infoInd = this.imgList.length - 1;
+          else this.infoInd--;
+        } else {
+          //左滑增加
+          if (this.infoInd < this.imgList.length - 1) this.infoInd++;
+          else this.infoInd = 0;
+        }
+        this.info = this.imgList[this.infoInd];
+        dom.style.opacity = 1;
+      }, 300);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.info = this.imgList[this.infoInd];
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.PuCatalogues {
+  background-color: #f7f6f3;
+  padding: 20px 20px 40px;
+  .card {
+    width: 100%;
+    height: 400px;
+    position: relative;
+    transition: all 0.3s;
+    .page {
+      position: absolute;
+      font-weight: 700;
+      right: 0px;
+      bottom: 0px;
+      font-size: 14px;
+    }
+    .row {
+      border-radius: 8px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 80%;
+      height: 400px;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      & > img {
+        border-radius: 8px;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Publications/Magazines.vue

@@ -149,20 +149,42 @@
       <div class="xian">
         <div
           class="xian_son"
-          @click="xianInd = item"
-          :class="{ active: item === xianInd }"
-          v-for="item in xian"
+          @click="dateInd = item"
+          :class="{ active: item === dateInd }"
+          v-for="item in dateData"
           :key="item"
         >
           <div></div>
           <p>{{ item }}</p>
         </div>
       </div>
+      <!-- 书籍卡片 -->
+      <div class="card">
+        <div
+          class="row"
+          v-for="(item, index) in imgList"
+          :key="item.id"
+          :style="`left:${index * 15}px;height:${100 - index * 5}%;opacity:${
+            1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
+          }; z-index: ${imgList.length - index};`"
+        >
+          <v-touch
+            @click.native="toInfo(info.id)"
+            v-if="index === 0"
+            tag="img"
+            @swipeleft="moveSwiper(1)"
+            @swiperight="moveSwiper(0)"
+            :src="info.imgUrl"
+            alt=""
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { Magazines } from "./data";
 export default {
   name: "PuMagazines",
   components: {},
@@ -171,18 +193,55 @@ export default {
     return {
       box1Show: false,
       box2Show: false,
-      xianInd: "2021",
-      xian: ["2021", "2020", "2019", "2018", "2017"],
+      dateInd: 2021,
+      dateData: [2021, 2020, 2019, 2018, 2017],
+      imgList: [],
+      info: {},
+      infoInd: 0,
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    dateInd(val) {
+      this.imgList = Magazines[val];
+      this.infoInd = 0;
+      this.info = this.imgList[this.infoInd];
+    },
+  },
   //方法集合
-  methods: {},
+  methods: {
+    toInfo(id) {
+      this.$router.push({
+        name: "PublicationsInfo",
+        query: { id },
+      });
+    },
+    // 封装一个滑动的方法
+    moveSwiper(val) {
+      let dom = document.querySelector(".card");
+      dom.style.opacity = 0;
+      setTimeout(() => {
+        if (val === 0) {
+          // 右滑减小
+          if (this.infoInd === 0) this.infoInd = this.imgList.length - 1;
+          else this.infoInd--;
+        } else {
+          //左滑增加
+          if (this.infoInd < this.imgList.length - 1) this.infoInd++;
+          else this.infoInd = 0;
+        }
+        this.info = this.imgList[this.infoInd];
+        dom.style.opacity = 1;
+      }, 300);
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.imgList = Magazines[this.dateInd];
+    this.info = this.imgList[this.infoInd];
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -197,6 +256,8 @@ export default {
 <style lang='less' scoped>
 .PuMagazines {
   padding: 0 20px 40px;
+  background: url("../../assets/img/bgPu.png");
+  background-size: 100% 100%;
   .more {
     margin: 40px auto;
     width: 117px;
@@ -306,6 +367,30 @@ export default {
         }
       }
     }
+    .card {
+      margin-top: 60px;
+      margin-bottom: 20px;
+      width: 100%;
+      height: 400px;
+      position: relative;
+      transition: all 0.3s;
+      .row {
+        border-radius: 8px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 80%;
+        height: 400px;
+        background: url("../../assets/img/PuBc.jpg");
+        background-size: 100% 100%;
+        & > img {
+          border-radius: 8px;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
   }
 }
 </style>

webM/src/views/Publications/info.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="PuInfo">
+    <div class="top">
+      <img :src="info.imgUrl" alt="" />
+      <p>{{ info.p }}</p>
+    </div>
+    <div class="main" v-html="info.txt"></div>
+  </div>
+</template>
+
+<script>
+import { Magazines } from "./data";
+export default {
+  name: "PuInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      info: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    let id = this.$route.query.id;
+    id = Number(id);
+    for (let k in Magazines) {
+      Magazines[k].forEach((v) => {
+        if (v.id === id) this.info = v;
+      });
+    }
+    setTimeout(() => {
+      // 设置title
+      document.title = this.info.p;
+    }, 100);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.PuInfo {
+  width: 100%;
+  .top {
+    width: 100%;
+    position: relative;
+    & > img {
+      width: 100%;
+    }
+    & > p {
+      font-size: 18px;
+      font-weight: 700;
+      color: #fff;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      text-align: center;
+      padding: 15px 0;
+      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0));
+    }
+  }
+  .main {
+    padding: 30px 20px;
+    background: url('../../assets/img/bgPuD.png');
+    background-size: 100% 100%;
+    /deep/ p {
+      font-size: 14px;
+      color: #6a6a6a;
+      line-height: 16px;
+      margin-bottom: 15px;
+    }
+    /deep/ span {
+      font-weight: 700;
+      color: black;
+    }
+    /deep/ i {
+      color: #d2b986;
+      font-style: normal;
+    }
+  }
+  /deep/.main .one:nth-of-type(1) {
+    color: black;
+    font-weight: 700;
+    font-size: 18px;
+    padding-left: 30px;
+    background: url("../../assets/img/Layout/chosen.png") left center no-repeat;
+    background-size: 22px 18px;
+  }
+  /deep/.main .one:nth-of-type(2) {
+    padding-left: 30px;
+    font-size: 18px;
+    color: black;
+    font-weight: 700;
+    margin-top: -12px;
+  }
+}
+</style>

webM/src/views/Publications/lookPdf.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="lookPdf">
+    <div id="pdf"></div>
+  </div>
+</template>
+
+<script>
+import Pdfh5 from "pdfh5";
+import "pdfh5/css/pdfh5.css";
+export default {
+  name: "lookPdf",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      imgList: [
+        {
+          id: 1,
+          imgUrl: "/data/Publications/Exhibition/1.jpg",
+          name: "A_brief_history_of_Beijing.pdf",
+        },
+        {
+          id: 2,
+          imgUrl: "/data/Publications/Exhibition/2.jpg",
+          name: "Geneva.pdf",
+        },
+        {
+          id: 3,
+          imgUrl: "/data/Publications/Exhibition/3.jpg",
+          name: "Renaissance.pdf",
+        },
+        {
+          id: 4,
+          imgUrl: "/data/Publications/Exhibition/4.jpg",
+          name: "TheMetropolisesandtheProsperities.pdf",
+        },
+        {
+          id: 5,
+          imgUrl: "/data/Publications/Exhibition/5.jpg",
+          name: "Andes.pdf",
+        },
+        {
+          id: 6,
+          imgUrl: "/data/Publications/Exhibition/6.jpg",
+          name: "smileofkhmer.pdf",
+        },
+      ],
+      info: {},
+      loding: true,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取id
+    let id = this.$route.query.id;
+    id = Number(id);
+    this.imgList.forEach((v) => {
+      if (v.id === id) this.info = v;
+    });
+    // 隐藏底部
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let dom = document.querySelector(".Layout .bottom");
+        dom.style.display = "none";
+        document.title = this.info.name;
+      }, 100);
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    new Pdfh5("#pdf", {
+      pdfurl: `/data/Pdf/${this.info.id}.pdf`,
+      goto: 1,
+      lazy: true,
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    let dom = document.querySelector(".Layout .bottom");
+    dom.style.display = "";
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.lookPdf {
+  position: relative;
+  padding-top: 50px;
+  width: 100vw;
+  height: 100vh;
+}
+</style>