feat: 关于-展览-轮播图

public/staticConfig.js

@@ -120,6 +120,7 @@ var staticConfig = {
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '专题展览',
+      recommend: true,
     },
     {
       id: 3,
@@ -128,6 +129,7 @@ var staticConfig = {
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '主题临展',
+      recommend: true,
     },
     {
       id: 4,
@@ -136,6 +138,7 @@ var staticConfig = {
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '基本陈列',
+      recommend: true,
     },
     {
       id: 5,

src/views/about/ExhibitionView.vue

@@ -1,12 +1,24 @@
 <template>
   <div class="exhibition-view">
     <div class="wrapper">
-      <img
-        class="banner"
-        src="@/assets/images/about/banner_03.jpg"
-        alt=""
-        draggable="false"
+      <el-carousel
+        class="swiper"
+        :height="swiperHeight"
       >
+        <el-carousel-item
+          v-for="(item, index) in bannerList"
+          :key="index"
+          class="swiper-item"
+        >
+          <img
+            class="banner"
+            :src="`${$env.BASE_URL}images/${item.id}-big.jpg`"
+            alt=""
+            draggable="false"
+          >
+        </el-carousel-item>
+      </el-carousel>
+
       <div class="tab-bar">
         <button
           class="tab-item"
@@ -131,6 +143,16 @@ const exhibitionList = computed(() => {
   }
 })
 
+const swiperHeight = computed(() => {
+  return `calc(660 / 1920 * 100vw)`
+})
+
+const bannerList = computed(() => {
+  return staticConfig.exhibitionList.filter((item) => {
+    return item.recommend
+  })
+})
+
 const iframeUrl = ref('')
 const showIframe = ref(false)
 
@@ -155,9 +177,57 @@ function onClickSceneItem(item) {
     width: 100%;
     height: 100%;
     overflow: auto;
-    >.banner{
+    >.swiper{
       width: 100%;
+      ::v-deep{
+        ul.el-carousel__indicators{
+          display: flex;
+          align-items: center;
+          gap: 34px;
+          bottom: 23px;
+          >li.el-carousel__indicator{
+            >button{
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              background: #FFE794;
+              opacity: 0.5;
+              position: relative;
+              &::after{
+                content: '';
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
+                border: 1px dashed #FFE794;
+                display: none;
+              }
+            }
+          }
+          >li.el-carousel__indicator.is-active{
+            >button{
+              width: 16px;
+              height: 16px;
+              opacity: 1;
+              &::after{
+                display: initial;
+              }
+            }
+          }
+        }
+        .swiper-item{
+          >img.banner{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
     }
+
     >.tab-bar{
       height: 138px;
       display: flex;