修改Exhibitions 页面交互

web/src/views/Exhibitions/info.vue

@@ -84,7 +84,15 @@
     <!-- 内容-->
     <div class="conten">
       <!-- Exhibition Overview -->
-      <div class="y_box" ref="Overview">
+      <div class="y_box" ref="Overview" :class="{ y_boxShow: txtBaseShow }">
+        <!-- 初始的底部按钮和白色渐变 -->
+        <div class="baseStateBox">
+          <div class="baseStateBac"></div>
+          <div class="baseStateTxt" @click="txtBaseShowChangeFu">
+            Click here to see more
+          </div>
+        </div>
+
         <div
           class="title_area"
           data-aria-viewport-area
@@ -121,16 +129,13 @@
           <div class="title_3" tabindex="0">
             ——<span>Exhibition Overview</span>——
           </div>
-          <div
-            v-show="index === pageInd"
-            v-for="(item, index) in data.page"
-            :key="index"
-          >
+          <!-- v-show="index === pageInd" -->
+          <div v-for="(item, index) in data.page" :key="index">
             <p class="one" v-html="item.tit" tabindex="0"></p>
             <div class="fuTxt" v-html="item.article" tabindex="0"></div>
           </div>
           <!-- 分页 -->
-          <div class="paging">
+          <div class="paging" style="display: none">
             <span
               v-show="pageInd !== 0"
               @click="pageCut(pageInd - 1)"
@@ -188,7 +193,7 @@
             :key="i"
             tabindex="0"
             aria-label="Image"
-            :aria-description="tempArr[i-1]"
+            :aria-description="tempArr[i - 1]"
           >
             <img
               :src="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`"
@@ -205,7 +210,7 @@
               </a>
               <span
                 class="el-icon-search"
-                @click="imgBig(i)"
+                @click="imgBig(i, 1)"
                 @keydown.enter.passive="imgBig(i)"
                 tabindex="0"
                 aria-label="Button"
@@ -239,16 +244,41 @@
         <div class="title_3" tabindex="0">
           ——<span>Exhibition Galleries</span>——
         </div>
-        <!-- 图片 -->
         <div class="box" :class="{ show: showGalleries }">
-          <img
-            :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
-            alt=""
-            v-for="i in data.galleries"
-            :key="i"
-            tabindex="0"
-            aria-description=""
-          />
+          <div class="galleriesRow" v-for="i in data.galleries" :key="i">
+            <!-- 图片 -->
+            <img
+              :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
+              alt=""
+              tabindex="0"
+              aria-description=""
+            />
+            <!-- 输入移入的查看和下载按钮 -->
+            <div class="galleriesMask">
+              <a
+                class="el-icon-download"
+                :href="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
+                download
+                tabindex="0"
+              >
+                <i> Download</i>
+              </a>
+              <span
+                class="el-icon-search"
+                @click="
+                  imgBig(
+                    i,
+                    `/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`
+                  )
+                "
+                @keydown.enter.passive="imgBig(i)"
+                tabindex="0"
+                aria-label="Button"
+              >
+                <i> Enlarge </i>
+              </span>
+            </div>
+          </div>
         </div>
         <div class="more" v-show="data.galleries > 3">
           <span
@@ -305,6 +335,9 @@ export default {
       dataUrl: "",
       // 名字数据
       nameArr: {},
+      // 初始的隐藏文本
+      txtBaseShow: true,
+      yBoxDomHeight: 0,
     };
   },
   //监听属性 类似于data概念
@@ -313,6 +346,16 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    txtBaseShowChangeFu() {
+      const dom = document.querySelector(".y_box");
+      const height = dom.style.height;
+      const heightNum = Number(height.replace("px", ""));
+      if (heightNum + 400 >= this.yBoxDomHeight) {
+        this.txtBaseShow = true;
+      } else dom.style.height = heightNum + 400 + "px";
+    },
+    // 点击文本内容展示更多
+
     // 切换文字分页
     pageCut(val) {
       this.pageInd = val;
@@ -342,10 +385,12 @@ export default {
     },
 
     // 点击放大镜预览图片
-    imgBig(i) {
-      this.srcList = [
-        `/data/Exhibitions/${this.dataUrl}/objects${this.data.topImg}/big${i}.png`,
-      ];
+    imgBig(i, val) {
+      if (val === 1) {
+        this.srcList = [
+          `/data/Exhibitions/${this.dataUrl}/objects${this.data.topImg}/big${i}.png`,
+        ];
+      } else this.srcList = [val];
       this.viewImgDialog = true;
       // 给遮罩层绑定点击关闭事件
       this.$nextTick(() => {
@@ -375,6 +420,18 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        // 进页面获取 y_box的总长度
+        const dom = document.querySelector(".y_box");
+        this.yBoxDomHeight = dom.offsetHeight;
+        if (dom.offsetHeight > 600) {
+          dom.style.height = "600px";
+          this.txtBaseShow = false;
+        }
+      }, 20);
+    });
+
     setTimeout(() => {
       this.$eventBus.$emit(
         "request-read",
@@ -509,6 +566,33 @@ export default {
       background: #fff;
       border: 1px solid #e0e0e0;
       margin-bottom: 40px;
+      // height: 600px;
+      overflow-y: hidden;
+      position: relative;
+      .baseStateBox {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100px;
+        z-index: 98;
+        .baseStateTxt {
+          cursor: pointer;
+          height: 50px;
+          line-height: 50px;
+          background-color: #fff;
+          font-size: 20px;
+          color: #bf2323;
+          text-align: center;
+        }
+        .baseStateBac {
+          height: 50px;
+          background-image: linear-gradient(
+            rgba(255, 255, 255, 0.4),
+            rgba(255, 255, 255, 1)
+          );
+        }
+      }
       .title_2 {
         font-size: 30px;
         line-height: 44px;
@@ -577,6 +661,12 @@ export default {
         }
       }
     }
+    .y_boxShow {
+      height: auto !important;
+      .baseStateBox {
+        display: none;
+      }
+    }
     .picpart {
       height: auto;
       background: #fff;
@@ -654,13 +744,57 @@ export default {
         height: 260px;
         overflow: hidden;
         margin-top: 30px;
-        & > img {
+        display: flex;
+        flex-wrap: wrap;
+        .galleriesRow {
+          position: relative;
           width: 390px;
           height: 260px;
           margin: 0 4px 2px 0;
           &:nth-child(3n) {
             margin-right: 0;
           }
+          & > img {
+            width: 100%;
+            height: 100%;
+          }
+          .galleriesMask {
+            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: 80px;
+              display: block;
+              color: #fff;
+            }
+            i {
+              font-size: 18px;
+            }
+          }
+          &:hover,
+          &:focus-within {
+            .galleriesMask {
+              display: block;
+            }
+          }
         }
       }
       .show {