选择联系人模块

pages/im/group/announcement.vue

@@ -1,9 +1,9 @@
 <template>
     <view class="announce">
-        <u-skeleton rows="2" :loading="loading" avatar :rows="5">
-            <view v-for="(item,index) in announcements" :key="index" class="item">
+        <u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
+            <view v-for="(item,index) in announcements" :key="index" class="item" >
                 <view class="header">
-                    <u-avatar :src="item.user.portraitUrl"></u-avatar>
+                    <u-avatar :src="item.user.portraitUrl" />
                     <view class="user">
                         <view class="name">{{ item.user.name }}</view>
                         <view class="time">{{ item.created_at }}</view>
@@ -13,6 +13,10 @@
                 <view class="content">{{ item.content }}</view>
             </view>
         </u-skeleton>
+        <view class="no-lists" v-else>
+            <u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
+            <span>暂无公告内容~</span>
+        </view>
     </view>
 </template>
 
@@ -85,7 +89,20 @@
 <style lang="scss" scoped>
     .announce {
         padding: 0 $padding $padding $padding;
-
+        .no-lists {
+            padding-top: $padding * 5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            font-size: $title-size-m;
+            color: $text-gray-m;
+        
+            span {
+                padding-top: $padding;
+            }
+        }
         .item {
             border-bottom: solid 1rpx #f9f9f9 !important;
             padding-top: $padding;
@@ -117,8 +134,10 @@
             }
 
             .content {
-                padding: $padding;
-                font-size: 34rpx;
+                padding: 20rpx $padding;
+                font-size: $title-size;
+                color: $text-gray;
+                max-width: 100%;
             }
         }
     }