<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> 
 |