up

webM/src/router/index.js

@@ -70,21 +70,21 @@ const routes = [
         path: '/Layout/Detail',
         name: 'ExDetail',
         component: () => import('../views/Exhibitions/Detail.vue'),
-        meta: { myTitle: 'Exhibitions Detail', topColor: '#801c20' },
+        meta: { myTitle: 'Exhibitions', topColor: '#801c20' },
       },
       // ----------Objects
       {
         path: '/Layout/Objects',
         name: 'ExObjects',
         component: () => import('../views/Exhibitions/Objects.vue'),
-        meta: { myTitle: 'Exhibitions Objects', topColor: '#801c20' },
+        meta: { myTitle: 'Exhibitions', topColor: '#801c20' },
       },
       // ----------Galleries
       {
         path: '/Layout/Galleries',
         name: 'ExGalleries',
         component: () => import('../views/Exhibitions/Galleries.vue'),
-        meta: { myTitle: 'Exhibitions Galleries', topColor: '#801c20' },
+        meta: { myTitle: 'Exhibitions', topColor: '#801c20' },
       },
       // Collections页面
       {
@@ -99,6 +99,12 @@ const routes = [
         component: () => import('../views/Collections/info.vue'),
         meta: { myTitle: 'Collections', topColor: '#36382f' },
       },
+      {
+        path: '/Layout/CollectionsDetail',
+        name: 'CollectionsDetail',
+        component: () => import('../views/Collections/Detail.vue'),
+        meta: { myTitle: 'Collections', topColor: '#656567' },
+      },
     ]
   }
 ]

webM/src/views/Collections/Detail.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="CollectionsDeta">
+    <div class="main">
+      <img :src="`/data/Collections/${data.url}/big${data.id}.png`" alt="" />
+      <div class="txt">
+        <h3>{{data.h3}}</h3>
+        <div v-html="data.info"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Collections } from "./data";
+export default {
+  name: "CollectionsDeta",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let { id, k } = this.$route.query;
+    id = Number(id);
+    let temp = Collections[k];
+    temp.forEach((v) => {
+      if (v.id === id) this.data = v;
+    });
+    setTimeout(() => {
+      document.title = this.data.h3;
+    }, 100);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.CollectionsDeta {
+  width: 100%;
+  .main {
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    .txt {
+      padding: 20px 20px 40px;
+      & > h3 {
+        padding: 0 0 0 30px;
+        font-size: 22px;
+        font-weight: 700;
+        padding-left: 30px;
+        background: url("../../assets/img/Layout/chosen.png") left center
+          no-repeat;
+        background-size: 22px 18px;
+        margin-bottom: 20px;
+      }
+      /deep/ p{
+        color: #6A6A6A;
+        font-size: 16px;
+        line-height: 18px;
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Collections/info.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="CollectionsInfo">
     <div class="ban">
-      <img :src="require(`@/assets/img/Collections/${img}.png`)" alt="" />
+      <img :src="`/data/Collections/topImg/${img}.png`" alt="" />
       <h3>{{ txt }}</h3>
     </div>
-    <div class="main"></div>
+    <div class="main">
+      <div
+        class="row"
+        @click="skip(item.id)"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <img v-lazy="`/data/Collections/${img}/${index + 1}.png`" alt="" />
+        <p v-html="item.h3"></p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,7 +36,7 @@ export default {
       },
       txt: "",
       data: [],
-      img:''
+      img: "",
     };
   },
   //监听属性 类似于data概念
@@ -39,10 +49,16 @@ export default {
   },
   //方法集合
   methods: {
+    skip(id) {
+      this.$router.push({
+        name: "CollectionsDetail",
+        query: { id, k: this.img },
+      });
+    },
     // 封装一个改变数据的方法
     dataChange() {
       let temp = this.$route.params.id;
-      this.img =temp
+      this.img = temp;
       this.data = Collections[temp];
       for (let k in this.mate) {
         if (k === temp) temp = this.mate[k];
@@ -91,6 +107,34 @@ export default {
   }
   .main {
     padding: 20px;
+    column-count: 2;
+    width: 100%;
+    .row {
+      background-color: #fff;
+      box-shadow: 0px 5px 5px 1px #ccc;
+      border-block: 5px;
+      overflow: hidden;
+      break-inside: avoid;
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      & > img {
+        width: 100%;
+      }
+      & > 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: 2;
+        -webkit-box-orient: vertical;
+      }
+    }
   }
 }
 </style>

webM/src/views/Exhibitions/Detail.vue

@@ -210,6 +210,9 @@ export default {
     // 动态控制cardCom元素的高度
     this.$nextTick(() => {
       setTimeout(() => {
+        // 改变网址title
+        document.title = this.data.title;
+
         let tempArr = this.data.page;
         let dom = document.querySelector(".card");
         dom.style.height = 500 + (tempArr.length - 1) * 15 + "px";

webM/src/views/Exhibitions/Galleries.vue

@@ -73,6 +73,9 @@ export default {
     temp.forEach((v) => {
       if (v.id === id) this.data = v.info;
     });
+    setTimeout(() => {
+      document.title = "Exhibition Galleries";
+    }, 100);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

webM/src/views/Exhibitions/Objects.vue

@@ -73,6 +73,9 @@ export default {
     temp.forEach((v) => {
       if (v.id === id) this.data = v.info;
     });
+    setTimeout(() => {
+      document.title = 'Exhibition Objects';
+    }, 100);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

webM/src/views/Exhibitions/Overseas.vue

@@ -62,6 +62,7 @@ export default {
     flex-wrap: wrap;
     .row {
       background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
       border-radius: 5px;
       overflow: hidden;
       width: 48%;

webM/src/views/Exhibitions/Past.vue

@@ -62,6 +62,7 @@ export default {
     flex-wrap: wrap;
     .row {
       background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
       border-radius: 5px;
       overflow: hidden;
       width: 48%;

webM/src/views/Exhibitions/Permanent.vue

@@ -62,6 +62,7 @@ export default {
     flex-wrap: wrap;
     .row {
       background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
       border-radius: 5px;
       overflow: hidden;
       width: 48%;