系统登录
@@ -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) {