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