up

web/src/App.vue

@@ -7,7 +7,7 @@
 <style lang='less' scoped>
 #app{
   width: 100%;
-  height: 100vh;
+  // height: 100vh;
   min-width: 1900px;
   min-height: 900px;
 }

web/src/router/index.js

@@ -16,6 +16,7 @@ const routes = [
         component: () => import('../views/Home/index.vue'),
         meta: { myName: 'Home' },
       },
+      // Visit页面
       {
         path: '/Layout/Visit',
         name: 'Visit',
@@ -73,16 +74,14 @@ const routes = [
         name: 'Exhibitions',
         component: () => import('../views/Exhibitions/index.vue'),
         meta: { myName: 'Exhibitions' },
-        // redirect: { name: 'Exhibitions1' },
-        // children: [
-        //   {
-        //     path: '/Layout/Exhibitions/:id',
-        //     name: 'Exhibitions1',
-        //     component: () => import('../views/Exhibitions/Exhibitions.vue'),
-        //     meta: { myName: 'Exhibitions'},
-        //   },
-        // ]
-      }
+      },
+      // 列表Exhibitions详情页面
+      {
+        path: '/Layout/ExhibitionsInfo',
+        name: 'ExhibitionsInfo',
+        component: () => import('../views/Exhibitions/info.vue'),
+        meta: { myName: 'Exhibitions' },
+      },
     ]
   }
 ]

web/src/views/Exhibitions/component/List.vue

@@ -50,7 +50,7 @@
       <div class="null" v-if="data.length === 0">no information...</div>
       <!-- 列表详情信息 -->
       <div class="list" v-if="!cut">
-        <div class="row" v-for="item in dataShow" :key="item.id">
+        <div class="row" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
           <img :src="item.cover" alt="" />
           <div class="txt">
             <h3>{{ item.h3 }}</h3>
@@ -61,7 +61,7 @@
       </div>
       <!-- 列表图片信息 -->
       <div class="listImg" v-else>
-        <div class="rowImg" v-for="item in dataShow" :key="item.id">
+        <div class="rowImg" v-for="item in dataShow" :key="item.id" @click="toInfo(item.id)">
           <img :src="item.cover" alt="" />
           <p>{{ item.h3 }}</p>
         </div>
@@ -106,6 +106,14 @@ export default {
   },
   //方法集合
   methods: {
+    // 点击单个文章跳转详情
+    toInfo(id){
+     let k = this.$route.params.id;
+      this.$router.push({
+        name:'ExhibitionsInfo',
+        query:{id,k}
+      })
+    },
     // 选择年份
     selectChange(val) {
       if (!val) {

web/src/views/Exhibitions/info.vue

@@ -0,0 +1,511 @@
+<template>
+  <div class="ExhibitionsInfo">
+    <div class="topImg">
+      <img :src="`/data/Exhibitions/${topTxt}/infoTop.jpg`" alt="" />
+    </div>
+    <!-- 面包屑 -->
+    <div class="pos">
+      <div>
+        <span class="pos1">Your Position:&nbsp;</span>
+        <Router-link to="/Layout/Home">Home></Router-link>
+        <Router-link to="/Layout/Exhibitions/1">Exhibitions></Router-link>
+        <i @click="backExh(topTxt)">{{ topTxt }} Exhibitions></i>
+      </div>
+    </div>
+    <!-- 内容-->
+    <div class="conten">
+      <!-- Exhibition Overview -->
+      <div class="y_box" ref="Overview" v-if="data.title">
+        <div class="title_2">{{ data.title }}</div>
+        <div class="info">
+          <span class="info_1"></span>
+          <span class="info_2">{{ data.time }}</span>
+          <span class="info_3">{{ data.loc }}</span>
+        </div>
+        <div class="content_2">
+          <div class="title_3">——<span>Exhibition Overview</span>——</div>
+          <div
+            v-show="index === pageInd"
+            v-for="(item, index) in data.page"
+            :key="index"
+          >
+            <p class="one">{{item.tit}}</p>
+            <div v-html="item.article"></div>
+          </div>
+          <!-- 分页 -->
+          <div class="paging">
+            <span v-show="pageInd !== 0" @click="pageCut(pageInd - 1)">
+              &lt;
+            </span>
+            <span
+              :class="{ active: index === pageInd }"
+              v-for="(item, index) in data.page"
+              :key="index"
+              @click="pageCut(index)"
+              >{{ index + 1 }}</span
+            >
+            <span
+              v-show="pageInd !== data.page.length - 1"
+              @click="pageCut(pageInd + 1)"
+            >
+              &gt;
+            </span>
+          </div>
+        </div>
+      </div>
+      <!-- Exhibition Objects -->
+      <div class="picpart" ref="Objects">
+        <div class="title_3">——<span>Exhibition Objects</span>——</div>
+        <!-- 图片 -->
+        <div class="row" :class="{ show: showObjects }">
+          <div class="rowOne" v-for="i in data.objects" :key="i">
+            <img
+              :src="'/data/Exhibitions/Current/objects/objects' + i + '.jpg'"
+            />
+            <!-- 输入移入的查看和下载按钮 -->
+            <div class="mask">
+              <a
+                class="el-icon-download"
+                :href="'/data/Exhibitions/Current/objects/big' + i + '.jpg'"
+                download
+                ><i> Download</i></a
+              >
+              <span class="el-icon-search" @click="imgBig(i)"
+                ><i> Enlarge</i></span
+              >
+            </div>
+          </div>
+        </div>
+        <div class="more">
+          <span @click="showObjects = !showObjects">{{
+            showObjects ? "Hide" : "See More"
+          }}</span>
+        </div>
+      </div>
+      <!-- Exhibition Galleries -->
+      <div class="other" ref="Galleries">
+        <div class="title_3">——<span>Exhibition Galleries</span>——</div>
+        <!-- 图片 -->
+        <div class="box" :class="{ show: showGalleries }">
+          <img
+            :src="'/data/Exhibitions/Current/galleries/galleries' + i + '.jpg'"
+            alt=""
+            v-for="i in data.galleries"
+            :key="i"
+          />
+        </div>
+        <div class="more">
+          <span @click="showGalleries = !showGalleries">{{
+            showGalleries ? "Hide" : "See More"
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 回到顶部 -->
+    <div class="back_btn" @click="backTop">Back to top</div>
+    <!-- 点击预览大图 -->
+    <ElImageViewer
+      v-if="viewImgDialog"
+      :on-close="closeViewer"
+      :url-list="srcList"
+    />
+    <!-- 滚动 -->
+    <ul class="navBarItem" :class="{ gunShow: gunShow }">
+      <li :class="{ cur: gunInd === 1 }" @click="cutGun(1)">
+        <span></span> Exhibition Overview
+      </li>
+      <li :class="{ cur: gunInd === 2 }" @click="cutGun(2)">
+        <span></span> Exhibition Objects
+      </li>
+      <li :class="{ cur: gunInd === 3 }" @click="cutGun(3)">
+        <span></span> Exhibition Galleries
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { dataAll } from "@/views/dataAll.js";
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+export default {
+  name: "ExhibitionsInfo",
+  components: { ElImageViewer },
+  data() {
+    //这里存放数据
+    return {
+      showObjects: false,
+      showGalleries: false,
+      viewImgDialog: false, // 是否显示预览
+      srcList: [""],
+      // 固定滚动
+      gunInd: 1,
+      gunShow: false,
+      data: {},
+      topTxt: "", //最后的一个面包屑文字
+      pageInd: 0, //分页的切换
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 切换文字分页
+    pageCut(val) {
+      this.pageInd = val;
+    },
+    // 点击面包屑的最后一个
+    backExh(txt) {
+      if (txt === "Current") this.$router.push("/Layout/Exhibitions/1");
+      else if (txt === "Permanent") this.$router.push("/Layout/Exhibitions/2");
+      else if (txt === "Past") this.$router.push("/Layout/Exhibitions/3");
+      else if (txt === "Overseas") this.$router.push("/Layout/Exhibitions/4");
+    },
+    // 固定滚动的切换
+    cutGun(val) {
+      // setTimeout(() => {
+      //   this.gunInd = val;
+      // }, 200);
+      // 获取 Overview 距离浏览器顶部的距离
+      let Overview = this.$refs.Overview;
+      let Objects = this.$refs.Objects;
+      let Galleries = this.$refs.Galleries;
+      if (val === 1)
+        window.scrollTo({ top: Overview.offsetTop, behavior: "smooth" });
+      else if (val === 2)
+        window.scrollTo({ top: Objects.offsetTop, behavior: "smooth" });
+      else if (val === 3)
+        window.scrollTo({ top: Galleries.offsetTop, behavior: "smooth" });
+    },
+    // 点击回到顶部
+    backTop() {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    },
+    // 点击放大镜预览图片
+    imgBig(i) {
+      this.srcList = [`/data/Exhibitions/Current/objects/big${i}.jpg`];
+      this.viewImgDialog = true;
+      // 给遮罩层绑定点击关闭事件
+      this.$nextTick(() => {
+        // 获取body，防止滚动
+        let body = document.querySelector("body");
+        body.style.overflow = "hidden";
+        let mask = document.querySelector(".el-image-viewer__close");
+        mask.onclick = () => {
+          this.closeViewer();
+        };
+      });
+    },
+    // 关闭查看器
+    closeViewer() {
+      this.viewImgDialog = false;
+      // 获取body，恢复滚动
+      let body = document.querySelector("body");
+      body.style.overflow = "auto";
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前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.topTxt = "Current");
+    } else if (k === 2) {
+      (temp = dataAll.Exhibitions.Permanent), (this.topTxt = "Permanent");
+    } else if (k === 3) {
+      (temp = dataAll.Exhibitions.Past), (this.topTxt = "Past");
+    } else if (k === 4) {
+      (temp = dataAll.Exhibitions.Overseas), (this.topTxt = "Overseas");
+    }
+    temp.forEach((v) => {
+      if (v.id === id) this.data = v.info;
+    });
+    console.log("--------", this.data);
+    // 监听滚动
+    window.onscroll = () => {
+      // console.log(window.scrollY, window.pageYOffset)
+      if (scrollY > 400) this.gunShow = true;
+      else this.gunShow = false;
+      // 切换固定滚动的高亮状态
+      // let Overview = this.$refs.Overview;
+      let Objects = this.$refs.Objects;
+      let Galleries = this.$refs.Galleries;
+      if (scrollY >= 0 && scrollY < Objects.offsetTop) this.gunInd = 1;
+      else if (scrollY >= Objects.offsetTop && scrollY < Galleries.offsetTop)
+        this.gunInd = 2;
+      else this.gunInd = 3;
+    };
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    // 删除滚动事件
+    window.onscroll = null;
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.ExhibitionsInfo {
+  .more {
+    font-size: 16px;
+    color: #bf2323;
+    text-align: center;
+    padding-top: 30px;
+    & > span {
+      cursor: pointer;
+    }
+  }
+  .title_3 {
+    font-size: 12px;
+    color: #939393;
+    text-align: center;
+    & > span {
+      font-weight: 700;
+      font-size: 24px;
+      color: #bf2323;
+      text-align: center;
+      padding: 0 20px;
+    }
+  }
+  .topImg {
+    width: 100%;
+    margin: auto;
+    height: 300px;
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .pos {
+    height: 56px;
+    width: 100%;
+    font-size: 12px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > div {
+      height: 56px;
+      line-height: 50px;
+      width: 1180px;
+      overflow: hidden;
+      zoom: 1;
+      margin: 0 auto;
+      .pos1 {
+        color: #c20e11;
+      }
+      & > i {
+        cursor: pointer;
+      }
+    }
+  }
+  .conten {
+    padding-top: 35px;
+    width: 1180px;
+    margin: 0 auto;
+    .y_box {
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      .title_2 {
+        font-size: 30px;
+        line-height: 44px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        padding: 40px 210px 0 40px;
+      }
+      .info {
+        font-size: 14px;
+        line-height: 36px;
+        color: #666;
+        overflow: hidden;
+        zoom: 1;
+        margin-bottom: 20px;
+        padding-left: 40px;
+        & > span {
+          padding: 0 30px;
+          display: block;
+          float: left;
+        }
+        .info_1 {
+          background: url("../../assets/images/bg_5.png") left 8px no-repeat;
+        }
+        .info_2 {
+          background: url("../../assets/images/bg_6.png") left 8px no-repeat;
+        }
+        .info_3 {
+          background: url("../../assets/images/bg_7.png") left 8px no-repeat;
+        }
+      }
+      .content_2 {
+        background: none;
+        border-top: 1px solid #e0e0e0;
+        padding: 30px 40px;
+        /deep/p {
+          font-size: 18px;
+          line-height: 26px;
+          color: #1f1d1d;
+          margin-top: 24px;
+        }
+        .one {
+          font-weight: 700;
+        }
+        .paging {
+          text-align: center;
+          margin: 30px 0 0;
+          & > span {
+            cursor: pointer;
+            margin-right: 5px;
+          }
+          .active {
+            color: #bf2323;
+          }
+        }
+      }
+    }
+    .picpart {
+      height: auto;
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      margin: 40px 0;
+      padding: 30px 0;
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 30px;
+        height: 410px;
+        overflow: hidden;
+        .rowOne {
+          position: relative;
+          width: 226px;
+          height: 410px;
+          margin-right: 12px;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+          &:nth-of-type(5n) {
+            margin-right: 0;
+          }
+          .mask {
+            display: none;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.7);
+            text-align: center;
+            color: #fff;
+            font-size: 20px;
+            /deep/.el-icon-download {
+              font-size: 26px;
+            }
+            /deep/.el-icon-search {
+              font-size: 26px;
+            }
+            & > span {
+              margin-top: 50px;
+              display: block;
+              cursor: pointer;
+            }
+            & > a {
+              margin-top: 150px;
+              display: block;
+              color: #fff;
+            }
+            i {
+              font-size: 18px;
+            }
+          }
+          &:hover {
+            .mask {
+              display: block;
+            }
+          }
+        }
+      }
+      .show {
+        height: auto;
+      }
+    }
+    .other {
+      background: #fff;
+      border: 1px solid #e0e0e0;
+      padding: 30px 0;
+      .box {
+        height: 260px;
+        overflow: hidden;
+        margin-top: 30px;
+        & > img {
+          width: 390px;
+          height: 260px;
+          margin: 0 4px 2px 0;
+          &:nth-child(3n) {
+            margin-right: 0;
+          }
+        }
+      }
+      .show {
+        height: auto;
+      }
+    }
+  }
+  .back_btn {
+    height: 38px;
+    width: 160px;
+    margin: 30px auto;
+    border: 1px solid #000;
+    font-size: 16px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: bold;
+    cursor: pointer;
+    display: block;
+    background: #f1f1f1;
+  }
+  .navBarItem {
+    margin-left: 385px;
+    position: absolute;
+    left: 50%;
+    top: 410px;
+    z-index: 99;
+    & > li {
+      font-size: 14px;
+      color: #fff;
+      line-height: 50px;
+      background-color: #333;
+      margin-bottom: 1px;
+      padding: 0 25px 0 25px;
+      cursor: pointer;
+      & > span {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+    }
+    .cur {
+      background-color: #bf2323;
+      & > span {
+        background-color: #fff;
+      }
+    }
+  }
+  .gunShow {
+    position: fixed;
+    top: 0;
+  }
+}
+</style>

web/src/views/Home/index.vue

@@ -109,7 +109,7 @@ export default {
 .Home {
   position: relative;
   width: 100%;
-  height: calc(100% - 45px);
+  height: calc(100vh - 45px);
   background-color: black;
 
   img {

web/src/views/dataAll.js

@@ -9,6 +9,7 @@ export const dataAll = {
         h3: 'The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China',
         p: 'In 2021, at the historical intersection of the"Two Centenary Goals," the new journey of building a modern socialist country in all respects has begun.',
         info: {
+          topImg:'/data/Exhibitions/Current/infoTop.jpg',
           title: 'The Great Journey: the 100th Anniversary of the Founding of the Communist Party of China',
           time: '9:00 - 17:00 (closed on Mondays)',
           loc: 'Room D, F3',
@@ -36,7 +37,7 @@ export const dataAll = {
     ],
     Permanent: [
       {
-        id: 1,
+        id: 2,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/1.jpg',
@@ -45,7 +46,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 2,
+        id: 3,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/2.jpg',
@@ -54,7 +55,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 3,
+        id: 4,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/3.jpg',
@@ -63,7 +64,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 4,
+        id: 5,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/4.jpg',
@@ -72,7 +73,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 5,
+        id: 6,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/5.jpg',
@@ -81,7 +82,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 6,
+        id: 7,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/6.jpg',
@@ -90,7 +91,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 7,
+        id: 8,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/7.jpg',
@@ -99,7 +100,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 8,
+        id: 9,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/8.jpg',
@@ -108,7 +109,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 9,
+        id: 10,
         year: '',
         yrahTxt: '',
         cover: '/data/Exhibitions/Permanent/9.jpg',
@@ -119,7 +120,7 @@ export const dataAll = {
     ],
     Past: [
       {
-        id: 1,
+        id: 11,
         year: '2021',
         yrahTxt: 'May 18, 2021 - August 17, 2021',
         cover: '/data/Exhibitions/Past/1.jpg',
@@ -128,7 +129,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 2,
+        id: 12,
         year: '2021',
         yrahTxt: 'May 21, 2021 - August 22, 2021',
         cover: '/data/Exhibitions/Past/2.jpg',
@@ -137,7 +138,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 3,
+        id: 13,
         year: '2020,2021',
         yrahTxt: 'December 22, 2020 - May 23, 2021',
         cover: '/data/Exhibitions/Past/3.jpg',
@@ -146,7 +147,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 4,
+        id: 14,
         year: '2020',
         yrahTxt: 'September 26, 2020 – November 15, 2020',
         cover: '/data/Exhibitions/Past/4.jpg',
@@ -155,7 +156,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 5,
+        id: 15,
         year: '2020',
         yrahTxt: 'January 17, 2020 – August 2, 2020',
         cover: '/data/Exhibitions/Past/5.jpg',
@@ -164,7 +165,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 6,
+        id: 16,
         year: '2019,2020',
         yrahTxt: 'December 21, 2019 - December 21, 2020',
         cover: '/data/Exhibitions/Past/6.jpg',
@@ -173,7 +174,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 7,
+        id: 17,
         year: '2019',
         yrahTxt: 'September 28, 2019 - November 24, 2019',
         cover: '/data/Exhibitions/Past/7.jpg',
@@ -182,7 +183,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 8,
+        id: 18,
         year: '2019',
         yrahTxt: 'September 27, 2019 - December 1, 2019',
         cover: '/data/Exhibitions/Past/8.png',
@@ -191,7 +192,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 9,
+        id: 19,
         year: '2019,2020',
         yrahTxt: 'September 26, 2019 - February 16, 2020',
         cover: '/data/Exhibitions/Past/9.jpg',
@@ -200,7 +201,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 10,
+        id: 20,
         year: '2019',
         yrahTxt: 'September 12, 2019 - October 31, 2019',
         cover: '/data/Exhibitions/Past/10.png',
@@ -209,7 +210,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 11,
+        id: 21,
         year: '2019',
         yrahTxt: 'June 8, 2019 - August 8, 2019',
         cover: '/data/Exhibitions/Past/11.jpg',
@@ -218,7 +219,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 12,
+        id: 22,
         year: '2019',
         yrahTxt: 'March 2, 2019 - July 7, 2019',
         cover: '/data/Exhibitions/Past/12.png',
@@ -227,7 +228,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 13,
+        id: 23,
         year: '2019',
         yrahTxt: 'February 28，2019 - June 30，2019',
         cover: '/data/Exhibitions/Past/13.png',
@@ -236,7 +237,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 14,
+        id: 24,
         year: '2019',
         yrahTxt: 'January 29, 2019 - March 17, 2019',
         cover: '/data/Exhibitions/Past/14.jpg',
@@ -245,7 +246,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 15,
+        id: 25,
         year: '2018,2019',
         yrahTxt: 'December 18, 2018 - March 24, 2019',
         cover: '/data/Exhibitions/Past/15.jpg',
@@ -254,7 +255,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 16,
+        id: 26,
         year: '2018',
         yrahTxt: 'September 6, 2018 - December 23, 2018',
         cover: '/data/Exhibitions/Past/16.jpg',
@@ -263,7 +264,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 17,
+        id: 27,
         year: '2018',
         yrahTxt: 'August 14, 2018- October 7, 2018',
         cover: '/data/Exhibitions/Past/17.jpg',
@@ -272,7 +273,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 18,
+        id: 28,
         year: '2018',
         yrahTxt: 'February 27, 2018 - July 22, 2018',
         cover: '/data/Exhibitions/Past/18.jpg',
@@ -281,7 +282,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 19,
+        id: 29,
         year: '2018',
         yrahTxt: 'March 27, 2018 - June 22, 2018',
         cover: '/data/Exhibitions/Past/19.jpg',
@@ -290,7 +291,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 20,
+        id: 30,
         year: '2017,2018',
         yrahTxt: 'July 15, 2017 - July 15, 2018',
         cover: '/data/Exhibitions/Past/20.jpg',
@@ -299,7 +300,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 21,
+        id: 31,
         year: '2018',
         yrahTxt: 'February 8, 2018 - March 18, 2018',
         cover: '/data/Exhibitions/Past/21.jpg',
@@ -308,7 +309,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 22,
+        id: 32,
         year: '2017,2018',
         yrahTxt: 'December 12, 2017 - March 11, 2018',
         cover: '/data/Exhibitions/Past/22.jpg',
@@ -317,7 +318,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 23,
+        id: 33,
         year: '2018',
         yrahTxt: 'February 10, 2018 - March 5, 2018',
         cover: '/data/Exhibitions/Past/23.jpg',
@@ -326,7 +327,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 24,
+        id: 34,
         year: '2017',
         yrahTxt: 'September 30, 2017 - December 3, 2017',
         cover: '/data/Exhibitions/Past/24.jpg',
@@ -335,7 +336,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 25,
+        id: 35,
         year: '2017',
         yrahTxt: 'May 18, 2017 - August 27, 2017',
         cover: '/data/Exhibitions/Past/25.jpg',
@@ -344,7 +345,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 26,
+        id: 36,
         year: '2017',
         yrahTxt: 'January 20, 2017 - May 21, 2017',
         cover: '/data/Exhibitions/Past/26.jpg',
@@ -353,7 +354,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 27,
+        id: 37,
         year: '2016,2017',
         yrahTxt: 'September 27, 2016 – March 26, 2017',
         cover: '/data/Exhibitions/Past/27.jpg',
@@ -362,7 +363,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 28,
+        id: 38,
         year: '2017',
         yrahTxt: 'February 8, 2017 - April 9, 2017',
         cover: '/data/Exhibitions/Past/28.jpg',
@@ -371,7 +372,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 29,
+        id: 39,
         year: '2017',
         yrahTxt: 'January 20, 2017 - March 19, 2017',
         cover: '/data/Exhibitions/Past/29.jpg',
@@ -380,7 +381,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 30,
+        id: 40,
         year: '2016,2017',
         yrahTxt: 'December 15, 2016 – March 15, 2017',
         cover: '/data/Exhibitions/Past/30.jpg',
@@ -389,7 +390,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 31,
+        id: 41,
         year: '2016',
         yrahTxt: 'September 9, 2016 - December 9, 2016',
         cover: '/data/Exhibitions/Past/31.jpg',
@@ -398,7 +399,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 32,
+        id: 42,
         year: '2016',
         yrahTxt: 'August 9, 2016 - November 9, 2016',
         cover: '/data/Exhibitions/Past/32.jpg',
@@ -407,7 +408,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 33,
+        id: 43,
         year: '2016',
         yrahTxt: 'March 2, 2016 – June 26, 2016',
         cover: '/data/Exhibitions/Past/33.jpg',
@@ -416,7 +417,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 34,
+        id: 44,
         year: '2016',
         yrahTxt: 'March 8, 2016 - June 26, 2016',
         cover: '/data/Exhibitions/Past/34.jpg',
@@ -425,7 +426,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 35,
+        id: 45,
         year: '2016',
         yrahTxt: 'February 2, 2016 - February 29, 2016',
         cover: '/data/Exhibitions/Past/35.jpg',
@@ -434,7 +435,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 36,
+        id: 46,
         year: '2015',
         yrahTxt: 'April 24, 2015 - August 12, 2015',
         cover: '/data/Exhibitions/Past/36.jpg',
@@ -443,7 +444,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 37,
+        id: 47,
         year: '2014,2015',
         yrahTxt: 'December 26, 2014 – March 25, 2015',
         cover: '/data/Exhibitions/Past/37.jpg',
@@ -454,7 +455,7 @@ export const dataAll = {
     ],
     Overseas: [
       {
-        id: 1,
+        id: 48,
         year: '2021',
         yrahTxt: 'May 21, 2021 - August 22, 2021',
         cover: '/data/Exhibitions/Overseas/1.png',
@@ -463,7 +464,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 2,
+        id: 49,
         year: '2018,2019',
         yrahTxt: 'December 18, 2018 - March 24, 2019',
         cover: '/data/Exhibitions/Overseas/2.png',
@@ -472,7 +473,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 3,
+        id: 50,
         year: '2018',
         yrahTxt: 'August 14, 2018- October 7, 2018',
         cover: '/data/Exhibitions/Overseas/3.png',
@@ -481,7 +482,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 4,
+        id: 51,
         year: '2018',
         yrahTxt: 'March 27, 2018 - June 22, 2018',
         cover: '/data/Exhibitions/Overseas/4.png',
@@ -490,7 +491,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 5,
+        id: 52,
         year: '2018',
         yrahTxt: 'February 10, 2018 - March 5, 2018',
         cover: '/data/Exhibitions/Overseas/5.png',
@@ -499,7 +500,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 6,
+        id: 53,
         year: '2017,2018',
         yrahTxt: 'December 12, 2017 - March 11, 2018',
         cover: '/data/Exhibitions/Overseas/6.png',
@@ -508,7 +509,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 7,
+        id: 54,
         year: '2017',
         yrahTxt: 'February 8, 2017 - April 9, 2017',
         cover: '/data/Exhibitions/Overseas/7.png',
@@ -517,7 +518,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 8,
+        id: 55,
         year: '2015',
         yrahTxt: 'April 24, 2015 - August 12, 2015',
         cover: '/data/Exhibitions/Overseas/8.png',
@@ -526,7 +527,7 @@ export const dataAll = {
         info: {}
       },
       {
-        id: 9,
+        id: 56,
         year: '2014,2015',
         yrahTxt: 'December 26, 2014 – March 25, 2015',
         cover: '/data/Exhibitions/Overseas/9.png',

web/src/views/layout/index.vue

@@ -127,7 +127,6 @@ export default {
 .Layout {
   position: relative;
   width: 100%;
-  height: 100%;
 }
 .topNav {
   background-color: rgba(0, 0, 0, 0.8);