up

webM/src/views/Exhibitions/Detail.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="ExDetail">
+    <div class="topImg">
+      <img
+        :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
+        alt=""
+      />
+    </div>
+    <div class="main">
+      <!-- 1 -->
+      <div class="box1">
+        <h3 v-html="data.title"></h3>
+        <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>
+      <!-- 2 -->
+      <div class="box2">
+        <div class="title">Exhibition Overview</div>
+        <div class="card">
+          <div
+            class="row"
+            @click="cutInfo"
+            v-for="(item, index) in data.page"
+            :key="index"
+            :style="`top:${index * 15}px;width:${100 - index * 5}%;opacity:${
+              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>
+            <div class="txt" v-if="index === 0">
+              <h3>{{ info.tit }}</h3>
+              <div v-html="info.article"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 3 -->
+      <div class="box3" v-if="data.objects">
+        <div class="title">Exhibition Objects</div>
+        <div class="box3_Obj" @touchstart="touchstart" @touchmove="touchmove">
+          <div v-for="i in 9" :key="i" :class="{ active: ObjInd === i }">
+            <img
+              :src="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`"
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dataAll } from "./dataAll";
+export default {
+  name: "ExDetail",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+      dataUrl: "",
+      // Overview的变量
+      info: {},
+      cardInd: 0,
+      // Objects
+      ObjInd: 5,
+      startX: 0,
+      startY: 0,
+      moveX: 0,
+      moveY: 0,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // Obj的滑动
+    touchstart(e) {
+      this.startX = e.touches[0].clientX;
+      this.startY = e.touches[0].clientY;
+    },
+    touchmove(e) {
+      // e.preventDefault()
+      this.moveX = e.touches[0].clientX;
+      this.moveY = e.touches[0].clientY;
+      // this.startX - this.moveX <= 0
+      //   ? console.log("你在往右滑")
+      //   : console.log("你在往左滑");
+      // if (this.startX - this.moveX <= -100) {
+      //  console.log("你在往右滑")
+      // }
+    },
+    cutInfo() {
+      let dom = document.querySelector(".card");
+      let domScroll = document.querySelector(".txt");
+      domScroll.scrollTo({ top: 0 });
+      dom.style.opacity = 0;
+      setTimeout(() => {
+        if (this.cardInd < this.data.page.length - 1) this.cardInd++;
+        else this.cardInd = 0;
+        this.info = this.data.page[this.cardInd];
+        dom.style.opacity = 1;
+      }, 300);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前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;
+    });
+    // 动态控制cardCom元素的高度
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let tempArr = this.data.page;
+        let dom = document.querySelector(".card");
+        dom.style.height = 500 + (tempArr.length - 1) * 15 + "px";
+        this.info = tempArr[0];
+      }, 300);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.txt::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.txt::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #d9cdb6;
+}
+.txt::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  width: 0px;
+  background: transparent;
+}
+
+.ExDetail {
+  width: 100%;
+  .topImg {
+    width: 100%;
+    & > img {
+      width: 100%;
+      height: 300px;
+      object-fit: cover;
+    }
+  }
+  .main {
+    padding: 20px;
+    .title {
+      height: 30px;
+      line-height: 30px;
+      background: url("../../assets/img/Layout/title.png") left center no-repeat;
+      background-size: 41px 29px;
+      color: #c1aa7b;
+      font-size: 22px;
+      padding-left: 50px;
+      margin-bottom: 20px;
+      font-weight: 700;
+    }
+  }
+  .box1 {
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    & > h3 {
+      font-size: 18px;
+      margin-bottom: 15px;
+    }
+    .info {
+      font-size: 14px;
+      line-height: 36px;
+      color: #666;
+      overflow: hidden;
+      zoom: 1;
+      margin-bottom: 20px;
+      & > span {
+        padding: 0 30px;
+        display: block;
+        float: left;
+      }
+      .info_1 {
+        background: url("../../assets/img/bg_5.png") left 8px no-repeat;
+      }
+      .info_2 {
+        background: url("../../assets/img/bg_6.png") left 8px no-repeat;
+      }
+      .info_3 {
+        background: url("../../assets/img/bg_7.png") left 8px no-repeat;
+      }
+    }
+  }
+  .box2 {
+    padding: 40px 0;
+    border-bottom: 1px solid #ccc;
+    .card {
+      transition: all 0.3s;
+      position: relative;
+      width: 100%;
+      .row {
+        width: 100%;
+        height: 500px;
+        background-color: #fff;
+        box-shadow: 0px 1px 4px 3px #ccc;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        .page {
+          position: absolute;
+          font-weight: 700;
+          right: 5px;
+          bottom: 5px;
+          font-size: 16px;
+        }
+        .txt {
+          padding: 20px;
+          width: 100%;
+          height: 480px;
+          overflow-y: auto;
+          & > h3 {
+            color: #bc1c24;
+            font-size: 16px;
+            margin-bottom: 15px;
+          }
+          & > p {
+            font-size: 14px;
+            line-height: 18px;
+            margin-bottom: 15px;
+          }
+        }
+      }
+    }
+  }
+  .box3 {
+    padding: 40px 0;
+    border-bottom: 1px solid #ccc;
+    .box3_Obj {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      & > div {
+        border-radius: 8px;
+        overflow: hidden;
+        width: 5%;
+        height: 290px;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .active {
+        width: 45%;
+        height: 300px;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+</style>