feat: --

src/views/about/InstitutionView.vue

@@ -3,6 +3,23 @@
     class="institution-view"
   >
     <div class="page-1">
+      <ElCarousel
+        class="page-1-carousel"
+        height="100%"
+        direction="vertical"
+        arrow="never"
+        :interval="4000"
+      >
+        <ElCarouselItem
+          v-for="url of bannerBgs"
+          :key="url"
+        >
+          <ElImage
+            :src="url"
+            fit="cover"
+          />
+        </ElCarouselItem>
+      </ElCarousel>
       <div class="text-wrap">
         <img
           class="title"
@@ -23,7 +40,7 @@
         </div>
       </div>
     </div>
-    <div class="page-2">
+    <!-- <div class="page-2">
       <TableTitle
         text-cn="领导成员"
         text-en="MEMBER"
@@ -46,7 +63,7 @@
           <div class="line-splitter" />
         </li>
       </ul>
-    </div>
+    </div> -->
     <div class="page-3">
       <TableTitle
         text-cn="管理信息"
@@ -74,7 +91,7 @@
             章程
           </button>
           <div class="splitter" />
-          <button
+          <!-- <button
             class="tab-item"
             :class="{
               active: p3ActiveTabIdx === 2
@@ -102,7 +119,7 @@
             @click="p3ActiveTabIdx = 4"
           >
             计划
-          </button>
+          </button> -->
         </menu>
         <div class="detail-area">
           <div
@@ -119,6 +136,11 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import bg1 from '@/assets/images/institution/1-min.jpg'
+import bg2 from '@/assets/images/institution/2-min.jpg'
+import bg3 from '@/assets/images/institution/3-min.jpg'
+import bg4 from '@/assets/images/institution/4-min.jpg'
+import { ElImage } from "element-plus"
 
 const route = useRoute()
 const router = useRouter()
@@ -126,6 +148,9 @@ const store = useStore()
 
 const $env = inject('$env')
 
+const bannerBgs = [
+  bg1, bg2, bg3, bg4
+]
 const museumDesc = staticConfig.museumDesc
 const memberList = staticConfig.memberList
 const managementInfo = [
@@ -147,12 +172,22 @@ const p3ActiveTabIdx = ref(0)
   width: 100%;
   height: 100%;
   overflow: auto;
-  >.page-1{
+  :deep(.el-carousel__indicators) {
+    display: flex;
+    flex-direction: column;
+  }
+  .page-1{
+    position: relative;
     height: 100%;
-    background-image: url(@/assets/images/about/banner_01.jpg);
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
+    &-carousel {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
     >.text-wrap{
       position: absolute;
       top: 0;