23 changed files with 495 additions and 252 deletions
@ -1 +1,19 @@ |
|||||||
<router-outlet></router-outlet> |
<router-outlet></router-outlet> |
||||||
|
|
||||||
|
|
||||||
|
<!-- <button class="btn" (click)="receiptOfNotification()">点击收到通知 </button> --> |
||||||
|
<ng-template> |
||||||
|
<div class="topbox"> |
||||||
|
<div> |
||||||
|
<img src="../assets/images/AnXinQQ.jpg" alt=""> |
||||||
|
</div> |
||||||
|
<div class="text"> |
||||||
|
<span>您有一条新的违规事件!</span> |
||||||
|
<span>这是详细描述这是详细描述这是详细描述...</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="btnbox"> |
||||||
|
<button class="look" nz-button type="button">查看</button> |
||||||
|
<button class="lose" nz-button type="button">忽略</button> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
|||||||
@ -0,0 +1,5 @@ |
|||||||
|
.btn{ |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
@ -1,28 +1,38 @@ |
|||||||
<div class="login"> |
<div class="login" id="login"> |
||||||
<div class="loginBox"> |
<div class="card"> |
||||||
<div> |
<h1 class="cardheader">欢迎登陆</h1> |
||||||
<div class="card"> |
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||||
<span class="cardheader">XXXXXXXXXX</span> |
<nz-form-item> |
||||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
<nz-form-control nzErrorTip="请输入账号!"> |
||||||
<nz-form-item> |
<nz-input-group nzPrefixIcon="user"> |
||||||
<nz-form-control nzErrorTip="请输入用户名!"> |
<input required nz-input type="text" formControlName="userName" placeholder="请输入账号" nzSize="large" /> |
||||||
<nz-input-group > |
</nz-input-group> |
||||||
<input required type="text" nz-input formControlName="userName" placeholder="用户名" /> |
</nz-form-control> |
||||||
</nz-input-group> |
</nz-form-item> |
||||||
</nz-form-control> |
<nz-form-item> |
||||||
</nz-form-item> |
<nz-form-control nzErrorTip="请输入密码!"> |
||||||
<nz-form-item> |
<nz-input-group nzPrefixIcon="lock"> |
||||||
<nz-form-control nzErrorTip="请输入密码!"> |
<input required nz-input type="password" formControlName="password" placeholder="请输入密码" [nzSize]="'small'" /> |
||||||
<nz-input-group> |
</nz-input-group> |
||||||
<input required type="password" nz-input formControlName="password" placeholder="密码" /> |
</nz-form-control> |
||||||
</nz-input-group> |
</nz-form-item> |
||||||
</nz-form-control> |
|
||||||
</nz-form-item> |
|
||||||
|
|
||||||
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button> |
<div class="hint"> |
||||||
|
<span class="forget" (click)="forget()">忘记密码?</span> |
||||||
</form> |
|
||||||
</div> |
</div> |
||||||
</div> |
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button> |
||||||
|
</form> |
||||||
|
<p class="role"> |
||||||
|
<a nz-dropdown [nzDropdownMenu]="menu" [nzVisible]="true"> |
||||||
|
{{selectedRole ? selectedRole : '请选择登录角色'}} |
||||||
|
<i nz-icon nzType="down"></i> |
||||||
|
</a> |
||||||
|
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||||
|
<ul nz-menu nzSelectable> |
||||||
|
<li nz-menu-item (click)="selecteRole(item)" *ngFor="let item of roleList">{{item}}</li> |
||||||
|
</ul> |
||||||
|
</nz-dropdown-menu> |
||||||
|
</p> |
||||||
|
<p class="company">北京安信科创软件有限公司提供技术支持和维护</p> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
@ -1,105 +1,58 @@ |
|||||||
.login { |
.login { |
||||||
width: 100%; |
width: 100%; |
||||||
height: 100%; |
height: 100%; |
||||||
background: url('../../../assets/images/caiji.jpg'); |
background: url('../../../assets/images/bgImg.jpg'); |
||||||
background-size:100% 100%; |
background-size: 100% 100%; |
||||||
} |
position: relative; |
||||||
.loginBox { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
background-color: #000; |
|
||||||
background: rgba(0,0,0,0.5);/*盒子背景透明*/ |
|
||||||
display: flex; |
|
||||||
/*!*flex-direction: column;*!可写可不写*/ |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
} |
||||||
|
|
||||||
.card { |
.card { |
||||||
width: 500px; |
|
||||||
height: 355px; |
|
||||||
border-radius: 10px; |
|
||||||
padding-top: 25px; |
|
||||||
background-color: hsla(0,0%,100%,.8); |
|
||||||
text-align: center; |
|
||||||
box-shadow:0px 0px 10px 5px #333; |
|
||||||
} |
|
||||||
.cardheader{ |
|
||||||
margin-bottom: 10px; |
|
||||||
font-size: 26px; |
|
||||||
font-weight: 500; |
|
||||||
} |
|
||||||
|
|
||||||
.input { |
|
||||||
margin: 15px auto; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.mat-form-field { |
|
||||||
width: 300px; |
|
||||||
} |
|
||||||
.position { |
|
||||||
margin-top: 5px; |
|
||||||
position: absolute; |
position: absolute; |
||||||
top: 15px; |
top: 20%; |
||||||
left: 75px; |
right: 12%; |
||||||
} |
background-color: rgba(0, 13, 33, 0.24); |
||||||
|
border-radius: 16px; |
||||||
.alert-danger { |
width: 456px; |
||||||
text-align-last: left; |
height: 548px; |
||||||
margin-left: 100px; |
box-sizing: border-box; |
||||||
font-size: 14px; |
padding: 79px 48px 42px 48px; |
||||||
color: red; |
color: rgba(255, 255, 255, 1); |
||||||
} |
} |
||||||
.register { |
|
||||||
text-align: left; |
.cardheader { |
||||||
a { |
font-size: 28px; |
||||||
font-size: 14px; |
margin-bottom: 66px; |
||||||
color: #0066FF; |
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.hint { |
||||||
|
text-align: right; |
||||||
|
margin-bottom: 40px; |
||||||
|
.forget{ |
||||||
|
cursor: pointer; |
||||||
|
color: #2399FF; |
||||||
} |
} |
||||||
} |
} |
||||||
.loginbtn { |
|
||||||
margin-top: 25px; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
width: 280px; |
|
||||||
background-color:#039be5; |
|
||||||
border-radius: 15px; |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
//二维码 |
button { |
||||||
.forget:hover { |
width: 100%; |
||||||
.contactUs { |
height: 42px; |
||||||
opacity: 1; |
font-size: 16px; |
||||||
z-index: 1; |
border-radius: 4px; |
||||||
transition: opacity 1.5s; |
|
||||||
} |
|
||||||
} |
|
||||||
.contactUs { |
|
||||||
opacity: 0; |
|
||||||
z-index: -999; |
|
||||||
position: fixed; |
|
||||||
top: 55%; |
|
||||||
left: 28%; |
|
||||||
width: 150px; |
|
||||||
border-radius: 5px;; |
|
||||||
img { |
|
||||||
width: 150px; |
|
||||||
height: 150px;} |
|
||||||
} |
|
||||||
|
|
||||||
.login-form { |
|
||||||
max-width: 300px; |
|
||||||
} |
} |
||||||
|
|
||||||
.login-form-margin { |
p { |
||||||
margin-bottom: 16px; |
text-align: center; |
||||||
} |
} |
||||||
|
|
||||||
.login-form-forgot { |
.role { |
||||||
float: right; |
color: #2399FF; |
||||||
|
margin-top: 38px; |
||||||
|
font-size: 15px; |
||||||
} |
} |
||||||
|
|
||||||
.login-form-button { |
.company { |
||||||
width: 100%; |
color: #666262; |
||||||
|
margin-top: 25px; |
||||||
|
font-size: 14px; |
||||||
} |
} |
||||||
|
After Width: | Height: | Size: 829 KiB |
Loading…
Reference in new issue