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; var ParticleNetworkAnimation: any, PNA: any;
ParticleNetworkAnimation = PNA = function () {}; ParticleNetworkAnimation = PNA = function () {};
PNA.init = function (element: any) { PNA.prototype.init = function (element: any) {
console.log(this); console.log(this);
this.$el = document.getElementsByClassName(element); this.$el = document.getElementsByClassName(element);
@ -33,7 +33,7 @@ export default class Particle {
return this; return this;
}; };
PNA.bindUiActions = function () { PNA.prototype.bindUiActions = function () {
(window as any).on('resize', () => { (window as any).on('resize', () => {
// this.sizeContainer(); // this.sizeContainer();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); 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.width = this.container.offsetWidth;
this.canvas.height = this.container.offsetHeight; 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); console.log(PNA);
var Particle: any = (parent: any, x: any, y: any) => { const Particle: any = function (parent: any, x?: any, y?: any) {
const network = parent; // this.network = parent;
const canvas = parent.canvas; // 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 { return {
network: parent,
canvas: parent.canvas,
ctx: parent.ctx, ctx: parent.ctx,
particleColor: this.returnRandomArrayitem(network.options.particleColors), // particleColor: this.returnRandomArrayitem(parent.options.particleColors),
radius: this.getLimitedRandom(1.5, 2.5), // radius: this.getLimitedRandom(1.5, 2.5),
opacity: 0, opacity: 0,
x: x || Math.random() * canvas.width, x: x || Math.random() * parent.canvas.width,
y: y || Math.random() * canvas.height, y: y || Math.random() * parent.canvas.height,
velocity: { velocity: {
x: (Math.random() - 0.5) * parent.options.velocity, x: (Math.random() - 0.5) * parent.options.velocity,
y: (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) { if (this.opacity < 1) {
this.opacity += 0.01; this.opacity += 0.01;
} else { } else {
@ -116,7 +98,7 @@ export default class Particle {
this.y += this.velocity.y; this.y += this.velocity.y;
}; };
Particle.draw = function () { Particle.prototype.draw = function () {
// Draw particle // Draw particle
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.fillStyle = this.particleColor; this.ctx.fillStyle = this.particleColor;
@ -125,19 +107,21 @@ export default class Particle {
this.ctx.fill(); this.ctx.fill();
}; };
var ParticleNetwork: any = (parent: { canvas: any; ctx: any }) => ({ var ParticleNetwork: any = function (this: any, parent: { canvas: any; ctx: any }) {
options: { this.options = {
velocity: 1, // the higher the faster velocity: 1, // the higher the faster
density: 15000, // the lower the denser density: 15000, // the lower the denser
netLineDistance: 200, netLineDistance: 200,
netLineColor: '#929292', netLineColor: '#929292',
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ] particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
}, };
canvas: parent.canvas, this.canvas = parent.canvas;
ctx: parent.ctx this.ctx = parent.ctx;
});
ParticleNetwork.init = function () { this.init();
};
ParticleNetwork.prototype.init = function () {
// Create particle objects // Create particle objects
this.createParticles(true); this.createParticles(true);
@ -147,7 +131,7 @@ export default class Particle {
this.bindUiActions(); this.bindUiActions();
}; };
ParticleNetwork.createParticles = function (isInitial: any) { ParticleNetwork.prototype.createParticles = function (isInitial: any) {
// Initialise / reset particles // Initialise / reset particles
var me = this; var me = this;
this.particles = []; this.particles = [];
@ -173,7 +157,7 @@ export default class Particle {
} }
}; };
ParticleNetwork.createInteractionParticle = function () { ParticleNetwork.prototype.createInteractionParticle = function () {
// Add interaction particle // Add interaction particle
this.interactionParticle = new Particle(this); this.interactionParticle = new Particle(this);
this.interactionParticle.velocity = { this.interactionParticle.velocity = {
@ -184,7 +168,7 @@ export default class Particle {
return this.interactionParticle; return this.interactionParticle;
}; };
ParticleNetwork.removeInteractionParticle = function () { ParticleNetwork.prototype.removeInteractionParticle = function () {
// Find it // Find it
var index = this.particles.indexOf(this.interactionParticle); var index = this.particles.indexOf(this.interactionParticle);
if (index > -1) { if (index > -1) {
@ -194,7 +178,7 @@ export default class Particle {
} }
}; };
ParticleNetwork.update = function () { ParticleNetwork.prototype.update = function () {
if (this.canvas) { if (this.canvas) {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.globalAlpha = 1; this.ctx.globalAlpha = 1;
@ -242,7 +226,7 @@ export default class Particle {
} }
}; };
ParticleNetwork.bindUiActions = function () { ParticleNetwork.prototype.bindUiActions = function () {
// Mouse / touch event handling // Mouse / touch event handling
this.spawnQuantity = 3; this.spawnQuantity = 3;
this.mouseIsDown = false; this.mouseIsDown = false;
@ -321,7 +305,7 @@ export default class Particle {
// this.canvas.addEventListener('touchend', this.onTouchEnd); // this.canvas.addEventListener('touchend', this.onTouchEnd);
}; };
ParticleNetwork.unbindUiActions = function () { ParticleNetwork.prototype.unbindUiActions = function () {
if (this.canvas) { if (this.canvas) {
// this.canvas.removeEventListener('mousemove', this.onMouseMove); // this.canvas.removeEventListener('mousemove', this.onMouseMove);
// this.canvas.removeEventListener('touchmove', this.onTouchMove); // 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()" /> (ngModelChange)="i.setValue($event)" placeholder="密码" (keyup.enter)="submit()" />
</nz-input-group> </nz-input-group>
<ng-template #inputClearTpl> <ng-template #inputClearTpl>
<i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px" <i *ngIf="isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px" nzType="eye"
nzType="eye" nzTheme="fill" (click)="isPasswordType = false"></i> nzTheme="fill" (click)="isPasswordType = false"></i>
<i *ngIf="!isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px" <i *ngIf="!isPasswordType" nz-icon class="ant-input-clear-icon" style="font-size: 22px"
nzType="eye-invisible" nzTheme="fill" (click)="isPasswordType = true"></i> nzType="eye-invisible" nzTheme="fill" (click)="isPasswordType = true"></i>
</ng-template> </ng-template>
@ -67,19 +67,25 @@
</sf> </sf>
</nz-tab> </nz-tab>
</nz-tabset> </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()" <button nz-button type="button" nzType="primary" nzSize="large" (click)="submit()"
[nzLoading]="userSrv?.http?.loading" nzBlock class="but"> [nzLoading]="userSrv?.http?.loading" nzBlock class="but">
登录 登录
</button> </button>
<nz-divider></nz-divider> <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><br>
<button nz-button type="button" nzSize="large" nzDanger nzBlock class="but mt-md"> <button nz-button type="button" nzSize="large" nzDanger nzBlock class="but mt-md">
忘记密码？重置 忘记密码？重置
</button> </button> -->
<!-- <p class="forgetPwd mt-xl" routerLink="/passport/retrieve-password">忘记密码</p> <p class="text-center" style="margin: 0;">
<p class="agreement"> <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" [routerLink]="['/passport/agreement']" [queryParams]="{ type: 1 }">《平台服务协议》</a>
<a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a> <a target="_blank" [queryParams]="{ type: 2 }" [routerLink]="['/passport/agreement']">《隐私政策》</a>
</p> --> </p> -->
@ -87,7 +93,7 @@
</div> </div>
</div> </div>
</div> </div>
<div > <div>
<!-- 深圳市怡亚通供应链股份有限公司 版权所有 <!-- 深圳市怡亚通供应链股份有限公司 版权所有
<p [innerHTML]="copyright"></p> --> <p [innerHTML]="copyright"></p> -->
</div> </div>

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

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