up

webM/src/components/card.vue

@@ -11,7 +11,7 @@
       }; z-index: ${cardData.length - index};`"
     >
       <img :src="info.cover" alt="" />
-      <span class="page" v-if="index === 0">{{ cardInd + 1 }}</span>
+      <span class="page" v-if="index === 0">{{ cardInd + 1 }} / {{cardData.length}}</span>
       <div class="txt" v-if="index === 0">
         <h3>{{ info.h3 }}</h3>
         <p v-html="info.p"></p>
@@ -125,7 +125,7 @@ export default {
     }
 
     .txt {
-      height: 260px;
+      height: 250px;
       overflow-y: auto;
       padding: 20px 20px 0;
       & > h3 {

webM/src/main.js

@@ -8,6 +8,13 @@ import './assets/base.css'
 import Vant from 'vant';
 import 'vant/lib/index.css';
 Vue.use(Vant);
+// 图片懒加载
+import { Lazyload } from 'vant';
+Vue.use(Lazyload,{
+  lazyComponent: true,
+  error: require('./assets/img/IMGerror.png'),
+  loading: require('./assets/img/loading.gif')
+})
 // 导入手指滑动事件
 import VueTouch from 'vue-touch'
 Vue.use(VueTouch, {name: 'v-touch'})

webM/src/router/index.js

@@ -72,6 +72,20 @@ const routes = [
         component: () => import('../views/Exhibitions/Detail.vue'),
         meta: { myTitle: 'Exhibitions Detail', topColor: '#801c20' },
       },
+      // ----------Objects
+      {
+        path: '/Layout/Objects',
+        name: 'ExObjects',
+        component: () => import('../views/Exhibitions/Objects.vue'),
+        meta: { myTitle: 'Exhibitions Objects', topColor: '#801c20' },
+      },
+      // ----------Galleries
+      {
+        path: '/Layout/Galleries',
+        name: 'ExGalleries',
+        component: () => import('../views/Exhibitions/Galleries.vue'),
+        meta: { myTitle: 'Exhibitions Galleries', topColor: '#801c20' },
+      },
     ]
   }
 ]

webM/src/views/Exhibitions/Detail.vue

@@ -2,7 +2,7 @@
   <div class="ExDetail">
     <div class="topImg">
       <img
-        :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
+        :src="`/data/Exhibitions/${dataUrl}/${data.topImg}${data.imgLast}`"
         alt=""
       />
     </div>
@@ -29,7 +29,9 @@
               1 - index * 0.2 <= 0 ? 0.1 : 1 - index * 0.2
             }; z-index: ${data.page.length - index};`"
           >
-            <span class="page" v-if="index === 0">{{ cardInd + 1 }}</span>
+            <span class="page" v-if="index === 0"
+              >{{ cardInd + 1 }} / {{ data.page.length }}</span
+            >
             <div class="txt" v-if="index === 0">
               <h3>{{ info.tit }}</h3>
               <div v-html="info.article"></div>
@@ -61,7 +63,7 @@
             />
           </div>
         </v-touch>
-        <div class="more" @click="$router.push('/Layout/VisitInfo')">
+        <div class="more" v-if="data.objects > 9" @click="toMore1">
           See More
         </div>
         <div class="xianlu"></div>
@@ -69,15 +71,21 @@
       <!-- 4 -->
       <div class="box4" v-if="data.galleries">
         <div class="title">Exhibition Galleries</div>
-        <div class="swiper-container">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide" v-for="i in GalLength" :key="i">
-              <img
-                :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
-                alt=""
-              />
-            </div>
-          </div>
+        <van-swipe :loop="false">
+          <van-swipe-item v-for="i in GalLength" :key="i">
+            <img
+              @click="
+                imgLook(
+                  `/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`
+                )
+              "
+              :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
+              alt=""
+            />
+          </van-swipe-item>
+        </van-swipe>
+        <div class="more" v-if="data.galleries > 5" @click="toMore2">
+          See More
         </div>
       </div>
     </div>
@@ -111,6 +119,19 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 查看更多
+    toMore1() {
+      this.$router.push({
+        name: "ExObjects",
+        query: { id: this.$route.query.id, k: this.$route.query.k },
+      });
+    },
+    toMore2() {
+      this.$router.push({
+        name: "ExGalleries",
+        query: { id: this.$route.query.id, k: this.$route.query.k },
+      });
+    },
     // Over的滑动
     // 封装一个滑动的方法
     // OverSwiper(val) {
@@ -133,7 +154,6 @@ export default {
     //   }, 300);
     // },
     imgLook(url) {
-      console.log(url);
       ImagePreview({
         images: [url],
         closeable: true,
@@ -192,7 +212,6 @@ export default {
         this.info = tempArr[0];
       }, 300);
     });
-
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -226,12 +245,13 @@ export default {
     width: 100%;
     & > img {
       width: 100%;
-      height: 300px;
       object-fit: cover;
     }
   }
   .main {
     padding: 20px 0;
+    background: url("../../assets/img/bgExD.png");
+    background-size: 100% 100%;
     .title {
       height: 30px;
       line-height: 30px;
@@ -370,11 +390,15 @@ export default {
     }
   }
   .box4 {
+    padding-bottom: 20px;
     .title {
       width: calc(100% - 40px);
       margin: 0 auto;
       margin-bottom: 20px;
     }
+    /deep/.van-swipe__indicator--active {
+      background-color: #fff;
+    }
   }
 }
 </style>

webM/src/views/Exhibitions/Galleries.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="ExGalleries">
+    <div class="topImg">
+      <div>
+        <h3>Exhibition Galleries</h3>
+      </div>
+      <img
+        :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
+        alt=""
+      />
+    </div>
+    <!-- 内容 -->
+    <div class="main">
+      <div class="row" v-for="i in data.galleries" :key="i">
+        <img
+          @click="
+            imgLook(
+              `/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`
+            )
+          "
+          v-lazy="
+            `/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`
+          "
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from "vant";
+import { dataAll } from "./dataAll";
+export default {
+  name: "ExGalleries",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      dataUrl: "",
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    imgLook(url) {
+      ImagePreview({
+        images: [url],
+        closeable: true,
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let { id, k } = this.$route.query;
+    id = Number(id);
+    k = Number(k);
+    let temp;
+    if (k === 1) {
+      (temp = dataAll.Exhibitions.Current), (this.dataUrl = "Current");
+    } else if (k === 2) {
+      (temp = dataAll.Exhibitions.Permanent), (this.dataUrl = "Permanent");
+    } else if (k === 3) {
+      (temp = dataAll.Exhibitions.Past), (this.dataUrl = "Past");
+    } else if (k === 4) {
+      (temp = dataAll.Exhibitions.Overseas), (this.dataUrl = "Past");
+    }
+    temp.forEach((v) => {
+      if (v.id === id) this.data = v.info;
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.ExGalleries {
+  width: 100%;
+  .topImg {
+    width: 100%;
+    height: 150px;
+    position: relative;
+    & > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      & > h3 {
+        position: absolute;
+        font-size: 24px;
+        color: #fff;
+        left: 30px;
+        bottom: 30px;
+        border-bottom: 1px solid #fff;
+      }
+    }
+    & > img {
+      width: 100%;
+      height: 150px;
+      object-fit: cover;
+    }
+  }
+  .main {
+    padding: 30px 20px;
+    .row {
+      width: 100%;
+      margin-bottom: 20px;
+      & > img {
+        border-radius: 5px;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Exhibitions/Objects.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ExObjects">
+    <div class="topImg">
+      <div>
+        <h3>Exhibition Objects</h3>
+      </div>
+      <img
+        :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
+        alt=""
+      />
+    </div>
+    <!-- 内容 -->
+    <div class="main">
+      <div class="row" v-for="i in data.objects" :key="i">
+        <img
+          @click="
+            imgLook(
+              `/data/Exhibitions/${dataUrl}/objects${data.topImg}/big${i}.png`
+            )
+          "
+          v-lazy="
+            `/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`
+          "
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from "vant";
+import { dataAll } from "./dataAll";
+export default {
+  name: "ExObjects",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      dataUrl: "",
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    imgLook(url) {
+      ImagePreview({
+        images: [url],
+        closeable: true,
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let { id, k } = this.$route.query;
+    id = Number(id);
+    k = Number(k);
+    let temp;
+    if (k === 1) {
+      (temp = dataAll.Exhibitions.Current), (this.dataUrl = "Current");
+    } else if (k === 2) {
+      (temp = dataAll.Exhibitions.Permanent), (this.dataUrl = "Permanent");
+    } else if (k === 3) {
+      (temp = dataAll.Exhibitions.Past), (this.dataUrl = "Past");
+    } else if (k === 4) {
+      (temp = dataAll.Exhibitions.Overseas), (this.dataUrl = "Past");
+    }
+    temp.forEach((v) => {
+      if (v.id === id) this.data = v.info;
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.ExObjects {
+  width: 100%;
+  .topImg {
+    width: 100%;
+    height: 150px;
+    position: relative;
+    & > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      & > h3 {
+        position: absolute;
+        font-size: 24px;
+        color: #fff;
+        left: 30px;
+        bottom: 30px;
+        border-bottom: 1px solid #fff;
+      }
+    }
+    & > img {
+      width: 100%;
+      height: 150px;
+      object-fit: cover;
+    }
+  }
+  .main {
+    padding: 30px 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .row {
+      width: 48%;
+      margin-bottom: 4%;
+      & > img {
+        border-radius: 5px;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>