up

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

@@ -164,6 +164,20 @@ const routes = [
 
         ]
       },
+      // -------------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' },
+      },
 ]
   }
 ]

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/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,42 @@
+<template>
+  <div class="lookPdf">lookPdf</div>
+</template>
+
+<script>
+export default {
+  name: "lookPdf",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 隐藏底部
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let dom = document.querySelector(".Layout .bottom");
+        dom.style.display = "none";
+      }, 100);
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+</style>