|
@@ -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) {}
|
|
constructor(private renderer: Renderer2, private el: ElementRef) {}
|
|
|
|
|
|
ngAfterViewInit() {
|
|
ngAfterViewInit() {
|
|
- this.initSwiper();
|
|
|
|
|
|
+ this.initSwipers();
|
|
this.setupNavigation();
|
|
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() {
|
|
private setupNavigation() {
|
|
const navLinks = this.el.nativeElement.querySelectorAll('.module-nav a, .sub-nav a');
|
|
const navLinks = this.el.nativeElement.querySelectorAll('.module-nav a, .sub-nav a');
|