diff --git a/package-lock.json b/package-lock.json
index 07a18b6..0d154d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "ant-design-vue": "^3.3.0-beta.3",
         "axios": "^0.27.2",
+        "canvas-nest.js": "^2.0.4",
         "core-js": "^3.8.3",
         "echarts": "^5.3.3",
         "mitt": "^3.0.0",
@@ -17,6 +18,7 @@
         "pinia": "^2.0.18",
         "pinia-plugin-persist": "^1.0.0",
         "vue": "^3.2.13",
+        "vue-canvas-nest": "^2.0.0",
         "vue-echarts": "^6.2.3",
         "vue-router": "^4.1.3"
       },
@@ -3793,6 +3795,14 @@
       "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
       "dev": true
     },
+    "node_modules/canvas-nest.js": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.4.tgz",
+      "integrity": "sha512-Wgc+39fQBIP8fm9+Rq+Zt6+QLHZRsIKpaOQPL5KcWPlXTAalCKY4KCuklY7qzzZqBRF/t2APIrk+PuRw6ZlOog==",
+      "dependencies": {
+        "size-sensor": "^0.2.0"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -9476,6 +9486,11 @@
         "node": ">= 10"
       }
     },
+    "node_modules/size-sensor": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-0.2.6.tgz",
+      "integrity": "sha512-0EZ0tXXjyRl9R9+JpoBdH57Xpnbf5NTyDdj7fnFL6KqCsdKyah286ShMflnV2SonnrSFH4OAT/52Jy8qqnoerg=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -10249,6 +10264,25 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "node_modules/vue-canvas-nest": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-canvas-nest/-/vue-canvas-nest-2.0.0.tgz",
+      "integrity": "sha512-YUKwbDDEB36NlEvU/Et6S68LaP+RQatEQIJZuL1f0nGIp5h8r+WjsWmwAZK/pt2c7FeXvWWNmuHUcY+539EPbA==",
+      "dependencies": {
+        "canvas-nest.js": "2.0.3"
+      },
+      "peerDependencies": {
+        "vue": "^2.x"
+      }
+    },
+    "node_modules/vue-canvas-nest/node_modules/canvas-nest.js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.3.tgz",
+      "integrity": "sha512-zL+AN9alP5fl/Ek2gZMpWS4Hoz5jMf1NonYPvdsU5SV++m8/b45EUnTje6GUs1998q6wGISYYRHiWho1JXGM6w==",
+      "dependencies": {
+        "size-sensor": "^0.2.0"
+      }
+    },
     "node_modules/vue-echarts": {
       "version": "6.2.3",
       "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.2.3.tgz",
@@ -14160,6 +14194,14 @@
       "integrity": "sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==",
       "dev": true
     },
+    "canvas-nest.js": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.4.tgz",
+      "integrity": "sha512-Wgc+39fQBIP8fm9+Rq+Zt6+QLHZRsIKpaOQPL5KcWPlXTAalCKY4KCuklY7qzzZqBRF/t2APIrk+PuRw6ZlOog==",
+      "requires": {
+        "size-sensor": "^0.2.0"
+      }
+    },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -18603,6 +18645,11 @@
         "totalist": "^1.0.0"
       }
     },
+    "size-sensor": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-0.2.6.tgz",
+      "integrity": "sha512-0EZ0tXXjyRl9R9+JpoBdH57Xpnbf5NTyDdj7fnFL6KqCsdKyah286ShMflnV2SonnrSFH4OAT/52Jy8qqnoerg=="
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -19222,6 +19269,24 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "vue-canvas-nest": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-canvas-nest/-/vue-canvas-nest-2.0.0.tgz",
+      "integrity": "sha512-YUKwbDDEB36NlEvU/Et6S68LaP+RQatEQIJZuL1f0nGIp5h8r+WjsWmwAZK/pt2c7FeXvWWNmuHUcY+539EPbA==",
+      "requires": {
+        "canvas-nest.js": "2.0.3"
+      },
+      "dependencies": {
+        "canvas-nest.js": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmmirror.com/canvas-nest.js/-/canvas-nest.js-2.0.3.tgz",
+          "integrity": "sha512-zL+AN9alP5fl/Ek2gZMpWS4Hoz5jMf1NonYPvdsU5SV++m8/b45EUnTje6GUs1998q6wGISYYRHiWho1JXGM6w==",
+          "requires": {
+            "size-sensor": "^0.2.0"
+          }
+        }
+      }
+    },
     "vue-echarts": {
       "version": "6.2.3",
       "resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.2.3.tgz",
diff --git a/package.json b/package.json
index dcfeaae..d8d29b8 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "ant-design-vue": "^3.3.0-beta.3",
     "axios": "^0.27.2",
+    "canvas-nest.js": "^2.0.4",
     "core-js": "^3.8.3",
     "echarts": "^5.3.3",
     "mitt": "^3.0.0",
@@ -17,6 +18,7 @@
     "pinia": "^2.0.18",
     "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.2.13",
+    "vue-canvas-nest": "^2.0.0",
     "vue-echarts": "^6.2.3",
     "vue-router": "^4.1.3"
   },
diff --git a/src/view/Login.vue b/src/view/Login.vue
index ea775ec..dc7165e 100644
--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="container">
+
+  <div class="container" id="log_father">
     <div class="loginBox">
       <div class="text">
         监控系统后台
@@ -32,9 +33,10 @@
 </template>
 
 <script>
+import CanvasNest from 'canvas-nest.js'
 import {UserOutlined, LockOutlined} from '@ant-design/icons-vue';
 import {useRouter} from 'vue-router'
-import {reactive, ref} from 'vue'
+import {onMounted, reactive, ref} from 'vue'
 import {message} from 'ant-design-vue';
 import {useStore} from "@/store";
 import {Login} from '@/api/user';
@@ -53,6 +55,17 @@ export default {
     })
     //用户名和密码验证校验
     const formRef = ref();
+    onMounted(()=>{
+      let element = document.getElementById("log_father")
+       let config = {
+          color: "123, 104, 238",
+          pointColor: '255, 155, 0',
+          opacity: 1,
+          zIndex: 5,
+          count: 100,
+      }
+      new CanvasNest(element, config);
+    })
 
     const router = useRouter()
 
@@ -103,7 +116,7 @@ export default {
       close,
       rules,
       formRef,
-      logins
+      logins,
     }
   },