登录背景

src/main/resources/modules/SpringBoot/resources/templates/screen/login.ftl

@@ -1,4 +1,6 @@
 <div id="app" v-cloak>
+    <canvas id="canvas" style="position: absolute;top: 0;left: 0"></canvas>
+
     <div class="wrapper">
         <div class="login-box">
             <div class="title">系统登录</div>
@@ -37,6 +39,7 @@
         width: 450px;
         height: 400px;
         background: #42424263;
+        z-index: 1;
         border-radius: 10px;
         display: flex;
         justify-content: center;
@@ -103,7 +106,52 @@
             }
         },
         mounted: function () {
+            var canvas = document.getElementById("canvas");
+            var context = canvas.getContext("2d");
+
+            // 设置全屏
+            var o = document.getElementById("app");
+            var width = o.offsetWidth;
+            var height = o.offsetHeight;
+            canvas.width = width;
+            canvas.height = height;
+
+            var stars = [];
+            var p = 30;
+            for (var i = 0; i < width; i += p) {
+                for (var j = 0; j < height; j += p) {
+                    stars.push({
+                        x: p * 1.5 * Math.random() + i,
+                        y: p * 1.5 * Math.random() + j,
+                        r: 0.8 * Math.random(),
+                        a: Math.random() + 0.1,
+                        c: Math.random() > 0.7
+                    });
+                }
+            }
 
+            var v = 0;
+            setInterval(function () {
+                //设置背景色
+                context.clearRect(0, 0, width, height);
+                context.fillStyle = "#091044";
+                context.fillRect(0, 0, width, height);
+
+                var s = Math.sin(v % Math.PI);
+                v += Math.PI / 100;
+                for (var i = 0; i < stars.length; i++) {
+                    var star = stars[i];
+                    context.beginPath();
+                    context.arc(star.x, star.y, star.r, 0, Math.PI * 2);
+                    context.closePath();
+                    if (star.c) {
+                        context.fillStyle = "rgba(255,255,255," + s * star.a + ")";
+                    } else {
+                        context.fillStyle = "rgba(255,255,255," + star.a + ")";
+                    }
+                    context.fill();
+                }
+            }, 50)
         },
         methods: {
             submitForm: function (formName) {