展览详情页大改版

src/views/ExhibitionDetail.vue

@@ -4,6 +4,8 @@
       style="z-index: 1;"
       @click.native="onClickPageBack"
     />
+
+    <!-- 放大查看相关 -->
     <div
       v-if="showMask"
       class="mask"
@@ -19,12 +21,6 @@
           autoplay
           playsinline
         />
-        <img
-          src="@/assets/image/close.png"
-          alt=""
-          class="close"
-          @click="onClickCloseMask"
-        >
       </div>
       <div
         v-if="imageSrc"
@@ -35,13 +31,13 @@
           :src="imageSrc"
           alt=""
         >
-        <img
-          src="@/assets/image/close.png"
-          alt=""
-          class="close"
-          @click="onClickCloseMask"
-        >
       </div>
+      <img
+        src="@/assets/image/close2.png"
+        alt=""
+        class="close"
+        @click="onClickCloseMask"
+      >
     </div>
 
     <div
@@ -55,49 +51,155 @@
       <BackBtn @click.native="onClickCloseIframe" />
     </div>
 
-    <div class="vwcon">
-      <vue-waterfall-easy
-        :imgs-arr="imageList"
-        :mobile-gap="10"
-        class="vwf"
-        :max-cols="2"
-        :img-width="waterfallImgWidth"
-        @click="onClickExhibitionImage"
+    <article class="description">
+      <h3>{{ title }}</h3>
+      <p
+        v-if="choosenExhibition.textDetail"
+        class="detail"
+      >
+        {{ choosenExhibition.textDetail }}
+      </p>
+      <p
+        v-if="choosenExhibition.remark"
+        class="remark"
       >
-        <!-- 顶部item图片 -->
-        <div
-          v-if="topItemImage !== null"
-          slot="waterfall-head"
-          class="wf-head"
-          @click="onClickTopExhibitionImage"
+        备注：{{ choosenExhibition.remark }}
+      </p>
+    </article>
+
+    <div class="tab-bar">
+      <button
+        :class="{active: curTabIdx === 0}"
+        @click="curTabIdx = 0"
+      >
+        虚拟展厅
+      </button>
+      <button
+        :class="{active: curTabIdx === 1}"
+        @click="curTabIdx = 1"
+      >
+        展览视频
+      </button>
+      <button
+        :class="{active: curTabIdx === 2}"
+        @click="curTabIdx = 2"
+      >
+        展览图片
+      </button>
+    </div>
+
+    <div
+      v-show="curTabIdx === 0"
+      class="link-wrap"
+    >
+      <button
+        v-for="(item) of choosenExhibition.link"
+        :key="item.link"
+        @click="onClickLink(item.link)"
+      >
+        <img
+          class="cover-img"
+          :src="`${$backEndBaseUrl}exhibition-data/${$route.query.exhibitionId}/${item.cover}`"
+          alt=""
         >
-          <img
-            :src="topItemImage.src"
-            alt=""
-          >
+        <img
+          src="@/assets/image/virtual-exhibition-hall-link-icon.png"
+          alt=""
+          class="link-icon"
+        >
+      </button>
+      <div
+        v-if="choosenExhibition.link.length === 0"
+        class="no-data"
+      >
+        <img
+          src="@/assets/image/no-data.png"
+          alt=""
+        >
+        <div>敬请期待</div>
+      </div>
+    </div>
+
+    <div
+      v-show="curTabIdx === 1"
+      class="video-wrap"
+    >
+      <button
+        v-for="(item) of choosenExhibition.video"
+        :key="item.video"
+        @click="onClickVideo(item.video)"
+      >
+        <img
+          class="cover-img"
+          :src="`${$backEndBaseUrl}exhibition-data/${$route.query.exhibitionId}/${item.cover}`"
+          alt=""
+        >
+        <img
+          src="@/assets/image/play-2.png"
+          alt=""
+          class="link-icon"
+        >
+        <!-- <h3>{{ item.video.split('.').slice(0, item.video.split('.').length - 1).join('') }}</h3> -->
+      </button>
+      <div
+        v-if="choosenExhibition.video.length === 0"
+        class="no-data"
+      >
+        <img
+          src="@/assets/image/no-data.png"
+          alt=""
+        >
+        <div>敬请期待</div>
+      </div>
+    </div>
+
+    <div
+      v-show="curTabIdx === 2"
+      class="image-wrap"
+    >
+      <div
+        v-if="choosenExhibition.imageNumber !== 0"
+        class="waterfall-wrap"
+      >
+        <vue-waterfall-easy
+          :imgs-arr="imageList"
+          :mobile-gap="10"
+          class="water-fall"
+          :max-cols="2"
+          :img-width="waterfallImgWidth"
+          @click="onClickExhibitionImage"
+        >
+          <!-- 顶部item图片 -->
           <div
-            v-if="topItemImage.type === 'video'"
-            class="play-icon"
+            v-if="topItemImage !== null"
+            slot="waterfall-head"
+            class="wf-head"
+            @click="onClickTopExhibitionImage"
           >
             <img
-              :src="require('@/assets/image/play.png')"
+              :src="topItemImage.src"
               alt=""
             >
           </div>
-        </div>
-        <!-- 瀑布流中各元素 -->
-        <div
-          v-if="props.value.type === 'video'"
-          slot-scope="props"
-          class="img-info"
+        </vue-waterfall-easy>
+      </div>
+      <div
+        v-if="choosenExhibition.imageNumber === 0"
+        class="no-data"
+      >
+        <img
+          src="@/assets/image/no-data.png"
+          alt=""
         >
-          <img
-            :src="require('@/assets/image/play.png')"
-            :alt="props.index"
-          >
-        </div>
-      </vue-waterfall-easy>
+        <div>敬请期待</div>
+      </div>
     </div>
+
+    <img
+      class="background-image"
+      src="@/assets/image/bg-text.png"
+      alt=""
+    >
   </div>
 </template>
 
@@ -111,37 +213,26 @@ export default {
   },
   data() {
     return {
+      exhibitionData,
       showMask: false,
+      showIframe: false,
       videoSrc: null,
       imageSrc: null,
       linkSrc: null,
-
-      showIframe: false,
-
-      exhibitionData,
+      curTabIdx: 0,
     }
   },
   computed: {
     choosenExhibition() {
       return this.exhibitionData[this.$route.query.exhibitionType][this.$route.query.exhibitionId]
     },
+    title() {
+      return this.choosenExhibition.title.split('<br>').join('')
+    },
     topItemImage() {
-      if (this.choosenExhibition?.video?.length) {
-        return {
-          src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${this.choosenExhibition.video[0].cover}`,
-          type: 'video',
-          videoSrc: this.choosenExhibition.video[0].video,
-        }
-      } else if (this.choosenExhibition?.link?.length) {
-        return {
-          src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${this.choosenExhibition.link[0].cover}`,
-          type: 'link',
-          linkSrc: this.choosenExhibition.link[0].link,
-        }
-      } else if (this.choosenExhibition.imageNumber !== 0) {
+      if (this.choosenExhibition.imageNumber !== 0) {
         return {
           src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/1.jpg`,
-          type: 'image',
         }
       } else {
         return null
@@ -149,24 +240,9 @@ export default {
     },
     imageList() {
       let ret = []
-      for (const iterator of this.choosenExhibition.video || []) {
-        ret.push({
-          src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${iterator.cover}`,
-          type: 'video',
-          videoSrc: iterator.video
-        })
-      }
-      for (const iterator of this.choosenExhibition.link || []) {
-        ret.push({
-          src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${iterator.cover}`,
-          type: 'link',
-          linkSrc: iterator.link
-        })
-      }
       for (let index = 0; index < this.choosenExhibition.imageNumber; index++) {
         ret.push({
           src: `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${index + 1}.jpg`,
-          type: 'image',
         })
       }
       ret.shift()
@@ -197,21 +273,21 @@ export default {
       this.linkSrc = null
     },
     onClickExhibitionImage(e, { index, value }) {
-      if (value.type === 'video') {
-        this.showMask = true
-        this.videoSrc = `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${value.videoSrc}`
-      } else if (value.type === 'link') {
-        this.showIframe = true
-        this.linkSrc = value.linkSrc
-        // window.open(value.linkSrc)
-      } else if (value.type === 'image') {
-        this.showMask = true
-        this.imageSrc = value.src
-      }
+      this.showMask = true
+      this.imageSrc = value.src
     },
     onClickTopExhibitionImage(e) {
       this.onClickExhibitionImage(e, { index: null, value: this.topItemImage })
     },
+    onClickLink(linkSrc) {
+      this.showIframe = true
+      this.linkSrc = linkSrc
+      // window.open(linkSrc)
+    },
+    onClickVideo(videoSrc) {
+      this.showMask = true
+      this.videoSrc = `${this.$backEndBaseUrl}exhibition-data/${this.$route.query.exhibitionId}/${videoSrc}`
+    }
   },
 }
 </script>
@@ -221,47 +297,39 @@ export default {
   height: 100%;
   box-sizing: border-box;
   overflow: hidden;
-  padding: 0.5rem;
+  padding-left: 0.9rem;
+  padding-right: 0.9rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
   .mask {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.9);
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 0.91rem;
     .video-wrapper {
       position: relative;
-      .close {
-        position: fixed;
-        top: 0.31rem;
-        right: 0.31rem;
-        height: 1.5rem;
-        width: 1.5rem;
-      }
       video {
         width: 100%;
       }
     }
     .image-wrapper {
       position: relative;
-      .close {
-        position: fixed;
-        top: 0.31rem;
-        right: 0.31rem;
-        height: 1.5rem;
-        width: 1.5rem;
-      }
       img {
         width: 100%;
       }
     }
-    .large-image {
-      width: 100%;
+    .close {
+      position: fixed;
+      top: 1.34rem;
+      left: 0.91rem;
+      width: 0.63rem;
     }
     h2 {
       font-size: 0.91rem;
@@ -289,42 +357,176 @@ export default {
       height: 100%;
     }
   }
-  .vwcon {
-    width: 100%;
-    height: 100%;
-    .play-icon {
-      position: absolute;
-      right: 0.5rem;
-      top: 0.5rem;
-      >img{
-        width: 0.8rem;
-        height: 0.8rem;
+  > .description {
+    flex: 0 0 auto;
+    > h3 {
+      text-align: center;
+      font-size: 0.75rem;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #727272;
+      margin-top: calc(1.23rem - (1.33rem - 0.75rem) / 2);
+      line-height: 1.33rem;
+    }
+    > .detail {
+      font-size: 0.75rem;
+      font-family: Source Han Sans CN;
+      color: #6C6C6C;
+      line-height: 1.25rem;
+      text-indent: 2em;
+      margin-top: calc(0.92rem - (1.25rem - 0.75rem) / 2 - (1.33rem - 0.75rem) / 2);
+    }
+    > .remark {
+      font-size: 0.75rem;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #FF4A03;
+      line-height: 1.25rem;
+      margin-top: calc(0.86rem - (1.25rem - 0.75rem) / 2 - (1.25rem - 0.75rem) / 2);
+    }
+  }
+  > .tab-bar {
+    flex: 0 0 auto;
+    height: 1.34rem;
+    background-color: rgba(255, 74, 3, 0.05);
+    display: flex;
+    border-bottom: 0.03rem solid #FF4A03;
+    margin-top: calc(1.06rem - (1.25rem - 0.75rem) / 2);
+    margin-bottom: 1.41rem;
+    > button {
+      width: 1px;
+      flex: 1 0 auto;
+      background: none;
+      border: none;
+      font-size: 0.75rem;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #3F3F3F;
+      transition: background-color 0.333s;
+      &.active {
+        background-color: #FF4A03;
+        color: white;
       }
     }
-    .vwf {
-      width: 100%;
+  }
+  > .link-wrap {
+    height: 1px;
+    flex: 1 0 auto;
+    > button {
+      display: block;
+      position: relative;
+      border: none;
+      background: none;
+      margin-bottom: 0.78rem;
+      > .cover-img {
+        width: 100%;
+        border-radius: 0.47rem;
+      }
+      > .link-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1.41rem;
+        height: 1.41rem;
+      }
+    }
+    > .no-data {
+      text-align: center;
+      > img {
+        width: 9.41rem;
+      }
+      > div {
+        font-size: 1.41rem;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #7F7F7F;
+        margin-top: 1rem;
+      }
+    }
+  }
+  > .video-wrap {
+    height: 1px;
+    flex: 1 0 auto;
+    text-align: center;
+    overflow: auto;
+    > button {
+      display: block;
+      position: relative;
+      border: none;
+      background: none;
+      margin-bottom: 0.78rem;
+      > .cover-img {
+        width: 100%;
+        border-radius: 0.47rem;
+      }
+      > .link-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1.41rem;
+        height: 1.41rem;
+      }
+    }
+    > .no-data {
+      text-align: center;
+      > img {
+        width: 9.41rem;
+      }
+      > div {
+        font-size: 1.41rem;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #7F7F7F;
+        margin-top: 1rem;
+      }
+    }
+  }
+  > .image-wrap {
+    flex: 1 0 auto;
+    height: 1px;
+    .waterfall-wrap {
       height: 100%;
-      .wf-head {
+      .water-fall {
         width: 100%;
-        padding: 4px;
-        box-sizing: border-box;
-        > img {
+        height: 100%;
+        .wf-head {
           width: 100%;
-          border-radius: 0.2rem;
-          overflow: hidden;
+          padding: 4px;
+          box-sizing: border-box;
+          > img {
+            width: 100%;
+            border-radius: 0.47rem;
+          }
         }
       }
-      .img-info{
-        position: absolute;
-        right: 0.5rem;
-        top: 0.5rem;
-        >img{
-          width: 0.8rem;
-          height: 0.8rem;
-        }
+    }
+    > .no-data {
+      text-align: center;
+      > img {
+        width: 9.41rem;
+      }
+      > div {
+        font-size: 1.41rem;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #7F7F7F;
+        margin-top: 1rem;
       }
     }
   }
+  .background-image {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
 }
 </style>
 
@@ -335,5 +537,6 @@ export default {
 .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
   box-shadow: none !important;
   overflow: hidden;
+  border-radius: 0.47rem !important;
 }
 </style>

src/views/ExhibitionDetailAnimation.vue

@@ -62,7 +62,7 @@ export default {
       return this.exhibitionData[this.$route.query.exhibitionType][this.$route.query.exhibitionId]
     },
     title() {
-      return this.choosenExhibition.text.split('<br>').join('')
+      return this.choosenExhibition.title.split('<br>').join('')
     },
     time() {
       return this.choosenExhibition.time

src/views/Home.vue

@@ -54,7 +54,7 @@
     <img
       class="background-image"
       src="@/assets/image/bg-text.png"
-      alt="background"
+      alt=""
     >
   </div>
 </template>

src/views/TreeSelection.vue

@@ -72,7 +72,7 @@
           v-for="item in exhibitionData.theme"
           :key="item.id"
           :arrow-down="item.arrowDown"
-          :text="item.text"
+          :text="item.title"
           :theme="item.theme"
           :class="item.id"
           :link-to="`/ExhibitionDetailAnimation?exhibitionType=theme&exhibitionId=${item.id}`"
@@ -102,7 +102,7 @@
           v-for="item in exhibitionData.wuyiba"
           :key="item.id"
           :arrow-down="item.arrowDown"
-          :text="item.text"
+          :text="item.title"
           :theme="item.theme"
           :class="item.id"
           :link-to="`/ExhibitionDetailAnimation?exhibitionType=wuyiba&exhibitionId=${item.id}`"
@@ -129,7 +129,7 @@
           v-for="item in exhibitionData.traditionModern"
           :key="item.id"
           :arrow-down="item.arrowDown"
-          :text="item.text"
+          :text="item.title"
           :theme="item.theme"
           :class="item.id"
           :link-to="`/ExhibitionDetailAnimation?exhibitionType=traditionModern&exhibitionId=${item.id}`"