index.wxss 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .uni-load-more {
  28. display: flex;
  29. flex-direction: row;
  30. height: 40px;
  31. align-items: center;
  32. justify-content: center;
  33. }
  34. .uni-load-more__text {
  35. font-size: 14px;
  36. margin-left: 8px;
  37. }
  38. .uni-load-more__img {
  39. width: 24px;
  40. height: 24px;
  41. }
  42. .uni-load-more__img--nvue {
  43. color: #666666;
  44. }
  45. .uni-load-more__img--android,
  46. .uni-load-more__img--ios {
  47. width: 24px;
  48. height: 24px;
  49. -webkit-transform: rotate(0deg);
  50. transform: rotate(0deg);
  51. }
  52. .uni-load-more__img--android {
  53. -webkit-animation: loading-ios 1s 0s linear infinite;
  54. animation: loading-ios 1s 0s linear infinite;
  55. }
  56. @-webkit-keyframes loading-android {
  57. 0% {
  58. -webkit-transform: rotate(0deg);
  59. transform: rotate(0deg);
  60. }
  61. 100% {
  62. -webkit-transform: rotate(360deg);
  63. transform: rotate(360deg);
  64. }
  65. }
  66. @keyframes loading-android {
  67. 0% {
  68. -webkit-transform: rotate(0deg);
  69. transform: rotate(0deg);
  70. }
  71. 100% {
  72. -webkit-transform: rotate(360deg);
  73. transform: rotate(360deg);
  74. }
  75. }
  76. .uni-load-more__img--ios-H5 {
  77. position: relative;
  78. -webkit-animation: loading-ios-H5 1s 0s step-end infinite;
  79. animation: loading-ios-H5 1s 0s step-end infinite;
  80. }
  81. .uni-load-more__img--ios-H5 image {
  82. position: absolute;
  83. width: 100%;
  84. height: 100%;
  85. left: 0;
  86. top: 0;
  87. }
  88. @-webkit-keyframes loading-ios-H5 {
  89. 0% {
  90. -webkit-transform: rotate(0deg);
  91. transform: rotate(0deg);
  92. }
  93. 8% {
  94. -webkit-transform: rotate(30deg);
  95. transform: rotate(30deg);
  96. }
  97. 16% {
  98. -webkit-transform: rotate(60deg);
  99. transform: rotate(60deg);
  100. }
  101. 24% {
  102. -webkit-transform: rotate(90deg);
  103. transform: rotate(90deg);
  104. }
  105. 32% {
  106. -webkit-transform: rotate(120deg);
  107. transform: rotate(120deg);
  108. }
  109. 40% {
  110. -webkit-transform: rotate(150deg);
  111. transform: rotate(150deg);
  112. }
  113. 48% {
  114. -webkit-transform: rotate(180deg);
  115. transform: rotate(180deg);
  116. }
  117. 56% {
  118. -webkit-transform: rotate(210deg);
  119. transform: rotate(210deg);
  120. }
  121. 64% {
  122. -webkit-transform: rotate(240deg);
  123. transform: rotate(240deg);
  124. }
  125. 73% {
  126. -webkit-transform: rotate(270deg);
  127. transform: rotate(270deg);
  128. }
  129. 82% {
  130. -webkit-transform: rotate(300deg);
  131. transform: rotate(300deg);
  132. }
  133. 91% {
  134. -webkit-transform: rotate(330deg);
  135. transform: rotate(330deg);
  136. }
  137. 100% {
  138. -webkit-transform: rotate(360deg);
  139. transform: rotate(360deg);
  140. }
  141. }
  142. @keyframes loading-ios-H5 {
  143. 0% {
  144. -webkit-transform: rotate(0deg);
  145. transform: rotate(0deg);
  146. }
  147. 8% {
  148. -webkit-transform: rotate(30deg);
  149. transform: rotate(30deg);
  150. }
  151. 16% {
  152. -webkit-transform: rotate(60deg);
  153. transform: rotate(60deg);
  154. }
  155. 24% {
  156. -webkit-transform: rotate(90deg);
  157. transform: rotate(90deg);
  158. }
  159. 32% {
  160. -webkit-transform: rotate(120deg);
  161. transform: rotate(120deg);
  162. }
  163. 40% {
  164. -webkit-transform: rotate(150deg);
  165. transform: rotate(150deg);
  166. }
  167. 48% {
  168. -webkit-transform: rotate(180deg);
  169. transform: rotate(180deg);
  170. }
  171. 56% {
  172. -webkit-transform: rotate(210deg);
  173. transform: rotate(210deg);
  174. }
  175. 64% {
  176. -webkit-transform: rotate(240deg);
  177. transform: rotate(240deg);
  178. }
  179. 73% {
  180. -webkit-transform: rotate(270deg);
  181. transform: rotate(270deg);
  182. }
  183. 82% {
  184. -webkit-transform: rotate(300deg);
  185. transform: rotate(300deg);
  186. }
  187. 91% {
  188. -webkit-transform: rotate(330deg);
  189. transform: rotate(330deg);
  190. }
  191. 100% {
  192. -webkit-transform: rotate(360deg);
  193. transform: rotate(360deg);
  194. }
  195. }
  196. .uni-load-more__img--android-MP {
  197. position: relative;
  198. width: 24px;
  199. height: 24px;
  200. -webkit-transform: rotate(0deg);
  201. transform: rotate(0deg);
  202. -webkit-animation: loading-ios 1s 0s ease infinite;
  203. animation: loading-ios 1s 0s ease infinite;
  204. }
  205. .uni-load-more__img--android-MP .uni-load-more__img-icon {
  206. position: absolute;
  207. box-sizing: border-box;
  208. width: 100%;
  209. height: 100%;
  210. border-radius: 50%;
  211. border: solid 2px transparent;
  212. border-top: solid 2px #777777;
  213. -webkit-transform-origin: center;
  214. transform-origin: center;
  215. }
  216. .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) {
  217. -webkit-animation: loading-android-MP-1 1s 0s linear infinite;
  218. animation: loading-android-MP-1 1s 0s linear infinite;
  219. }
  220. .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) {
  221. -webkit-animation: loading-android-MP-2 1s 0s linear infinite;
  222. animation: loading-android-MP-2 1s 0s linear infinite;
  223. }
  224. .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) {
  225. -webkit-animation: loading-android-MP-3 1s 0s linear infinite;
  226. animation: loading-android-MP-3 1s 0s linear infinite;
  227. }
  228. @keyframes loading-android {
  229. 0% {
  230. -webkit-transform: rotate(0deg);
  231. transform: rotate(0deg);
  232. }
  233. 100% {
  234. -webkit-transform: rotate(360deg);
  235. transform: rotate(360deg);
  236. }
  237. }
  238. @-webkit-keyframes loading-android-MP-1 {
  239. 0% {
  240. -webkit-transform: rotate(0deg);
  241. transform: rotate(0deg);
  242. }
  243. 50% {
  244. -webkit-transform: rotate(90deg);
  245. transform: rotate(90deg);
  246. }
  247. 100% {
  248. -webkit-transform: rotate(360deg);
  249. transform: rotate(360deg);
  250. }
  251. }
  252. @keyframes loading-android-MP-1 {
  253. 0% {
  254. -webkit-transform: rotate(0deg);
  255. transform: rotate(0deg);
  256. }
  257. 50% {
  258. -webkit-transform: rotate(90deg);
  259. transform: rotate(90deg);
  260. }
  261. 100% {
  262. -webkit-transform: rotate(360deg);
  263. transform: rotate(360deg);
  264. }
  265. }
  266. @-webkit-keyframes loading-android-MP-2 {
  267. 0% {
  268. -webkit-transform: rotate(0deg);
  269. transform: rotate(0deg);
  270. }
  271. 50% {
  272. -webkit-transform: rotate(180deg);
  273. transform: rotate(180deg);
  274. }
  275. 100% {
  276. -webkit-transform: rotate(360deg);
  277. transform: rotate(360deg);
  278. }
  279. }
  280. @keyframes loading-android-MP-2 {
  281. 0% {
  282. -webkit-transform: rotate(0deg);
  283. transform: rotate(0deg);
  284. }
  285. 50% {
  286. -webkit-transform: rotate(180deg);
  287. transform: rotate(180deg);
  288. }
  289. 100% {
  290. -webkit-transform: rotate(360deg);
  291. transform: rotate(360deg);
  292. }
  293. }
  294. @-webkit-keyframes loading-android-MP-3 {
  295. 0% {
  296. -webkit-transform: rotate(0deg);
  297. transform: rotate(0deg);
  298. }
  299. 50% {
  300. -webkit-transform: rotate(270deg);
  301. transform: rotate(270deg);
  302. }
  303. 100% {
  304. -webkit-transform: rotate(360deg);
  305. transform: rotate(360deg);
  306. }
  307. }
  308. @keyframes loading-android-MP-3 {
  309. 0% {
  310. -webkit-transform: rotate(0deg);
  311. transform: rotate(0deg);
  312. }
  313. 50% {
  314. -webkit-transform: rotate(270deg);
  315. transform: rotate(270deg);
  316. }
  317. 100% {
  318. -webkit-transform: rotate(360deg);
  319. transform: rotate(360deg);
  320. }
  321. }