展览页面更改为轮播

src/views/collection/index.vue

@@ -312,7 +312,7 @@ onUnmounted(() => {
 </script>
 <style>
 .search-container-collect {
-  padding: 10px 15px;
+  padding: 0 15px;
 }
 
 .search-container-collect .search-input {
@@ -354,7 +354,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .collection-container {
   height: calc(100vh); // 减去底部导航栏高度
-  padding-bottom: 78px; // 为底部导航栏留出空间
+  // padding-bottom: 78px; // 为底部导航栏留出空间
   background: url('@/assets/collection/bg.png') no-repeat;
   background-size: cover;
   // overflow-y: auto;
@@ -371,7 +371,6 @@ onUnmounted(() => {
   position: sticky;
   top: 0;
   z-index: 10;
-  background-color: rgba(245, 242, 235, 0.95);
 }
 
 .nav-scroll-container {
@@ -447,8 +446,8 @@ onUnmounted(() => {
 }
 
 .content-section {
-  padding: 15px;
-  height: calc(100vh - 230px);
+  padding: 20px;
+  height: calc(100vh - 210px);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }

src/views/exhibition/index.vue

@@ -5,18 +5,29 @@
     @scroll="handleScroll"
   >
     <!-- 轮播图部分 -->
-    <div class="carousel-section">
-      <div style="position: relative" @click="goToDetail(item.exhibitId)">
-        <img
-          src="https://klmybwg.4dage.com//mini/wxImg/zhanlan.png"
-          alt="展览图片"
-          class="carousel-img"
-        />
+    <div class="carousel-section" v-if="carouselList.length > 0">
+      <el-carousel :interval="4000" type="card" height="160px">
+        <el-carousel-item v-for="item in carouselList" :key="item">
+          <div style="position: relative; height: 160px" @click="goToDetail(item)">
+            <img :src="getFieldValue(item, 'img')" alt="展览图片" class="carousel-img" />
+            <div
+              v-if="getFieldValue(item, 'webSite')"
+              class="online-exhibition"
+              @click.stop="goToOnlineExhibition(item)"
+            >
+              <img class="online-icon" src="@/assets/exhibition/online-kz.png" alt="线上观展" />
+              <span class="online-text">线上观展</span>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+      <!-- <div style="position: relative; height: 160px" @click="goToDetail(item.exhibitId)">
+        <img src="/wxImg/zhanlan.jpg" alt="展览图片" class="carousel-img" />
         <div class="online-exhibition" @click.stop="goToOnlineExhibition(item)">
           <img class="online-icon" src="@/assets/exhibition/online-kz.png" alt="线上观展" />
           <span class="online-text">线上观展</span>
         </div>
-      </div>
+      </div> -->
     </div>
 
     <!-- 展厅分类 -->
@@ -37,7 +48,7 @@
         class="exhibition-item"
         v-for="item in exhibitionList"
         :key="item.exhibitId"
-        @click="goToDetail(item.exhibitId)"
+        @click="goToDetail(item)"
       >
         <img :src="getFieldValue(item, 'img')" alt="展览" class="exhibition-img" />
         <div class="exhibition-info">
@@ -102,6 +113,7 @@ const getCarouselData = async () => {
       pageNum: 1,
       pageSize: 5,
       type: 0,
+      recommend: 1,
     }
 
     // 预览模式下添加status参数
@@ -191,9 +203,12 @@ const handleScroll = async () => {
 }
 
 // 跳转到详情页面
-const goToDetail = (id) => {
+const goToDetail = (item) => {
+  if (getFieldValue(item, 'webSite')) {
+    return
+  }
   const query = {
-    id: id,
+    id: item.exhibitId,
     type: 'exhibition',
     isFromPage: 'exhibition',
   }
@@ -208,12 +223,13 @@ const goToDetail = (id) => {
     query: query,
   })
 }
-const goToOnlineExhibition = () => {
+const goToOnlineExhibition = (item) => {
   let url
   if (isPreviewMode.value) {
-    url = 'https://klmybwg.4dage.com/KLMYScene/index.html?m=SG-alDn3FU4jQ8'
+    // url = 'https://klmybwg.4dage.com/KLMYScene/index.html?m=SG-alDn3FU4jQ8'
+    url = item.webSiteB
   } else {
-    url = 'https://klmybwg.4dage.com/KLMYScene/index.html?m=SG-alDn3FU4jQ8'
+    url = item.webSite
   }
   if (url) {
     window.open(url, '_blank')
@@ -245,10 +261,17 @@ onMounted(async () => {
 }
 
 .carousel-section {
-  margin-bottom: 20px;
+  padding-top: 20px;
+  :deep(.el-carousel) {
+    margin-left: -20px;
+  }
 
-  :depp(.el-carousel__item) {
-    position: relative;
+  :deep(.el-carousel__item--card) {
+    width: 81%;
+  }
+  :deep(.el-carousel__item--card.is-active) {
+    transform: translateX(50.2px) scale(1) !important;
+    border-radius: 16px;
   }
 
   .online-exhibition {
@@ -312,7 +335,7 @@ onMounted(async () => {
   padding: 0 20px;
   display: flex;
   justify-content: space-around;
-  margin-bottom: 20px;
+  margin: 20px 0;
 
   .category-item {
     display: flex;
@@ -350,7 +373,7 @@ onMounted(async () => {
 }
 
 .exhibition-list {
-  padding: 0 20px;
+  padding: 0 30px;
   max-height: calc(100vh - 300px);
   // overflow-y: auto;
 
@@ -359,10 +382,10 @@ onMounted(async () => {
     position: relative;
     flex: 0 0 auto;
     width: 100%;
-    height: 206px;
+    height: 160px;
     border-radius: 8px;
     overflow: hidden;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     cursor: pointer;
     transition: all 0.3s ease;
 
@@ -377,7 +400,7 @@ onMounted(async () => {
 
     .exhibition-img {
       width: 100%;
-      height: 206px;
+      height: 160px;
       object-fit: cover;
     }
 

src/views/exhibition/index.vue.rej

@@ -0,0 +1,9 @@
+diff a/src/views/exhibition/index.vue b/src/views/exhibition/index.vue	(rejected hunks)
+@@ -4,6 +4,7 @@
+     <div class="carousel-section">
+       <el-carousel height="160px" :interval="4000">
+         <el-carousel-item v-for="(item, index) in carouselList" :key="index" @click="goToDetail(item.exhibitId)">
++          <img :src="getFieldValue(item, 'img')" alt="展览图片" class="carousel-img" />
+           <div class="online-exhibition" v-if="getFieldValue(item, 'webSite')" @click.stop="goToOnlineExhibition(item)">
+             <img class="online-icon" src="@/assets/exhibition/online-kz.png" alt="线上观展" />
+             <span class="online-text">线上观展</span>

src/views/indexPage/index.vue

@@ -3,7 +3,7 @@
   <div v-else :class="['home-container', !isFromParam ? 'home-tabar' : '']">
     <!-- 轮播图区域 -->
     <div class="carousel-section">
-      <el-carousel height="180px" indicator-position="bottom" :interval="4000">
+      <el-carousel height="186px" indicator-position="bottom" :interval="4000">
         <el-carousel-item v-for="item in bannerData" :key="item.carouselId">
           <img :src="getImg(item)" :alt="getTitle(item) || '轮播图'" class="carousel-img" />
         </el-carousel-item>