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

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,33 @@ 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' },
+      },
+      // Collections页面
+      {
+        path: '/Layout/Collections',
+        name: 'Collections',
+        component: () => import('../views/Collections/index.vue'),
+        meta: { myTitle: 'Collections', topColor: '#b09c86' },
+      },
+      {
+        path: '/Layout/Collections/:id',
+        name: 'CollectionsInfo',
+        component: () => import('../views/Collections/info.vue'),
+        meta: { myTitle: 'Collections', topColor: '#36382f' },
+      },
     ]
   }
 ]

webM/src/views/Collections/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="Collections">
+    <div class="ban">
+      <img src="@/assets/img/bannerC.png" alt="" />
+      <h3>Collections</h3>
+    </div>
+    <div class="main">
+      <div class="row" v-for="(item, index) in data" :key="index">
+        <img :src="require(`@/assets/img/Collections/${item.img}`)" alt="" />
+        <div @click="skip(item.path)">{{ item.name }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Collections",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        {
+          name: "Bronzes",
+          path: "/Layout/Collections/Bronzes",
+          img: "Bronzes.png",
+        },
+        {
+          name: "Ceramics",
+          path: "/Layout/Collections/Ceramics",
+          img: "Ceramics.png",
+        },
+        {
+          name: "Buddhist Statues",
+          path: "/Layout/Collections/Buddhist",
+          img: "Buddhist.png",
+        },
+        {
+          name: "Jadewares",
+          path: "/Layout/Collections/Jadewares",
+          img: "Jadewares.png",
+        },
+        {
+          name: "Calligraphies",
+          path: "/Layout/Collections/Calligraphies",
+          img: "Calligraphies.png",
+        },
+        {
+          name: "Paintings",
+          path: "/Layout/Collections/Paintings",
+          img: "Paintings.png",
+        },
+        {
+          name: "Gold & Silverwares",
+          path: "/Layout/Collections/Gold",
+          img: "Gold.png",
+        },
+        {
+          name: "Coins & Banknotes",
+          path: "/Layout/Collections/Coins",
+          img: "Coins.png",
+        },
+        {
+          name: "Brocades & Embroideries",
+          path: "/Layout/Collections/Brocades",
+          img: "Brocades.png",
+        },
+        {
+          name: "Cultural Supplies",
+          path: "/Layout/Collections/Cultural",
+          img: "Cultural.png",
+        },
+        {
+          name: "Miscellaneous",
+          path: "/Layout/Collections/Miscellaneous",
+          img: "Miscellaneous.png",
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(path) {
+      this.$router.push(path).catch(() => {});
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Collections {
+  width: 100%;
+  background-color: #f7f6f3;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 30px;
+      bottom: 30px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px;
+    .row {
+      position: relative;
+      width: 100%;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+        border-radius: 5px;
+      }
+      & > div {
+        font-weight: 700;
+        color: #fff;
+        font-size: 22px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Collections/info.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="CollectionsInfo">
+    <div class="ban">
+      <img :src="require(`@/assets/img/Collections/${img}.png`)" alt="" />
+      <h3>{{ txt }}</h3>
+    </div>
+    <div class="main"></div>
+  </div>
+</template>
+
+<script>
+import { Collections } from "./data";
+export default {
+  name: "CollectionsInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      // 数据匹配
+      mate: {
+        Buddhist: "Buddhist Statues",
+        Gold: "Gold & Silverwares",
+        Coins: "Coins & Banknotes",
+        Brocades: "Brocades & Embroideries",
+        Cultural: "Cultural Supplies",
+      },
+      txt: "",
+      data: [],
+      img:''
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.dataChange();
+    },
+  },
+  //方法集合
+  methods: {
+    // 封装一个改变数据的方法
+    dataChange() {
+      let temp = this.$route.params.id;
+      this.img =temp
+      this.data = Collections[temp];
+      for (let k in this.mate) {
+        if (k === temp) temp = this.mate[k];
+      }
+      setTimeout(() => {
+        document.title = temp;
+      }, 100);
+      this.txt = temp;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.dataChange();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.CollectionsInfo {
+  padding-top: 50px;
+  width: 100%;
+  background-color: #f7f6f3;
+  .ban {
+    position: relative;
+    width: 100%;
+    background-color: #141512;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 30px;
+      bottom: 30px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px;
+  }
+}
+</style>

webM/src/views/Exhibitions/Detail.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="ExDetail">
     <div class="topImg">
-      <img
-        :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
-        alt=""
-      />
+      <img :src="topImgSrc" alt="" />
     </div>
     <div class="main">
       <!-- 1 -->
@@ -29,7 +26,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,13 +60,31 @@
             />
           </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>
       </div>
       <!-- 4 -->
       <div class="box4" v-if="data.galleries">
-        
+        <div class="title">Exhibition Galleries</div>
+        <van-swipe :loop="false">
+          <van-swipe-item v-for="i in GalLength" :key="i">
+            <img
+              class="bottImg"
+              @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>
   </div>
@@ -82,6 +99,8 @@ export default {
   data() {
     //这里存放数据
     return {
+      // 顶部图片
+      topImgSrc: "",
       data: {},
       dataUrl: "",
       // Overview的变量
@@ -91,7 +110,7 @@ export default {
       ObjInd: 1,
       ObjLength: 9,
       // Gallerise
-      GalLength:5
+      GalLength: 5,
     };
   },
   //监听属性 类似于data概念
@@ -100,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) {
@@ -122,7 +154,6 @@ export default {
     //   }, 300);
     // },
     imgLook(url) {
-      console.log(url);
       ImagePreview({
         images: [url],
         closeable: true,
@@ -138,6 +169,7 @@ export default {
       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 });
@@ -168,7 +200,10 @@ export default {
       (temp = dataAll.Exhibitions.Overseas), (this.dataUrl = "Past");
     }
     temp.forEach((v) => {
-      if (v.id === id) this.data = v.info;
+      if (v.id === id) {
+        this.data = v.info;
+        this.topImgSrc = v.cover;
+      }
     });
     if (this.data.objects < 9) this.ObjLength = this.data.objects;
     if (this.data.galleries < 5) this.GalLength = this.data.galleries;
@@ -214,12 +249,13 @@ export default {
     width: 100%;
     & > img {
       width: 100%;
-      height: 300px;
       object-fit: cover;
     }
   }
   .main {
-    padding: 20px;
+    padding: 20px 0;
+    background: url("../../assets/img/bgExD.png");
+    background-size: 100% 100%;
     .title {
       height: 30px;
       line-height: 30px;
@@ -233,7 +269,8 @@ export default {
     }
   }
   .box1 {
-    width: 100%;
+    width: calc(100% - 40px);
+    margin: 0 auto;
     border-bottom: 1px solid #ccc;
     & > h3 {
       font-size: 18px;
@@ -265,6 +302,8 @@ export default {
   .box2 {
     padding: 40px 0;
     border-bottom: 1px solid #ccc;
+    width: calc(100% - 40px);
+    margin: 0 auto;
     .card {
       transition: all 0.3s;
       position: relative;
@@ -283,7 +322,7 @@ export default {
           font-weight: 700;
           right: 5px;
           bottom: 5px;
-          font-size: 16px;
+          font-size: 14px;
         }
         .txt {
           padding: 20px;
@@ -316,8 +355,12 @@ export default {
   }
 
   .box3 {
-    padding: 40px 0;
-    border-bottom: 1px solid #ccc;
+    .title {
+      width: calc(100% - 40px);
+      margin: 0 auto;
+      margin-bottom: 20px;
+    }
+    padding: 40px 0 0;
     .box3_Obj {
       display: flex;
       align-items: center;
@@ -343,6 +386,29 @@ export default {
         border-radius: 8px;
       }
     }
+    .xianlu {
+      margin: 40px auto 0;
+      height: 1px;
+      width: calc(100% - 40px);
+      background-color: #ccc;
+    }
+  }
+  .box4 {
+    padding-top: 40px;
+    padding-bottom: 20px;
+    .title {
+      width: calc(100% - 40px);
+      margin: 0 auto;
+      margin-bottom: 20px;
+    }
+    /deep/.van-swipe__indicator--active {
+      background-color: #fff;
+    }
+    .bottImg{
+      width: 100%;
+      height: 250px;
+      object-fit: cover;
+    }
   }
 }
 </style>

webM/src/views/Exhibitions/Galleries.vue

@@ -0,0 +1,129 @@
+<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%;
+        height: 225px;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</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>

webM/src/views/Exhibitions/Overseas.vue

@@ -1,25 +1,47 @@
 <template>
   <div class="ExOverseas">
-    <h1>ExOverseas</h1>
+    <div class="main">
+      <div
+        class="row"
+        @click="toInfo(item.id)"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <img v-lazy="item.cover" alt="" />
+        <p v-html="item.h3"></p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { Overseas } from "./data";
 export default {
   name: "ExOverseas",
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      data: [],
+    };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    toInfo(id) {
+      this.$router.push({
+        name: "ExDetail",
+        query: { id, k: 4 },
+      });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.data = Overseas;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -32,5 +54,39 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
+.ExOverseas {
+  .main {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .row {
+      background-color: #fff;
+      border-radius: 5px;
+      overflow: hidden;
+      width: 48%;
+      margin-bottom: 4%;
+      padding-bottom: 15px;
+      & > img {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+      }
+      & > p {
+        padding: 15px 10px 0;
+        font-size: 14px;
+        line-height: 18px;
+        color: #1f1f1f;
+        /* 多行 */
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Exhibitions/Past.vue

@@ -1,25 +1,47 @@
 <template>
   <div class="ExPast">
-    <h1>ExPast</h1>
+    <div class="main">
+      <div
+        class="row"
+        @click="toInfo(item.id)"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <img v-lazy="item.cover" alt="" />
+        <p v-html="item.h3"></p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { Past } from "./data";
 export default {
   name: "ExPast",
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      data: [],
+    };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    toInfo(id) {
+      this.$router.push({
+        name: "ExDetail",
+        query: { id, k: 3 },
+      });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.data = Past;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -32,5 +54,39 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
+.ExPast {
+  .main {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .row {
+      background-color: #fff;
+      border-radius: 5px;
+      overflow: hidden;
+      width: 48%;
+      margin-bottom: 4%;
+      padding-bottom: 15px;
+      & > img {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+      }
+      & > p {
+        padding: 15px 10px 0;
+        font-size: 14px;
+        line-height: 18px;
+        color: #1f1f1f;
+        /* 多行 */
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Exhibitions/Permanent.vue

@@ -1,25 +1,47 @@
 <template>
   <div class="ExPermanent">
-    <h1>ExPermanent</h1>
+    <div class="main">
+      <div
+        class="row"
+        @click="toInfo(item.id)"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <img v-lazy="item.cover" alt="" />
+        <p v-html="item.h3"></p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { Permanent } from "./data";
 export default {
   name: "ExPermanent",
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      data: [],
+    };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    toInfo(id) {
+      this.$router.push({
+        name: "ExDetail",
+        query: { id, k: 2 },
+      });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.data = Permanent;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -32,5 +54,39 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
+.ExPermanent {
+  .main {
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .row {
+      background-color: #fff;
+      border-radius: 5px;
+      overflow: hidden;
+      width: 48%;
+      margin-bottom: 4%;
+      padding-bottom: 15px;
+      & > img {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+      }
+      & > p {
+        padding: 15px 10px 0;
+        font-size: 14px;
+        line-height: 18px;
+        color: #1f1f1f;
+        /* 多行 */
+        display: -webkit-box;
+        overflow: hidden;
+        white-space: normal !important;
+        text-overflow: ellipsis;
+        word-wrap: break-word;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+  }
+}
 </style>

webM/src/views/Exhibitions/index.vue

@@ -27,7 +27,7 @@ export default {
     //这里存放数据
     return {
       menaSon: false,
-      idMate: '/Layout/Exhibitions/Current',
+      idMate: "/Layout/Exhibitions/Current",
       tabData: [
         { name: "Current", path: "/Layout/Exhibitions/Current" },
         { name: "Permanent", path: "/Layout/Exhibitions/Permanent" },
@@ -40,9 +40,9 @@ export default {
   computed: {},
   //监控data中的数据变化
   watch: {
-    $route(){
-      this.idMate =this.$route.path
-    }
+    $route() {
+      this.idMate = this.$route.path;
+    },
   },
   //方法集合
   methods: {
@@ -52,7 +52,7 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      this.idMate =this.$route.path
+    this.idMate = this.$route.path;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -101,6 +101,7 @@ export default {
 
 .Exhibitions {
   width: 100%;
+  background-color: #f7f6f3;
   .ban {
     position: relative;
     width: 100%;

webM/src/views/Home/index.vue

@@ -106,6 +106,7 @@ export default {
 <style lang='less' scoped>
 .Home {
   width: 100%;
+  padding-top: 50px;
   .one {
     width: 100%;
     .my-swipe {

webM/src/views/Layout/index.vue

@@ -50,7 +50,7 @@
               active: index === 4 || index === 6,
               accOne: $route.meta.myTitle === item.acc,
             }"
-            @click="menaSonFu(index)"
+            @click="menaSonFu(index, item.path)"
             class="row"
             v-for="(item, index) in menaData"
             :key="index"
@@ -64,7 +64,7 @@
                 v-for="(val, valInd) in item.son"
                 :key="valInd"
                 :class="{ acc: menaInd === val.path }"
-                @click="skip(val.path)"
+                @click.stop="skip(val.path)"
               >
                 {{ val.name }}
               </div>
@@ -153,27 +153,46 @@ export default {
           name: "Exhibitions",
           path: "",
           son: [
-            { name: "Current Exhibitions", path: "/Layout/Exhibitions/Current" },
-            { name: "Permanent Exhibitions", path: "/Layout/Exhibitions/Permanent" },
+            {
+              name: "Current Exhibitions",
+              path: "/Layout/Exhibitions/Current",
+            },
+            {
+              name: "Permanent Exhibitions",
+              path: "/Layout/Exhibitions/Permanent",
+            },
             { name: "Past Exhibitions", path: "/Layout/Exhibitions/Past" },
-            { name: "Overseas Exhibitions", path: "/Layout/Exhibitions/Overseas" },
+            {
+              name: "Overseas Exhibitions",
+              path: "/Layout/Exhibitions/Overseas",
+            },
           ],
         },
         {
           name: "Collections",
-          path: "",
+          acc: "Collections",
+          path: "/Layout/Collections",
           son: [
-            { name: "Bronzes", path: "" },
-            { name: "Ceramics", path: "" },
-            { name: "Buddhist Statues", path: "" },
-            { name: "Jadewares", path: "" },
-            { name: "Calligraphies", path: "" },
-            { name: "Paintings", path: "" },
-            { name: "Gold & Silverwares", path: "" },
-            { name: "Coins & Banknotes", path: "" },
-            { name: "Brocades & Embroideries", path: "" },
-            { name: "Cultural Supplies", path: "" },
-            { name: "Miscellaneous", path: "" },
+            { name: "Bronzes", path: "/Layout/Collections/Bronzes" },
+            { name: "Ceramics", path: "/Layout/Collections/Ceramics" },
+            { name: "Buddhist Statues", path: "/Layout/Collections/Buddhist" },
+            { name: "Jadewares", path: "/Layout/Collections/Jadewares" },
+            {
+              name: "Calligraphies",
+              path: "/Layout/Collections/Calligraphies",
+            },
+            { name: "Paintings", path: "/Layout/Collections/Paintings" },
+            { name: "Gold & Silverwares", path: "/Layout/Collections/Gold" },
+            { name: "Coins & Banknotes", path: "/Layout/Collections/Coins" },
+            {
+              name: "Brocades & Embroideries",
+              path: "/Layout/Collections/Brocades",
+            },
+            { name: "Cultural Supplies", path: "/Layout/Collections/Cultural" },
+            {
+              name: "Miscellaneous",
+              path: "/Layout/Collections/Miscellaneous",
+            },
           ],
         },
         {
@@ -236,12 +255,17 @@ export default {
     searcBtn() {
       console.log("搜索~");
     },
-    menaSonFu(index) {
+    menaSonFu(index, path) {
+      if (path) {
+        this.$router.push("/Layout/Collections").catch(() => {});
+        this.menaSon = index;
+        return;
+      }
       if (this.menaSon === index) this.menaSon = null;
       else this.menaSon = index;
     },
     skip(path) {
-       this.$router.push(path).catch(() => {});
+      this.$router.push(path).catch(() => {});
     },
     toTop() {
       let dom = this.$refs.Layout;
@@ -281,7 +305,6 @@ export default {
 
 .Layout {
   position: relative;
-  padding-top: 50px;
   height: 100vh;
   overflow-y: auto;
   .top {