FirstList.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. /**
  2. * 这里是uni-app内置的常用样式变量
  3. *
  4. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  5. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  6. *
  7. */
  8. /**
  9. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  10. *
  11. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  12. */
  13. /* 颜色变量 */
  14. /* 行为相关颜色 */
  15. /* 文字基本颜色 */
  16. /* 背景颜色 */
  17. /* 边框颜色 */
  18. /* 尺寸变量 */
  19. /* 文字尺寸 */
  20. /* 图片尺寸 */
  21. /* Border Radius */
  22. /* 水平间距 */
  23. /* 垂直间距 */
  24. /* 透明度 */
  25. /* 文章场景相关 */
  26. .empty-box[data-v-5cc178a8] {
  27. width: 100%;
  28. }
  29. .empty-icon[data-v-5cc178a8] {
  30. width: 7.5rem;
  31. }
  32. .empty-text[data-v-5cc178a8] {
  33. font-size: 0.8125rem;
  34. font-weight: 500;
  35. color: #999999;
  36. }
  37. .empty-btn[data-v-5cc178a8] {
  38. width: 10rem;
  39. height: 2.1875rem;
  40. border: 0.0625rem solid var(--5cc178a8-buttonColor);
  41. border-radius: 1.09375rem;
  42. font-weight: 500;
  43. color: var(--5cc178a8-buttonColor);
  44. font-size: 0.875rem;
  45. }
  46. /**
  47. * 这里是uni-app内置的常用样式变量
  48. *
  49. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  50. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  51. *
  52. */
  53. /**
  54. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  55. *
  56. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  57. */
  58. /* 颜色变量 */
  59. /* 行为相关颜色 */
  60. /* 文字基本颜色 */
  61. /* 背景颜色 */
  62. /* 边框颜色 */
  63. /* 尺寸变量 */
  64. /* 文字尺寸 */
  65. /* 图片尺寸 */
  66. /* Border Radius */
  67. /* 水平间距 */
  68. /* 垂直间距 */
  69. /* 透明度 */
  70. /* 文章场景相关 */
  71. .uni-load-more[data-v-9245e42c] {
  72. display: flex;
  73. flex-direction: row;
  74. height: 40px;
  75. align-items: center;
  76. justify-content: center;
  77. }
  78. .uni-load-more__text[data-v-9245e42c] {
  79. font-size: 14px;
  80. margin-left: 8px;
  81. }
  82. .uni-load-more__img[data-v-9245e42c] {
  83. width: 24px;
  84. height: 24px;
  85. }
  86. .uni-load-more__img--nvue[data-v-9245e42c] {
  87. color: #666666;
  88. }
  89. .uni-load-more__img--android[data-v-9245e42c],
  90. .uni-load-more__img--ios[data-v-9245e42c] {
  91. width: 24px;
  92. height: 24px;
  93. transform: rotate(0deg);
  94. }
  95. .uni-load-more__img--android[data-v-9245e42c] {
  96. animation: loading-ios 1s 0s linear infinite;
  97. }
  98. @keyframes loading-android-9245e42c {
  99. 0% {
  100. transform: rotate(0deg);
  101. }
  102. 100% {
  103. transform: rotate(360deg);
  104. }
  105. }
  106. .uni-load-more__img--ios-H5[data-v-9245e42c] {
  107. position: relative;
  108. animation: loading-ios-H5-9245e42c 1s 0s step-end infinite;
  109. }
  110. .uni-load-more__img--ios-H5 uni-image[data-v-9245e42c] {
  111. position: absolute;
  112. width: 100%;
  113. height: 100%;
  114. left: 0;
  115. top: 0;
  116. }
  117. @keyframes loading-ios-H5-9245e42c {
  118. 0% {
  119. transform: rotate(0deg);
  120. }
  121. 8% {
  122. transform: rotate(30deg);
  123. }
  124. 16% {
  125. transform: rotate(60deg);
  126. }
  127. 24% {
  128. transform: rotate(90deg);
  129. }
  130. 32% {
  131. transform: rotate(120deg);
  132. }
  133. 40% {
  134. transform: rotate(150deg);
  135. }
  136. 48% {
  137. transform: rotate(180deg);
  138. }
  139. 56% {
  140. transform: rotate(210deg);
  141. }
  142. 64% {
  143. transform: rotate(240deg);
  144. }
  145. 73% {
  146. transform: rotate(270deg);
  147. }
  148. 82% {
  149. transform: rotate(300deg);
  150. }
  151. 91% {
  152. transform: rotate(330deg);
  153. }
  154. 100% {
  155. transform: rotate(360deg);
  156. }
  157. }
  158. .uni-load-more__img--android-MP[data-v-9245e42c] {
  159. position: relative;
  160. width: 24px;
  161. height: 24px;
  162. transform: rotate(0deg);
  163. animation: loading-ios 1s 0s ease infinite;
  164. }
  165. .uni-load-more__img--android-MP .uni-load-more__img-icon[data-v-9245e42c] {
  166. position: absolute;
  167. box-sizing: border-box;
  168. width: 100%;
  169. height: 100%;
  170. border-radius: 50%;
  171. border: solid 2px transparent;
  172. border-top: solid 2px #777777;
  173. transform-origin: center;
  174. }
  175. .uni-load-more__img--android-MP .uni-load-more__img-icon[data-v-9245e42c]:nth-child(1) {
  176. animation: loading-android-MP-1-9245e42c 1s 0s linear infinite;
  177. }
  178. .uni-load-more__img--android-MP .uni-load-more__img-icon[data-v-9245e42c]:nth-child(2) {
  179. animation: loading-android-MP-2-9245e42c 1s 0s linear infinite;
  180. }
  181. .uni-load-more__img--android-MP .uni-load-more__img-icon[data-v-9245e42c]:nth-child(3) {
  182. animation: loading-android-MP-3-9245e42c 1s 0s linear infinite;
  183. }
  184. @keyframes loading-android-9245e42c {
  185. 0% {
  186. transform: rotate(0deg);
  187. }
  188. 100% {
  189. transform: rotate(360deg);
  190. }
  191. }
  192. @keyframes loading-android-MP-1-9245e42c {
  193. 0% {
  194. transform: rotate(0deg);
  195. }
  196. 50% {
  197. transform: rotate(90deg);
  198. }
  199. 100% {
  200. transform: rotate(360deg);
  201. }
  202. }
  203. @keyframes loading-android-MP-2-9245e42c {
  204. 0% {
  205. transform: rotate(0deg);
  206. }
  207. 50% {
  208. transform: rotate(180deg);
  209. }
  210. 100% {
  211. transform: rotate(360deg);
  212. }
  213. }
  214. @keyframes loading-android-MP-3-9245e42c {
  215. 0% {
  216. transform: rotate(0deg);
  217. }
  218. 50% {
  219. transform: rotate(270deg);
  220. }
  221. 100% {
  222. transform: rotate(360deg);
  223. }
  224. }
  225. /**
  226. * 这里是uni-app内置的常用样式变量
  227. *
  228. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  229. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  230. *
  231. */
  232. /**
  233. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  234. *
  235. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  236. */
  237. /* 颜色变量 */
  238. /* 行为相关颜色 */
  239. /* 文字基本颜色 */
  240. /* 背景颜色 */
  241. /* 边框颜色 */
  242. /* 尺寸变量 */
  243. /* 文字尺寸 */
  244. /* 图片尺寸 */
  245. /* Border Radius */
  246. /* 水平间距 */
  247. /* 垂直间距 */
  248. /* 透明度 */
  249. /* 文章场景相关 */
  250. .tabbar-center-item[data-v-a62e13d6] {
  251. height: 40px;
  252. width: 40px;
  253. display: flex;
  254. align-items: center;
  255. justify-content: center;
  256. border-radius: 50%;
  257. background-color: rebeccapurple;
  258. transform: scale(1.3) translateY(-6px);
  259. position: absolute;
  260. z-index: 2;
  261. }
  262. .tabbar-center-item .center-image[data-v-a62e13d6] {
  263. width: 25px;
  264. height: 25px;
  265. }
  266. .u-tabbar-item[data-v-a62e13d6] {
  267. display: flex;
  268. flex-direction: column;
  269. align-items: center;
  270. justify-content: center;
  271. flex: 1;
  272. position: relative;
  273. z-index: 1;
  274. }
  275. .u-tabbar-item__icon[data-v-a62e13d6] {
  276. display: flex;
  277. position: relative;
  278. width: 4.6875rem;
  279. justify-content: center;
  280. }
  281. .u-tabbar-item__text[data-v-a62e13d6] {
  282. margin-top: 2px;
  283. font-size: 12px;
  284. color: var(--textSize);
  285. }
  286. /**
  287. * 这里是uni-app内置的常用样式变量
  288. *
  289. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  290. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  291. *
  292. */
  293. /**
  294. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  295. *
  296. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  297. */
  298. /* 颜色变量 */
  299. /* 行为相关颜色 */
  300. /* 文字基本颜色 */
  301. /* 背景颜色 */
  302. /* 边框颜色 */
  303. /* 尺寸变量 */
  304. /* 文字尺寸 */
  305. /* 图片尺寸 */
  306. /* Border Radius */
  307. /* 水平间距 */
  308. /* 垂直间距 */
  309. /* 透明度 */
  310. /* 文章场景相关 */
  311. .u-tabbar[data-v-b5af0eb7] {
  312. display: flex;
  313. flex: 1;
  314. justify-content: center;
  315. }
  316. .u-tabbar__content[data-v-b5af0eb7] {
  317. display: flex;
  318. flex-direction: column;
  319. background-color: #fff;
  320. box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);
  321. }
  322. .u-tabbar__content__item-wrapper[data-v-b5af0eb7] {
  323. height: 50px;
  324. display: flex;
  325. justify-content: space-around;
  326. align-items: center;
  327. }
  328. .u-tabbar .mid-tabbar[data-v-b5af0eb7] {
  329. border-radius: 0.9375rem 0.9375rem 0 0;
  330. }
  331. .u-tabbar--fixed[data-v-b5af0eb7] {
  332. position: fixed;
  333. bottom: -1px;
  334. left: 0;
  335. right: 0;
  336. }
  337. /**
  338. * 这里是uni-app内置的常用样式变量
  339. *
  340. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  341. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  342. *
  343. */
  344. /**
  345. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  346. *
  347. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  348. */
  349. /* 颜色变量 */
  350. /* 行为相关颜色 */
  351. /* 文字基本颜色 */
  352. /* 背景颜色 */
  353. /* 边框颜色 */
  354. /* 尺寸变量 */
  355. /* 文字尺寸 */
  356. /* 图片尺寸 */
  357. /* Border Radius */
  358. /* 水平间距 */
  359. /* 垂直间距 */
  360. /* 透明度 */
  361. /* 文章场景相关 */
  362. .u-page[data-v-434f93ee] {
  363. padding: 0;
  364. }
  365. .u-page__item__title[data-v-434f93ee] {
  366. color: var(--textSize);
  367. background-color: #fff;
  368. padding: 15px;
  369. font-size: 15px;
  370. }
  371. .u-page__item__title__slot-title[data-v-434f93ee] {
  372. color: var(--textSize);
  373. font-size: 14px;
  374. }
  375. .u-page__item__slot-icon[data-v-434f93ee] {
  376. width: 25px;
  377. height: 25px;
  378. }
  379. .page-body[data-v-cb78936e] {
  380. width: 100%;
  381. position: relative;
  382. z-index: 1;
  383. flex: 1;
  384. padding-top:1.25rem;
  385. box-sizing:border-box;
  386. .article[data-v-cb78936e] {
  387. padding:0.5rem;
  388. height: 7.1875rem;
  389. position: relative;
  390. width: 90%;
  391. margin: 0 auto;
  392. color:#000;
  393. margin-bottom: 1.25rem;
  394. background-repeat: no-repeat;
  395. background-size: 100%;
  396. background-position: center;
  397. background-color: #fff;
  398. overflow: hidden;
  399. .title[data-v-cb78936e] {
  400. font-size: 1.0625rem;
  401. /* font-weight: bold; */
  402. margin-bottom: 8px;
  403. }
  404. .content[data-v-cb78936e] {
  405. display: flex;
  406. flex-direction: row;
  407. }
  408. .image[data-v-cb78936e] {
  409. width: 9.375rem;
  410. height: 5.28125rem;
  411. margin-right: 0.5rem;
  412. background-color: #999;
  413. }
  414. .image-content[data-v-cb78936e] {
  415. width: 100%;
  416. height: 100%;
  417. border-radius: 0.25rem;
  418. }
  419. .desc[data-v-cb78936e] {
  420. flex: 1;
  421. font-size: 1rem;
  422. color: #333;
  423. line-height: 1.6;
  424. padding-top: 0.3125rem;
  425. overflow: hidden;
  426. display: -webkit-box;
  427. -webkit-box-orient: vertical;
  428. -webkit-line-clamp: 3;
  429. text-overflow: ellipsis;
  430. }
  431. }
  432. .activity[data-v-cb78936e] {
  433. height: 9.375rem;
  434. position: relative;
  435. width: 90%;
  436. margin: 0 auto;
  437. color:#fff;
  438. margin-bottom: 1.25rem;
  439. background-repeat: no-repeat;
  440. background-size: 100%;
  441. background-position: center;
  442. background-color: #fff;
  443. overflow: hidden;
  444. .activity-bottom[data-v-cb78936e]{
  445. position: absolute;
  446. bottom: 0;
  447. left: 0;
  448. width: 100%;
  449. height: 1.5625rem;
  450. background: rgba(0,0,0,0.5);
  451. padding:0.3125rem;
  452. box-sizing: border-box;
  453. display: flex;
  454. align-items: center;
  455. justify-content: space-between;
  456. uni-text[data-v-cb78936e]{
  457. white-space: nowrap;
  458. overflow: hidden;
  459. text-overflow: ellipsis;
  460. };
  461. uni-image[data-v-cb78936e]{
  462. width: 0.625rem;
  463. height: 0.625rem;
  464. }
  465. }
  466. }
  467. }