feat.add more swipers

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.html

@@ -52,7 +52,7 @@
       </div>
 
       <!-- 轮播图 -->
-      <div class="swiper-container no-flash">
+      <div class="swiper-container cultural-resource-swiper no-flash">
         <div class="swiper-wrapper">
           <div *ngFor="let slide of slides" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
             <div class="slide-content">
@@ -117,6 +117,7 @@
         </div>
       </div>
       
+      
       <!-- 智慧应用中心 -->
       <div class="section-anchor" id="smart-app-center"></div>
       <div class="section-header">
@@ -125,6 +126,20 @@
           智慧应用中心
         </h1>
       </div>
+      <!-- 新增：智慧应用中心轮播图 -->
+      <div class="swiper-container smart-app-swiper no-flash">
+        <div class="swiper-wrapper">
+          <div *ngFor="let slide of slidesForSmartApp" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
+            <div class="slide-content">
+              <h3 class="slide-title">{{slide.title}}</h3>
+              <p>{{slide.description}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
       
       <div class="module-grid">
         <!-- 数字文创工坊 -->
@@ -208,6 +223,20 @@
           共创社区
         </h1>
       </div>
+
+      <div class="swiper-container community-swiper no-flash">
+        <div class="swiper-wrapper">
+          <div *ngFor="let slide of slidesForCommunity" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
+            <div class="slide-content">
+              <h3 class="slide-title">{{slide.title}}</h3>
+              <p>{{slide.description}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="swiper-pagination"></div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
       
       <div class="module-grid">
         <!-- 高校联盟 -->

travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.ts

@@ -175,60 +175,117 @@ export class PageCrmPlatform implements AfterViewInit {
     }
   ];
 
-  private swiper?: Swiper;
+  slidesForSmartApp: Slide[] = [
+    {
+      image: 'assets/images/2-2.png',
+      title: '数字文创工坊',
+      description: 'AI赋能传统文化创新，打造数字文创精品'
+    },
+    {
+      image: 'assets/images/2-1.png',
+      title: '智慧文旅系统',
+      description: 'XR技术重现历史场景，沉浸式体验江西文化'
+    },
+    {
+      image: 'assets/images/2-3.png',
+      title: 'IP孵化平台',
+      description: '培育本土文化IP，推动文化产业商业化'
+    }
+  ];
+  
+  // 新增：共创社区轮播图数据
+  slidesForCommunity: Slide[] = [
+    {
+      image: 'assets/images/3-1.png',
+      title: '高校联盟创新基地',
+      description: '产学研一体化，培养数字文化创新人才'
+    },
+    {
+      image: 'assets/images/3-2.png',
+      title: '政企协作平台',
+      description: '政策支持与资源整合，加速文化产业发展'
+    },
+    {
+      image: 'assets/images/3-3.png',
+      title: '全民创作社区',
+      description: '大众参与文化创新，共享创作成果'
+    }
+  ];
+
+  private culturalSwiper?: Swiper;
+  private smartAppSwiper?: Swiper;
+  private communitySwiper?: Swiper;
 
   constructor(private renderer: Renderer2, private el: ElementRef) {}
 
   ngAfterViewInit() {
-    this.initSwiper();
+    this.initSwipers();
     this.setupNavigation();
   }
 
- private initSwiper() {
-  // 确保元素存在
-  const swiperEl = this.el.nativeElement.querySelector('.swiper-container');
-  if (!swiperEl) return;
+  private initSwipers() {
+    this.culturalSwiper = this.initSwiper('.cultural-resource-swiper');
+    this.smartAppSwiper = this.initSwiper('.smart-app-swiper');
+    this.communitySwiper = this.initSwiper('.community-swiper');
+  }
 
-  this.swiper = new Swiper(swiperEl, {
-    modules: [Navigation, Pagination, Autoplay],
-    direction: 'horizontal',
-    loop: true,
-    speed: 600,
-    pagination: {
-      el: '.swiper-pagination',
-      clickable: true,
-      dynamicBullets: true
-    },
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-      disabledClass: 'swiper-button-disabled'
-    },
-    autoplay: {
-      delay: 5000,
-      disableOnInteraction: false,
-    },
-    effect: 'fade',
-    fadeEffect: {
-      crossFade: true
-    },
-    keyboard: {
-      enabled: true,
-      onlyInViewport: true,
-    },
-    grabCursor: true,
-    // 添加这些关键参数
-    observer: true,
-    observeParents: true,
-    observeSlideChildren: true,
+  private initSwiper(selector: string): Swiper | undefined {
+    const swiperEl = this.el.nativeElement.querySelector(selector);
+    if (!swiperEl) return;
     
-    breakpoints: {
-      480: {
-        effect: 'slide'
+    // 为每个轮播图创建唯一的分页器和导航选择器
+    const uniqueId = Math.random().toString(36).substring(2, 9);
+    const paginationSelector = `.swiper-pagination-${uniqueId}`;
+    const nextSelector = `.swiper-button-next-${uniqueId}`;
+    const prevSelector = `.swiper-button-prev-${uniqueId}`;
+    
+    // 添加唯一类名到分页器和导航元素
+    const paginationEl = swiperEl.querySelector('.swiper-pagination');
+    const nextBtn = swiperEl.querySelector('.swiper-button-next');
+    const prevBtn = swiperEl.querySelector('.swiper-button-prev');
+    
+    if (paginationEl) paginationEl.classList.add(`swiper-pagination-${uniqueId}`);
+    if (nextBtn) nextBtn.classList.add(`swiper-button-next-${uniqueId}`);
+    if (prevBtn) prevBtn.classList.add(`swiper-button-prev-${uniqueId}`);
+    
+    return new Swiper(swiperEl, {
+      modules: [Navigation, Pagination, Autoplay],
+      direction: 'horizontal',
+      loop: true,
+      speed: 600,
+      pagination: {
+        el: paginationSelector, // 使用唯一选择器
+        clickable: true,
+        dynamicBullets: true
+      },
+      navigation: {
+        nextEl: nextSelector, // 使用唯一选择器
+        prevEl: prevSelector, // 使用唯一选择器
+        disabledClass: 'swiper-button-disabled'
+      },
+      autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+      },
+      effect: 'fade',
+      fadeEffect: {
+        crossFade: true
+      },
+      keyboard: {
+        enabled: true,
+        onlyInViewport: true,
+      },
+      grabCursor: true,
+      observer: true,
+      observeParents: true,
+      observeSlideChildren: true,
+      breakpoints: {
+        480: {
+          effect: 'slide'
+        }
       }
-    }
-  });
-}
+    });
+  }
 
   private setupNavigation() {
     const navLinks = this.el.nativeElement.querySelectorAll('.module-nav a, .sub-nav a');