热点话题

src/project/biaopin/AppVillageHead/AppVillageHead.vue

@@ -1,37 +1,5 @@
 <template>
   <div class="AppVillageHead">
-    <!-- <div class="statistics-content">
-      <div class="title">近7天居民群数据</div>
-      <div class="flex-total">
-        <div class="item">
-          <p>服务居民数</p>
-          <div><span>821</span>人</div>
-        </div>
-        <div class="item">
-          <p>回答问题总数</p>
-          <div><span>821</span>个</div>
-        </div>
-        <div class="item">
-          <p>覆盖群聊</p>
-          <div><span>821</span>个</div>
-        </div>
-      </div>
-      <div class="flex-info down-flex">
-        <div class="info">1.天气情况<u-icon name="arrow-upward" color="#dd524d" size="32"></u-icon></div>
-        <div class="info">2.附件活动<u-icon name="arrow-downward" color="#4cd964" size="32"></u-icon></div>
-        <div class="info">1.天气情况<u-icon name="arrow-upward" color="#dd524d" size="32"></u-icon></div>
-        <div class="info">2.附件活动<u-icon name="arrow-downward" color="#4cd964" size="32"></u-icon></div>
-      </div>
-      <div class="flex-info down-flex">
-        <div class="info">1.天气情况<u-icon name="arrow-upward" color="#dd524d" size="32"></u-icon></div>
-        <div class="info">2.附件活动<u-icon name="arrow-downward" color="#4cd964" size="32"></u-icon></div>
-      </div>
-      <div class="flex-info down-flex">
-        <div class="info">1.天气情况<u-icon name="arrow-upward" color="#dd524d" size="32"></u-icon></div>
-        <div class="info">2.附件活动<u-icon name="arrow-downward" color="#4cd964" size="32"></u-icon></div>
-      </div>
-    </div> -->
-
     <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" v-if="messageList.length" :style="{height: scrollHeight+'px'}">
       <div class="list-content">
         <div v-for="(item, index) in messageList" :key="index">
@@ -103,6 +71,14 @@
                 <div><span>{{item.content['7天覆盖群聊']}}</span>个</div>
               </div>
             </div>
+            <div class="hot" v-if="item.content['热点话题'] && item.content['热点话题'].length">
+              <div class="mini-title">
+                <span></span>热点话题
+              </div>
+              <div class="item-hot" v-for="(items, indexs) in item.content['热点话题']" :key="indexs" v-if="indexs < 5">
+                <div><span :class="'color'+indexs">{{indexs+1}}.</span>{{items.tag}}</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -449,7 +425,7 @@ export default {
     .flex-total {
       display: flex;
       justify-content: space-between;
-      // margin-bottom: 16px; 
+      margin-bottom: 16px; 
       .item-total {
         p {
           font-size: 28px;
@@ -465,6 +441,32 @@ export default {
         }
       }
     }
+    .hot {
+      .item-hot {
+        line-height: 60px;
+        font-family: PingFangSC-Regular;
+        font-size: 28px;
+        color: #222;
+        span {
+          display: inline-block;
+          margin-right: 16px;
+          font-family: fantasy;
+        }
+        .color0{
+          color: #EABD2C;
+        }
+        .color1{
+          color: #95A2A6;
+        }
+        .color2{
+          color: #B89383;
+        }
+        .color3,
+        .color4{
+          color: #666666;
+        }
+      }
+    }
   }
   .list-content {
     padding: 32px 32px 364px;