Update:login

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

@@ -8,6 +8,65 @@
   <!-- 右侧：联系我们和登录按钮 -->
   <div class="header-actions">
     <button class="contact-btn">联系我们</button>
-    <button class="login-btn">登录</button>
+    <button class="login-btn" (click)="openLogin()">登录</button>
+  </div>
+
+  <!-- 登录模态框 - 优化版 -->
+  <div class="login-modal" *ngIf="showLoginModal" (click)="closeLogin()">
+    <div class="modal-content" (click)="$event.stopPropagation()">
+      <button class="close-btn" (click)="closeLogin()">&times;</button>
+      
+      <h2>用户登录</h2>
+      
+      <form (ngSubmit)="onSubmit()">
+        <div class="form-group">
+          <label for="username">用户名</label>
+          <input 
+            type="text" 
+            id="username" 
+            [(ngModel)]="loginData.username" 
+            name="username"
+            placeholder="用户名"
+            required
+          >
+        </div>
+        
+        <div class="form-group">
+          <label for="password">密码</label>
+          <input 
+            type="password" 
+            id="password" 
+            [(ngModel)]="loginData.password" 
+            name="password"
+            placeholder="密码"
+            required
+          >
+        </div>
+        
+        <div class="remember-me">
+          <input 
+            type="checkbox" 
+            id="rememberMe" 
+            [(ngModel)]="loginData.rememberMe" 
+            name="rememberMe"
+          >
+          <label for="rememberMe">记住我</label>
+        </div>
+        
+        <div *ngIf="loginError" class="error-message">
+          {{ loginError }}
+        </div>
+        
+        <button type="submit" class="submit-btn" [disabled]="isLoading">
+          <span *ngIf="!isLoading">登录</span>
+          <span *ngIf="isLoading">登录中...</span>
+        </button>
+      </form>
+      
+      <div class="login-footer">
+        <a href="#">忘记密码?</a>
+        <a href="#">注册新账号</a>
+      </div>
+    </div>
   </div>
 </header>

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

@@ -82,7 +82,156 @@
     }
   }
 }
-
+/* 登录模态框样式 - 优化版 */
+.login-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  
+  .modal-content {
+    background: white;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 400px; /* 减小最大宽度 */
+    padding: 25px 20px; /* 调整内边距 */
+    position: relative;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
+    animation: modalOpen 0.3s ease-out;
+    
+    .close-btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background: none;
+      border: none;
+      font-size: 22px;
+      cursor: pointer;
+      color: #999;
+      transition: color 0.2s;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      
+      &:hover {
+        background: #f5f5f5;
+        color: #333;
+      }
+    }
+    
+    h2 {
+      text-align: center;
+      margin: 10px 0 20px; /* 减小上下边距 */
+      color: #333;
+      font-size: 22px;
+    }
+    
+    .form-group {
+      margin-bottom: 16px; /* 减小间距 */
+       input[type="text"],
+      input[type="password"] {
+        width: 85%; /* 减小宽度 */
+        margin: 0 auto; /* 保持居中 */
+        display: block; /* 确保居中生效 */
+      }
+      label {
+        display: block;
+        margin-bottom: 6px; /* 减小间距 */
+        font-weight: 500;
+        color: #555;
+        font-size: 14px;
+      }
+      
+      input {
+        width: 100%;
+        padding: 10px 14px; /* 减小内边距 */
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 15px;
+        transition: border-color 0.3s;
+        
+        &:focus {
+          border-color: #2575fc;
+          outline: none;
+          box-shadow: 0 0 0 2px rgba(37, 117, 252, 0.2);
+        }
+      }
+    }
+    
+    .remember-me {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px; /* 减小间距 */
+      font-size: 14px;
+      
+      input {
+        margin-right: 8px;
+      }
+    }
+    
+    .error-message {
+      background: #ffebee;
+      color: #d32f2f;
+      padding: 8px 12px; /* 减小内边距 */
+      border-radius: 5px;
+      margin-bottom: 12px; /* 减小间距 */
+      text-align: center;
+      font-size: 13px;
+    }
+    
+    .submit-btn {
+      width: 100%;
+      padding: 10px; /* 减小内边距 */
+      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+      
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
+      }
+      
+      &:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+      }
+    }
+    
+    .login-footer {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 18px; /* 减小间距 */
+      padding-top: 12px; /* 减小间距 */
+      border-top: 1px solid #eee;
+      font-size: 13px;
+      
+      a {
+        color: #2575fc;
+        text-decoration: none;
+        
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
 /* 响应式设计 - 小屏幕调整 */
 @media (max-width: 768px) {
   .header-nav {

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

@@ -1,22 +1,75 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-header-nav',
   standalone: true,
-  imports: [],
+  imports: [CommonModule, FormsModule],
   templateUrl: './header-nav.html',
   styleUrl: './header-nav.scss'
 })
 export class HeaderNav {
-  // 登录功能占位方法
-  login() {
-    console.log('登录按钮点击');
-    // 实际项目中这里会触发登录流程
+  showLoginModal = false; // 控制登录模态框显示
+  loginData = { // 登录表单数据
+    username: '',
+    password: '',
+    rememberMe: false
+  };
+  isLoading = false; // 登录加载状态
+  loginError = ''; // 登录错误信息
+
+  // 打开登录模态框
+  openLogin() {
+    this.showLoginModal = true;
+    this.loginError = '';
+  }
+
+  // 关闭登录模态框
+  closeLogin() {
+    this.showLoginModal = false;
+    this.loginData = { username: '', password: '', rememberMe: false };
+  }
+
+  // 处理登录提交
+  async onSubmit() {
+    if (!this.loginData.username || !this.loginData.password) {
+      this.loginError = '请输入用户名和密码';
+      return;
+    }
+
+    this.isLoading = true;
+    this.loginError = '';
+
+    try {
+      // 模拟登录API调用
+      await this.mockLogin();
+      console.log('登录成功', this.loginData);
+      this.closeLogin();
+      
+      // 实际项目中这里会：
+      // 1. 保存用户凭证
+      // 2. 更新用户状态
+      // 3. 重定向或刷新用户界面
+    } catch (error) {
+      this.loginError = '用户名或密码错误';
+      console.error('登录失败:', error);
+    } finally {
+      this.isLoading = false;
+    }
   }
-  
-  // 联系我们功能占位方法
-  contact() {
-    console.log('联系我们按钮点击');
-    // 实际项目中这里会打开联系表单或对话框
+
+  // 模拟登录API
+  private mockLogin(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        // 模拟登录验证 - 实际项目中替换为真实API调用
+        if (this.loginData.username === 'admin' && this.loginData.password === '123456') {
+          resolve();
+        } else {
+          reject('Invalid credentials');
+        }
+      }, 1500); // 模拟网络延迟
+    });
   }
 }