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-30 14:09:12 +08:00
parent f8c82f6f13
commit 6ed11186d4
12 changed files with 196 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/layout/passport/d.scss
View File

@ -10,7 +10,7 @@ $shadow: ();
$d: random(70)/10 + 12; // 秒數 $d: random(70)/10 + 12; // 秒數
.meteor-#{$i} { .meteor-#{$i} {
position : absolute; position : fixed;
top : $h + px; top : $h + px;
left : $v*1%; left : $v*1%;
width : 130px; width : 130px;
@ -21,7 +21,7 @@ $shadow: ();
&:before { &:before {
content : ""; content : "";
position : absolute; position : fixed;
width : 4px; width : 4px;
height : 5px; height : 5px;
border-radius: 50%; border-radius: 50%;

185
src/app/layout/passport/particle.ts
View File

@ -1,7 +1,4 @@
export default class Particle { export default class Particle {
ParticleNetworkAnimation: any;
PNA: any;
getLimitedRandom = function (min: number, max: number, roundToInteger?: any) { getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
var number = Math.random() * (max - min) + min; var number = Math.random() * (max - min) + min;
if (roundToInteger) { if (roundToInteger) {
@ -14,41 +11,75 @@ export default class Particle {
return array[Math.floor(Math.random() * array.length)]; return array[Math.floor(Math.random() * array.length)];
}; };
constructor() { constructor() {}
this.ParticleNetworkAnimation = this.PNA = function () {};
}
init() { init() {
this.PNA = { var ParticleNetworkAnimation: any, PNA: any;
init: function (element: any) { ParticleNetworkAnimation = PNA = function () {};
this.$el = document.getElementsByClassName(element);
this.container = element; PNA.prototype.init = function (element: any) {
this.canvas = document.createElement('canvas'); console.log(this);
this.sizeCanvas(); this.$el = document.getElementsByClassName(element);
this.container.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
// this.particleNetwork = new ParticleNetwork(this);
this.bindUiActions(); this.container = element;
this.canvas = document.createElement('canvas');
this.sizeCanvas();
this.container.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.particleNetwork = new ParticleNetwork(this);
return this; this.bindUiActions();
},
bindUiActions: function () { return this;
(window as any).on('resize', () => {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// this.sizeContainer();
this.sizeCanvas();
this.particleNetwork.createParticles();
});
},
sizeCanvas: function () {
this.canvas.width = this.container.offsetWidth;
this.canvas.height = this.container.offsetHeight;
}
}; };
var Particle = (parent: any, x: any, y: any) => { PNA.prototype.bindUiActions = function () {
(window as any).on('resize', () => {
// this.sizeContainer();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.sizeCanvas();
this.particleNetwork.createParticles();
});
};
PNA.prototype.sizeCanvas = function () {
this.canvas.width = this.container.offsetWidth;
this.canvas.height = this.container.offsetHeight;
};
// PNA = {
// init: function (element: any) {
// console.log(element);
// this.$el = document.getElementsByClassName(element);
// this.container = element;
// this.canvas = document.createElement('canvas');
// this.sizeCanvas();
// this.container.appendChild(this.canvas);
// this.ctx = this.canvas.getContext('2d');
// // this.particleNetwork = new ParticleNetwork(this);
// this.bindUiActions();
// return this;
// },
// bindUiActions: function () {
// (window as any).on('resize', () => {
// this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// // this.sizeContainer();
// this.sizeCanvas();
// this.particleNetwork.createParticles();
// });
// },
// sizeCanvas: function () {
// this.canvas.width = this.container.offsetWidth;
// this.canvas.height = this.container.offsetHeight;
// }
// };
console.log(PNA);
var Particle: any = (parent: any, x: any, y: any) => {
const network = parent; const network = parent;
const canvas = parent.canvas; const canvas = parent.canvas;
return { return {
@ -64,8 +95,9 @@ export default class Particle {
} }
}; };
}; };
// console.log(Particle);
Particle.prototype.update = function () { Particle.update = function () {
if (this.opacity < 1) { if (this.opacity < 1) {
this.opacity += 0.01; this.opacity += 0.01;
} else { } else {
@ -84,7 +116,7 @@ export default class Particle {
this.y += this.velocity.y; this.y += this.velocity.y;
}; };
Particle.prototype.draw = function () { Particle.draw = function () {
// Draw particle // Draw particle
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.fillStyle = this.particleColor; this.ctx.fillStyle = this.particleColor;
@ -93,19 +125,18 @@ export default class Particle {
this.ctx.fill(); this.ctx.fill();
}; };
var ParticleNetwork = (parent: { canvas: any; ctx: any }) => { var ParticleNetwork: any = function (parent: { canvas: any; ctx: any; }) {
this.init(); this.options = {
return { velocity: 1, // the higher the faster
options: { density: 15000, // the lower the denser
velocity: 1, // the higher the faster netLineDistance: 200,
density: 15000, // the lower the denser netLineColor: '#929292',
netLineDistance: 200, particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
netLineColor: '#929292',
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
},
canvas: parent.canvas,
ctx: parent.ctx
}; };
this.canvas = parent.canvas;
this.ctx = parent.ctx;
this.init();
}; };
ParticleNetwork.prototype.init = function () { ParticleNetwork.prototype.init = function () {
@ -118,7 +149,7 @@ export default class Particle {
this.bindUiActions(); this.bindUiActions();
}; };
ParticleNetwork.prototype.createParticles = function (isInitial: any) { ParticleNetwork.prototype.createParticles = function (isInitial) {
// Initialise / reset particles // Initialise / reset particles
var me = this; var me = this;
this.particles = []; this.particles = [];
@ -127,15 +158,18 @@ export default class Particle {
if (isInitial) { if (isInitial) {
var counter = 0; var counter = 0;
clearInterval(this.createIntervalId); clearInterval(this.createIntervalId);
this.createIntervalId = setInterval(() => { this.createIntervalId = setInterval(
if (counter < quantity - 1) { function () {
// Create particle object if (counter < quantity - 1) {
this.particles.push(new Particle(me, me.canvas.width, me.canvas.height)); // Create particle object
} else { this.particles.push(new Particle(this));
clearInterval(me.createIntervalId); } else {
} clearInterval(me.createIntervalId);
counter++; }
}, 50); counter++;
}.bind(this),
50
);
} else { } else {
// Create particle objects // Create particle objects
for (var i = 0; i < quantity; i++) { for (var i = 0; i < quantity; i++) {
@ -219,15 +253,15 @@ export default class Particle {
this.mouseIsDown = false; this.mouseIsDown = false;
this.touchIsMoving = false; this.touchIsMoving = false;
this.onMouseMove = (e: { offsetX: any; offsetY: any }) => { this.onMouseMove = function (e) {
if (!this.interactionParticle) { if (!this.interactionParticle) {
this.createInteractionParticle(); this.createInteractionParticle();
} }
this.interactionParticle.x = e.offsetX; this.interactionParticle.x = e.offsetX;
this.interactionParticle.y = e.offsetY; this.interactionParticle.y = e.offsetY;
}; }.bind(this);
this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any[]; clientY: any }[] }) => { this.onTouchMove = function (e) {
e.preventDefault(); e.preventDefault();
this.touchIsMoving = true; this.touchIsMoving = true;
if (!this.interactionParticle) { if (!this.interactionParticle) {
@ -235,14 +269,14 @@ export default class Particle {
} }
this.interactionParticle.x = e.changedTouches[0].clientX; this.interactionParticle.x = e.changedTouches[0].clientX;
this.interactionParticle.y = e.changedTouches[0].clientY; this.interactionParticle.y = e.changedTouches[0].clientY;
}; }.bind(this);
this.onMouseDown = () => { this.onMouseDown = function (e) {
this.mouseIsDown = true; this.mouseIsDown = true;
var counter = 0; var counter = 0;
var quantity = this.spawnQuantity; var quantity = this.spawnQuantity;
var intervalId = setInterval( var intervalId = setInterval(
() => { function () {
if (this.mouseIsDown) { if (this.mouseIsDown) {
if (counter === 1) { if (counter === 1) {
quantity = 1; quantity = 1;
@ -256,38 +290,38 @@ export default class Particle {
clearInterval(intervalId); clearInterval(intervalId);
} }
counter++; counter++;
}, }.bind(this),
50 50
); );
}; }.bind(this);
this.onTouchStart = (e: { preventDefault: () => void; changedTouches: { clientY: any; }[]; }) => { this.onTouchStart = function (e) {
e.preventDefault(); e.preventDefault();
setTimeout( setTimeout(
() => { function () {
if (!this.touchIsMoving) { if (!this.touchIsMoving) {
for (var i = 0; i < this.spawnQuantity; i++) { for (var i = 0; i < this.spawnQuantity; i++) {
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY)); this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
} }
} }
}, }.bind(this),
200 200
); );
}; }.bind(this);
this.onMouseUp = () => { this.onMouseUp = function (e) {
this.mouseIsDown = false; this.mouseIsDown = false;
}; }.bind(this);
this.onMouseOut = function () { this.onMouseOut = function (e) {
this.removeInteractionParticle(); this.removeInteractionParticle();
}; }.bind(this);
this.onTouchEnd = (e: { preventDefault: () => void; }) => { this.onTouchEnd = function (e) {
e.preventDefault(); e.preventDefault();
this.touchIsMoving = false; this.touchIsMoving = false;
this.removeInteractionParticle(); this.removeInteractionParticle();
}; }.bind(this);
// this.canvas.addEventListener('mousemove', this.onMouseMove); // this.canvas.addEventListener('mousemove', this.onMouseMove);
// this.canvas.addEventListener('touchmove', this.onTouchMove); // this.canvas.addEventListener('touchmove', this.onTouchMove);
@ -309,5 +343,10 @@ export default class Particle {
// this.canvas.removeEventListener('touchend', this.onTouchEnd); // this.canvas.removeEventListener('touchend', this.onTouchEnd);
} }
}; };
const pna = new PNA();
console.log(pna);
pna.init(document.getElementsByClassName('particle-network-animation')[0]);
} }
} }

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

@ -7,16 +7,16 @@
</div> </div>
</div> </div>
</nz-header> --> </nz-header> -->
<nz-content class="content"> <nz-content class="content" id="content">
<nz-row> <nz-row>
<nz-col nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14"> <nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="14" nzXl="14" nzXXl="14" style="z-index: 9999;">
<div style="width: 100%;height: 100%;display: flex;align-items: center;min-height: 700px;padding: 60px;"> <div style="width: 100%;height: 100%;display: flex;align-items: center;padding: 60px;">
<div class="earth-box"> <div class="earth-box">
<div class="earth" style="width: 100%;height: 100%;"></div> <div class="earth" style="width: 100%;height: 100%;"></div>
</div> </div>
</div> </div>
</nz-col> </nz-col>
<nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="9" nzXl="8" nzXXl="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; ">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</nz-col> </nz-col>
</nz-row> </nz-row>
@ -40,6 +40,7 @@
<div class="meteor-18"></div> <div class="meteor-18"></div>
<div class="meteor-19"></div> <div class="meteor-19"></div>
<div class="meteor-20"></div> <div class="meteor-20"></div>
<div class=" particle-network-animation"></div>
<!-- <div class="night"> <!-- <div class="night">
<div class="shooting_star"></div> <div class="shooting_star"></div>
<div class="shooting_star"></div> <div class="shooting_star"></div>

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

@ -14,7 +14,7 @@
nz-content { nz-content {
background : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat; background : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
background-size: cover; background-size: cover;
overflow : auto; // overflow : auto;
} }
passport-login { passport-login {

19
src/app/layout/passport/passport.component.ts
View File

@ -11,5 +11,24 @@ export class LayoutPassportComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
// this.tokenService.clear(); // this.tokenService.clear();
this.loadJS();
// const particle = new Particle();
// particle.init();
}
loadJS() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = './assets/login/js/script.js';
script.id = 'particle';
document.getElementsByTagName('head')[0].appendChild(script);
setTimeout(() => {
var content = document.getElementById('content');
if (content) {
content.style.overflow = 'auto';
}
}, 100);
} }
} }

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

@ -16,7 +16,7 @@
<!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> --> <!-- <img src="./assets/images/user/login-image.png" class="login-logo" alt="" /> -->
<div class="login-box"> <div class="login-box">
<div class="login-box-content"> <div class="login-box-content">
<img class="login-logo" src="./assets/images/login/运多星logo-01.png" alt="" > <!-- <img class="login-logo" src="./assets/images/login/运多星logo-01.png" alt="" > -->
<nz-tabset (nzSelectChange)="switch($event)" class=" text-left"> <nz-tabset (nzSelectChange)="switch($event)" class=" text-left">
<nz-tab nzTitle="密码登录"> <nz-tab nzTitle="密码登录">
<sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'"> <sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'">
@ -87,7 +87,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-footer"> <div >
<!-- 深圳市怡亚通供应链股份有限公司 版权所有 <!-- 深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p> --> <p [innerHTML]="copyright"></p> -->
</div> </div>

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

@ -5,16 +5,16 @@
flex-direction : column; flex-direction : column;
justify-content : space-between; justify-content : space-between;
width : 100%; width : 100%;
max-width : 473px; max-width : 403px;
height : calc(100vh - 64px); // height : calc(100vh - 64px);
margin : auto; margin : auto;
-webkit-box-orient : vertical; -webkit-box-orient : vertical;
.box-content { .box-content {
width : 100%; width : 100%;
height : 630px; height : 500px;
border-radius: 0px 16px 16px 0px; border-radius: 0px 16px 16px 0px;
margin-top : 64px; // margin-top : 64px;
.login-logo { .login-logo {
width : 130px; width : 130px;
@ -26,9 +26,9 @@
background-color: #fff; background-color: #fff;
.login-box-content { .login-box-content {
max-width : 380px; max-width : 310px;
margin : auto; margin : auto;
padding : 46px 0 38px; padding : 28px 0 38px;
text-align: center; text-align: center;
.ant-tabs { .ant-tabs {
@ -92,7 +92,7 @@
} }
.pro-passport { .pro-passport {
min-height: calc(100vh - 64px); // min-height: calc(100vh - 64px);
} }
} }
@ -143,7 +143,7 @@
// input 框样式修改 // input 框样式修改
nz-input-group { nz-input-group {
height : 48px; height : 40px;
font-size : 14px; font-size : 14px;
border-radius: 4px; border-radius: 4px;
border-color : #E5E6EB; border-color : #E5E6EB;
@ -188,8 +188,8 @@
.but { .but {
font-size : 14px; font-size : 14px;
line-height: 48px; line-height: 40px;
height : 48px; height : 40px;
color : #86909C; color : #86909C;
} }
@ -203,7 +203,7 @@
@media (max-width: 1500px) { @media (max-width: 1500px) {
.login-box .login-box-content { .login-box .login-box-content {
max-width : 300px; max-width : 271px;
margin : auto; margin : auto;
padding : 34px 0 0; padding : 34px 0 0;
text-align: center; text-align: center;
@ -217,7 +217,7 @@
} }
.ant-tabs-tab-btn { .ant-tabs-tab-btn {
font-size: 17px; font-size: 15px;
} }
} }
} }
@ -238,10 +238,10 @@
@media (max-width: 1500px) { @media (max-width: 1500px) {
.body-box { .body-box {
max-width: 422px; max-width: 360px;
.box-content { .box-content {
height: 550px; height: 450px;
.login-logo { .login-logo {
@ -250,7 +250,7 @@
} }
.login-box .login-box-content { .login-box .login-box-content {
max-width : 345px; max-width : 270px;
margin : auto; margin : auto;
padding : 34px 0 0; padding : 34px 0 0;
text-align: center; text-align: center;
@ -259,7 +259,7 @@
margin-top: 0; margin-top: 0;
.ant-tabs-nav-list .ant-tabs-tab-btn { .ant-tabs-nav-list .ant-tabs-tab-btn {
font-size: 17px; font-size: 16px;
} }
} }
} }

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 135 KiB

BIN
src/assets/images/login/5-地球元素.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 304 KiB

2
src/index.html
View File

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

5
src/styles.less
View File

@ -106,8 +106,3 @@ nz-range-picker {
} }
html,
body {
height : 100%;
overflow: hidden;
}

50
src/styles/compact.less
View File

@ -39,13 +39,13 @@
margin-bottom: 4px !important; margin-bottom: 4px !important;
} }
.body-box { // .body-box {
max-width: 760px !important; // max-width: 760px !important;
.box-content { // .box-content {
height: 77% !important; // height: 77% !important;
} // }
} // }
.login-logo { .login-logo {
width : 250px !important; width : 250px !important;
@ -56,11 +56,11 @@
font-size: 18px !important; font-size: 18px !important;
} }
.login-box-content { // .login-box-content {
max-width: 300px !important; // max-width: 300px !important;
height : 100% !important; // height : 100% !important;
padding : 58px 0 38px !important; // padding : 58px 0 38px !important;
} // }
.total-footer { .total-footer {
bottom: 10px !important; bottom: 10px !important;
@ -109,4 +109,32 @@ h2 {
padding: 12px 0px !important; padding: 12px 0px !important;
margin : 0 0 0 16px !important; margin : 0 0 0 16px !important;
} }
}
.body-box {
max-width: 305px !important;
// height : calc(100vh - 64px);
.box-content {
width : 100%;
height: 380px!important;
.login-box {
.login-box-content {
max-width: 260px !important;
padding : 10px 0 0 !important;
.ant-tabs {
margin-top: 16px
}
}
}
}
.ant-divider-horizontal {
margin: 12px 0;
}
} }