ShouBo/web/src/views/Exhibitions/info.vue

<template>
  <div class="ExhibitionsInfo">
    <div class="topImg">
      <img
        :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.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">
        <div class="title_2">{{ data.title }}</div>
        <div class="info">
          <span class="info_1">{{ data.date }}</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" v-html="item.tit"></p>
            <div class="fuTxt" 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-if="data.page"
              v-show="pageInd !== data.page.length - 1"
              @click="pageCut(pageInd + 1)"
            >
              &gt;
            </span>
          </div>
        </div>
      </div>
      <!-- Exhibition Objects -->
      <div class="picpart" ref="Objects" :class="{ null: data.objects === 0 }">
        <div class="title_3">——<span>Exhibition Objects</span>——</div>
        <!-- 图片 -->
        <div class="row" :class="{ show: showObjects }">
          <div class="rowOne" :title="i" v-for="i in data.objects" :key="i">
            <img
              :src="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`"
            />
            <!-- 输入移入的查看和下载按钮 -->
            <div class="mask">
              <a
                class="el-icon-download"
                :href="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/big${i}.png`"
                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"
        :class="{ nullG: data.galleries === 0 }"
      >
        <div class="title_3">——<span>Exhibition Galleries</span>——</div>
        <!-- 图片 -->
        <div class="box" :class="{ show: showGalleries }">
          <img
            :title="i"
            :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
            alt=""
            v-for="i in data.galleries"
            :key="i"
          />
        </div>
        <div class="more" v-show="data.galleries>3">
          <span @click="showGalleries = !showGalleries">{{
            showGalleries ? "Hide" : "See More"
          }}</span>
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="back_btn" @click="backExh(topTxt)">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, //分页的切换
      // 数据的路径
      dataUrl:''
    };
  },
  //监听属性 类似于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" });
    },

    // 点击放大镜预览图片
    imgBig(i) {
      this.srcList = [
        `/data/Exhibitions/${this.dataUrl}/objects${this.data.topImg}/big${i}.png`,
      ];
      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() {
    this.$eventBus.$emit('request-read', `You've reached the tertiary exhibition page. There is one navigation section, eight window sections, and one interactive section on this page. To choose a section, please hit the shortcut key.`)
    
    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");
    }
  // 对重复的展览的处理
    if(k===4) this.dataUrl ='Past'
    else this.dataUrl =this.topTxt
    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;
    text-align: center;
    & > img {
      max-width: 100%;
      max-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;
        .fuTxt {
          /deep/span {
            display: block;
            font-size: 18px;
            line-height: 26px;
            text-align: center;
          }
        }
        /deep/p {
          font-size: 18px;
          line-height: 26px;
          color: #1f1d1d;
          margin-top: 24px;
        }
        /deep/.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;
          margin-bottom: 2px;
          & > 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;
      }
    }
    .null {
      height: 0px;
      overflow: hidden;
      padding: 0;
      margin-top: 0;
      border: none;
    }
    .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;
      }
    }
    .nullG {
      height: 0px;
      overflow: hidden;
      padding: 0;
      margin-top: 0;
      border: none;
    }
  }
  .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>