Sinopec-Anxin/src/app/pages/login/login.component.html

<div class="login" id="login">
  <div class="card">
    <h1 class="cardheader">欢迎登陆</h1>
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入账号!">
          <nz-input-group nzPrefixIcon="user">
            <input required nz-input type="text" formControlName="userName" placeholder="请输入账号" nzSize="large" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入密码!">
          <nz-input-group nzPrefixIcon="lock">
            <input required nz-input type="password" formControlName="password" placeholder="请输入密码" [nzSize]="'small'" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <div class="hint">
        <span class="forget" (click)="forget()">忘记密码?</span>
      </div>
      <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button>
    </form>
    <p class="role">
      <a nz-dropdown [nzDropdownMenu]="menu" [nzVisible]="true">
        {{selectedRole ? selectedRole : '请选择登录角色'}}
        <i nz-icon nzType="down"></i>
      </a>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu nzSelectable>
          <li nz-menu-item (click)="selecteRole(item)" *ngFor="let item of roleList">{{item}}</li>
        </ul>
      </nz-dropdown-menu>
    </p>
    <p class="company">北京安信科创软件有限公司提供技术支持和维护</p>
  </div>
</div>