消息列表点击弹窗

src/components/Header/index.vue

@@ -253,6 +253,9 @@
       overflow: hidden;
       overflow-y: scroll;
     }
+    &.el-message-box {
+      width: auto;
+    }
     .el-notification__group {
       width: 100%;
     }

src/components/Header/message.vue

@@ -5,7 +5,7 @@
         <span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span>
       </div>
       <ul id="thelist">
-        <li v-for="(item, index) in items" class="message-item" :key="index">
+        <li v-for="(item, index) in items" class="message-item" :key="index" @click="openMessageContent(item)">
           <div class="message-item-title">{{item.title}}</div>
           <div class="message-desc">{{item.content_text}}</div>
           <div class="message-desc">{{item.push_time | fomatDate}}</div>
@@ -144,6 +144,13 @@ export default {
 
     pullUpAction () {
       this.getListDataFromNet()
+    },
+
+    openMessageContent (item) {
+      this.$alert(`${item.content}`, '', {
+        dangerouslyUseHTMLString: true,
+        customClass: 'message-panel'
+      })
     }
   }
 }
@@ -153,12 +160,18 @@ export default {
   #wrapper {
     width: 100%;
     position: absolute;
-    top: 0;
+    top: 18px;
     bottom: 0;
   }
   #pullDown,#pullUp {
     border-bottom: none;
     text-align: center;
+    height: 40px;
+    box-sizing: border-box;
+    line-height: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   #pullUp {