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 18:00:52 +08:00
parent b8fd0cd28f
commit e13b7669f2
4 changed files with 89 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ export default class Particle {
var ParticleNetworkAnimation: any, PNA: any;
ParticleNetworkAnimation = PNA = function () {};
PNA.init = function (element: any) {
PNA.prototype.init = function (element: any) {
console.log(this);
this.$el = document.getElementsByClassName(element);
@ -33,7 +33,7 @@ export default class Particle {
return this;
};
PNA.bindUiActions = function () {
PNA.prototype.bindUiActions = function () {
(window as any).on('resize', () => {
// this.sizeContainer();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@ -42,62 +42,44 @@ export default class Particle {
});
};
PNA.sizeCanvas = function () {
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;
const Particle: any = function (parent: any, x?: any, y?: any) {
// this.network = parent;
// this.canvas = parent.canvas;
// this.ctx = parent.ctx;
// this.particleColor = ;
// this.radius = ;
// this.opacity = 0;
// this.x = x || Math.random() * this.canvas.width;
// this.y = y || Math.random() * this.canvas.height;
// this.velocity = {
// x: (Math.random() - 0.5) * parent.options.velocity,
// y: (Math.random() - 0.5) * parent.options.velocity
// };
return {
network: parent,
canvas: parent.canvas,
ctx: parent.ctx,
particleColor: this.returnRandomArrayitem(network.options.particleColors),
radius: this.getLimitedRandom(1.5, 2.5),
// particleColor: this.returnRandomArrayitem(parent.options.particleColors),
// radius: this.getLimitedRandom(1.5, 2.5),
opacity: 0,
x: x || Math.random() * canvas.width,
y: y || Math.random() * canvas.height,
x: x || Math.random() * parent.canvas.width,
y: y || Math.random() * parent.canvas.height,
velocity: {
x: (Math.random() - 0.5) * parent.options.velocity,
y: (Math.random() - 0.5) * parent.options.velocity
}
};
};
// console.log(Particle);
console.log(new Particle(this));
Particle.update = function () {
Particle.prototype.update = function () {
if (this.opacity < 1) {
this.opacity += 0.01;
} else {
@ -116,7 +98,7 @@ export default class Particle {
this.y += this.velocity.y;
};
Particle.draw = function () {
Particle.prototype.draw = function () {
// Draw particle
this.ctx.beginPath();
this.ctx.fillStyle = this.particleColor;
@ -125,19 +107,21 @@ export default class Particle {
this.ctx.fill();
};
var ParticleNetwork: any = (parent: { canvas: any; ctx: any }) => ({
options: {
var ParticleNetwork: any = function (this: any, 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;
ParticleNetwork.init = function () {
this.init();
};
ParticleNetwork.prototype.init = function () {
// Create particle objects
this.createParticles(true);
@ -147,7 +131,7 @@ export default class Particle {
this.bindUiActions();
};
ParticleNetwork.createParticles = function (isInitial: any) {
ParticleNetwork.prototype.createParticles = function (isInitial: any) {
// Initialise / reset particles
var me = this;
this.particles = [];
@ -173,7 +157,7 @@ export default class Particle {
}
};
ParticleNetwork.createInteractionParticle = function () {
ParticleNetwork.prototype.createInteractionParticle = function () {
// Add interaction particle
this.interactionParticle = new Particle(this);
this.interactionParticle.velocity = {
@ -184,7 +168,7 @@ export default class Particle {
return this.interactionParticle;
};
ParticleNetwork.removeInteractionParticle = function () {
ParticleNetwork.prototype.removeInteractionParticle = function () {
// Find it
var index = this.particles.indexOf(this.interactionParticle);
if (index > -1) {
@ -194,7 +178,7 @@ export default class Particle {
}
};
ParticleNetwork.update = function () {
ParticleNetwork.prototype.update = function () {
if (this.canvas) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.globalAlpha = 1;
@ -242,7 +226,7 @@ export default class Particle {
}
};
ParticleNetwork.bindUiActions = function () {
ParticleNetwork.prototype.bindUiActions = function () {
// Mouse / touch event handling
this.spawnQuantity = 3;
this.mouseIsDown = false;
@ -321,7 +305,7 @@ export default class Particle {
// this.canvas.addEventListener('touchend', this.onTouchEnd);
};
ParticleNetwork.unbindUiActions = function () {
ParticleNetwork.prototype.unbindUiActions = function () {
if (this.canvas) {
// this.canvas.removeEventListener('mousemove', this.onMouseMove);
// this.canvas.removeEventListener('touchmove', this.onTouchMove);

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

@ -36,8 +36,8 @@
(ngModelChange)="i.setValue($event)" placeholder="密码" (keyup.enter)="submit()" />
</nz-input-group>
<ng-template #inputClearTpl>
<i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
nzType="eye" nzTheme="fill" (click)="isPasswordType = false"></i>
<i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px" nzType="eye"
nzTheme="fill" (click)="isPasswordType = false"></i>
<i *ngIf="!isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
nzType="eye-invisible" nzTheme="fill" (click)="isPasswordType = true"></i>
</ng-template>
@ -67,19 +67,25 @@
</sf>
</nz-tab>
</nz-tabset>
<p style="margin: -6px 0 0;" class="text-right mb-sm">
<a class="forgetPwd" routerLink="/passport/retrieve-password">忘记密码？重置</a>
</p>
<button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
[nzLoading]="userSrv?.http?.loading" nzBlock class="but">
登录
</button>
<nz-divider></nz-divider>
<button nz-button type="button" nzSize="large" nzDanger nzBlock class="but">
<!-- <button nz-button type="button" nzSize="large" nzDanger nzBlock class="but">
还没有账号？免费注册
</button><br>
<button nz-button type="button" nzSize="large" nzDanger nzBlock class="but mt-md">
忘记密码？重置
</button>
<!-- <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p>
<p class="agreement">
</button> -->
<p class="text-center" style="margin: 0;">
<a class="forgetPwd" routerLink="/passport/retrieve-password">还没有账号？免费注册</a>
</p>
<!-- <p class="agreement">
登录即代表您同意 <a target="_blank" [routerLink]="['/passport/agreement']" [queryParams]="{ type: 1 }">《平台服务协议》</a>
<a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a>
</p> -->
@ -87,7 +93,7 @@
</div>
</div>
</div>
<div >
<div>
<!-- 深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p> -->
</div>

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

@ -1,19 +1,19 @@
.body-box {
display : flex;
-webkit-flex-direction: column;
-ms-flex-direction : column;
flex-direction : column;
justify-content : space-between;
width : 100%;
max-width : 403px;
display : flex;
-webkit-flex-direction : column;
-ms-flex-direction : column;
flex-direction : column;
justify-content : space-between;
width : 100%;
max-width : 270px;
// height : calc(100vh - 64px);
margin : auto;
-webkit-box-orient : vertical;
margin : auto;
-webkit-box-orient : vertical;
.box-content {
width : 100%;
height : 500px;
border-radius: 0px 16px 16px 0px;
width : 100%;
height : 340px;
border-radius : 0px 16px 16px 0px;
// margin-top : 64px;
.login-logo {
@ -26,9 +26,9 @@
background-color: #fff;
.login-box-content {
max-width : 310px;
max-width : 210px;
margin : auto;
padding : 28px 0 38px;
padding : 0;
text-align: center;
.ant-tabs {
@ -69,7 +69,6 @@
.forgetPwd {
font-weight: 400;
color : #26282A;
font-size : 14px;
text-align : center;
cursor : pointer;
@ -113,7 +112,7 @@
width: 281px;
.ant-tabs-tab-btn {
font-size : 20px;
font-size : 15px;
color : #86909C;
font-weight: 500;
}
@ -163,7 +162,7 @@
}
.ant-form-item {
margin-bottom: 24px;
margin-bottom: 20px;
}
.ant-form-item-with-help {
@ -172,8 +171,10 @@
.ant-form-item-explain,
.ant-form-item-extra {
min-height : 24px;
line-height: 2;
min-height : 20px;
line-height : 2;
margin-top : -2px;
margin-bottom: -2px;
}
.ant-form-item-explain,
@ -181,13 +182,17 @@
font-size: 12px;
}
.ant-divider-horizontal {
margin: 12px 0 8px;
}
// 按钮样式修改
.ant-btn {
padding: 0 16px 12px;
}
.but {
font-size : 14px;
font-size : 13px;
line-height: 40px;
height : 40px;
color : #86909C;
@ -238,10 +243,10 @@
@media (max-width: 1500px) {
.body-box {
max-width: 360px;
max-width: 250px;
.box-content {
height: 450px;
height: 330px;
.login-logo {
@ -250,16 +255,16 @@
}
.login-box .login-box-content {
max-width : 270px;
max-width : 210px;
margin : auto;
padding : 34px 0 0;
padding : 24px 0 0;
text-align: center;
.ant-tabs {
margin-top: 0;
.ant-tabs-nav-list .ant-tabs-tab-btn {
font-size: 16px;
font-size: 15px;
}
}
}

12
src/styles/compact.less
View File

@ -112,21 +112,21 @@ h2 {
}
.body-box {
max-width: 305px !important;
max-width: 250px !important;
// height : calc(100vh - 64px);
.box-content {
width : 100%;
height: 380px!important;
height: 304px!important;
.login-box {
.login-box-content {
max-width: 260px !important;
padding : 10px 0 0 !important;
max-width: 210px !important;
padding : 6px 0 0 !important;
.ant-tabs {
margin-top: 16px
margin-top: 8px
}
}
}
@ -134,7 +134,7 @@ h2 {
}
.ant-divider-horizontal {
margin: 12px 0;
margin: 12px 0 8px;
}
}