index.wxss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. /*
  2. 此文件为开发者工具生成,生成时间: 2023/11/6上午11:33:25
  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-25-0000-99 {
  13. background-image: linear-gradient(transparent 25%, #EEEEEE 0%, #EEEEEE 75%, transparent 0%) !important;
  14. background-size: 100% 48rpx;
  15. position: absolute !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-676 {
  25. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  26. background-size: 100% 44.8rpx;
  27. position: relative !important;
  28. }
  29. .sk-text-14-2857-423 {
  30. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  31. background-size: 100% 42rpx;
  32. position: relative !important;
  33. }
  34. .sk-text-14-2857-805 {
  35. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  36. background-size: 100% 33.6rpx;
  37. position: relative !important;
  38. }
  39. .sk-text-14-2857-378 {
  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-532 {
  45. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  46. background-size: 100% 42rpx;
  47. position: relative !important;
  48. }
  49. .sk-text-14-2857-894 {
  50. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  51. background-size: 100% 33.6rpx;
  52. position: relative !important;
  53. }
  54. .sk-text-14-2857-311 {
  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-533 {
  60. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  61. background-size: 100% 42rpx;
  62. position: relative !important;
  63. }
  64. .sk-text-14-2857-862 {
  65. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  66. background-size: 100% 33.6rpx;
  67. position: relative !important;
  68. }
  69. .sk-text-14-2857-835 {
  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-812 {
  75. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  76. background-size: 100% 42rpx;
  77. position: relative !important;
  78. }
  79. .sk-text-14-2857-752 {
  80. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  81. background-size: 100% 33.6rpx;
  82. position: relative !important;
  83. }
  84. .sk-text-14-2857-37 {
  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-781 {
  90. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  91. background-size: 100% 42rpx;
  92. position: relative !important;
  93. }
  94. .sk-text-14-2857-78 {
  95. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  96. background-size: 100% 33.6rpx;
  97. position: relative !important;
  98. }
  99. .sk-text-14-2857-235 {
  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-679 {
  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-161 {
  110. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  111. background-size: 100% 33.6rpx;
  112. position: relative !important;
  113. }
  114. .sk-text-14-2857-977 {
  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-566 {
  120. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  121. background-size: 100% 33.6rpx;
  122. position: relative !important;
  123. }
  124. .sk-text-14-2857-519 {
  125. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  126. background-size: 100% 42rpx;
  127. position: relative !important;
  128. }
  129. .sk-text-14-2857-249 {
  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-276 {
  135. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  136. background-size: 100% 33.6rpx;
  137. position: relative !important;
  138. }
  139. .sk-text-14-2857-856 {
  140. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  141. background-size: 100% 42rpx;
  142. position: relative !important;
  143. }
  144. .sk-text-14-2857-822 {
  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-766 {
  150. background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  151. background-size: 100% 33.6rpx;
  152. position: relative !important;
  153. }
  154. .sk-text-14-2857-54 {
  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-564 {
  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-93 {
  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-29 {
  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-571 {
  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-425 {
  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-513 {
  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-473 {
  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. .messagePage {
  207. overflow: hidden;
  208. padding-top: 55rpx;
  209. }
  210. .messagePage .messageList {
  211. padding: 0rpx 25rpx 250rpx;
  212. box-sizing: border-box;
  213. }
  214. .messagePage .messageList .fixed {
  215. margin: 0 auto 55rpx;
  216. width: 700rpx;
  217. padding: 46rpx 50rpx 40rpx;
  218. box-sizing: border-box;
  219. background: #FFFFFF;
  220. box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.07);
  221. border-radius: 30rpx;
  222. }
  223. .messagePage .messageList .fixed .inletBox {
  224. display: flex;
  225. align-items: center;
  226. justify-content: space-between;
  227. }
  228. .messagePage .messageList .fixed .inletBox .authority {
  229. position: relative;
  230. display: flex;
  231. align-items: center;
  232. }
  233. .messagePage .messageList .fixed .inletBox .authority .avatar {
  234. width: 86rpx;
  235. height: 125rpx;
  236. }
  237. .messagePage .messageList .fixed .inletBox .authority .unread {
  238. top: -4rpx;
  239. right: -10rpx;
  240. position: absolute;
  241. width: 32rpx;
  242. height: 32rpx;
  243. line-height: 32rpx;
  244. border-radius: 550rpx;
  245. color: white;
  246. font-size: 20rpx;
  247. text-align: center;
  248. background-color: #FF0000;
  249. }
  250. .messagePage .messageList .fixed .searchBox {
  251. margin: 30rpx auto 0;
  252. width: 504rpx;
  253. padding: 12rpx;
  254. background: #F2F6FC;
  255. border-radius: 27rpx;
  256. display: flex;
  257. align-items: center;
  258. justify-content: center;
  259. font-size: 27rpx;
  260. color: #666666;
  261. }
  262. .messagePage .messageList .fixed .searchBox .search-icon {
  263. margin-left: 22rpx;
  264. width: 28rpx;
  265. height: 28rpx;
  266. }
  267. .messagePage .messageList .base {
  268. display: flex;
  269. align-items: center;
  270. justify-content: space-between;
  271. }
  272. .messagePage .messageList .base .avatar {
  273. margin-right: 20rpx;
  274. border-radius: 50rpx;
  275. width: 80rpx;
  276. height: 80rpx;
  277. background-color: #EEEEEE;
  278. }
  279. .messagePage .messageList .base .infoBox {
  280. height: 110rpx;
  281. flex: 1;
  282. display: flex;
  283. align-items: center;
  284. justify-content: space-between;
  285. border-bottom: 1rpx solid #D8D8D8;
  286. padding: 20rpx 0;
  287. box-sizing: border-box;
  288. }
  289. .messagePage .messageList .base .infoBox .body {
  290. flex: 1;
  291. }
  292. .messagePage .messageList .base .infoBox .body .name {
  293. max-width: 330rpx;
  294. font-size: 30rpx;
  295. color: #000;
  296. }
  297. .messagePage .messageList .base .infoBox .right {
  298. min-width: 140rpx;
  299. display: flex;
  300. flex-direction: column;
  301. align-items: flex-end;
  302. }
  303. .messagePage .messageList .base .infoBox .right .date {
  304. font-size: 24rpx;
  305. }
  306. .messagePage .messageList .base .infoBox .right .unread {
  307. margin-top: 6rpx;
  308. width: 32rpx;
  309. height: 32rpx;
  310. line-height: 32rpx;
  311. border-radius: 550rpx;
  312. color: white;
  313. font-size: 20rpx;
  314. text-align: center;
  315. background-color: #FF0000;
  316. }
  317. .messagePage .messageList .user .info {
  318. margin-top: 8rpx;
  319. width: 400rpx;
  320. color: #969696;
  321. font-size: 24rpx;
  322. }
  323. .messagePage .messageList .pressHover {
  324. background-color: #f1f1f1;
  325. }
  326. .messagePage .menuBg {
  327. position: fixed;
  328. top: 0px;
  329. left: 0px;
  330. width: 100vw;
  331. height: 100vh;
  332. }
  333. .messagePage .menu {
  334. position: fixed;
  335. width: 278rpx;
  336. padding: 20rpx 20rpx;
  337. box-sizing: border-box;
  338. border-radius: 24rpx;
  339. background-color: white;
  340. box-shadow: rgba(0, 0, 0, 0.24) 0px 6rpx 16rpx;
  341. }
  342. .messagePage .menu view {
  343. height: 50%;
  344. display: flex;
  345. align-items: center;
  346. justify-content: center;
  347. }
  348. .messagePage .menu .icon {
  349. width: 30rpx;
  350. height: 30rpx;
  351. margin-right: 16rpx;
  352. }
  353. .messagePage .menu .menu-one .icon {
  354. width: 22rpx;
  355. height: 28rpx;
  356. }
  357. .messagePage .skeleton {
  358. width: 100%;
  359. height: 80vh;
  360. position: relative;
  361. }
  362. .messagePage .skeleton .messageList {
  363. padding: 0rpx;
  364. }