diff --git a/src/App.vue b/src/App.vue
index 45699d13a524f83c70f9af792c22afe989033851..e4f9c6e5cd8474f42c7a819b9c4ab5fc06a1f205 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,8 +7,6 @@
 
 <script>
 
-import { Message } from 'element-ui'
-
 export default {
   name: 'App',
   components: {
@@ -25,7 +23,15 @@ export default {
       handler(newVal, oldVal) {
         if (newVal) {
           console.log(newVal)
-          Message.warning({ message: `安检门：${newVal}掉线了` })
+          this.$notify({
+            title: '安检门掉线警告',
+            type: 'warning',
+            message: `安检门${newVal}已掉线!`,
+            offset: 200,
+            duration: 60 * 1000,
+            customClass: 'notify-warning'
+          })
+          // Message.warning({ message: `安检门：${newVal}掉线了` })
         }
       },
       deep: true
@@ -34,5 +40,12 @@ export default {
 }
 </script>
 
-<style>
+<style lang="less">
+/deep/.el-notification{
+  background-color: rgba(245, 163, 113, 0.89) !important;
+  border-radius: 0.04rem 0px 0px 0.04rem !important;
+}
+/deep/.el-notification__content {
+  color: rgb(245, 163, 113)!important;
+}
 </style>
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index a699426e59e7cb1db046101b55967b21b464a1f4..c030dc5fc6139c86fa0fc50f7a22537b85421b79 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -728,5 +728,9 @@ body {
 .table-wrapper .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
   background-color: rgba(30, 144, 255, 0.26) !important;
 }
+/deep/#app .el-notification{
+  background-color: rgba(245, 163, 113, 0.89) !important;
+  border-radius: 0.04rem 0px 0px 0.04rem !important;
+}