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