热点话题

src/project/biaopin/AppVillageHead/AppVillageHead.vue

@@ -76,7 +76,7 @@
                 <span></span>热点话题
               </div>
               <div class="item-hot" v-for="(items, indexs) in item.content['热点话题']" :key="indexs" v-if="indexs < 6">
-                <div><span :class="'color'+indexs">{{indexs+1}}.</span>{{items.tag}}</div>
+                <div @click="getTagList(items.tag)"><span :class="'color'+indexs">{{indexs+1}}.</span>{{items.tag}}</div>
               </div>
             </div>
           </div>
@@ -103,6 +103,20 @@
         </div>
       </div>
     </div>
+    <u-popup v-model="showMask" mode="center" width="85%" height="900"  border-radius="14" :closeable="true">
+			<div class="mask-content">
+        <div class="mini-title">
+          <span></span>热点话题
+        </div>
+        <div class="list-info">
+          <div class="item" v-for="(item, index)  in tagList" :key="index">
+            <div class="name">{{item.user_name}}{{item.room_name}}</div>
+            <div class="time">{{item.msg_send_time}}</div>
+            <div class="content">{{item.content}}</div>
+          </div>
+        </div>
+      </div>
+		</u-popup>
   </div>
 </template>
 
@@ -138,6 +152,8 @@ export default {
       scrollTop: 0,
       scrollHeight: '',
       preveHeight: '',
+      showMask: false,
+      tagList: []
     }
   },
   computed: {
@@ -306,6 +322,18 @@ export default {
       innerAudioContext.onStop(() => {
         this.messageList[index].isPlay = false
       })
+    },
+    getTagList(tag) {
+      this.$http.post(`/app/appmasssendingtaskbaidu/logsByTag?tag=${tag}`).then(res => {
+        if(res.code == 0) {
+          this.tagList = res.data
+          if(this.tagList.length) {
+            this.showMask = true
+          }else {
+            this.$u.toast('暂未查询到热点话题信息')
+          }
+        }
+      })
     }
   },
 }
@@ -448,7 +476,7 @@ export default {
         line-height: 60px;
         font-family: PingFangSC-Regular;
         font-size: 28px;
-        color: #222;
+        color: #0D63F2;
         span {
           display: inline-block;
           margin-right: 16px;
@@ -577,5 +605,55 @@ export default {
       }
     }
   }
+  .mask-content {
+    padding: 32px 32px 8px 32px;
+    box-sizing: border-box;
+    .mini-title {
+      line-height: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      margin-bottom: 16px;
+      span {
+        display: inline-block;
+        width: 8px;
+        height: 32px;
+        background: #3975C6;
+        border-radius: 4px;
+        margin-right: 16px;
+        vertical-align: middle;
+      }
+    }
+    .list-info {
+      max-height: 800px;
+      overflow-y: scroll;
+    }
+    .item {
+      font-family: PingFangSC-Regular;
+      margin-bottom: 32px;
+      padding-left: 20px;
+      .name {
+        font-size: 28px;
+        color: #222;
+        line-height: 40px;
+        margin-bottom: 8px;
+      }
+      .time {
+        line-height: 28px;
+        font-size: 20px;
+        color: #999;
+        margin-bottom: 8px;
+      }
+      .content {
+        display: inline-block;
+        line-height: 44px;
+        font-size: 32px;
+        color: #333;
+        background: #C7E7FE;
+        border-radius: 8px 8px 8px 0;
+        padding: 14px 12px 14px 20px;
+      }
+    }
+  }
 }
 </style>