Update fitting-room page

cloth-dit-web/src/modules/cloth/color/pages-fitting-room/pages-fitting-room/pages-fitting-room.html

@@ -1 +1,51 @@
-<p>pages-fitting-room works!</p>
+<header class="header">
+    <div class="header-content">
+        <h1>3D试衣间</h1>
+        <p>沉浸式虚拟试穿体验</p>
+    </div>
+</header>
+
+<main class="main-content">
+    <div class="fitting-room-container">
+        <!-- AR相机区域 -->
+        <div class="ar-camera" (click)="startAR()">
+            <div class="camera-content">
+                <div class="camera-icon">📷</div>
+                <div>点击开启AR试穿</div>
+                <div class="camera-desc">支持实时身材建模</div>
+            </div>
+        </div>
+
+        <!-- 身材设置 -->
+        <div class="body-settings">
+            <h4>身材参数设置</h4>
+            <div class="settings-grid">
+                <div class="setting-item">
+                    <label>身高 (cm)</label>
+                    <input type="range" min="150" max="190" [value]="height" 
+                           (input)="updateHeight($event)" 
+                           [style.accentColor]="'#ff6b6b'">
+                    <span>{{ height }}cm</span>
+                </div>
+                <div class="setting-item">
+                    <label>体重 (kg)</label>
+                    <input type="range" min="40" max="100" [value]="weight" 
+                           (input)="updateWeight($event)" 
+                           [style.accentColor]="'#ff6b6b'">
+                    <span>{{ weight }}kg</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 场景选择 -->
+        <div class="scene-selector">
+            <h4>试穿场景</h4>
+            <div class="scenes">
+                <div class="scene-item" (click)="selectScene('office')">🏢</div>
+                <div class="scene-item" (click)="selectScene('date')">💕</div>
+                <div class="scene-item" (click)="selectScene('party')">🎉</div>
+                <div class="scene-item" (click)="selectScene('casual')">☕</div>
+            </div>
+        </div>
+    </div>
+</main>

cloth-dit-web/src/modules/cloth/color/pages-fitting-room/pages-fitting-room/pages-fitting-room.scss

@@ -0,0 +1,123 @@
+.fitting-room-container {
+    margin: 20px;
+}
+
+.ar-camera {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 18px;
+    margin-bottom: 20px;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    
+    &::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 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+    }
+}
+
+.camera-content {
+    text-align: center;
+    z-index: 2;
+    position: relative;
+}
+
+.camera-icon {
+    font-size: 80px;
+    margin-bottom: 20px;
+    animation: pulse 2s infinite;
+}
+
+.camera-desc {
+    font-size: 14px;
+    opacity: 0.8;
+    margin-top: 8px;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+.body-settings {
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    
+    h4 {
+        margin-bottom: 15px;
+        font-size: 16px;
+    }
+}
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+}
+
+.setting-item {
+    label {
+        display: block;
+        font-size: 14px;
+        color: #666;
+        margin-bottom: 5px;
+    }
+    
+    input[type="range"] {
+        width: 100%;
+    }
+    
+    span {
+        font-size: 12px;
+        color: #999;
+    }
+}
+
+.scene-selector {
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    
+    h4 {
+        margin-bottom: 15px;
+        font-size: 16px;
+    }
+}
+
+.scenes {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+}
+
+.scene-item {
+    min-width: 80px;
+    height: 80px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: linear-gradient(45deg, var(--scene-bg-start, #ff9a9e), var(--scene-bg-end, #fecfef));
+    
+    &:hover {
+        transform: scale(1.05);
+    }
+}

cloth-dit-web/src/modules/cloth/color/pages-fitting-room/pages-fitting-room/pages-fitting-room.ts

@@ -2,10 +2,56 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-pages-fitting-room',
-  imports: [],
+  imports:[],
   templateUrl: './pages-fitting-room.html',
-  styleUrl: './pages-fitting-room.scss'
+  styleUrls: ['./pages-fitting-room.scss']
 })
 export class PagesFittingRoom {
+  // 身材参数
+  height = 170;
+  weight = 60;
+  
+  // 场景映射
+  sceneNames = {
+    'office': '办公场景',
+    'date': '约会场景', 
+    'party': '派对场景',
+    'casual': '休闲场景'
+  };
+  
+  // 场景背景色
+  sceneBackgrounds = {
+    'office': { '--scene-bg-start': '#ff9a9e', '--scene-bg-end': '#fecfef' },
+    'date': { '--scene-bg-start': '#a8edea', '--scene-bg-end': '#fed6e3' },
+    'party': { '--scene-bg-start': '#667eea', '--scene-bg-end': '#764ba2' },
+    'casual': { '--scene-bg-start': '#ffeaa7', '--scene-bg-end': '#fab1a0' }
+  };
 
-}
+  // 更新身高
+  updateHeight(event: Event) {
+    this.height = parseInt((event.target as HTMLInputElement).value);
+  }
+
+  // 更新体重
+  updateWeight(event: Event) {
+    this.weight = parseInt((event.target as HTMLInputElement).value);
+  }
+
+  // 选择场景
+  selectScene(scene: keyof typeof this.sceneNames) {
+    console.log(`已切换到${this.sceneNames[scene]}`);
+    this.showNotification('场景切换', `已切换到${this.sceneNames[scene]}`);
+  }
+
+  // 启动AR试衣
+  startAR() {
+    console.log('开启AR试穿');
+    this.showNotification('AR试穿', '正在启动相机...');
+  }
+
+  // 显示通知
+  showNotification(title: string, message: string) {
+    // 在实际项目中，这里可以使用Angular Material的Snackbar或Toast服务
+    console.log(`[${title}] ${message}`);
+  }
+}