| <div class="wrapper"> | 
|     <div class="abs-center width-lg"> | 
|         <div class="py-lg text-center"> | 
|             <nz-avatar [nzIcon]="'user'" [nzSize]="'large'"></nz-avatar> | 
|         </div> | 
|         <nz-card [nzBordered]="false"> | 
|             <p class="mb-sm">输入密码后解锁屏幕。</p> | 
|             <form nz-form [formGroup]="valForm" (ngSubmit)="submit()" role="form"> | 
|                 <div nz-form-item> | 
|                     <div nz-form-control [nzValidateStatus]="valForm.controls.password"> | 
|                         <nz-input formControlName="password" [nzPlaceHolder]="'password'" [nzType]="'password'" [nzSize]="'large'"> | 
|                             <ng-template #suffix> | 
|                                 <i class="anticon anticon-lock"></i> | 
|                             </ng-template> | 
|                         </nz-input> | 
|                         <div nz-form-explain *ngIf="valForm.controls.password.dirty&&valForm.controls.password.hasError('required')">This field is required</div> | 
|                     </div> | 
|                 </div> | 
|                 <div nz-row nzType="flex" nzAlign="middle"> | 
|                     <div nz-col [nzSpan]="12"> | 
|                         <a [routerLink]="['/forget']">忘记密码?</a> | 
|                     </div> | 
|                     <div nz-col [nzSpan]="12" style="text-align:right;"> | 
|                         <button nz-button [disabled]="!valForm.valid" [nzType]="'primary'" [nzSize]="'large'"> | 
|                             <span>解锁</span> | 
|                         </button> | 
|                     </div> | 
|                 </div> | 
|             </form> | 
|         </nz-card> | 
|         <div class="p-lg text-center text-sm"> | 
|             © {{ settings.app.year }} - {{ settings.app.name }} | 
|             <br> {{ settings.app.description }} | 
|         </div> | 
|     </div> | 
| </div> |