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="loginBox"> |
||||
<div> |
||||
<div class="card"> |
||||
<span class="cardheader">XXXXXXXXXX</span> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入用户名!"> |
||||
<nz-input-group > |
||||
<input required type="text" nz-input formControlName="userName" placeholder="用户名" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入密码!"> |
||||
<nz-input-group> |
||||
<input required type="password" nz-input formControlName="password" placeholder="密码" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<div class="login" id="login"> |
||||
<div class="card"> |
||||
<h1 class="cardheader">欢迎登陆</h1> |
||||
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入账号!"> |
||||
<nz-input-group nzPrefixIcon="user"> |
||||
<input required nz-input type="text" formControlName="userName" placeholder="请输入账号" nzSize="large" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入密码!"> |
||||
<nz-input-group nzPrefixIcon="lock"> |
||||
<input required nz-input type="password" formControlName="password" placeholder="请输入密码" [nzSize]="'small'" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button> |
||||
|
||||
</form> |
||||
<div class="hint"> |
||||
<span class="forget" (click)="forget()">忘记密码?</span> |
||||
</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> |
||||
|
||||
@ -1,105 +1,58 @@
|
||||
.login { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: url('../../../assets/images/caiji.jpg'); |
||||
background-size:100% 100%; |
||||
} |
||||
.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; |
||||
background: url('../../../assets/images/bgImg.jpg'); |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
} |
||||
|
||||
.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; |
||||
top: 15px; |
||||
left: 75px; |
||||
} |
||||
|
||||
.alert-danger { |
||||
text-align-last: left; |
||||
margin-left: 100px; |
||||
font-size: 14px; |
||||
color: red; |
||||
} |
||||
.register { |
||||
text-align: left; |
||||
a { |
||||
font-size: 14px; |
||||
color: #0066FF; |
||||
top: 20%; |
||||
right: 12%; |
||||
background-color: rgba(0, 13, 33, 0.24); |
||||
border-radius: 16px; |
||||
width: 456px; |
||||
height: 548px; |
||||
box-sizing: border-box; |
||||
padding: 79px 48px 42px 48px; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
|
||||
.cardheader { |
||||
font-size: 28px; |
||||
margin-bottom: 66px; |
||||
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; |
||||
} |
||||
|
||||
//二维码 |
||||
.forget:hover { |
||||
.contactUs { |
||||
opacity: 1; |
||||
z-index: 1; |
||||
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;} |
||||
button { |
||||
width: 100%; |
||||
height: 42px; |
||||
font-size: 16px; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.login-form { |
||||
max-width: 300px; |
||||
p { |
||||
text-align: center; |
||||
} |
||||
|
||||
.login-form-margin { |
||||
margin-bottom: 16px; |
||||
.role { |
||||
color: #2399FF; |
||||
margin-top: 38px; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.login-form-forgot { |
||||
float: right; |
||||
.company { |
||||
color: #666262; |
||||
margin-top: 25px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.login-form-button { |
||||
width: 100%; |
||||
} |
||||
|
After Width: | Height: | Size: 829 KiB |
Loading…
Reference in new issue