骨架屏

pages/message/index.less

@@ -1,4 +1,4 @@
-// @import "./index.skeleton.wxss";
+@import "./index.skeleton.wxss";
 
 page {
   background-color: white;
@@ -146,4 +146,12 @@ page {
       }
     }
   }
+  .skeleton{
+    width: 100%;
+    height: 80vh;
+    position: relative;
+    .messageList{
+      padding: 0rpx;
+    }
+  }
 }

pages/message/index.skeleton.wxml

@@ -0,0 +1,169 @@
+<!--
+此文件为开发者工具生成，生成时间: 2023/3/22下午3:45:51
+使用方法：
+在 C:\Users\efunbox\Desktop\朗读小咖秀\pages\message\index.wxml 引入模板
+
+```
+<import src="index.skeleton.wxml"/>
+<template is="skeleton" wx:if="{{loading}}" />
+```
+
+在 C:\Users\efunbox\Desktop\朗读小咖秀\pages\message\index.wxss 中引入样式
+```
+@import "./index.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+-->
+<template name="skeleton">
+  <view class="sk-container">
+    <view class="messagePage">
+      <view class="messageList">
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-843 sk-text">橙子</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-109 sk-text">
+              423
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-30 sk-text">2023-03-22</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-818 sk-text">孙志雷</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-940 sk-text">
+              ？？？
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-499 sk-text">2023-03-22</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-451 sk-text">100720160076060</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-380 sk-text">
+              333
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-885 sk-text">2023-03-22</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-103 sk-text">100800010015534</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-705 sk-text">
+              3213
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-725 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-489 sk-text">110010060120880</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-691 sk-text">
+              231
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-479 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-864 sk-text">100800010009520</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-894 sk-text">
+              kkkkk
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-711 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-274 sk-text">100800010017485</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-725 sk-text">
+              nnnnn
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-7 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-900 sk-text">100800010023493</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-540 sk-text">
+              ggg
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-309 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-783 sk-text">110010060118720</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-956 sk-text">
+              牛牛牛
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-617 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-422 sk-text">100800010025251</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-916 sk-text">
+              332
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-855 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-168 sk-text">100511330001627</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-403 sk-text">
+              嘎嘎嘎嘎给23
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-704 sk-text">2023-03-21</view>
+          </view>
+        </view>
+        <view class="base user" data-item="[object Object]" data-top="false" hover-class="pressHover">
+          <image class="avatar sk-image"></image>
+          <view class="body">
+            <view class="name textOver sk-transparent sk-text-14-2857-127 sk-text">小城堡</view>
+            <view class="info textOver sk-transparent sk-text-14-2857-522 sk-text">
+              32333
+            </view>
+          </view>
+          <view class="right">
+            <view class="date sk-transparent sk-text-14-2857-245 sk-text">2023-03-21</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

pages/message/index.skeleton.wxss

@@ -0,0 +1,207 @@
+/*
+此文件为开发者工具生成，生成时间: 2023/3/22下午3:45:51
+
+在 C:\Users\efunbox\Desktop\朗读小咖秀\pages\message\index.wxss 中引入样式
+```
+@import "./index.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+*/
+.sk-transparent {
+    color: transparent !important;
+  }
+.sk-text-14-2857-843 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text {
+    background-origin: content-box !important;
+    background-clip: content-box !important;
+    background-color: transparent !important;
+    color: transparent !important;
+    background-repeat: repeat-y !important;
+  }
+.sk-text-14-2857-109 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-30 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-818 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-940 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-499 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-451 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-380 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-885 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-103 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-705 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-725 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-489 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-691 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-479 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-864 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-894 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-711 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-274 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-7 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-900 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-540 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-309 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-783 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-956 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-617 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-422 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-916 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-855 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-168 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-403 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-704 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-127 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 42.0000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-522 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-text-14-2857-245 {
+    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+    background-size: 100% 33.6000rpx;
+    position: relative !important;
+  }
+.sk-image {
+    background: #EFEFEF !important;
+  }
+.sk-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: transparent;
+  }

pages/message/index.wxml

@@ -1,7 +1,6 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <navigationBar></navigationBar>
-<!-- <import src="./index.skeleton" /> -->
-<!-- <template is='skeleton'></template> -->
+<import src="./index.skeleton" />
 <view class="messagePage">
   <view class="input" bindtap="setSearch">
     查找昵称/学号/手机号
@@ -57,20 +56,25 @@
         <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
       </view>
     </view>
-    <view class="base user" wx:for="{{list}}" wx:key="index" data-item='{{item}}' data-top="{{false}}"
-      bind:longpress="onLongPress" hover-class='pressHover' bindtap="jumpChat">
-      <image src="{{item.user.avatar}}" class="avatar" />
-      <view class="body">
-        <view class="name textOver">{{item.user.nickName||item.user.eid}}</view>
-        <view class="info textOver">
-          {{item.content}}
+    <view class="skeleton" wx:if="{{loading}}">
+      <template is='skeleton'></template>
+    </view>
+    <block wx:else>
+      <view class="base user" wx:for="{{list}}" wx:key="index" data-item='{{item}}' data-top="{{false}}"
+        bind:longpress="onLongPress" hover-class='pressHover' bindtap="jumpChat">
+        <image src="{{item.user.avatar}}" class="avatar" />
+        <view class="body">
+          <view class="name textOver">{{item.user.nickName||item.user.eid}}</view>
+          <view class="info textOver">
+            {{item.content}}
+          </view>
+        </view>
+        <view class="right">
+          <view class="date">{{filters.formatDate(item.gmtModified,5)}}</view>
+          <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
         </view>
       </view>
-      <view class="right">
-        <view class="date">{{filters.formatDate(item.gmtModified,5)}}</view>
-        <view class="unread" wx:if="{{item.unReadCount>0}}">{{item.unReadCount}}</view>
-      </view>
-    </view>
+    </block>
   </view>
   <view class="menuBg" bind:touchstart="cancelMenu" wx:if="{{menu.show}}"></view>
   <view class="menu" style="display: {{menu.show?'block':'none'}}; top:{{menu.top}}px;left:{{menu.left}}px">

pages/message/index.wxss

@@ -1,3 +1,210 @@
+/*
+此文件为开发者工具生成，生成时间: 2023/3/22下午3:45:51
+
+在 C:\Users\efunbox\Desktop\朗读小咖秀\pages\message\index.wxss 中引入样式
+```
+@import "./index.skeleton.wxss";
+```
+
+更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
+*/
+.sk-transparent {
+  color: transparent !important;
+}
+.sk-text-14-2857-843 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text {
+  background-origin: content-box !important;
+  background-clip: content-box !important;
+  background-color: transparent !important;
+  color: transparent !important;
+  background-repeat: repeat-y !important;
+}
+.sk-text-14-2857-109 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-30 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-818 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-940 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-499 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-451 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-380 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-885 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-103 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-705 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-725 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-489 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-691 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-479 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-864 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-894 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-711 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-274 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-7 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-900 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-540 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-309 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-783 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-956 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-617 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-422 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-916 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-855 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-168 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-403 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-704 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-127 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 42rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-522 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-245 {
+  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-image {
+  background: #EFEFEF !important;
+}
+.sk-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: transparent;
+}
 page {
   background-color: white;
 }
@@ -115,3 +322,11 @@ page {
   width: 22rpx;
   height: 28rpx;
 }
+.messagePage .skeleton {
+  width: 100%;
+  height: 80vh;
+  position: relative;
+}
+.messagePage .skeleton .messageList {
+  padding: 0rpx;
+}