样式优化

components/pc/pageHeader.vue

 <template>
 <template>
   <div class="bc-layout-container-header">
   <div class="bc-layout-container-header">
+    <notifications class="message-tip-box"/>
     <div class="nuxt-progress" v-if="progressShow"></div>
     <div class="nuxt-progress" v-if="progressShow"></div>
     <div class="container-header" v-if="!showDetailHead">
     <div class="container-header" v-if="!showDetailHead">
       <div class="header-center">
       <div class="header-center">
@@ -131,7 +132,6 @@
     <div class="click-top" v-if="showToTop" @click="clickToTop">
     <div class="click-top" v-if="showToTop" @click="clickToTop">
       <div class="click-top__triangle"></div>
       <div class="click-top__triangle"></div>
     </div>
     </div>
-    <notifications/>
   </div>
   </div>
 
 
 </template>
 </template>
@@ -211,18 +211,17 @@
       },
       },
       sockets: {
       sockets: {
         connect(data) {
         connect(data) {
+          console.log('connect.')
           this.$notify({
           this.$notify({
             title: '连接消息',
             title: '连接消息',
             text: 'websocket连接成功',
             text: 'websocket连接成功',
-            type: 'success'
           });
           });
         },
         },
         push_event(data) {
         push_event(data) {
-          console.log(data)
           this.$notify({
           this.$notify({
             title: '新消息',
             title: '新消息',
             text: JSON.stringify(data),
             text: JSON.stringify(data),
-            type: 'success'
+            duration: 2000
           });
           });
         }
         }
       },
       },
@@ -391,6 +390,45 @@
 
 
 <style lang="scss">
 <style lang="scss">
   .bc-layout-container-header{
   .bc-layout-container-header{
+    .message-tip-box {
+      // Style of the notification itself
+      position: fixed;
+      z-index: 9999;
+      top: 10px !important;
+      right: 6px !important;
+
+
+      .vue-notification-wrapper {
+        margin-bottom: 10px;
+        .vue-notification {
+          color: #333333;
+          background-color: #F4F8FA;
+          border: 1px solid #eeeeee;
+          border-radius: 6px;
+          opacity: .9;
+          transition: all .3s;
+
+          .notification-title {
+            // Style for title line
+            padding: 2px 6px;
+          }
+
+          .notification-content {
+            padding: 2px 6px;
+          }
+
+        }
+
+        &.my-type {
+          /*
+          Style for specific type of notification, will be applied when you
+          call notification with "type" parameter:
+          this.$notify({ type: 'my-type', message: 'Foo' })
+          */
+        }
+      }
+
+    }
     .nuxt-progress{
     .nuxt-progress{
       position: fixed;
       position: fixed;
       top: 0;
       top: 0;

plugins/websocket.js

@@ -9,14 +9,13 @@ export default function ({ app: { router }, store }) {
       const auth = store.state.auth;
       const auth = store.state.auth;
       if (auth.authenticated) {
       if (auth.authenticated) {
         console.log("检测到用户已登录，正在初始化websocket连接.")
         console.log("检测到用户已登录，正在初始化websocket连接.")
-        const socket = new VueSocketIO({
+        Vue.use(new VueSocketIO({
           debug: true,
           debug: true,
           connection: socketio('http://api.opensource.yundingshuyuan.com', {
           connection: socketio('http://api.opensource.yundingshuyuan.com', {
             query: 'token=' +  auth.token
             query: 'token=' +  auth.token
           }),
           }),
           options: { path: "/socket.io" }
           options: { path: "/socket.io" }
-        })
-        Vue.use(socket)
+        }))
       }
       }
     }
     }
   })
   })