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

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

@ -1,7 +1,4 @@
export default class Particle {
ParticleNetworkAnimation: any;
PNA: any;
getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
var number = Math.random() * (max - min) + min;
if (roundToInteger) {
@ -14,13 +11,14 @@ export default class Particle {
return array[Math.floor(Math.random() * array.length)];
};
constructor() {
this.ParticleNetworkAnimation = this.PNA = function () {};
}
constructor() {}
init() {
this.PNA = {
init: function (element: any) {
var ParticleNetworkAnimation: any, PNA: any;
ParticleNetworkAnimation = PNA = function () {};
PNA.prototype.init = function (element: any) {
console.log(this);
this.$el = document.getElementsByClassName(element);
this.container = element;
@ -28,27 +26,60 @@ export default class Particle {
this.sizeCanvas();
this.container.appendChild(this.canvas);
this.ctx = this.canvas.getContext('2d');
// this.particleNetwork = new ParticleNetwork(this);
this.particleNetwork = new ParticleNetwork(this);
this.bindUiActions();
return this;
},
bindUiActions: function () {
};
PNA.prototype.bindUiActions = function () {
(window as any).on('resize', () => {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// this.sizeContainer();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
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.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 canvas = parent.canvas;
return {
@ -64,8 +95,9 @@ export default class Particle {
}
};
};
// console.log(Particle);
Particle.prototype.update = function () {
Particle.update = function () {
if (this.opacity < 1) {
this.opacity += 0.01;
} else {
@ -84,7 +116,7 @@ export default class Particle {
this.y += this.velocity.y;
};
Particle.prototype.draw = function () {
Particle.draw = function () {
// Draw particle
this.ctx.beginPath();
this.ctx.fillStyle = this.particleColor;
@ -93,19 +125,18 @@ export default class Particle {
this.ctx.fill();
};
var ParticleNetwork = (parent: { canvas: any; ctx: any }) => {
this.init();
return {
options: {
var ParticleNetwork: any = function (parent: { canvas: any; ctx: any; }) {
this.options = {
velocity: 1, // the higher the faster
density: 15000, // the lower the denser
netLineDistance: 200,
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 () {
@ -118,7 +149,7 @@ export default class Particle {
this.bindUiActions();
};
ParticleNetwork.prototype.createParticles = function (isInitial: any) {
ParticleNetwork.prototype.createParticles = function (isInitial) {
// Initialise / reset particles
var me = this;
this.particles = [];
@ -127,15 +158,18 @@ export default class Particle {
if (isInitial) {
var counter = 0;
clearInterval(this.createIntervalId);
this.createIntervalId = setInterval(() => {
this.createIntervalId = setInterval(
function () {
if (counter < quantity - 1) {
// Create particle object
this.particles.push(new Particle(me, me.canvas.width, me.canvas.height));
this.particles.push(new Particle(this));
} else {
clearInterval(me.createIntervalId);
}
counter++;
}, 50);
}.bind(this),
50
);
} else {
// Create particle objects
for (var i = 0; i < quantity; i++) {
@ -219,15 +253,15 @@ export default class Particle {
this.mouseIsDown = false;
this.touchIsMoving = false;
this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
this.onMouseMove = function (e) {
if (!this.interactionParticle) {
this.createInteractionParticle();
}
this.interactionParticle.x = e.offsetX;
this.interactionParticle.y = e.offsetY;
};
}.bind(this);
this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any[]; clientY: any }[] }) => {
this.onTouchMove = function (e) {
e.preventDefault();
this.touchIsMoving = true;
if (!this.interactionParticle) {
@ -235,14 +269,14 @@ export default class Particle {
}
this.interactionParticle.x = e.changedTouches[0].clientX;
this.interactionParticle.y = e.changedTouches[0].clientY;
};
}.bind(this);
this.onMouseDown = () => {
this.onMouseDown = function (e) {
this.mouseIsDown = true;
var counter = 0;
var quantity = this.spawnQuantity;
var intervalId = setInterval(
() => {
function () {
if (this.mouseIsDown) {
if (counter === 1) {
quantity = 1;
@ -256,38 +290,38 @@ export default class Particle {
clearInterval(intervalId);
}
counter++;
},
}.bind(this),
50
);
};
}.bind(this);
this.onTouchStart = (e: { preventDefault: () => void; changedTouches: { clientY: any; }[]; }) => {
this.onTouchStart = function (e) {
e.preventDefault();
setTimeout(
() => {
function () {
if (!this.touchIsMoving) {
for (var i = 0; i < this.spawnQuantity; i++) {
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
}
}
},
}.bind(this),
200
);
};
}.bind(this);
this.onMouseUp = () => {
this.onMouseUp = function (e) {
this.mouseIsDown = false;
};
}.bind(this);
this.onMouseOut = function () {
this.onMouseOut = function (e) {
this.removeInteractionParticle();
};
}.bind(this);
this.onTouchEnd = (e: { preventDefault: () => void; }) => {
this.onTouchEnd = function (e) {
e.preventDefault();
this.touchIsMoving = false;
this.removeInteractionParticle();
};
}.bind(this);
// this.canvas.addEventListener('mousemove', this.onMouseMove);
// this.canvas.addEventListener('touchmove', this.onTouchMove);
@ -309,5 +343,10 @@ export default class Particle {
// 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>
</nz-header> -->
<nz-content class="content">
<nz-content class="content" id="content">
<nz-row>
<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;">
<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;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="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>
</nz-col>
</nz-row>
@ -40,6 +40,7 @@
<div class="meteor-18"></div>
<div class="meteor-19"></div>
<div class="meteor-20"></div>
<div class=" particle-network-animation"></div>
<!-- <div class="night">
<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 {
background : url('../../../assets/images/login/login-bg.jpg') 100% 100% no-repeat;
background-size: cover;
overflow : auto;
// overflow : auto;
}
passport-login {

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

@ -11,5 +11,24 @@ export class LayoutPassportComponent implements OnInit {
ngOnInit(): void {
// 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="" /> -->
<div class="login-box">
<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-tab nzTitle="密码登录">
<sf #accountSF [layout]="'vertical'" [schema]="accountSchema" [ui]="accountUI" [button]="'none'">
@ -87,7 +87,7 @@
</div>
</div>
</div>
<div class="box-footer">
<div >
<!-- 深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p> -->
</div>

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

@ -5,16 +5,16 @@
flex-direction : column;
justify-content : space-between;
width : 100%;
max-width : 473px;
height : calc(100vh - 64px);
max-width : 403px;
// height : calc(100vh - 64px);
margin : auto;
-webkit-box-orient : vertical;
.box-content {
width : 100%;
height : 630px;
height : 500px;
border-radius: 0px 16px 16px 0px;
margin-top : 64px;
// margin-top : 64px;
.login-logo {
width : 130px;
@ -26,9 +26,9 @@
background-color: #fff;
.login-box-content {
max-width : 380px;
max-width : 310px;
margin : auto;
padding : 46px 0 38px;
padding : 28px 0 38px;
text-align: center;
.ant-tabs {
@ -92,7 +92,7 @@
}
.pro-passport {
min-height: calc(100vh - 64px);
// min-height: calc(100vh - 64px);
}
}
@ -143,7 +143,7 @@
// input 框样式修改
nz-input-group {
height : 48px;
height : 40px;
font-size : 14px;
border-radius: 4px;
border-color : #E5E6EB;
@ -188,8 +188,8 @@
.but {
font-size : 14px;
line-height: 48px;
height : 48px;
line-height: 40px;
height : 40px;
color : #86909C;
}
@ -203,7 +203,7 @@
@media (max-width: 1500px) {
.login-box .login-box-content {
max-width : 300px;
max-width : 271px;
margin : auto;
padding : 34px 0 0;
text-align: center;
@ -217,7 +217,7 @@
}
.ant-tabs-tab-btn {
font-size: 17px;
font-size: 15px;
}
}
}
@ -238,10 +238,10 @@
@media (max-width: 1500px) {
.body-box {
max-width: 422px;
max-width: 360px;
.box-content {
height: 550px;
height: 450px;
.login-logo {
@ -250,7 +250,7 @@
}
.login-box .login-box-content {
max-width : 345px;
max-width : 270px;
margin : auto;
padding : 34px 0 0;
text-align: center;
@ -259,7 +259,7 @@
margin-top: 0;
.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>
</div>
</div>
<div class='particle-network-animation'></div>
<script type="text/javascript" src="./assets/login/js/script.js"></script>
</body>
</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;
}
.body-box {
max-width: 760px !important;
// .body-box {
// max-width: 760px !important;
.box-content {
height: 77% !important;
}
}
// .box-content {
// height: 77% !important;
// }
// }
.login-logo {
width : 250px !important;
@ -56,11 +56,11 @@
font-size: 18px !important;
}
.login-box-content {
max-width: 300px !important;
height : 100% !important;
padding : 58px 0 38px !important;
}
// .login-box-content {
// max-width: 300px !important;
// height : 100% !important;
// padding : 58px 0 38px !important;
// }
.total-footer {
bottom: 10px !important;
@ -110,3 +110,31 @@ h2 {
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;
}
}