Jelajahi Sumber

feat.doc image and fix sth.

0235915 2 hari lalu
induk
melakukan
2de3f165ba

+ 3 - 2
travel-platform-web/travel-web/angular.json

@@ -30,7 +30,7 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
             ]
           },
           "configurations": {
@@ -88,8 +88,9 @@
               }
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss","https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
             ]
+
           }
         }
       }

TEMPAT SAMPAH
travel-platform-web/travel-web/public/assets/images/red.webp


+ 35 - 0
travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.scss

@@ -599,4 +599,39 @@ footer {
   -webkit-perspective: 1000;
   perspective: 1000;
   transform: translate3d(0,0,0);
+}
+/* 轮播图导航按钮样式 */
+.swiper-button-next,
+.swiper-button-prev {
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  transition: all var(--animation-speed) ease;
+  backdrop-filter: blur(5px);
+  
+  &::after {
+    content: '';
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: var(--primary-gold);
+  }
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+    transform: scale(1.1);
+  }
+}
+
+.swiper-button-next::after {
+  content: '→';
+}
+
+.swiper-button-prev::after {
+  content: '←';
+}
+
+.swiper-button-disabled {
+  opacity: 0.3 !important;
+  cursor: not-allowed;
 }

+ 75 - 6
travel-platform-web/travel-web/src/crm/mobile/page-crm-platform/page-crm-platform.ts

@@ -2,6 +2,13 @@ import { Component, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import Swiper from 'swiper';
 
+// 添加这些导入
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+
 interface PlatformModule {
   title: string;
   subtitle: string;
@@ -97,12 +104,74 @@ export class PageCrmPlatform implements AfterViewInit {
   ];
 
   slides: Slide[] = [
-    // ...保持不变...
+    {
+      image: 'assets/images/red.webp',
+      title: '红色文化数字馆',
+      description: '探索江西丰富的革命历史资源,数字化保存红色记忆'
+    },
+    {
+      image: 'path/to/image2.jpg',
+      title: '非遗传承数据库',
+      description: '记录与保护江西非物质文化遗产,传承千年技艺'
+    },
+    {
+      image: 'path/to/image3.jpg',
+      title: '水文化研究中心',
+      description: '聚焦鄱阳湖流域水文化研究,展现江西水韵之美'
+    }
   ];
 
   ngAfterViewInit() {
-    new Swiper('.swiper-container', {
-      // ...配置保持不变...
-    });
-  }
-}
+  new Swiper('.swiper-container', {
+    // 启用导航模块
+    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,
+    
+    // 响应式配置
+    breakpoints: {
+      480: {
+        effect: 'slide'
+      }
+    }
+  });
+}
+}