up

web/src/router/index.js

@@ -82,6 +82,14 @@ const routes = [
         component: () => import('../views/Exhibitions/info.vue'),
         meta: { myName: 'Exhibitions' },
       },
+      // Collections页面
+      {
+        path: '/Layout/Collections',
+        name: 'Collections',
+        component: () => import('../views/Collections/index.vue'),
+        meta: { myName: 'Collections' },
+      },
+
     ]
   }
 ]

web/src/views/Collections/component/info.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="CollectionsInfo">
+    <div class="pic">
+      <h3>Bronze <i>He</i> Wine Vessel Inscribed by Ke</h3>
+      <div class="mark" ref="markBox">
+        <img src="/data/Collections/Bronzes/big10.png" alt="" />
+        <span :style="{ opacity: num, left: numLeft, top: numTop }"></span>
+      </div>
+      <!-- 看大图 -->
+      <div class="look">Enlarge</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CollectionsInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      // 从0到1的随机小数
+      num: 1,
+      // 从0到100的随机整数
+      numTop: "0px",
+      numLeft: "0px",
+      timeId: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 获取图片盒子的宽高
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let dom = this.$refs.markBox;
+        // 最大left
+        let bigLeft = dom.offsetWidth - 64;
+        // 最大Top
+        let bigTop = dom.offsetHeight - 133;
+
+        // 生成随机整数
+        this.timeId = setInterval(() => {
+          // 控制透明度
+          if (this.num === 0) {
+            this.num = 1;
+            // 控制位移
+            this.numLeft = Math.ceil(Math.random() * bigLeft) + "px";
+            this.numTop = Math.ceil(Math.random() * bigTop) + "px";
+          } else this.num = 0;
+          console.log("-------", this.numLeft, this.numTop);
+        }, 2000);
+      }, 100);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    // 清除定时器
+    clearInterval(this.timeId);
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.CollectionsInfo {
+  z-index: 991;
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: rgba(17, 16, 16, 0.5);
+  overflow-y: auto;
+  .pic {
+    background-color: #fff;
+    box-shadow: 0 0 10px #000;
+    width: 540px;
+    margin-left: -555px;
+    padding: 20px 0;
+    position: absolute;
+    left: 50%;
+    top: 100px;
+    z-index: 100;
+    & > h3 {
+      font-weight: 700;
+      font-size: 36px;
+      line-height: 100%;
+      width: 440px;
+      margin: 0 auto;
+      /deep/ i {
+        font-style: italic;
+      }
+    }
+    .mark {
+      position: relative;
+      width: 440px;
+      margin: 20px auto;
+      height: auto;
+      & > img {
+        width: 100%;
+      }
+      & > span {
+        transition: opacity 0.3s;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 64px;
+        height: 133px;
+        background-image: url("/data/Collections/mark.png");
+      }
+    }
+    .look {
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 40px;
+      border: 1px solid #000;
+      text-align: center;
+      display: block;
+      width: 160px;
+      height: 40px;
+      overflow: hidden;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

web/src/views/Collections/index.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="Collections">
+    <div class="ban"></div>
+    <!-- 面包屑 -->
+    <div class="pos">
+      <span class="pos1">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home">Home></Router-link>
+      <Router-link to="/Layout/Collections">Collections></Router-link>
+      <span>{{ mbTxt }}></span>
+    </div>
+    <!-- 内容 -->
+    <div class="conten" :class="mbTxt">
+      <ul>
+        <li
+          @click="cutTab(index, item.url, item.height)"
+          :class="{ active: tabInd === index }"
+          v-for="(item, index) in tabData"
+          :key="item.name"
+          :style="`background-image:url(/data/Collections/tab/${
+            index + 1
+          }.png)`"
+        >
+          <div class="bac">{{ item.name }}</div>
+        </li>
+      </ul>
+      <!-- 右侧内容 -->
+      <div class="right">
+        <div class="row" v-for="(item, index) in data" :key="item.id">
+          <img
+            class="rowImg"
+            :src="`/data/Collections/Bronzes/${index + 1}.png`"
+            alt=""
+          />
+          <div class="info">
+            <!-- 箭头 -->
+            <img src="/data/Collections/arrow.png" alt="" />
+            <h3 v-html="item.h3"></h3>
+            <p v-html="item.p"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 查看详情组件 -->
+    <CollectionsInfo />
+  </div>
+</template>
+
+<script>
+import CollectionsInfo from './component/info.vue'
+import { Collections } from "@/views/dataAll.js";
+export default {
+  name: "Collections",
+  components: {CollectionsInfo},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      mbTxt: "Bronzes",
+      tabInd: 0,
+      tabData: [
+        { name: "Bronzes", url: "Bronzes" },
+        { name: "Ceramics", url: "Ceramics" },
+        { name: "Buddhist Statues", url: "Buddhist" },
+        { name: "Jadewares", url: "Jadewares" },
+        { name: "Calligraphies", url: "Calligraphies" },
+        { name: "Paintings", url: "Paintings" },
+        { name: "Gold & Silverwares", url: "Gold" },
+        { name: "Coins & Banknotes", url: "Coins" },
+        { name: "Brocades & Embroideries", url: "Brocades" },
+        { name: "Cultural Supplies", url: "Cultural" },
+        { name: "Miscellaneous", url: "Miscellaneous" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    cutTab(index, path) {
+      this.tabInd = index;
+      this.data = Collections[path];
+      this.mbTxt = path;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取数据
+    this.data = Collections.Bronzes;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Collections {
+  background-color: #fff;
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/Collections/banner.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+  .conten {
+    display: flex;
+    width: 1200px;
+    overflow: hidden;
+    margin: 0 auto 20px auto;
+    zoom: 1;
+    & > ul {
+      width: 210px;
+      & > li {
+        cursor: pointer;
+        width: 210px;
+        height: 48px;
+        position: relative;
+        background: #181818 no-repeat right center;
+        border-bottom: 1px solid #fff;
+        .bac {
+          text-indent: 10px;
+          font-size: 14px;
+          color: #fff;
+          line-height: 48px;
+          z-index: 10;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+        &:hover {
+          .bac {
+            background-color: rgba(254, 24, 24, 0.7);
+          }
+        }
+      }
+      .active {
+        .bac {
+          background-color: rgba(254, 24, 24, 0.7);
+        }
+      }
+    }
+    .right {
+      border-left: 1px solid #d8d8d8;
+      flex: 1;
+      margin-left: 10px;
+      padding-left: 10px;
+      position: relative;
+      .row {
+        top: 10px;
+        left: 10px;
+        position: absolute;
+        width: 310px;
+        .rowImg {
+          width: 310px;
+          // height: 400px;
+          vertical-align: middle;
+        }
+        .info {
+          position: relative;
+          padding: 20px 15px;
+          & > img {
+            opacity: 0;
+            position: absolute;
+            top: -30px;
+            left: 30px;
+          }
+          h3 {
+            font-size: 18px;
+            color: #262626;
+            line-height: 22px;
+            padding-bottom: 5px;
+            font-weight: 700;
+            /deep/& > i {
+              font-style: italic;
+            }
+            /deep/.smImg {
+              width: 41px;
+              height: 32px;
+            }
+          }
+          p {
+            font-size: 14px;
+            color: #626262;
+          }
+        }
+        &:hover {
+          box-shadow: 0 0 10px #000;
+          .info {
+            background-color: #ca000a;
+            & > img {
+              opacity: 1;
+            }
+            h3 {
+              color: #fff;
+            }
+            p {
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+  }
+  // 第一个页面
+  .conten {
+    height: 5291px;
+    .row {
+      &:nth-of-type(2) {
+        left: 330px;
+      }
+      &:nth-of-type(3) {
+        left: 650px;
+      }
+      &:nth-of-type(4) {
+        left: 330px;
+        top: 369px;
+      }
+      &:nth-of-type(5) {
+        left: 650px;
+        top: 589px;
+      }
+      &:nth-of-type(6) {
+        top: 609px;
+      }
+      &:nth-of-type(7) {
+        left: 330px;
+        top: 948px;
+      }
+      &:nth-of-type(8) {
+        left: 650px;
+        top: 968px;
+      }
+      &:nth-of-type(9) {
+        top: 1166px;
+      }
+      &:nth-of-type(10) {
+        left: 650px;
+        top: 1325px;
+      }
+      &:nth-of-type(11) {
+        left: 330px;
+        top: 1507px;
+      }
+      &:nth-of-type(12) {
+        left: 650px;
+        top: 1724px;
+      }
+      &:nth-of-type(13) {
+        top: 1747px;
+      }
+      &:nth-of-type(14) {
+        left: 330px;
+        top: 1846px;
+      }
+      &:nth-of-type(15) {
+        left: 330px;
+        top: 2183px;
+      }
+      &:nth-of-type(16) {
+        left: 650px;
+        top: 2269px;
+      }
+      &:nth-of-type(17) {
+        top: 2328px;
+      }
+      &:nth-of-type(18) {
+        left: 330px;
+        top: 2762px;
+      }
+      &:nth-of-type(19) {
+        left: 650px;
+        top: 2848px;
+      }
+      &:nth-of-type(20) {
+        top: 2887px;
+      }
+      &:nth-of-type(21) {
+        top: 3242px;
+      }
+      &:nth-of-type(22) {
+        left: 330px;
+        top: 3321px;
+      }
+      &:nth-of-type(23) {
+        left: 650px;
+        top: 3427px;
+      }
+      &:nth-of-type(24) {
+        top: 3601px;
+      }
+      &:nth-of-type(25) {
+        left: 330px;
+        top: 3680px;
+      }
+      &:nth-of-type(26) {
+        left: 650px;
+        top: 3966px;
+      }
+      &:nth-of-type(27) {
+        top: 3980px;
+      }
+      &:nth-of-type(28) {
+        left: 330px;
+        top: 4101px;
+      }
+      &:nth-of-type(29) {
+        left: 650px;
+        top: 4365px;
+      }
+      &:nth-of-type(30) {
+        top: 4559px;
+      }
+      &:nth-of-type(31) {
+        left: 330px;
+        top: 4680px;
+      }
+      &:nth-of-type(32) {
+        left: 650px;
+        top: 4742px;
+      }
+    }
+  }
+}
+</style>

web/src/views/Exhibitions/info.vue

@@ -111,7 +111,7 @@
       </div>
     </div>
     <!-- 回到顶部 -->
-    <div class="back_btn" @click="backTop">Back to top</div>
+    <div class="back_btn" @click="backExh(topTxt)">Back to top</div>
     <!-- 点击预览大图 -->
     <ElImageViewer
       v-if="viewImgDialog"
@@ -189,10 +189,7 @@ export default {
       else if (val === 3)
         window.scrollTo({ top: Galleries.offsetTop, behavior: "smooth" });
     },
-    // 点击回到顶部
-    backTop() {
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    },
+
     // 点击放大镜预览图片
     imgBig(i) {
       this.srcList = [
@@ -238,7 +235,6 @@ export default {
   // 对重复的展览的处理
     if(k===4) this.dataUrl ='Past'
     else this.dataUrl =this.topTxt
-    console.log('-------',temp);
     temp.forEach((v) => {
       if (v.id === id) this.data = v.info;
       

web/src/views/layout/index.vue

@@ -238,7 +238,7 @@ export default {
   position: fixed;
   bottom: 150px;
   right: 0;
-  z-index: 999;
+  z-index: 990;
   .rightIco {
     width: 100%;
     height: 100%;