index.wxss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. /*
  2. 此文件为开发者工具生成,生成时间: 2023/3/22下午3:45:51
  3. 在 C:\Users\efunbox\Desktop\朗读小咖秀\pages\message\index.wxss 中引入样式
  4. ```
  5. @import "./index.skeleton.wxss";
  6. ```
  7. 更多详细信息可以参考文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
  8. */
  9. .sk-transparent {
  10. color: transparent !important;
  11. }
  12. .sk-text-14-2857-843 {
  13. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  14. background-size: 100% 42rpx;
  15. position: relative !important;
  16. }
  17. .sk-text {
  18. background-origin: content-box !important;
  19. background-clip: content-box !important;
  20. background-color: transparent !important;
  21. color: transparent !important;
  22. background-repeat: repeat-y !important;
  23. }
  24. .sk-text-14-2857-109 {
  25. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  26. background-size: 100% 33.6rpx;
  27. position: relative !important;
  28. }
  29. .sk-text-14-2857-30 {
  30. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  31. background-size: 100% 33.6rpx;
  32. position: relative !important;
  33. }
  34. .sk-text-14-2857-818 {
  35. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  36. background-size: 100% 42rpx;
  37. position: relative !important;
  38. }
  39. .sk-text-14-2857-940 {
  40. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  41. background-size: 100% 33.6rpx;
  42. position: relative !important;
  43. }
  44. .sk-text-14-2857-499 {
  45. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  46. background-size: 100% 33.6rpx;
  47. position: relative !important;
  48. }
  49. .sk-text-14-2857-451 {
  50. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  51. background-size: 100% 42rpx;
  52. position: relative !important;
  53. }
  54. .sk-text-14-2857-380 {
  55. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  56. background-size: 100% 33.6rpx;
  57. position: relative !important;
  58. }
  59. .sk-text-14-2857-885 {
  60. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  61. background-size: 100% 33.6rpx;
  62. position: relative !important;
  63. }
  64. .sk-text-14-2857-103 {
  65. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  66. background-size: 100% 42rpx;
  67. position: relative !important;
  68. }
  69. .sk-text-14-2857-705 {
  70. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  71. background-size: 100% 33.6rpx;
  72. position: relative !important;
  73. }
  74. .sk-text-14-2857-725 {
  75. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  76. background-size: 100% 33.6rpx;
  77. position: relative !important;
  78. }
  79. .sk-text-14-2857-489 {
  80. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  81. background-size: 100% 42rpx;
  82. position: relative !important;
  83. }
  84. .sk-text-14-2857-691 {
  85. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  86. background-size: 100% 33.6rpx;
  87. position: relative !important;
  88. }
  89. .sk-text-14-2857-479 {
  90. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  91. background-size: 100% 33.6rpx;
  92. position: relative !important;
  93. }
  94. .sk-text-14-2857-864 {
  95. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  96. background-size: 100% 42rpx;
  97. position: relative !important;
  98. }
  99. .sk-text-14-2857-894 {
  100. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  101. background-size: 100% 33.6rpx;
  102. position: relative !important;
  103. }
  104. .sk-text-14-2857-711 {
  105. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  106. background-size: 100% 33.6rpx;
  107. position: relative !important;
  108. }
  109. .sk-text-14-2857-274 {
  110. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  111. background-size: 100% 42rpx;
  112. position: relative !important;
  113. }
  114. .sk-text-14-2857-7 {
  115. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  116. background-size: 100% 33.6rpx;
  117. position: relative !important;
  118. }
  119. .sk-text-14-2857-900 {
  120. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  121. background-size: 100% 42rpx;
  122. position: relative !important;
  123. }
  124. .sk-text-14-2857-540 {
  125. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  126. background-size: 100% 33.6rpx;
  127. position: relative !important;
  128. }
  129. .sk-text-14-2857-309 {
  130. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  131. background-size: 100% 33.6rpx;
  132. position: relative !important;
  133. }
  134. .sk-text-14-2857-783 {
  135. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  136. background-size: 100% 42rpx;
  137. position: relative !important;
  138. }
  139. .sk-text-14-2857-956 {
  140. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  141. background-size: 100% 33.6rpx;
  142. position: relative !important;
  143. }
  144. .sk-text-14-2857-617 {
  145. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  146. background-size: 100% 33.6rpx;
  147. position: relative !important;
  148. }
  149. .sk-text-14-2857-422 {
  150. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  151. background-size: 100% 42rpx;
  152. position: relative !important;
  153. }
  154. .sk-text-14-2857-916 {
  155. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  156. background-size: 100% 33.6rpx;
  157. position: relative !important;
  158. }
  159. .sk-text-14-2857-855 {
  160. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  161. background-size: 100% 33.6rpx;
  162. position: relative !important;
  163. }
  164. .sk-text-14-2857-168 {
  165. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  166. background-size: 100% 42rpx;
  167. position: relative !important;
  168. }
  169. .sk-text-14-2857-403 {
  170. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  171. background-size: 100% 33.6rpx;
  172. position: relative !important;
  173. }
  174. .sk-text-14-2857-704 {
  175. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  176. background-size: 100% 33.6rpx;
  177. position: relative !important;
  178. }
  179. .sk-text-14-2857-127 {
  180. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  181. background-size: 100% 42rpx;
  182. position: relative !important;
  183. }
  184. .sk-text-14-2857-522 {
  185. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  186. background-size: 100% 33.6rpx;
  187. position: relative !important;
  188. }
  189. .sk-text-14-2857-245 {
  190. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  191. background-size: 100% 33.6rpx;
  192. position: relative !important;
  193. }
  194. .sk-image {
  195. background: #EFEFEF !important;
  196. }
  197. .sk-container {
  198. position: absolute;
  199. left: 0;
  200. top: 0;
  201. width: 100%;
  202. height: 100%;
  203. overflow: hidden;
  204. background-color: transparent;
  205. }
  206. page {
  207. background-color: white;
  208. }
  209. .messagePage {
  210. overflow: hidden;
  211. border-top-left-radius: 24rpx;
  212. border-top-right-radius: 24rpx;
  213. background-color: white;
  214. }
  215. .messagePage .input {
  216. background-color: #F2F6FC;
  217. font-size: 28rpx;
  218. margin: 20rpx 30rpx 10rpx;
  219. padding: 20rpx 40rpx;
  220. border-radius: 26rpx;
  221. }
  222. .messagePage .messageList {
  223. padding: 0rpx 36rpx 250rpx;
  224. box-sizing: border-box;
  225. }
  226. .messagePage .messageList .fixed {
  227. display: flex;
  228. align-items: center;
  229. justify-content: space-between;
  230. padding: 20rpx 0rpx;
  231. border-bottom: 1rpx solid #D8D8D8;
  232. }
  233. .messagePage .messageList .fixed .authority {
  234. position: relative;
  235. display: flex;
  236. align-items: center;
  237. }
  238. .messagePage .messageList .fixed .authority .avatar {
  239. border-radius: 50rpx;
  240. width: 80rpx;
  241. height: 80rpx;
  242. margin-right: 14rpx;
  243. }
  244. .messagePage .messageList .fixed .authority .name {
  245. font-size: 30rpx;
  246. }
  247. .messagePage .messageList .fixed .authority .unread {
  248. top: -4rpx;
  249. left: 60rpx;
  250. position: absolute;
  251. width: 32rpx;
  252. height: 32rpx;
  253. line-height: 32rpx;
  254. border-radius: 550rpx;
  255. color: white;
  256. font-size: 20rpx;
  257. text-align: center;
  258. background-color: #FF0000;
  259. }
  260. .messagePage .messageList .base {
  261. display: flex;
  262. align-items: center;
  263. justify-content: space-between;
  264. padding: 20rpx 0rpx 20rpx 20rpx;
  265. border-bottom: 1rpx solid #D8D8D8;
  266. }
  267. .messagePage .messageList .base .avatar {
  268. border-radius: 50rpx;
  269. width: 80rpx;
  270. height: 80rpx;
  271. background-color: #EEEEEE;
  272. }
  273. .messagePage .messageList .base .body {
  274. flex: 1;
  275. padding: 0rpx 20rpx;
  276. }
  277. .messagePage .messageList .base .body .name {
  278. max-width: 330rpx;
  279. font-size: 30rpx;
  280. font-weight: bolder;
  281. }
  282. .messagePage .messageList .base .right {
  283. min-width: 140rpx;
  284. display: flex;
  285. flex-direction: column;
  286. align-items: flex-end;
  287. }
  288. .messagePage .messageList .base .right .date {
  289. font-size: 24rpx;
  290. }
  291. .messagePage .messageList .base .right .unread {
  292. margin-top: 6rpx;
  293. width: 32rpx;
  294. height: 32rpx;
  295. line-height: 32rpx;
  296. border-radius: 550rpx;
  297. color: white;
  298. font-size: 20rpx;
  299. text-align: center;
  300. background-color: #FF0000;
  301. }
  302. .messagePage .messageList .user .info {
  303. margin-top: 4rpx;
  304. width: 400rpx;
  305. color: #969696;
  306. font-size: 24rpx;
  307. }
  308. .messagePage .messageList .pressHover {
  309. background-color: #f1f1f1;
  310. }
  311. .messagePage .menuBg {
  312. position: fixed;
  313. top: 0px;
  314. left: 0px;
  315. width: 100vw;
  316. height: 100vh;
  317. }
  318. .messagePage .menu {
  319. position: fixed;
  320. width: 278rpx;
  321. padding: 20rpx 20rpx;
  322. box-sizing: border-box;
  323. border-radius: 24rpx;
  324. background-color: white;
  325. box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
  326. }
  327. .messagePage .menu view {
  328. height: 50%;
  329. display: flex;
  330. align-items: center;
  331. justify-content: center;
  332. }
  333. .messagePage .menu .icon {
  334. width: 30rpx;
  335. height: 30rpx;
  336. margin-right: 16rpx;
  337. }
  338. .messagePage .menu .menu-one .icon {
  339. width: 22rpx;
  340. height: 28rpx;
  341. }
  342. .messagePage .skeleton {
  343. width: 100%;
  344. height: 80vh;
  345. position: relative;
  346. }
  347. .messagePage .skeleton .messageList {
  348. padding: 0rpx;
  349. }