feat: 关于-展览-展览列表

public/staticConfig.js

@@ -103,18 +103,57 @@ var staticConfig = {
       `,
     },
   ],
-
   // ## 展览
   exhibitionList: [
     {
-      name: '',
-      address: '',
-      date: '',
-      thumb: '',
-      type: '',
-    }
+      id: 1,
+      name: "永锡不匮--无锡慈善的传承与创新（善德名邦）",
+      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:93,qua:0.0003672651343559632,0.8562585754236621,-0.0006088002902584934,0.5165468991064768`,
+      date: '2024年5月27日至今',
+      address: '1号厅',
+      type: '基本陈列',
+    },
+    {
+      id: 2,
+      name: "永锡不匮--无锡慈善的传承与创新（善道为公）",
+      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:433,qua:0.005444343576967057,0.777935509128107,-0.006741132562691553,0.6282843660430556`,
+      date: '2024年5月27日至今',
+      address: '1号厅',
+      type: '专题展览',
+    },
+    {
+      id: 3,
+      name: "永锡不匮--无锡慈善的传承与创新（善者无疆）",
+      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:232,qua:-0.00018523724081728223,0.9268546983343686,0.0004573225593805949,0.3754199311652464`,
+      date: '2024年5月27日至今',
+      address: '1号厅',
+      type: '主题临展',
+    },
+    {
+      id: 4,
+      name: "文教春秋--荡口慈善文化与教育",
+      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:670,qua:0.0010361982917485185,0.9793875839043288,-0.0050258303567850705,0.2019247886434278`,
+      date: '2024年5月27日至今',
+      address: '1号厅',
+      type: '基本陈列',
+    },
+    {
+      id: 5,
+      name: "薪火鸿模--鸿模小学历史文化",
+      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-2e4SwPKzjZz&firstView=pano:16,qua:-0.004615061680190784,-0.05639108346896922,-0.000260665886610734,0.9983980565048178`,
+      date: '2024年5月27日至今',
+      address: '1号厅',
+      type: '基本陈列',
+    },
+    {
+      id: 6,
+      name: "慈·善--从手到心的给予",
+      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:465,qua:-0.04471889285056369,0.6934088933805184,0.04319590870552653,0.7178568337448256`,
+      date: '2024年5月27日至今',
+      address: '1号厅',
+      type: '基本陈列'
+    },
   ],
-
   // ## 服务
   serviceList: [
     {

src/views/about/ExhibitionView.vue

@@ -1,49 +1,104 @@
 <template>
   <div class="exhibition-view">
-    <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"
+    <div class="wrapper">
+      <img
+        class="banner"
+        src="@/assets/images/about/banner_03.jpg"
+        alt=""
+        draggable="false"
       >
-        全部
-      </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 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>
 
@@ -51,6 +106,7 @@
 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()
@@ -59,29 +115,172 @@ 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;
-  .banner{
+  >.wrapper{
+    position: absolute;
+    left: 0;
+    top: 0;
     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;
+    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;
+      }
     }
-    >.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%;
     }
   }
 }