20 changed files with 447 additions and 450 deletions
@ -1,51 +1,42 @@
|
||||
<div class="login"> |
||||
<div class="loginbox"> |
||||
<div class="loginBox"> |
||||
|
||||
<div class="intro"> |
||||
<p>用户信息采集平台</p> |
||||
<!-- <span> |
||||
数字化预案编制管理应用平台集重点单位的数字化预案资源的管理、分析及调用为一体，可实现辖区内预案使用的高效化、集约化、统一化、标准化管理。同时，可将消防现有的三维预案、图片式预案、卡片式预案、二维预案、视频预案等接入至系统中进行更加全面、真实、直观、生动的展示各项单位预案数据，方便进行预案资源调用，更好的服务实战指挥。 |
||||
</span> --> |
||||
</div> |
||||
|
||||
<div class="card"> |
||||
<div class="loginImg"> |
||||
<img src="../../../assets/images/login.gif"> |
||||
|
||||
<p class="cardheader">登录</p> |
||||
</div> |
||||
|
||||
<mat-card> |
||||
<div> |
||||
<div class="card"> |
||||
|
||||
<span class="cardheader">数据采集管理平台</span> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<mat-icon class="icon">account_box</mat-icon> |
||||
<mat-icon class="icon2">lock</mat-icon> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入账号"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" type='password' |
||||
required minlength="8" |
||||
ngModel #password="ngModel" placeholder="请输入密码"> |
||||
</mat-form-field> |
||||
<div class="input"> |
||||
<label class="position"><mat-icon>account_box</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required type="text" |
||||
ngModel #name="ngModel" placeholder="请输入账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="input"> |
||||
<label class="position"><mat-icon>lock</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" type='password' |
||||
required |
||||
ngModel #password="ngModel" placeholder="请输入密码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div *ngIf="errmsg" class="alert-danger"> |
||||
<div *ngIf="errmsg" class="alert-danger input"> |
||||
{{errmsg}} |
||||
</div> |
||||
<a href="javascript:void(0);" (click)='open()'> |
||||
忘记密码? |
||||
</a> |
||||
<button type="submit" [disabled]="!form.form.valid" class="loginbtn"mat-button>登录</button> |
||||
</form> |
||||
<div class="register"> |
||||
<a href="javascript:void(0);" (click)='open()'>忘记密码?</a> |
||||
<a href="javascript:void(0);" (click)='toRegister()'>快速注册</a> |
||||
</div> |
||||
|
||||
<div class="website"> |
||||
<p>北京安信科创有限公司提供技术支持和维护</p> |
||||
</div> |
||||
<button type="submit" [disabled]="!form.form.valid" class="loginbtn" mat-button>登录</button> |
||||
</form> |
||||
|
||||
</mat-card> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
@ -1,115 +1,73 @@
|
||||
|
||||
.login { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: url('../../../assets/images/bg_login.jpg'); |
||||
|
||||
.loginbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #000; |
||||
background: rgba(0,0,0,0.5);/*盒子背景透明*/ |
||||
position: relative; |
||||
} |
||||
|
||||
.intro { |
||||
width: 35%; |
||||
position: fixed; |
||||
top:35%; |
||||
left: 15%; |
||||
p { |
||||
font-size: 36px; |
||||
color:white; |
||||
margin-bottom: 35px; |
||||
} |
||||
span { |
||||
font-size: 16px; |
||||
color:white; |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
|
||||
.card{ |
||||
width: 460px; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
|
||||
} |
||||
|
||||
.example-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
.loginBox { |
||||
width: 100%; |
||||
} |
||||
.loginbtn { |
||||
margin-top: 25px; |
||||
height: 35px; |
||||
background-color:#039be5; |
||||
border-radius: 15px; |
||||
color: #fff;; |
||||
} |
||||
.mat-card { |
||||
box-shadow: 0 0 0; |
||||
margin-top: 140px; |
||||
} |
||||
|
||||
.applyfor { |
||||
font-size: 16px; |
||||
a { |
||||
color: #039be5; |
||||
} |
||||
height: 100%; |
||||
background-color: #000; |
||||
background: rgba(0,0,0,0.5);/*盒子背景透明*/ |
||||
display: flex; |
||||
/*!*flex-direction: column;*!可写可不写*/ |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.website { |
||||
font-size: 14px; |
||||
.card { |
||||
width: 500px; |
||||
height: 355px; |
||||
border-radius: 10px; |
||||
padding-top: 25px; |
||||
background-color: hsla(0,0%,100%,.8); |
||||
text-align: center; |
||||
margin-top: 60px; |
||||
|
||||
} |
||||
.alert-danger { |
||||
font-size: 14px; |
||||
color: red; |
||||
box-shadow:0px 0px 10px 5px #333; |
||||
} |
||||
.cardheader{ |
||||
margin-bottom: 10px; |
||||
font-size: 26px; |
||||
font-weight: 500; |
||||
margin-top: 20px; |
||||
} |
||||
.mat-card { |
||||
margin-top: 10px; |
||||
padding-left: 20px; |
||||
} |
||||
.mat-form-field { |
||||
padding-left: 20px;; |
||||
} |
||||
.loginImg { |
||||
margin-top: 90px; |
||||
text-align: center; |
||||
} |
||||
.mat-input-element { |
||||
|
||||
.input { |
||||
margin: 15px auto; |
||||
position: relative; |
||||
} |
||||
.mat-card .example-container .icon { |
||||
width: 24px; |
||||
color: #666; |
||||
font-size: 24px; |
||||
position: absolute; |
||||
top:36px; |
||||
left: 15px; |
||||
.mat-form-field { |
||||
width: 300px; |
||||
} |
||||
.mat-card .example-container .icon2 { |
||||
width: 24px; |
||||
color: #666; |
||||
font-size: 24px; |
||||
.position { |
||||
margin-top: 5px; |
||||
position: absolute; |
||||
top:100px; |
||||
left: 15px; |
||||
top: 15px; |
||||
left: 75px; |
||||
} |
||||
a { |
||||
|
||||
.alert-danger { |
||||
text-align-last: left; |
||||
margin-left: 100px; |
||||
font-size: 14px; |
||||
color: #0066FF; |
||||
margin-left: 250px; |
||||
color: red; |
||||
} |
||||
.register { |
||||
text-align: left; |
||||
a { |
||||
font-size: 14px; |
||||
color: #0066FF; |
||||
} |
||||
:first-child { |
||||
margin-left: 100px; |
||||
} |
||||
:last-child { |
||||
margin-left: 180px; |
||||
} |
||||
} |
||||
.loginbtn { |
||||
margin-top: 25px; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
width: 280px; |
||||
background-color:#039be5; |
||||
border-radius: 15px; |
||||
color: #fff; |
||||
} |
||||
@ -1,80 +1,87 @@
|
||||
<div class="login"> |
||||
<div class="loginbox"> |
||||
<div class="loginBox"> |
||||
|
||||
<div class="intro"> |
||||
<p>北京安信科创有限公司</p> |
||||
<span>北京安信科创软件有限公司作为中国应急服务领跑者，于2006年进入消防救援领域，是一家专注于应急领域仿真培训演练与应急数据预判领域的软件服务供应商。安信主要利用大数据与虚拟现实技术实现对消防、公安、机场相关安防人员与企业安全监管人员的仿真培训与考核，致力于为我国应急产业的发展构建更美好的未来。目前，安信的业务遍布全国20多个省份和地区，服务全国将近四分之一以上的人口 |
||||
</span> |
||||
</div> |
||||
|
||||
<div class="card"> |
||||
<mat-card> |
||||
|
||||
<p class="cardheader">注册</p> |
||||
<p>Please register first</p> |
||||
<div> |
||||
<div class="card"> |
||||
|
||||
<span class="cardheader">数据采集管理平台</span> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入账号"> |
||||
</mat-form-field> |
||||
<div class="input"> |
||||
<label class="position"><mat-icon>group</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="companyName" name="companyName" |
||||
required ngModel placeholder="请输入单位名称"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<!-- <div *ngIf="name.invalid && (name.dirty || name.touched)" |
||||
class="alert-danger"> |
||||
<div *ngIf="name.errors.required"> |
||||
账号不能为空 |
||||
<div class="input"> |
||||
<label class="position"><mat-icon>dns</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="usci" name="usci" #usci="ngModel" |
||||
pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" |
||||
required ngModel placeholder="请输入统一社会信用代码"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div *ngIf="usci.invalid && (usci.dirty || usci.touched)" class="alert-danger"> |
||||
<div *ngIf="usci.errors.pattern"> |
||||
统一社会信用代码格式不正确 |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="email" name="email" |
||||
required pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$" |
||||
ngModel #email="ngModel" placeholder="请输入邮箱"> |
||||
</mat-form-field> |
||||
<!-- |
||||
<div *ngIf="email.invalid && (email.dirty || email.touched)" |
||||
class="alert-danger"> |
||||
<div *ngIf="email.errors.required"> |
||||
邮箱不能为空 |
||||
</div> |
||||
<div *ngIf="email.errors.pattern"> |
||||
邮箱格式不正确 |
||||
<div class="input"> |
||||
<label class="position"><mat-icon>phone</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="phone" name="phone" #tel="ngModel" |
||||
required pattern="^^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0135-9]\d{2}|66\d{2})\d{6}$" |
||||
ngModel placeholder="请输入联系电话"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert-danger"> |
||||
<div *ngIf="tel.errors.pattern"> |
||||
电话号码格式不正确 |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" type='password' |
||||
required minlength="8" |
||||
ngModel #password="ngModel" placeholder="请输入密码"> |
||||
</mat-form-field> |
||||
|
||||
<!-- <div *ngIf="password.invalid && (password.dirty || password.touched)" |
||||
class="alert-danger"> |
||||
<div *ngIf="password.errors.required"> |
||||
密码不能为空 |
||||
<div class="input"> |
||||
<label class="position"><mat-icon>account_box</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" #name="ngModel" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,19}$" |
||||
required ngModel placeholder="请输入账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert-danger"> |
||||
<div *ngIf="name.errors.pattern"> |
||||
登录账号格式为5-19位字母+数字 |
||||
</div> |
||||
<div *ngIf="password.errors.minlength"> |
||||
密码最少8位 |
||||
</div> |
||||
|
||||
<div class="input"> |
||||
<label class="position"><mat-icon>lock</mat-icon></label> |
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" type='password' #password="ngModel" |
||||
required pattern="^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,20}$" |
||||
ngModel placeholder="请输入密码"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert-danger"> |
||||
<div *ngIf="password.errors.pattern"> |
||||
登录密码格式为8-20位字母+数字 |
||||
</div> |
||||
</div> --> |
||||
</div> |
||||
|
||||
<mat-checkbox style="margin-top: 25px;">请同意不扩散核武器条约条约</mat-checkbox> |
||||
<div *ngIf="errmsg" class="alert-danger"> |
||||
{{errmsg}} |
||||
</div> |
||||
<div class="register"> |
||||
<a href="javascript:void(0);" (click)='toLogin()'>已有账号,去登陆</a> |
||||
<a href="javascript:void(0);" (click)='open()'>注册失败?</a> |
||||
</div> |
||||
|
||||
<button type="submit" [disabled]="!form.form.valid" class="loginbtn"mat-button>注册</button> |
||||
<button type="submit" [disabled]="!form.form.valid" class="loginbtn" mat-button>注册</button> |
||||
</form> |
||||
|
||||
<div class="applyfor"> |
||||
<p>已有账号？去<a href="/login">登录</a></p> |
||||
</div> |
||||
|
||||
<div class="website"> |
||||
<p>WEBSITE BY AnXin</p> |
||||
<p>© 2020. All RIGHT RESERVED.</p> |
||||
</div> |
||||
|
||||
</mat-card> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
@ -1,13 +1,42 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<mat-form-field> |
||||
<input matInput id="realName" name="realName" type='text' |
||||
required minlength="1" |
||||
ngModel #realName="ngModel" placeholder="修改真实姓名"> |
||||
<h1 mat-dialog-title>修改资料</h1> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input type="text" matInput disabled |
||||
[(ngModel)]="data.name" name="name" placeholder="登录账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input type="text" matInput pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0135-9]\d{2}|66\d{2})\d{6}$" required |
||||
[(ngModel)]="tel" name="tel" placeholder="联系电话"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input type="text" matInput required |
||||
[(ngModel)]="companyName" name="companyName" placeholder="单位名称"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input type="text" matInput required pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" |
||||
[(ngModel)]="usci" name="usci" placeholder="统一社会信用代码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div *ngIf="errMsg" class="err"><p>{{errMsg}}</p></div> |
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确认</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button color="primary">取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
@ -1,11 +1,27 @@
|
||||
<mat-card> |
||||
<mat-card-title>账号:{{userdata.name}}</mat-card-title> |
||||
<mat-card-content> |
||||
<h1>真实姓名:{{userdata.realName}}</h1> |
||||
<h1>创建时间:{{userdata.creationTime | date:'yyyy-MM-dd'}}</h1> |
||||
<h1>组织机构名称:{{userdata.organizationName }}</h1> |
||||
</mat-card-content> |
||||
<mat-card-actions> |
||||
<button mat-raised-button color="primary" (click)="edit()">修改信息</button> |
||||
</mat-card-actions> |
||||
<mat-list role="list" class="userList"> |
||||
<mat-list-item role="listitem"> |
||||
<label>登录账号:</label> {{userInfo.name}} |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<label>联系电话:</label> {{userInfo.phone}} |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<label>单位名称:</label> {{userInfo.companyName}} |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<label>账号状态:</label> |
||||
<span *ngIf="userInfo.enabled">正常</span> |
||||
<span *ngIf="!userInfo.enabled">禁用</span> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<label>注册时间:</label> {{userInfo.creationTime|date:'yyyy-MM-dd'}} |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<label>统一社会信用代码:</label> {{userInfo.usci}} |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem"> |
||||
<button mat-raised-button color="primary" (click)='edit()'>修改资料</button> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</mat-card> |
||||
@ -1,21 +1,15 @@
|
||||
mat-card{ |
||||
padding-left: 40%; |
||||
h1{ |
||||
margin: 10px 0; |
||||
} |
||||
mat-card-actions{ |
||||
padding-left: 10%; |
||||
} |
||||
|
||||
.userList { |
||||
padding-left: 35%; |
||||
label { |
||||
font-weight: 500; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
form{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 8px; |
||||
margin-top: 8px; |
||||
} |
||||
.mat-checkbox{ |
||||
display: block; |
||||
text-align: left; |
||||
} |
||||
.mat-form-field { |
||||
width: 200px; |
||||
} |
||||
.err { |
||||
width: 350px; |
||||
font-size: 16px; |
||||
color: red; |
||||
} |
||||
Loading…
Reference in new issue