up

webM/src/router/index.js

@@ -86,6 +86,19 @@ const routes = [
         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}/${data.topImg}${data.imgLast}`"
-        alt=""
-      />
+      <img :src="topImgSrc" alt="" />
     </div>
     <div class="main">
       <!-- 1 -->
@@ -74,6 +71,7 @@
         <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}`
@@ -101,6 +99,8 @@ export default {
   data() {
     //这里存放数据
     return {
+      // 顶部图片
+      topImgSrc: "",
       data: {},
       dataUrl: "",
       // Overview的变量
@@ -169,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 });
@@ -199,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;
@@ -318,7 +322,7 @@ export default {
           font-weight: 700;
           right: 5px;
           bottom: 5px;
-          font-size: 16px;
+          font-size: 14px;
         }
         .txt {
           padding: 20px;
@@ -356,7 +360,7 @@ export default {
       margin: 0 auto;
       margin-bottom: 20px;
     }
-    padding: 40px 0;
+    padding: 40px 0 0;
     .box3_Obj {
       display: flex;
       align-items: center;
@@ -390,6 +394,7 @@ export default {
     }
   }
   .box4 {
+    padding-top: 40px;
     padding-bottom: 20px;
     .title {
       width: calc(100% - 40px);
@@ -399,6 +404,11 @@ export default {
     /deep/.van-swipe__indicator--active {
       background-color: #fff;
     }
+    .bottImg{
+      width: 100%;
+      height: 250px;
+      object-fit: cover;
+    }
   }
 }
 </style>

webM/src/views/Exhibitions/Galleries.vue

@@ -120,6 +120,8 @@ export default {
       & > img {
         border-radius: 5px;
         width: 100%;
+        height: 225px;
+        object-fit: cover;
       }
     }
   }

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 {