style:banner and header-nav

cloth-dit-web/package-lock.json

@@ -15,6 +15,7 @@
         "@angular/platform-browser": "^20.0.0",
         "@angular/router": "^20.0.0",
         "rxjs": "~7.8.0",
+        "swiper": "^11.2.10",
         "tslib": "^2.3.0",
         "zone.js": "~0.15.0"
       },
@@ -12747,6 +12748,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.10",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.2.10.tgz",
+      "integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",

cloth-dit-web/package.json

@@ -27,6 +27,7 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/router": "^20.0.0",
     "rxjs": "~7.8.0",
+    "swiper": "^11.2.10",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

cloth-dit-web/src/app/app.scss

@@ -0,0 +1,4 @@
+@import 'swiper/css';
+@import 'swiper/css/pagination';
+@import 'swiper/css/navigation';
+@import 'swiper/css/effect-fade';

cloth-dit-web/src/modules/cloth/color/layout-main-layout/layout-main-layout/layout-main-layout.html

@@ -6,5 +6,4 @@
   </main>
   
   <app-bottom-nav></app-bottom-nav>
-</div>
-<p>layout-main-layout works!</p>
+</div>

cloth-dit-web/src/modules/cloth/color/layout-main-layout/layout/components/bottom-nav/bottom-nav.html

@@ -9,4 +9,3 @@
     <span class="nav-label">{{ item.label }}</span>
   </a>
 </nav>
-<p>bottom-nav works!</p>

cloth-dit-web/src/modules/cloth/color/layout-main-layout/layout/components/header-nav/header-nav.html

@@ -1 +1,13 @@
-<p>header-nav works!</p>
+<header class="header-nav">
+  <!-- 左侧：网站Logo和名称 -->
+  <div class="brand-area">
+    <div class="logo">👗</div>
+    <h1 class="site-name">服装定制平台</h1>
+  </div>
+  
+  <!-- 右侧：联系我们和登录按钮 -->
+  <div class="header-actions">
+    <button class="contact-btn">联系我们</button>
+    <button class="login-btn">登录</button>
+  </div>
+</header>

cloth-dit-web/src/modules/cloth/color/layout-main-layout/layout/components/header-nav/header-nav.scss

@@ -0,0 +1,104 @@
+.header-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 70px;
+  padding: 0 25px;
+  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+  box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
+  z-index: 1000;
+  
+  .brand-area {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    
+    .logo {
+      font-size: 28px;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      backdrop-filter: blur(5px);
+    }
+    
+    .site-name {
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
+      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+      margin: 0;
+    }
+  }
+  
+  .header-actions {
+    display: flex;
+    gap: 15px;
+    
+    .contact-btn, .login-btn {
+      padding: 8px 20px;
+      border-radius: 30px;
+      border: none;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .contact-btn {
+      background: transparent;
+      color: white;
+      border: 2px solid rgba(255, 255, 255, 0.5);
+      
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+        border-color: white;
+      }
+    }
+    
+    .login-btn {
+      background: white;
+      color: #2575fc;
+      
+      &:hover {
+        background: #f0f7ff;
+        transform: translateY(-2px);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+      }
+      
+      &:active {
+        transform: translateY(0);
+      }
+    }
+  }
+}
+
+/* 响应式设计 - 小屏幕调整 */
+@media (max-width: 768px) {
+  .header-nav {
+    padding: 0 15px;
+    
+    .site-name {
+      font-size: 18px;
+    }
+    
+    .header-actions {
+      gap: 10px;
+      
+      .contact-btn, .login-btn {
+        padding: 6px 15px;
+        font-size: 14px;
+      }
+    }
+  }
+}

cloth-dit-web/src/modules/cloth/color/layout-main-layout/layout/components/header-nav/header-nav.ts

@@ -8,5 +8,15 @@ import { Component } from '@angular/core';
   styleUrl: './header-nav.scss'
 })
 export class HeaderNav {
-
-}
+  // 登录功能占位方法
+  login() {
+    console.log('登录按钮点击');
+    // 实际项目中这里会触发登录流程
+  }
+  
+  // 联系我们功能占位方法
+  contact() {
+    console.log('联系我们按钮点击');
+    // 实际项目中这里会打开联系表单或对话框
+  }
+}

cloth-dit-web/src/modules/cloth/color/page/page-home/pages-home/components/banner-carousel/banner-carousel.html

@@ -1,30 +1,24 @@
-<section class="banner-section">
-    <div class="banner-slider" id="bannerSlider">
-        <div class="banner-slide">
-            <div>
-                <div class="banner-icon">🎨</div>
-                <div>春季新品发布</div>
-                <div class="banner-desc">个性化设计，独一无二</div>
-            </div>
+<div class="banner-wrapper">
+  <swiper-container #swiperContainer init="false">
+    @for (slide of slides; track $index) {
+      <swiper-slide>
+        <div class="slide-content" 
+             [style.background]="slide.bgColor">
+          <div class="text-container">
+            <h2 class="title">{{ slide.title }}</h2>
+            <h3 class="subtitle">{{ slide.subtitle }}</h3>
+            <p class="description">{{ slide.description }}</p>
+            <button class="cta-button">立即探索</button>
+          </div>
         </div>
-        <div class="banner-slide" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
-            <div>
-                <div class="banner-icon">✨</div>
-                <div>AI智能搭配</div>
-                <div class="banner-desc">科技赋能时尚创意</div>
-            </div>
-        </div>
-        <div class="banner-slide" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
-            <div>
-                <div class="banner-icon">🏆</div>
-                <div>设计大赛进行中</div>
-                <div class="banner-desc">万元奖金等你来拿</div>
-            </div>
-        </div>
-    </div>
-    <div class="banner-indicators">
-        <div class="indicator active" data-slide="0"></div>
-        <div class="indicator" data-slide="1"></div>
-        <div class="indicator" data-slide="2"></div>
-    </div>
-</section>
+      </swiper-slide>
+    }
+
+    <!-- 导航按钮 -->
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+    
+    <!-- 分页器 -->
+    <div class="swiper-pagination"></div>
+  </swiper-container>
+</div>

cloth-dit-web/src/modules/cloth/color/page/page-home/pages-home/components/banner-carousel/banner-carousel.scss

@@ -1,71 +1,157 @@
-.banner-section {
-    position: relative;
-    height: 200px;
+:host {
+  display: block;
+  position: relative;
+  margin: 20px;
+  
+  .banner-wrapper {
+    max-width: 100%;
+    margin: 0 auto;
+    border-radius: 24px;
     overflow: hidden;
-    margin: 20px;
-    border-radius: 20px;
-    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-}
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
+    width: 100%;
+  }
+  
+  swiper-container {
+    width: 100%;
+    height: 450px;
+  }
 
-.banner-slider {
-    display: flex;
-    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  .slide-content {
+    width: 100%;
     height: 100%;
-}
-
-.banner-slide {
-    min-width: 100%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
-    font-size: 18px;
-    font-weight: 600;
-    position: relative;
+    padding: 2rem;
+    box-sizing: border-box;
+    border-radius: 24px;
     overflow: hidden;
-}
+    /* 添加渐变背景 */
+    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
+  }
 
-.banner-slide::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></linearGradient></defs><polygon points="0,0 100,0 0,100" fill="url(%23grad)"/></svg>');
-    pointer-events: none;
-}
+  .text-container {
+    max-width: 800px;
+    text-align: center;
+    padding: 40px;
+    /* 移除背景色 */
+    background: transparent;
+    border-radius: 0;
+    /* 移除阴影 */
+    box-shadow: none;
+  }
 
-.banner-indicators {
-    position: absolute;
-    bottom: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 8px;
-}
+  .title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    /* 使用浅色文字并添加阴影 */
+    color: #ffffff;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    line-height: 1.2;
+  }
 
-.indicator {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: rgba(255,255,255,0.5);
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
+  .subtitle {
+    font-size: 1.8rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    /* 使用更浅的白色 */
+    color: rgba(255, 255, 255, 0.95);
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  }
 
-.indicator.active {
-    background: white;
-    transform: scale(1.2);
-}
+  .description {
+    font-size: 1.3rem;
+    margin-bottom: 2.5rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    /* 使用浅米色提升可读性 */
+    color: #fffbea;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    line-height: 1.6;
+  }
 
-.banner-icon {
-    font-size: 24px;
-    margin-bottom: 10px;
-}
+  .cta-button {
+    /* 更新为粉色系按钮 */
+    background: linear-gradient(to right, #ff9a9e, #fecfef);
+    color: white;
+    padding: 1rem 2.5rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+    border-radius: 50px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    /* 更新阴影颜色 */
+    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.5);
+    position: relative;
+    overflow: hidden;
+    
+    /* 添加闪光效果 */
+    &::after {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: rgba(255, 255, 255, 0.1);
+      transform: rotate(30deg);
+      transition: all 0.6s ease;
+    }
+    
+    &:hover {
+      /* 悬停时加深渐变 */
+      background: linear-gradient(to right, #ff8a8e, #fec0e5);
+      transform: translateY(-5px);
+      box-shadow: 0 8px 25px rgba(255, 154, 158, 0.6);
+      
+      &::after {
+        transform: rotate(30deg) translate(10%, 30%);
+      }
+    }
+    
+    &:active {
+      transform: translateY(-2px);
+    }
+  }
 
-.banner-desc {
-    font-size: 14px;
-    opacity: 0.8;
+  /* 响应式调整 */
+  @media (max-width: 768px) {
+    margin: 15px; /* 移动设备上减少边距 */
+    
+    swiper-container {
+      height: 350px;
+    }
+    
+    .text-container {
+      padding: 20px;
+    }
+    
+    .title {
+      font-size: 1.8rem;
+    }
+    
+    .subtitle {
+      font-size: 1.4rem;
+    }
+    
+    .description {
+      font-size: 1.1rem;
+    }
+    
+    .cta-button {
+      padding: 0.8rem 2rem;
+      font-size: 1rem;
+    }
+    
+    .swiper-button-prev,
+    .swiper-button-next {
+      width: 45px;
+      height: 45px;
+      --swiper-navigation-size: 22px;
+    }
+  }
 }

cloth-dit-web/src/modules/cloth/color/page/page-home/pages-home/components/banner-carousel/banner-carousel.ts

@@ -1,20 +1,71 @@
-import { Component } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { register } from 'swiper/element/bundle';
+import { SwiperOptions } from 'swiper/types';
+
+// 注册 Swiper 自定义元素
+register();
 
 @Component({
   selector: 'app-banner-carousel',
+  standalone: true,
   templateUrl: './banner-carousel.html',
-  styleUrls: ['./banner-carousel.scss']
+  styleUrls: ['./banner-carousel.scss'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class BannerCarousel {
-  // 添加轮播图相关的方法和逻辑
-  currentSlide = 0;
-  
-  // 示例方法
-  nextSlide() {
-    this.currentSlide = (this.currentSlide + 1) % 3;
-  }
+export class BannerCarousel implements AfterViewInit { // 改为 AfterViewInit
+  @ViewChild('swiperContainer') swiperContainer!: ElementRef;
   
-  goToSlide(index: number) {
-    this.currentSlide = index;
+  // 轮播图数据 - 纯文字和背景
+  slides = [
+    { 
+      title: '夏季新品上市',
+      subtitle: '探索最新设计系列',
+      description: '限时优惠，全场8折起',
+      bgColor: '#ff6b6b',
+      textColor: '#ffffff'
+    },
+    { 
+      title: '创意设计大赛',
+      subtitle: '展示你的设计才华',
+      description: '赢取万元奖金及专业设备',
+      bgColor: '#4ecdc4',
+      textColor: '#2d3436'
+    },
+    { 
+      title: '专业设计工具',
+      subtitle: '提升你的创作效率',
+      description: '高级功能免费试用30天',
+      bgColor: '#ffe66d',
+      textColor: '#2d3436'
+    }
+  ];
+
+   // Swiper 配置
+  swiperConfig: SwiperOptions = {
+    loop: true,
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false,
+      pauseOnMouseEnter: true
+    },
+    pagination: {
+      clickable: true
+    },
+    navigation: true,
+    effect: 'fade',
+    fadeEffect: {
+      crossFade: true
+    },
+    speed: 1000
+  };
+
+   ngAfterViewInit() {
+    // 初始化 Swiper
+    setTimeout(() => {
+      if (this.swiperContainer && this.swiperContainer.nativeElement) {
+        Object.assign(this.swiperContainer.nativeElement, this.swiperConfig);
+        this.swiperContainer.nativeElement.initialize();
+      }
+    }, 0);
   }
-}
+}

cloth-dit-web/tsconfig.json

@@ -13,8 +13,10 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+     "types": ["swiper"]
   },
+  
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,