edit

2022-03-30 14:09:12 +08:00
parent f8c82f6f13
commit 6ed11186d4
12 changed files with 196 additions and 116 deletions
--- a/src/app/layout/passport/d.scss
+++ b/src/app/layout/passport/d.scss
@ -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%;
--- a/src/app/layout/passport/particle.ts
+++ b/src/app/layout/passport/particle.ts
@ -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,41 +11,75 @@ 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) {
-        this.$el = document.getElementsByClassName(element);
+    var ParticleNetworkAnimation: any, PNA: any;
+    ParticleNetworkAnimation = PNA = function () {};

-        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);
+    PNA.prototype.init = function (element: any) {
+      console.log(this);
+      this.$el = document.getElementsByClassName(element);

-        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;
-      },
-      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;
-      }
+      this.bindUiActions();
+
+      return this;
    };

-    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 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: {
-          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
+    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' ]
      };
+      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(() => {
-          if (counter < quantity - 1) {
-            // Create particle object
-            this.particles.push(new Particle(me, me.canvas.width, me.canvas.height));
-          } else {
-            clearInterval(me.createIntervalId);
-          }
-          counter++;
-        }, 50);
+        this.createIntervalId = setInterval(
+          function () {
+            if (counter < quantity - 1) {
+              // Create particle object
+              this.particles.push(new Particle(this));
+            } else {
+              clearInterval(me.createIntervalId);
+            }
+            counter++;
+          }.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]);
  }
 }
--- a/src/app/layout/passport/passport.component.html
+++ b/src/app/layout/passport/passport.component.html
@ -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>
--- a/src/app/layout/passport/passport.component.less
+++ b/src/app/layout/passport/passport.component.less
@ -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 {
--- a/src/app/layout/passport/passport.component.ts
+++ b/src/app/layout/passport/passport.component.ts
@ -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);
  }
 }
--- a/src/app/routes/passport/components/login/login.component.html
+++ b/src/app/routes/passport/components/login/login.component.html
@ -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>
--- a/src/app/routes/passport/components/login/login.component.less
+++ b/src/app/routes/passport/components/login/login.component.less
@ -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;
          }
        }
      }
--- a/src/assets/images/login/4-界面背景.png
+++ b/src/assets/images/login/4-界面背景.png
--- a/src/assets/images/login/5-地球元素.png
+++ b/src/assets/images/login/5-地球元素.png
--- a/src/index.html
+++ b/src/index.html
@ -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>
--- a/src/styles.less
+++ b/src/styles.less
@ -106,8 +106,3 @@ nz-range-picker {
 }


-html,
-body {
-    height  : 100%;
-    overflow: hidden;
-}
--- a/src/styles/compact.less
+++ b/src/styles/compact.less
@ -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;
@ -109,4 +109,32 @@ h2 {
        padding: 12px 0px !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;
+    }
+
 }