Angular6+ng-zorro实现登录页面
一、效果图
二、html代码
1 <div class="login-container"> 2 <div class="login-box"> 3 <!-- 账号登录 --> 4 <form nz-form [formGroup]="user" class="login-form" *ngIf="loginMethod"> 5 <nz-form-item> 6 <nz-form-control *ngIf="alertConfig.login_state"> 7 <nz-alert [nzType]="alertConfig.alert_type" [nzCloseable]="alertConfig.close_btn" [nzMessage]="alertConfig.alert_msg" [nzShowIcon]="alertConfig.show_icon" (nzOnClose)="afterClose()" style="position: relative;top: -10px;"></nz-alert> 8 </nz-form-control> 9 <nz-form-control> 10 <nz-input-group [nzPrefix]="prefixUser"> 11 <input type="text" nz-input formControlName="userName" placeholder="用户名" > 12 </nz-input-group> 13 <nz-form-explain *ngIf="user.get('userName').dirty && user.get('userName').errors">**用户名不能为空!</nz-form-explain> 14 </nz-form-control> 15 </nz-form-item> 16 <nz-form-item> 17 <nz-form-control> 18 <nz-input-group [nzPrefix]="prefixLock"> 19 <input type="password" nz-input formControlName="password" placeholder="密码" autocomplete="on" /> 20 </nz-input-group> 21 <nz-form-explain *ngIf="user.get('password').dirty && user.get('password').errors">**密码不能为空!</nz-form-explain> 22 </nz-form-control> 23 </nz-form-item> 24 25 <nz-form-item style="margin-bottom:0px;"> 26 <nz-form-control> 27 <button nz-button class="login-form-button" nzType="primary" (click)="login()" #login_elem [nzLoading]="isLoadingOne">{{logintext}}</button> 29 <p> 30 <a style="color: #1890ff;position: relative;text-align: center;line-height: 30px;vertical-align: middle;top: 12px;left: 15px;"> 31 {{version}} 32 </a> 36 <a (click)="swithLoginMethod()" style="color: #1890ff;position: relative;text-align: right;top: 20px;right: -80px;"> 37 <!-- 扫码登录 --> 38 <i nz-icon type="qrcode" style="font-size: 30px; color: #08c;" theme="outline"></i> 39 </a> 40 </p> 41 </nz-form-control> 42 </nz-form-item> 43 </form> 44 45 <ng-template #prefixUser><i nz-icon type="user" style="color:#88bdf3"></i></ng-template> 46 <ng-template #prefixLock><i nz-icon type="lock" style="color:#88bdf3"></i></ng-template> 47 48 49 <!-- 扫码登录 --> 50 <form nz-form class="login-form" [hidden]="loginMethod"> 51 52 <nz-form-item style="margin-bottom:0px;"> 53 <p *ngIf="qrcodeStatus" style="color: #bae7ff;margin-top: -10px;margin-bottom: 20px;">请用<span style="color: #1890ff;padding: 0 4px;font-weight: 300;font-size: 15px;">电站管家app</span>扫描二维码安全登录</p> 54 <p *ngIf="!qrcodeStatus" style="color: #bae7ff;margin-top: -10px;margin-bottom: 20px;"> 55 <i nz-icon type="exclamation-circle" theme="outline" style="color:red;"></i> 56 二维码已失效，请<a (click)="refreshQrcode()">刷新</a>重试 57 </p> 58 <p style="min-height:80px;"> 59 <ng-container #code_container> 60 <!-- <img src="assets/images/app.png" style="width:50%;" alt=""> --> 61 </ng-container> 62 </p> 63 </nz-form-item> 64 65 <nz-form-item style="position: relative;left: 0px;margin-top:0px;"> 66 <button nz-button class="login-form-button" [nzType]="'primary'" (click)="swithLoginMethod()">返回</button> 67 </nz-form-item> 68 69 </form> 70 71 72 <ng-template #code_tpl style="background-color:white;"> 73 <qrcode [qrdata]="qrcodeuuid" [size]="128" [level]="'M'" [colorlight]="'#000000'" [colordark]="'#ffffff'" style="position: relative;left: 24%;background-color: white; "></qrcode> 74 </ng-template> 75 76 77 </div> 78 </div>
三、说明
ng-zorro 框架使用可参照其官网，详见：https://ng.ant.design/docs/introduce/zh。
