You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
pocketcommunityweb/src/app/account/login/login.component.html

60 lines
3.3 KiB

<!--设置高度,添加bootstrap样式类d-flex align-items-center 使表单垂直居中,justify-content-center水平居中-->
<div [style]="height" id="login" class="d-flex align-items-center justify-content-center">
<div class="text-primary">
<div style="font-size: 40px;font-weight: 700;">Pocket community</div>
<div style="font-size: 30px;font-weight: 400;">Redefining your community life</div>
</div>
<form [formGroup]="loginForm" class="col-4" style="padding: 70px 40px;background: #fff;margin-left: 20px;margin-top: 280px;border-radius: 5px;">
<!-- 管理员名-->
<div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.manager_name' | translate }}</span>
</div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input autocomplete="managerName" type="text" class="form-control text-center"
[class.is-invalid]="getValue('managerName').invalid"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}"
formControlName="managerName">
<div class="invalid-feedback font-weight-bold text-center">
{{'tip.notnull' | translate:{value: 'login.manager_name'|translate} }}
</div>
</div>
<!-- 管理员密码-->
<div style="margin: 20px 0!important;" class="input-group mb-3 mx-auto col-12">
<!-- <div class="input-group-prepend">
<span class="input-group-text">{{ 'login.password' | translate }}</span>
</div> -->
<span style="margin-right: 5px;margin-top: 3px;"><img src="../../../assets/image/head.png" style="height: 30px;width: 30px;" /></span>
<input autocomplete="new-password" type="password" class="form-control text-center"
[class.is-invalid]="getValue('password').invalid"
[placeholder]="'tip.input' | translate:{value:'login.manager_name'|translate}" formControlName="password">
<div class="invalid-feedback font-weight-bold text-center">
{{'tip.notnull' | translate:{value: 'login.password'|translate} }}
</div>
</div>
<div style="text-align: right;">
<a style="color: black;font-size: 12px;" type="button" [routerLink]="['/reset_pwd']">{{ 'button.forget_pwd' | translate }}</a>
</div>
<div style="margin: 10px 0!important;" class="col-12 mx-auto text-right mb-3">
<div class="row flex-nowrap">
<div class="col-6">
<!-- 登陆按钮-->
<button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;float: left;margin-left: 20px;opacity: 1; word-wrap: none;" type="button" (click)="login()" class="btn btn-info btn-lg"
[disabled]="form().invalid">{{ 'button.login' | translate }}</button>
</div>
<div class="col-6">
<!-- 注册按钮 -->
<button style="background: rgb(45, 135, 210);border: rgb(45, 135, 210);padding: 4px 40px;margin-right: 20px; word-wrap: none;" type="button" class="btn btn-info btn-lg ml-3"
[routerLink]="['/register']">{{ 'button.register' | translate }}</button>
</div>
</div>
</div>
<app-message></app-message>
</form>
</div>