14 changed files with 130 additions and 182 deletions
@ -1,52 +1,32 @@
|
||||
<div class="login"> |
||||
<div class="loginbox"> |
||||
<div class="content"> |
||||
<div class="loginBox"> |
||||
<h1 class="header">指挥长 (员) 战术战法培训系统</h1> |
||||
|
||||
<div class="intro"> |
||||
<p>数据采集管理平台</p> |
||||
<!-- <span> |
||||
数字化预案编制管理应用平台集重点单位的数字化预案资源的管理、分析及调用为一体，可实现辖区内预案使用的高效化、集约化、统一化、标准化管理。同时，可将消防现有的三维预案、图片式预案、卡片式预案、二维预案、视频预案等接入至系统中进行更加全面、真实、直观、生动的展示各项单位预案数据，方便进行预案资源调用，更好的服务实战指挥。 |
||||
</span> --> |
||||
</div> |
||||
|
||||
<div class="card"> |
||||
<div class="loginImg"> |
||||
<img src="../../../assets/images/login.gif"> |
||||
<div class="center"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<p class="cardheader">登录</p> |
||||
<div class="input"> |
||||
<mat-icon class="icon">account_box</mat-icon> |
||||
<input id="name" name="name" required ngModel placeholder="请输入账号"> |
||||
</div> |
||||
|
||||
<mat-card> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<mat-icon class="icon">account_box</mat-icon> |
||||
<div class="input"> |
||||
<mat-icon class="icon2">lock</mat-icon> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入账号"> |
||||
</mat-form-field> |
||||
<input id="password" name="password" type='password' required ngModel placeholder="请输入密码"> |
||||
</div> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="password" name="password" type='password' |
||||
required minlength="8" |
||||
ngModel #password="ngModel" placeholder="请输入密码"> |
||||
</mat-form-field> |
||||
<div class="forget"> |
||||
<label (click)='forget()'>忘记密码?</label> |
||||
</div> |
||||
|
||||
<div *ngIf="errmsg" class="alert-danger"> |
||||
{{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="website"> |
||||
<p>北京安信科创有限公司提供技术支持和维护</p> |
||||
</div> |
||||
|
||||
</mat-card> |
||||
<button type="submit" [disabled]="!form.form.valid" class="loginBtn" mat-raised-button color="primary">登录</button> |
||||
</form> |
||||
</div> |
||||
|
||||
</div> |
||||
<p class="footer">Copyright 2019 北京安信科创软件有限公司出品</p> |
||||
</div> |
||||
@ -1,115 +1,88 @@
|
||||
|
||||
.login { |
||||
.content { |
||||
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; |
||||
} |
||||
max-height: 100%; |
||||
background: url('../../../assets//images/loginBackground.jpg'); |
||||
background-repeat:no-repeat; |
||||
background-size:100% 100%; |
||||
-moz-background-size:100% 100%; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
.loginBox { |
||||
margin: 0 auto; |
||||
width: 40%; |
||||
text-align: center; |
||||
box-sizing: border-box; |
||||
padding: 8% 0; |
||||
.header { |
||||
font-size: 34px; |
||||
font-weight: 650; |
||||
font-family: 'NSimSun'; |
||||
} |
||||
|
||||
.card{ |
||||
width: 460px; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
position: absolute; |
||||
right: 0; |
||||
.center { |
||||
padding: 100px 0; |
||||
width: 50%; |
||||
box-sizing: border-box; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
} |
||||
|
||||
.example-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
.footer { |
||||
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; |
||||
text-align: center; |
||||
position: fixed; |
||||
bottom: 35px; |
||||
color: #858688; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.applyfor { |
||||
font-size: 16px; |
||||
a { |
||||
color: #039be5; |
||||
} |
||||
} |
||||
|
||||
.website { |
||||
font-size: 14px; |
||||
text-align: center; |
||||
margin-top: 60px; |
||||
|
||||
// 表单内部样式 |
||||
.forget{ |
||||
margin: 30px auto; |
||||
label { |
||||
margin-left: 80%; |
||||
box-sizing: border-box; |
||||
font-size: 14px; |
||||
color: #2196f3; |
||||
cursor:pointer; |
||||
} |
||||
} |
||||
.alert-danger { |
||||
margin-bottom: 30px; |
||||
text-align: left; |
||||
font-size: 14px; |
||||
color: red; |
||||
} |
||||
.cardheader{ |
||||
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; |
||||
.loginBtn { |
||||
width: 100%; |
||||
} |
||||
.mat-input-element { |
||||
//input 框 + 字体图标 |
||||
.input { |
||||
width: 100%; |
||||
margin: 30px auto; |
||||
position: relative; |
||||
input { |
||||
width: 90%; |
||||
border-radius: 5px; |
||||
border: 1px solid #999; |
||||
height: 36px; |
||||
padding-left: 30px; |
||||
} |
||||
} |
||||
.mat-card .example-container .icon { |
||||
.icon { |
||||
width: 24px; |
||||
color: #666; |
||||
color: #B5BBBC; |
||||
font-size: 24px; |
||||
position: absolute; |
||||
top:36px; |
||||
left: 15px; |
||||
top: 7px; |
||||
left: 8px; |
||||
} |
||||
.mat-card .example-container .icon2 { |
||||
.icon2 { |
||||
width: 24px; |
||||
color: #666; |
||||
color: #B5BBBC; |
||||
font-size: 24px; |
||||
position: absolute; |
||||
top:100px; |
||||
left: 15px; |
||||
} |
||||
a { |
||||
font-size: 14px; |
||||
color: #0066FF; |
||||
margin-left: 250px; |
||||
top: 7px; |
||||
left: 8px; |
||||
} |
||||
|
After Width: | Height: | Size: 71 KiB |
Loading…
Reference in new issue