yss-project/src/app/pages/auth/login/login.html

<div class="login-container">
  <div class="login-card">
    <div class="brand">
      <div class="logo"><img src="assets/logo.jpg" width="100px" alt="" srcset=""></div>
      <h1>欢迎使用 映三色 智慧项目系统</h1>
      
    </div>

    <form (ngSubmit)="signIn()" class="form" autocomplete="off">
      <div class="form-row">
        <label for="username">账号</label>
        <input id="username" type="text" [(ngModel)]="username" name="username" placeholder="请输入账号" />
      </div>
      <div class="form-row">
        <label for="password">密码</label>
        <input id="password" type="password" [(ngModel)]="password" name="password" placeholder="请输入密码" />
      </div>
      <button class="ios-primary" type="submit" [disabled]="loading">{{ loading ? '登录中…' : '登录' }}</button>
      <div class="error" *ngIf="error">{{ error }}</div>
    </form>

    <div class="quick-roles">
      <div class="divider"><span>快速进入</span></div>
      <div class="roles-grid">
        <button class="role-btn cs" (click)="goToRole('customer-service')">
          <span class="icon">💬</span>
          <span>客服</span>
        </button>
        <button class="role-btn designer" (click)="goToRole('designer')">
          <span class="icon">🎨</span>
          <span>设计师</span>
        </button>
        <button class="role-btn tl" (click)="goToRole('team-leader')">
          <span class="icon">👑</span>
          <span>组长</span>
        </button>
        <button class="role-btn finance" (click)="goToRole('finance')">
          <span class="icon">💰</span>
          <span>财务</span>
        </button>
        <button class="role-btn hr" (click)="goToRole('hr')">
          <span class="icon">🧑‍💼</span>
          <span>人事/行政</span>
        </button>
        <button class="role-btn admin" (click)="goToRole('admin')">
          <span class="icon">🛡️</span>
          <span>管理员</span>
        </button>
      </div>
    </div>

    <footer class="footer">
      <span>© {{ currentYear }} 映三色</span>
      <a href="https://app.fmode.cn/dev/yss/">隐私</a>
      <a href="https://app.fmode.cn/dev/yss/wxwork/cDL6R1hgSi/project-loader">条款</a>
    </footer>
  </div>
</div>