wipe.wxss 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  1. @charset "UTF-8";
  2. .uni-load-more {
  3. display: flex;
  4. flex-direction: row;
  5. height: 80rpx;
  6. align-items: center;
  7. justify-content: center
  8. }
  9. .uni-load-more__text {
  10. font-size: 28rpx;
  11. color: #999
  12. }
  13. .uni-load-more__img {
  14. height: 24px;
  15. width: 24px;
  16. margin-right: 10px
  17. }
  18. .uni-load-more__img>.load {
  19. position: absolute
  20. }
  21. .uni-load-more__img>.load .item {
  22. width: 6px;
  23. height: 2px;
  24. border-top-left-radius: 1px;
  25. border-bottom-left-radius: 1px;
  26. background: #999;
  27. position: absolute;
  28. opacity: .2;
  29. -webkit-transform-origin: 50%;
  30. transform-origin: 50%;
  31. -webkit-animation: load 1.56s ease infinite;
  32. animation: load 1.56s ease infinite
  33. }
  34. .uni-load-more__img>.load .item:nth-child(1) {
  35. -webkit-transform: rotate(90deg);
  36. transform: rotate(90deg);
  37. top: 2px;
  38. left: 9px
  39. }
  40. .uni-load-more__img>.load .item:nth-child(2) {
  41. -webkit-transform: rotate(180deg);
  42. transform: rotate(180deg);
  43. top: 11px;
  44. right: 0
  45. }
  46. .uni-load-more__img>.load .item:nth-child(3) {
  47. -webkit-transform: rotate(270deg);
  48. transform: rotate(270deg);
  49. bottom: 2px;
  50. left: 9px
  51. }
  52. .uni-load-more__img>.load .item:nth-child(4) {
  53. top: 11px;
  54. left: 0
  55. }
  56. .load1,
  57. .load2,
  58. .load3 {
  59. height: 24px;
  60. width: 24px
  61. }
  62. .load2 {
  63. -webkit-transform: rotate(30deg);
  64. transform: rotate(30deg)
  65. }
  66. .load3 {
  67. -webkit-transform: rotate(60deg);
  68. transform: rotate(60deg)
  69. }
  70. .load1 .item:nth-child(1) {
  71. -webkit-animation-delay: 0s;
  72. animation-delay: 0s
  73. }
  74. .load2 .item:nth-child(1) {
  75. -webkit-animation-delay: .13s;
  76. animation-delay: .13s
  77. }
  78. .load3 .item:nth-child(1) {
  79. -webkit-animation-delay: .26s;
  80. animation-delay: .26s
  81. }
  82. .load1 .item:nth-child(2) {
  83. -webkit-animation-delay: .39s;
  84. animation-delay: .39s
  85. }
  86. .load2 .item:nth-child(2) {
  87. -webkit-animation-delay: .52s;
  88. animation-delay: .52s
  89. }
  90. .load3 .item:nth-child(2) {
  91. -webkit-animation-delay: .65s;
  92. animation-delay: .65s
  93. }
  94. .load1 .item:nth-child(3) {
  95. -webkit-animation-delay: .78s;
  96. animation-delay: .78s
  97. }
  98. .load2 .item:nth-child(3) {
  99. -webkit-animation-delay: .91s;
  100. animation-delay: .91s
  101. }
  102. .load3 .item:nth-child(3) {
  103. -webkit-animation-delay: 1.04s;
  104. animation-delay: 1.04s
  105. }
  106. .load1 .item:nth-child(4) {
  107. -webkit-animation-delay: 1.17s;
  108. animation-delay: 1.17s
  109. }
  110. .load2 .item:nth-child(4) {
  111. -webkit-animation-delay: 1.3s;
  112. animation-delay: 1.3s
  113. }
  114. .load3 .item:nth-child(4) {
  115. -webkit-animation-delay: 1.43s;
  116. animation-delay: 1.43s
  117. }
  118. @-webkit-keyframes load {
  119. 0% {
  120. opacity: 1
  121. }
  122. 100% {
  123. opacity: .2
  124. }
  125. }
  126. @charset "UTF-8";
  127. /* 页面左右间距 */
  128. /* 文字尺寸 */
  129. /*文字颜色*/
  130. /* 边框颜色 */
  131. /*颜色*/
  132. /* 图片加载中颜色 */
  133. /* 行为相关颜色 */
  134. /* 功能栏字体大小 */
  135. /*功能栏左侧小图标*/
  136. page.data-v-d40ffbde {
  137. height: 100%;
  138. background-color: #f8f6f6;
  139. }
  140. .wipe-wrapper .wipe-top.data-v-d40ffbde {
  141. justify-content: space-around;
  142. width: 750rpx;
  143. height: 80rpx;
  144. background: #ffffff;
  145. box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
  146. font-size: 28rpx;
  147. font-weight: 500;
  148. color: #ef041f;
  149. line-height: 80rpx;
  150. text-align: center;
  151. position: relative;
  152. z-index: 10;
  153. }
  154. .wipe-wrapper .wipe-top .top-left.data-v-d40ffbde {
  155. vertical-align: middle;
  156. width: 50%;
  157. }
  158. .wipe-wrapper .wipe-top .top-left image.data-v-d40ffbde {
  159. width: 27rpx;
  160. height: 25rpx;
  161. margin-right: 10rpx;
  162. }
  163. .wipe-wrapper .wipe-top .top-right.data-v-d40ffbde {
  164. vertical-align: middle;
  165. width: 50%;
  166. }
  167. .wipe-wrapper .wipe-top .top-right image.data-v-d40ffbde {
  168. width: 27rpx;
  169. height: 25rpx;
  170. margin-right: 10rpx;
  171. }
  172. .wipe-wrapper .wipe-top .top-jg.data-v-d40ffbde {
  173. width: 2rpx;
  174. height: 80rpx;
  175. background: #f0f0f0;
  176. position: absolute;
  177. }
  178. .good-content.data-v-d40ffbde {
  179. height: 100%;
  180. padding-top: 20rpx;
  181. }
  182. .good.data-v-d40ffbde {
  183. width: 702rpx;
  184. background: #ffffff;
  185. box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
  186. border-radius: 10rpx;
  187. padding: 0 30rpx;
  188. padding-bottom: 20rpx;
  189. margin: 0 auto 20rpx;
  190. position: relative;
  191. }
  192. .good .goods-box-single.data-v-d40ffbde {
  193. display: flex;
  194. padding: 20rpx 0;
  195. }
  196. .good .goods-box-single .goods-img.data-v-d40ffbde {
  197. display: block;
  198. width: 120rpx;
  199. height: 120rpx;
  200. }
  201. .good .goods-box-single .right.data-v-d40ffbde {
  202. flex: 1;
  203. display: flex;
  204. flex-direction: column;
  205. padding: 0 30rpx 0 24rpx;
  206. overflow: hidden;
  207. }
  208. .good .goods-box-single .right .row.data-v-d40ffbde {
  209. margin-top: 10rpx;
  210. justify-content: flex-end;
  211. }
  212. .good .goods-box-single .right .row_title.data-v-d40ffbde {
  213. padding: 5rpx 10rpx;
  214. background-color: #dddddd;
  215. border-radius: 10rpx;
  216. font-size: 22rpx;
  217. color: #ffffff;
  218. background: #ffeee9;
  219. border-radius: 5rpx;
  220. color: #f55e5c;
  221. }
  222. .good .goods-box-single .right .title.data-v-d40ffbde {
  223. font-size: 30rpx;
  224. color: #303133;
  225. line-height: 1;
  226. width: 80%;
  227. }
  228. .good .goods-box-single .right .attr-box.data-v-d40ffbde {
  229. display: flex;
  230. justify-content: flex-end;
  231. font-size: 26rpx;
  232. color: #909399;
  233. }
  234. .good .goods-box-single .right .price.data-v-d40ffbde {
  235. display: inline;
  236. font-size: 30rpx;
  237. color: #303133;
  238. }
  239. .good .goods-box-single .right .price.data-v-d40ffbde:before {
  240. content: '¥';
  241. font-size: 24rpx;
  242. }
  243. .good .good-top.data-v-d40ffbde {
  244. height: 85rpx;
  245. font-size: 24rpx;
  246. font-weight: 400;
  247. color: #666666;
  248. line-height: 85rpx;
  249. display: flex;
  250. justify-content: space-between;
  251. }
  252. .good .good-top .top-status.data-v-d40ffbde {
  253. font-size: 28rpx;
  254. font-weight: 500;
  255. color: #EF041F;
  256. }
  257. .good .goods-buttom.data-v-d40ffbde {
  258. height: 160rpx;
  259. display: flex;
  260. }
  261. .good .goods-buttom .good-img.data-v-d40ffbde {
  262. width: 160rpx;
  263. height: 160rpx;
  264. }
  265. .good .goods-buttom .good-img image.data-v-d40ffbde {
  266. width: 160rpx;
  267. height: 160rpx;
  268. }
  269. .good .goods-buttom .good-title.data-v-d40ffbde {
  270. width: 350rpx;
  271. padding-top: 6rpx;
  272. font-size: 26rpx;
  273. font-weight: 500;
  274. color: #3F454B;
  275. line-height: 1;
  276. padding-left: 10rpx;
  277. }
  278. .good .goods-buttom .shop-info.data-v-d40ffbde {
  279. padding-top: 11rpx;
  280. font-size: 24rpx;
  281. font-weight: 500;
  282. color: #DCB876;
  283. line-height: 1;
  284. }
  285. .good .goods-buttom .shop-info image.data-v-d40ffbde {
  286. width: 24rpx;
  287. height: 24rpx;
  288. margin-left: 14rpx;
  289. margin-right: 4rpx;
  290. }
  291. .good .goods-buttom .good-tag.data-v-d40ffbde {
  292. display: inline-block;
  293. height: 36rpx;
  294. background: #ffeee9;
  295. border-radius: 5rpx;
  296. font-size: 20rpx;
  297. font-weight: 500;
  298. color: #F23030;
  299. padding: 0 9rpx;
  300. line-height: 36rpx;
  301. margin-top: 15rpx;
  302. margin-left: 10rpx;
  303. }
  304. .good .good-hj.data-v-d40ffbde {
  305. line-height: 1;
  306. height: 26rpx;
  307. font-size: 26rpx;
  308. font-weight: 500;
  309. color: #333333;
  310. text-align: right;
  311. }
  312. .good .good-price.data-v-d40ffbde {
  313. text-align: left;
  314. font-size: 26rpx;
  315. font-weight: 500;
  316. line-height: 1;
  317. color: #333333;
  318. position: absolute;
  319. right: 31rpx;
  320. top: 98rpx;
  321. }
  322. .good .good-num.data-v-d40ffbde {
  323. text-align: left;
  324. font-size: 26rpx;
  325. font-weight: 500;
  326. line-height: 1;
  327. color: #333333;
  328. position: absolute;
  329. right: 31rpx;
  330. top: 136rpx;
  331. }
  332. .hx-wrapper.data-v-d40ffbde {
  333. width: 536rpx;
  334. height: 630rpx;
  335. position: relative;
  336. }
  337. .hx-wrapper .hx-img.data-v-d40ffbde {
  338. width: 536rpx;
  339. height: 281rpx;
  340. }
  341. .hx-wrapper .hx-img image.data-v-d40ffbde {
  342. width: 536rpx;
  343. height: 281rpx;
  344. }
  345. .hx-wrapper .hx-close.data-v-d40ffbde {
  346. position: absolute;
  347. left: 243rpx;
  348. bottom: -80rpx;
  349. width: 52rpx;
  350. height: 52rpx;
  351. }
  352. .hx-wrapper .hx-close image.data-v-d40ffbde {
  353. width: 52rpx;
  354. height: 52rpx;
  355. }
  356. .hx-wrapper .hx-body.data-v-d40ffbde {
  357. width: 536rpx;
  358. height: 349rpx;
  359. background-color: #fff;
  360. border-radius: 0 0 10rpx 10rpx;
  361. }
  362. .hx-wrapper .hx-body .hx-title.data-v-d40ffbde {
  363. width: 536rpx;
  364. font-size: 36rpx;
  365. font-weight: 500;
  366. color: #333333;
  367. line-height: 1;
  368. padding-top: 42rpx;
  369. text-align: center;
  370. }
  371. .hx-wrapper .hx-body input.data-v-d40ffbde {
  372. width: 439rpx;
  373. height: 68rpx;
  374. background: #eeddde;
  375. border-radius: 10rpx;
  376. margin: 39rpx auto 0;
  377. padding-left: 26rpx;
  378. }
  379. .hx-wrapper .hx-body input .hx-placeholder.data-v-d40ffbde {
  380. font-size: 26rpx;
  381. font-weight: 500;
  382. color: #901b21;
  383. }
  384. .hx-wrapper .hx-body .hx-btn.data-v-d40ffbde {
  385. margin: 44rpx auto 0;
  386. width: 353rpx;
  387. height: 71rpx;
  388. background: #901b21;
  389. border-radius: 34rpx;
  390. font-size: 36rpx;
  391. font-weight: 500;
  392. color: #F8F9F9;
  393. line-height: 71rpx;
  394. text-align: center;
  395. }
  396. .navbar.data-v-d40ffbde {
  397. display: flex;
  398. height: 40px;
  399. padding: 0 5px;
  400. background: #fff;
  401. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  402. position: relative;
  403. z-index: 10;
  404. }
  405. .navbar .nav-item.data-v-d40ffbde {
  406. flex: 1;
  407. display: flex;
  408. justify-content: center;
  409. align-items: center;
  410. height: 100%;
  411. font-size: 15px;
  412. color: #303133;
  413. position: relative;
  414. }
  415. .navbar .nav-item.current.data-v-d40ffbde {
  416. color: #921a23;
  417. }
  418. .navbar .nav-item.current.data-v-d40ffbde:after {
  419. content: '';
  420. position: absolute;
  421. left: 50%;
  422. bottom: 0;
  423. -webkit-transform: translateX(-50%);
  424. transform: translateX(-50%);
  425. width: 44px;
  426. height: 0;
  427. border-bottom: 2px solid #921a23;
  428. }
  429. .fh-btn-wrap.data-v-d40ffbde {
  430. display: flex;
  431. flex-direction: column;
  432. font-size: 28rpx;
  433. color: #999999;
  434. }
  435. .fh-btn-wrap .fh-btn-tit.data-v-d40ffbde {
  436. color: #000000;
  437. font-weight: bold;
  438. }
  439. .fh-btn-wrap .fh-btn-info.data-v-d40ffbde {
  440. padding-left: 20rpx;
  441. }
  442. .fh-btn-wrap .fh-btn.data-v-d40ffbde {
  443. margin-top: 10rpx;
  444. align-self: flex-end;
  445. width: 144rpx;
  446. height: 55rpx;
  447. border: 1px solid #901b21;
  448. border-radius: 28rpx;
  449. font-size: 26rpx;
  450. font-family: PingFang SC;
  451. font-weight: 500;
  452. color: #901b21;
  453. line-height: 55rpx;
  454. text-align: center;
  455. }