t

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: '洪楼Pro管理系统',
+  title: '洪楼Plus管理系统',
 
   /**
    * @type {boolean} true | false

src/utils/particle.js

@@ -0,0 +1,153 @@
+function canvasMeasure(el, canvasEl) {
+  canvasEl.width = el.clientWidth
+  canvasEl.height = el.clientHeight
+}
+
+function borderPoint(point, canvasEl) {
+  let p = point
+  if (point.x <= 0 || point.x >= canvasEl.width) {
+    p.vx = -p.vx
+    p.x += p.vx
+  } else if (point.y <= 0 || point.y >= canvasEl.height) {
+    p.vy = -p.vy
+    p.y += p.vy
+  } else {
+    p = {
+      x: p.x + p.vx,
+      y: p.y + p.vy,
+      vx: p.vx,
+      vy: p.vy
+    }
+  }
+  return p
+}
+
+function drawLine(args) {
+  let dist = null
+  const context = args.canvas
+  for (let i = 0, len = args.count; i < len; i++) {
+    // 初始化最大连接数
+    args.points[i].maxConn = 0
+    for (let j = 0; j < len; j++) {
+      if (i !== j) {
+        dist = Math.round(args.points[i].x - args.points[j].x) * Math.round(args.points[i].x - args.points[j].x) +
+          Math.round(args.points[i].y - args.points[j].y) * Math.round(args.points[i].y - args.points[j].y)
+          // 两点距离小于吸附距离，而且小于最大连接数，则画线
+        if (dist <= args.dist && args.points[i].maxConn < args.maxConn) {
+          args.points[i].maxConn++
+          // 距离越远，线条越细，而且越透明
+          context.lineWidth = 0.5 - dist / args.dist
+          context.strokeStyle = 'rgba(' + args.stroke + ',' + (1 - dist / args.dist) + ')'
+          context.beginPath()
+          context.moveTo(args.points[i].x, args.points[i].y)
+          context.lineTo(args.points[j].x, args.points[j].y)
+          context.stroke()
+        }
+      }
+    }
+    // 如果鼠标进入画布
+    if (args.mouse) {
+      dist = Math.round(args.points[i].x - args.mouse.x) * Math.round(args.points[i].x - args.mouse.x) +
+      Math.round(args.points[i].y - args.mouse.y) * Math.round(args.points[i].y - args.mouse.y)
+      // 遇到鼠标吸附距离时加速，直接改变point的x，y值达到加速效果
+      if (dist > args.dist && dist <= args.eDist) {
+        args.points[i].x = args.points[i].x + (args.mouse.x - args.points[i].x) / 20
+        args.points[i].y = args.points[i].y + (args.mouse.y - args.points[i].y) / 20
+      }
+      if (dist <= args.eDist) {
+        context.lineWidth = 1
+        context.strokeStyle = 'rgba(' + args.stroke + ',' + (1 - dist / args.eDist) + ')'
+        context.beginPath()
+        context.moveTo(args.points[i].x, args.points[i].y)
+        context.lineTo(args.mouse.x, args.mouse.y)
+        context.stroke()
+      }
+    }
+  }
+}
+
+function drawPoint(args) {
+  const context = args.canvas
+  let point = null
+  context.clearRect(0, 0, args.canvasEl.width, args.canvasEl.height)
+  context.beginPath()
+  context.fillStyle = args.color
+  for (let i = 0, len = args.count; i < len; i++) {
+    if (args.points.length !== args.count) {
+      // 初始化所有点
+      point = {
+        x: Math.floor(Math.random() * args.canvasEl.width),
+        y: Math.floor(Math.random() * args.canvasEl.height),
+        vx: args.vx / 2 - Math.random() * args.vx,
+        vy: args.vy / 2 - Math.random() * args.vy
+      }
+    } else {
+      // 处理球的速度和位置，并且做边界处理
+      point = borderPoint(args.points[i], args.canvasEl)
+    }
+    context.fillRect(point.x - args.width / 2, point.y - args.height / 2, args.width, args.height)
+
+    args.points[i] = point
+  }
+  drawLine(args)
+  context.closePath()
+}
+
+function canvasParticle({
+  el,
+  vx = 4, // 小球x轴速度,正为右，负为左
+  vy = 4, // 小球y轴速度
+  width = 2, // 小球高宽，其实为正方形，所以不宜太大
+  height = 2,
+  count = 200, // 点个数
+  color = '#79a2b9', // 点颜色
+  stroke = '130,255,255', // 线条颜色
+  dist = 6000, // 点吸附距离
+  eDist = 20000,
+  maxConn = 10
+}) {
+  const canvasEl = document.createElement('canvas')
+  const canvas = canvasEl.getContext('2d')
+  if (!canvas) {
+    console.error(`your browser not support canvas`)
+    return
+  }
+  el.appendChild(canvasEl)
+  canvasEl.style = 'position: fixed; top: 0; left: 0'
+  canvasMeasure(el, canvasEl)
+  window.onresize = function() {
+    canvasMeasure(el, canvasEl)
+  }
+  let [points, mouse] = [[], null]
+  el.onmousemove = function(e) {
+    const event = e || window.event
+    mouse = {
+      x: event.clientX,
+      y: event.clientY
+    }
+  }
+  el.onmouseleave = function() {
+    mouse = null
+  }
+  setInterval(function() {
+    drawPoint({
+      el,
+      canvasEl,
+      canvas,
+      vx,
+      vy,
+      width,
+      height,
+      count,
+      color,
+      stroke,
+      dist,
+      eDist,
+      maxConn,
+      points,
+      mouse
+    })
+  }, 40)
+}
+
+export default canvasParticle

src/views/login/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="login-container">
+    <div ref="particle" class="login-bg">
+      <div class="login-bg__img" />
+    </div>
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
@@ -41,7 +44,9 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
+      <div class="xl-form lf-footer">
+        <el-button :loading="loading" type="primary" class="xl-form-btn" @click.native.prevent="handleLogin">登录</el-button>
+      </div>
 
       <!-- <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
@@ -53,8 +58,7 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
-import { resetRouter } from '@/router'
+import canvasParticle from '@/utils/particle'
 export default {
   name: 'Login',
   data() {
@@ -94,6 +98,9 @@ export default {
       immediate: true
     }
   },
+  mounted() {
+    canvasParticle({ el: this.$refs.particle })
+  },
   methods: {
     showPwd() {
       if (this.passwordType === 'password') {
@@ -152,7 +159,7 @@ $cursor: #fff;
 .login-container {
   .el-input {
     display: inline-block;
-    height: 47px;
+    height: 50px;
     width: 85%;
 
     input {
@@ -162,11 +169,12 @@ $cursor: #fff;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
       color: $light_gray;
-      height: 47px;
+      height: 50px;
       caret-color: $cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
+        // box-shadow: 0 0 0px 1000px $bg inset !important;
+        box-shadow: 0 0 0px 1000px #5d6a77 inset !important;
         -webkit-text-fill-color: $cursor !important;
       }
     }
@@ -174,10 +182,13 @@ $cursor: #fff;
 
   .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.3);
     border-radius: 5px;
     color: #454545;
   }
+  .el-form-item__error {
+    color: #fff;
+  }
 }
 </style>
 
@@ -187,17 +198,35 @@ $dark_gray:#889aa4;
 $light_gray:#eee;
 
 .login-container {
-  min-height: 100%;
+  height: 100%;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
+  position: relative;
   .login-form {
-    position: relative;
-    width: 520px;
-    max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
-    overflow: hidden;
+    position: absolute;
+    width: 550px;
+    height: 330px;
+    top: 50%;
+    left: 50%;
+    border-radius: 10px;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    background: rgba(255, 255, 255, 0.4);
+    padding: 30px;
+    // ::v-deep .el-form-item__content {
+    //   background: #000;
+    //   opacity: .3;
+    // }
+    .lf-footer {
+      text-align: center;
+      .xl-form-btn {
+        width: 200px;
+        height: 50px;
+        font-size: 18px;
+        border-radius: 6px;
+      }
+    }
   }
 
   .tips {
@@ -242,4 +271,19 @@ $light_gray:#eee;
     user-select: none;
   }
 }
+
+.login-bg {
+  width: 100%;
+  height: 100%;
+  background: #3a546c;
+  overflow: hidden;
+  .login-bg__img {
+    height: 100%;
+    background: url(./login_bg.jpg) no-repeat center center;
+    transform: scale(1);
+    -webkit-transform: scale(1);
+    animation: 15s scale alternate infinite;
+    -webkit-animation: 15s scale alternate infinite;
+  }
+}
 </style>