Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-03-29 14:47:19 +08:00
parent b7ab261549
commit be97d820bd
7 changed files with 91 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout/passport/passport.component.html
View File

@ -9,14 +9,14 @@
</nz-header> -->
<nz-content class="content">
<nz-row>
<nz-col nzSm="0" nzMd="16" nzLg="14" nzXl="14" >
<div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;">
<nz-col nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14" >
<div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;padding: 60px;">
<div class="earth-box">
<div class="earth" style="width: 100%;height: 100%;"></div>
</div>
</div>
</nz-col>
<nz-col nzXs="24" nzSm="24" nzMd="8" nzLg="8" nzXl="7" style="z-index: 9999; padding-top : 64px;">
<nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="9" nzXl="8" nzXXl="7" style="z-index: 9999; padding-top : 64px;">
<router-outlet></router-outlet>
</nz-col>
</nz-row>

2
src/app/layout/passport/passport.component.less
View File

@ -22,7 +22,7 @@
}
.earth-box {
background : url('../../../assets/images/login/5-地球元素.png') 100% 100% no-repeat;
background : url('../../../assets/images/login/4-界面背景.png') 100% 100% no-repeat;
background-size : cover;
background-position: center;
// overflow : hidden;

4
src/app/routes/passport/components/login/login.component.html
View File

@ -16,8 +16,8 @@
<!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
<div class="login-box">
<div class="login-box-content">
<img src="./assets/images/login/运多星logo-01.png" alt="" style="width: 130px;margin: auto;">
<nz-tabset (nzSelectChange)="switch($event)" class="mt-md text-left">
<img class="login-logo" src="./assets/images/login/运多星logo-01.png" alt="" >
<nz-tabset (nzSelectChange)="switch($event)" class=" text-left">
<nz-tab nzTitle="密码登录">
<sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'">
<ng-template sf-template="username" let-i let-ui="ui" let-schema="schema">

78
src/app/routes/passport/components/login/login.component.less
View File

@ -14,10 +14,11 @@
width : 100%;
height : 630px;
border-radius: 0px 16px 16px 0px;
margin-top : 64px;
.login-logo {
width : 310px;
height: 600px;
width : 130px;
margin: auto;
}
.login-box {
@ -25,10 +26,14 @@
background-color: #fff;
.login-box-content {
max-width : 340px;
max-width : 380px;
margin : auto;
padding : 46px 0 38px;
text-align: center;
.ant-tabs {
margin-top: 16px
}
}
}
@ -196,16 +201,71 @@
border-radius: 4px
}
@media (max-width: 1500px) {
.login-box .login-box-content {
max-width : 300px;
margin : auto;
padding : 34px 0 0;
text-align: center;
.ant-tabs {
margin-top: 0;
.ant-tabs-nav-list {
.ant-tabs-tab {
padding: 4px 0 14px;
}
.ant-tabs-tab-btn {
font-size: 17px;
}
}
}
.ant-tabs-top>.ant-tabs-nav {
margin: 0 0 16px 0;
}
.ant-tabs-tab+.ant-tabs-tab {
margin: 0 0 0 68px;
}
}
}
}
@media (max-width: 990px) {
.box-content {
@media (max-width: 990px) {}
.login-logo {
width : 0px !important;
height: 0px !important;
@media (max-width: 1500px) {
.body-box {
max-width: 422px;
.box-content {
height: 550px;
.login-logo {
width : 110px;
margin: auto;
}
.login-box .login-box-content {
max-width : 345px;
margin : auto;
padding : 34px 0 0;
text-align: center;
.ant-tabs {
margin-top: 0;
.ant-tabs-nav-list .ant-tabs-tab-btn {
font-size: 17px;
}
}
}
}
}
}
}
@media (max-width: 1600px) {}

BIN
src/assets/images/login/4-界面背景.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

28
src/assets/login/js/script.js
View File

@ -272,24 +272,24 @@
this.removeInteractionParticle();
}.bind(this);
this.canvas.addEventListener('mousemove', this.onMouseMove);
this.canvas.addEventListener('touchmove', this.onTouchMove);
this.canvas.addEventListener('mousedown', this.onMouseDown);
this.canvas.addEventListener('touchstart', this.onTouchStart);
this.canvas.addEventListener('mouseup', this.onMouseUp);
this.canvas.addEventListener('mouseout', this.onMouseOut);
this.canvas.addEventListener('touchend', this.onTouchEnd);
// this.canvas.addEventListener('mousemove', this.onMouseMove);
// this.canvas.addEventListener('touchmove', this.onTouchMove);
// this.canvas.addEventListener('mousedown', this.onMouseDown);
// this.canvas.addEventListener('touchstart', this.onTouchStart);
// this.canvas.addEventListener('mouseup', this.onMouseUp);
// this.canvas.addEventListener('mouseout', this.onMouseOut);
// this.canvas.addEventListener('touchend', this.onTouchEnd);
};
ParticleNetwork.prototype.unbindUiActions = function() {
if (this.canvas) {
this.canvas.removeEventListener('mousemove', this.onMouseMove);
this.canvas.removeEventListener('touchmove', this.onTouchMove);
this.canvas.removeEventListener('mousedown', this.onMouseDown);
this.canvas.removeEventListener('touchstart', this.onTouchStart);
this.canvas.removeEventListener('mouseup', this.onMouseUp);
this.canvas.removeEventListener('mouseout', this.onMouseOut);
this.canvas.removeEventListener('touchend', this.onTouchEnd);
// this.canvas.removeEventListener('mousemove', this.onMouseMove);
// this.canvas.removeEventListener('touchmove', this.onTouchMove);
// this.canvas.removeEventListener('mousedown', this.onMouseDown);
// this.canvas.removeEventListener('touchstart', this.onTouchStart);
// this.canvas.removeEventListener('mouseup', this.onMouseUp);
// this.canvas.removeEventListener('mouseout', this.onMouseOut);
// this.canvas.removeEventListener('touchend', this.onTouchEnd);
}
};

4
src/index.html
View File

@ -61,8 +61,8 @@
class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
</div>
</div>
<!-- <div class='particle-network-animation'></div>
<script type="text/javascript" src="./assets/login/js/script.js"></script> -->
<div class='particle-network-animation'></div>
<script type="text/javascript" src="./assets/login/js/script.js"></script>
</body>
</html>