WuxiCharityMuseum/src/views/about/ExhibitionView.vue

<template>
  <div class="exhibition-view">
    <div class="wrapper">
      <img
        class="banner"
        src="@/assets/images/about/banner_03.jpg"
        alt=""
        draggable="false"
      >
      <div class="tab-bar">
        <button
          class="tab-item"
          :class="{
            active: activeTabIdx === 0
          }"
          @click="activeTabIdx = 0"
        >
          全部
        </button>
        <button
          class="tab-item"
          :class="{
            active: activeTabIdx === 1
          }"
          @click="activeTabIdx = 1"
        >
          基本陈列
        </button>
        <button
          class="tab-item"
          :class="{
            active: activeTabIdx === 2
          }"
          @click="activeTabIdx = 2"
        >
          专题展览
        </button>
        <button
          class="tab-item"
          :class="{
            active: activeTabIdx === 3
          }"
          @click="activeTabIdx = 3"
        >
          主题临展
        </button>
      </div>

      <div class="list-wrap">
        <ul class="list">
          <li
            v-for="item in exhibitionList"
            :key="item.id"
            class="list-item"
            @click="onClickSceneItem(item)"
          >
            <img
              class="thumb"
              :src="`${$env.BASE_URL}images/${item.id}.jpg`"
              alt=""
              draggable="false"
            >
            <div class="bottom-wrap">
              <div
                v-show="exhibitionTypeList.indexOf(item.type) !== 1"
                class="type"
                :class="`type-${exhibitionTypeList.indexOf(item.type)}`"
              >
                {{ item.type }}
              </div>
              <h3
                class="title"
                :title="item.name"
              >
                {{ item.name }}
              </h3>
              <div
                class="address"
                :title="item.address"
              >
                展览地点：{{ item.address }}
              </div>
              <div
                class="date"
                :title="item.date"
              >
                展览时间：{{ item.date }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <IframeWrap
      v-if="showIframe"
      class="iframe-wrap"
      :url="iframeUrl"
      :need-back-btn="true"
      @back="showIframe = false"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import IframeWrap from '@/components/IframeWrap.vue'

const route = useRoute()
const router = useRouter()
const store = useStore()

const $env = inject('$env')

const activeTabIdx = ref(0)
const exhibitionTypeList = [
  '全部',
  '基本陈列',
  '专题展览',
  '主题临展',
]
const exhibitionList = computed(() => {
  if (activeTabIdx.value === 0) {
    return staticConfig.exhibitionList
  } else {
    return staticConfig.exhibitionList.filter((item) => {
      return item.type === exhibitionTypeList[activeTabIdx.value]
    })
  }
})

const iframeUrl = ref('')
const showIframe = ref(false)

function onClickSceneItem(item) {
  iframeUrl.value = item.url
  showIframe.value = true
}
</script>

<style lang="less" scoped>
.exhibition-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  >.wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    >.banner{
      width: 100%;
    }
    >.tab-bar{
      height: 138px;
      display: flex;
      justify-content: center;
      text-align: center;
      gap: calc(184 / 1920 * 100vw);
      >.tab-item {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24px;
        color: #474747;
      }
      >.tab-item.active{
        font-weight: bold;
      }
    }
    >.list-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
      >ul.list{
        position: relative;
        transform: translateX(calc(35Px / 2));
        width: calc(488Px * 3 + 35Px * 3);
        padding-bottom: 50Px;
        @media (max-width: 1500Px) {
          width: calc(488Px * 2 + 35Px * 2);
        }
        @media (max-width: 1000Px) {
          width: calc(488Px * 1 + 35Px * 1);
        }
        >li.list-item{
          position: relative;
          flex: 0 0 auto;
          width: 488Px;
          height: 439Px;
          background-color: #fff;
          border-radius: 5Px 5Px 5Px 5Px;
          overflow: auto;
          margin-right: 35Px;
          margin-bottom: 32Px;
          cursor: pointer;
          >img.thumb{
            width: 100%;
            height: 320Px;
          }
          >.bottom-wrap{
            width: 100%;
            padding-left: 29Px;
            padding-right: 29Px;
            >.type{
              position: absolute;
              top: 16px;
              right: 28px;
              width: 116px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 5px 5px 5px 5px;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #FFFFFF;
              &.type-1{
              }
              &.type-2{
                background: rgba(255,231,148,0.5);
                border: 1px solid #FFE794;
              }
              &.type-3{
                background: rgba(88,148,152,0.5);
                border: 1px solid #589498;
              }
            }
            >h3.title{
              margin-top: 16px;
              overflow: hidden;
              white-space: pre;
              text-overflow: ellipsis;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 24px;
              color: #474747;
            }
            >.address{
              margin-top: 6px;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #474747;
              opacity: 0.8;
            }
            >.date{
              margin-top: 6px;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #474747;
              opacity: 0.8;
            }
          }
        }
        >li.list-item:hover{
          box-shadow: 0Px 4Px 29Px 0Px rgba(0,0,0,0.25);
        }
      }
    }
  }
  .iframe-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 10;
    >iframe{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>