doclist.wxss 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. @charset "UTF-8";
  2. .uni-load-more {
  3. display: -webkit-box;
  4. display: -webkit-flex;
  5. display: flex;
  6. -webkit-box-orient: horizontal;
  7. -webkit-box-direction: normal;
  8. -webkit-flex-direction: row;
  9. flex-direction: row;
  10. height: 80rpx;
  11. -webkit-box-align: center;
  12. -webkit-align-items: center;
  13. align-items: center;
  14. -webkit-box-pack: center;
  15. -webkit-justify-content: center;
  16. justify-content: center
  17. }
  18. .uni-load-more__text {
  19. font-size: 28rpx;
  20. color: #999
  21. }
  22. .uni-load-more__img {
  23. height: 24px;
  24. width: 24px;
  25. margin-right: 10px
  26. }
  27. .uni-load-more__img>.load {
  28. position: absolute
  29. }
  30. .uni-load-more__img>.load .item {
  31. width: 6px;
  32. height: 2px;
  33. border-top-left-radius: 1px;
  34. border-bottom-left-radius: 1px;
  35. background: #999;
  36. position: absolute;
  37. opacity: .2;
  38. -webkit-transform-origin: 50%;
  39. transform-origin: 50%;
  40. -webkit-animation: load 1.56s ease infinite;
  41. animation: load 1.56s ease infinite
  42. }
  43. .uni-load-more__img>.load .item:nth-child(1) {
  44. -webkit-transform: rotate(90deg);
  45. transform: rotate(90deg);
  46. top: 2px;
  47. left: 9px
  48. }
  49. .uni-load-more__img>.load .item:nth-child(2) {
  50. -webkit-transform: rotate(180deg);
  51. transform: rotate(180deg);
  52. top: 11px;
  53. right: 0
  54. }
  55. .uni-load-more__img>.load .item:nth-child(3) {
  56. -webkit-transform: rotate(270deg);
  57. transform: rotate(270deg);
  58. bottom: 2px;
  59. left: 9px
  60. }
  61. .uni-load-more__img>.load .item:nth-child(4) {
  62. top: 11px;
  63. left: 0
  64. }
  65. .load1,
  66. .load2,
  67. .load3 {
  68. height: 24px;
  69. width: 24px
  70. }
  71. .load2 {
  72. -webkit-transform: rotate(30deg);
  73. transform: rotate(30deg)
  74. }
  75. .load3 {
  76. -webkit-transform: rotate(60deg);
  77. transform: rotate(60deg)
  78. }
  79. .load1 .item:nth-child(1) {
  80. -webkit-animation-delay: 0s;
  81. animation-delay: 0s
  82. }
  83. .load2 .item:nth-child(1) {
  84. -webkit-animation-delay: .13s;
  85. animation-delay: .13s
  86. }
  87. .load3 .item:nth-child(1) {
  88. -webkit-animation-delay: .26s;
  89. animation-delay: .26s
  90. }
  91. .load1 .item:nth-child(2) {
  92. -webkit-animation-delay: .39s;
  93. animation-delay: .39s
  94. }
  95. .load2 .item:nth-child(2) {
  96. -webkit-animation-delay: .52s;
  97. animation-delay: .52s
  98. }
  99. .load3 .item:nth-child(2) {
  100. -webkit-animation-delay: .65s;
  101. animation-delay: .65s
  102. }
  103. .load1 .item:nth-child(3) {
  104. -webkit-animation-delay: .78s;
  105. animation-delay: .78s
  106. }
  107. .load2 .item:nth-child(3) {
  108. -webkit-animation-delay: .91s;
  109. animation-delay: .91s
  110. }
  111. .load3 .item:nth-child(3) {
  112. -webkit-animation-delay: 1.04s;
  113. animation-delay: 1.04s
  114. }
  115. .load1 .item:nth-child(4) {
  116. -webkit-animation-delay: 1.17s;
  117. animation-delay: 1.17s
  118. }
  119. .load2 .item:nth-child(4) {
  120. -webkit-animation-delay: 1.3s;
  121. animation-delay: 1.3s
  122. }
  123. .load3 .item:nth-child(4) {
  124. -webkit-animation-delay: 1.43s;
  125. animation-delay: 1.43s
  126. }
  127. @-webkit-keyframes load {
  128. 0% {
  129. opacity: 1
  130. }
  131. 100% {
  132. opacity: .2
  133. }
  134. }
  135. @charset "UTF-8";
  136. /* 页面左右间距 */
  137. /* 文字尺寸 */
  138. /*文字颜色*/
  139. /* 边框颜色 */
  140. /*颜色*/
  141. /* 图片加载中颜色 */
  142. /* 行为相关颜色 */
  143. /* 功能栏字体大小 */
  144. /*功能栏左侧小图标*/
  145. page {
  146. width: 100%;
  147. height: 100%;
  148. }
  149. .container {
  150. height: 100%;
  151. }
  152. .container .second-part {
  153. height: calc(100% - 50px);
  154. }
  155. .container .flex {
  156. display: -webkit-box;
  157. display: -webkit-flex;
  158. display: flex;
  159. -webkit-box-align: center;
  160. -webkit-align-items: center;
  161. align-items: center;
  162. }
  163. .container .Search-box {
  164. overflow: hidden;
  165. width: 100%;
  166. padding: 20rpx;
  167. background-color: #ffffff;
  168. -webkit-justify-content: space-around;
  169. justify-content: space-around;
  170. }
  171. .container .Search-box .Search-box {
  172. width: 89%;
  173. height: 72rpx;
  174. border-radius: 36rpx;
  175. background-color: #f8f6f6;
  176. -webkit-box-pack: start;
  177. -webkit-justify-content: flex-start;
  178. justify-content: flex-start;
  179. padding-left: 54rpx;
  180. }
  181. .container .Search-box .Search-box .box-img {
  182. height: 30rpx;
  183. width: 30rpx;
  184. margin-right: 20rpx;
  185. }
  186. .container .Search-box .Search-box .box-word {
  187. font-size: 26rpx;
  188. font-weight: 500;
  189. color: #666666;
  190. }
  191. .container .Search-box .Search-word {
  192. width: 11%;
  193. font-size: 30rpx;
  194. font-weight: 500;
  195. color: #666666;
  196. }
  197. .container .Search-box .Search-word .word {
  198. float: right;
  199. }
  200. .container .template {
  201. width: 100%;
  202. background: #ffffff;
  203. overflow: hidden;
  204. padding: 25rpx;
  205. box-shadow: 0px 5px 5px 0px rgba(35, 24, 21, 0.06);
  206. border-radius: 12rpx;
  207. position: relative;
  208. }
  209. .container .template .left-img {
  210. width: 140rpx;
  211. height: 140rpx;
  212. }
  213. .container .template .left-img image {
  214. width: 100%;
  215. height: 100%;
  216. border-radius: 100%;
  217. }
  218. .container .template .center-word {
  219. width: 52%;
  220. padding-left: 25rpx;
  221. }
  222. .container .template .center-word .one {
  223. font-size: 30rpx;
  224. font-weight: 500;
  225. color: #333;
  226. line-height: 36rpx;
  227. display: block;
  228. margin-bottom: 10rpx;
  229. }
  230. .container .template .center-word .two {
  231. font-size: 24rpx;
  232. font-weight: 500;
  233. color: #666666;
  234. line-height: 36rpx;
  235. display: block;
  236. }
  237. .container .template .right-label {
  238. padding: 16rpx;
  239. border: 1px solid #6786FB;
  240. border-radius: 7rpx;
  241. font-size: 23rpx;
  242. font-weight: 500;
  243. color: #6786FB;
  244. -webkit-box-align: center;
  245. -webkit-align-items: center;
  246. align-items: center;
  247. }
  248. .container .template .right-label image {
  249. width: 30rpx;
  250. height: 26rpx;
  251. margin-right: 8rpx;
  252. }
  253. .popup {
  254. width: 536rpx;
  255. }
  256. .popup .img {
  257. width: 100%;
  258. }
  259. .popup .row {
  260. background: #ffffff;
  261. overflow: hidden;
  262. border-radius: 0 0 10rpx 10rpx;
  263. padding: 45rpx 45rpx;
  264. margin-top: -15rpx;
  265. }
  266. .popup .row .row-1 {
  267. font-size: 36rpx;
  268. font-weight: 500;
  269. color: #333333;
  270. line-height: 53rpx;
  271. text-align: center;
  272. }
  273. .popup .row .row-2 {
  274. font-size: 32rpx;
  275. font-weight: 500;
  276. color: #303133;
  277. line-height: 44rpx;
  278. text-align: center;
  279. margin-top: 35rpx;
  280. }
  281. .popup .row .row-3 {
  282. width: 80%;
  283. height: 70rpx;
  284. margin: 0 auto;
  285. margin-top: 40rpx;
  286. background: -webkit-linear-gradient(bottom, #7e99fe, #978ffa);
  287. background: linear-gradient(0deg, #7e99fe, #978ffa);
  288. border-radius: 34rpx;
  289. -webkit-box-pack: center;
  290. -webkit-justify-content: center;
  291. justify-content: center;
  292. font-size: 36rpx;
  293. font-weight: 500;
  294. color: #f8f9f9;
  295. }
  296. .close_icon {
  297. width: 52rpx;
  298. height: 52rpx;
  299. margin: 88rpx auto 0;
  300. }
  301. .close_icon image {
  302. width: 100%;
  303. height: 100%;
  304. }
  305. .payment {
  306. background-color: #ffffff;
  307. border-radius: 15rpx 15rpx 0rpx 0rpx;
  308. }
  309. .payment .first {
  310. border-bottom: 2rpx solid #ebeef5;
  311. padding: 38rpx 25rpx;
  312. }
  313. .payment .first .word {
  314. font-size: 28rpx;
  315. font-weight: bold;
  316. color: #303133;
  317. }
  318. .payment .first image {
  319. width: 25rpx;
  320. height: 25rpx;
  321. }
  322. .payment .pay-type-list {
  323. margin-top: 20rpx;
  324. background-color: #fff;
  325. padding-left: 40rpx;
  326. }
  327. .payment .pay-type-list .type-item {
  328. height: 120rpx;
  329. padding: 20rpx 0;
  330. display: -webkit-box;
  331. display: -webkit-flex;
  332. display: flex;
  333. -webkit-box-pack: justify;
  334. -webkit-justify-content: space-between;
  335. justify-content: space-between;
  336. -webkit-box-align: center;
  337. -webkit-align-items: center;
  338. align-items: center;
  339. padding-right: 60rpx;
  340. font-size: 30rpx;
  341. position: relative;
  342. }
  343. .payment .pay-type-list .icon {
  344. width: 100rpx;
  345. font-size: 52rpx;
  346. }
  347. .payment .pay-type-list .img {
  348. color: #fe8e2e;
  349. width: 50rpx;
  350. height: 50rpx;
  351. }
  352. .payment .pay-type-list .img image {
  353. width: 100%;
  354. height: 100%;
  355. }
  356. .payment .pay-type-list .tit {
  357. font-size: 32rpx;
  358. color: #303133;
  359. margin-bottom: 4rpx;
  360. }
  361. .payment .pay-type-list .con {
  362. -webkit-box-flex: 1;
  363. -webkit-flex: 1;
  364. flex: 1;
  365. display: -webkit-box;
  366. display: -webkit-flex;
  367. display: flex;
  368. -webkit-box-orient: vertical;
  369. -webkit-box-direction: normal;
  370. -webkit-flex-direction: column;
  371. flex-direction: column;
  372. padding-left: 25rpx;
  373. font-size: 24rpx;
  374. color: #909399;
  375. }
  376. .payment .one {
  377. height: 20rpx;
  378. background-color: #f6f6f6;
  379. }
  380. .payment .Third .two1 {
  381. width: 55%;
  382. background-color: #ffffff;
  383. padding-left: 25rpx;
  384. }
  385. .payment .Third .two1 .two1-1 {
  386. font-size: 28rpx;
  387. font-weight: 400;
  388. color: #303133;
  389. }
  390. .payment .Third .two1 .two1-2 {
  391. font-size: 24rpx;
  392. font-weight: bold;
  393. color: #FC4141;
  394. }
  395. .payment .Third .two1 .size {
  396. font-size: 36rpx;
  397. }
  398. .payment .Third .two2 {
  399. width: 45%;
  400. background: #FC4141;
  401. color: #ffffff;
  402. font-size: 32rpx;
  403. font-weight: 550;
  404. text-align: center;
  405. padding: 30rpx 0rpx;
  406. }