首页卡片开发

pages/msglog/unread.vue

@@ -1,6 +1,7 @@
 <template>
     <scroll-view scroll-y class="main-scroll">
         <view class="scrollmain">
+            <!-- 未读消息列表 -->
             <view
                 class="list-card press-button"
                 v-for="(item, index) in unreadMsgList"
@@ -33,6 +34,13 @@
                     <view class="info-text line_2">{{ item.subTitle || '消息' }}</view>
                 </view>
             </view>
+            
+            <!-- 暂无未读消息提示 -->
+            <view class="empty-state" v-if="unreadMsgList.length === 0">
+                <image class="empty-icon" src="/static/icon/empty.png" mode="aspectFit"></image>
+                <text class="empty-text">暂无未读消息</text>
+                <text class="empty-desc">您没有未读的消息</text>
+            </view>
         </view>
     </scroll-view>
 </template>
@@ -132,4 +140,26 @@ defineExpose({ loadData });
             font-size: 28rpx;
             color: #6C7282;
             margin-top: 4rpx;
+
+// 空状态样式
+.empty-state
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 120rpx 40rpx;
+    .empty-icon
+        width: 200rpx;
+        height: 200rpx;
+        margin-bottom: 40rpx;
+        opacity: 0.6;
+    .empty-text
+        font-size: 32rpx;
+        color: #999999;
+        font-weight: 500;
+        margin-bottom: 16rpx;
+    .empty-desc
+        font-size: 28rpx;
+        color: #CCCCCC;
+        font-weight: 400;
 </style>