style.scss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
  1. // 弹出层-支付方式
  2. .pay-type-popup {
  3. padding: 25rpx 25rpx 70rpx 25rpx;
  4. .title {
  5. font-size: 30rpx;
  6. margin-bottom: 50rpx;
  7. font-weight: bold;
  8. text-align: center;
  9. }
  10. .pop-content {
  11. min-height: 140rpx;
  12. padding: 0 20rpx;
  13. .pay-item {
  14. padding: 30rpx;
  15. font-size: 30rpx;
  16. background: #fff;
  17. border: 1rpx solid $fuint-theme;
  18. border-radius: 8rpx;
  19. color: #888;
  20. margin-bottom: 12rpx;
  21. text-align: center;
  22. .item-left_icon {
  23. margin-right: 20rpx;
  24. font-size: 48rpx;
  25. &.wechat {
  26. color: #00c800;
  27. }
  28. &.balance {
  29. color: $fuint-theme;
  30. }
  31. }
  32. }
  33. }
  34. }
  35. .flow-mode {
  36. background: #FFFFFF;
  37. padding: 20rpx;
  38. text-align: center;
  39. }
  40. // 配送信息
  41. .flow-delivery {
  42. padding: 10rpx 20rpx 40rpx 20rpx;
  43. background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAAANCAYAAADVGpDCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3Yjk4M2ExYy1jMDhkLTQ1OTktYTI0Ny1kZjNjYzdiYTQ5ZTgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDQwNkY3RkU5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDQwNkY3RkQ5N0NGMTFFNUI3N0M4NTU4MzM2RjlFODIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNzgwZWI1NS03OGFhLTQzOTUtODQ4OC1lOWI5YmVlYTY1ZDciIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1OTRiYzUyMy1jMzc3LTExNzgtYTdkZS04NGY3YmM1ZGIxMDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz556PLxAAACBElEQVR42tyaSyhEYRTHP48imlKibDQeSSlkSlEWLCRFsZNH5FE2FqQ8ErIRC9lIkTwXSpMkWWChhEJCSnlkoUZGSsr78f98n43CMFPu/Z/6NZuZ2zn33/+cb869XkmLx8IDEQaGQJbgiytQDSY3MyL+LYnL/HxPXSoHDIJQQq2WQQk4Dbbb/yUB29LJ+6e3B66VB3ZITbUIEqSpCGoJBP1ghtBUD6ARpEtTGSEhXzd+awE9oJzQUPegWdf3QlBPMhgDMYRa7YNisGWkpP5qrBQtVBShUHugUE9hs4fUtwG0utlEjRivoA/Ug1sj3vjffr8FNJEK1auPFHcE9UTq5pdK2PwcoAzMG7mjuRrRYEIfK9jiDJSCBZJ6ynSTsBBqNQ0qgdPISbq6vJCFbJOaagrEk5gqWNczRGiqG1Ah1LLMafRkf5pYIUKtZnMJDXUNasAIST2ZYFioRx9ssQaKwJFZEv5uYmWDXVJTrYBEElP562PfPKGpnkAbSDOTqb6aWAGgW6iHol5kQj2CdtAJngnqkc1hHMQRNr9DPaXWzZj8Z2PZtFCxhEIdaKE2CGqRJ4060AH8CLUaALX6f5VpBZLhI9SaeZXQVHKNLt84SCIxVbhQi5YuQlNd6OVElZlN9TGxrGBUn2PZ4lyoTdIsST0FQj0UDSLUak6ot3gcBLVY3wQYAJoVXxmNERajAAAAAElFTkSuQmCC') bottom left repeat-x;
  44. background-size: 120rpx auto;
  45. .detail-location {
  46. font-size: 36rpx;
  47. }
  48. .detail-content {
  49. padding: 0 20rpx;
  50. .detail-content__title-phone {
  51. margin-left: 10rpx;
  52. }
  53. .detail-content__describe {
  54. font-size: 28rpx;
  55. color: #777;
  56. }
  57. .address-info {
  58. .icon {
  59. float: right;
  60. font-weight: bold;
  61. }
  62. }
  63. .select-address {
  64. height: 90rpx;
  65. line-height: 90rpx;
  66. .icon {
  67. margin-left: 15rpx;
  68. }
  69. }
  70. }
  71. .detail-content__title {
  72. margin-bottom: 6rpx;
  73. }
  74. .store-name,.store-phone,.store-address {
  75. margin-bottom: 6rpx;
  76. font-size: 28rpx;
  77. color: #777;
  78. }
  79. }
  80. // 费用明细
  81. .flow-all-money {
  82. .detail-title {
  83. padding-top: 10rpx;
  84. margin-bottom: 10rpx;
  85. font-weight: bold;
  86. font-size: 30rpx;
  87. }
  88. .ipt-wrapper {
  89. margin-right: 25rpx;
  90. textarea {
  91. font-size: 28rpx;
  92. width: 100%;
  93. padding: 10rpx;
  94. border: solid 1rpx #f4f4f4;
  95. border-radius: 5rpx;
  96. height: 100rpx;
  97. margin-bottom: 100rpx;
  98. }
  99. }
  100. }
  101. // 商品列表
  102. .checkout_list {
  103. padding: 20rpx 30rpx 4rpx 30rpx;
  104. background: #fff;
  105. border-bottom: 1rpx solid rgb(248, 248, 248);
  106. .flow-shopList {
  107. padding: 5rpx 0 10rpx;
  108. border-bottom: 1rpx solid rgb(248, 248, 248);
  109. &:last-child {
  110. border-bottom: 0;
  111. }
  112. }
  113. }
  114. .flow-header-left {
  115. padding-left: 90rpx;
  116. }
  117. /* 会员价 */
  118. .flow-shopList {
  119. .flow-list-right {
  120. .flow-cont {
  121. &.price-delete {
  122. font-size: 26rpx;
  123. color: #777;
  124. text-decoration: line-through;
  125. }
  126. }
  127. }
  128. .goods-name{
  129. font-size: 30rpx;
  130. color: #333;
  131. }
  132. }
  133. /* 优惠券选择 */
  134. .popup__coupon {
  135. width: 750rpx;
  136. background: #fff;
  137. box-sizing: border-box;
  138. padding: 30rpx;
  139. .coupon__do_not {
  140. .control {
  141. width: 90%;
  142. height: 82rpx;
  143. margin-top: 30rpx;
  144. margin-bottom: 1rpx;
  145. color: #fff;
  146. background: $fuint-theme;
  147. border: 1rpx solid $fuint-theme;
  148. border-radius: 8rpx;
  149. }
  150. }
  151. .coupon__title {
  152. text-align: center;
  153. margin-bottom: 30rpx;
  154. }
  155. .coupon-item {
  156. position: relative;
  157. overflow: hidden;
  158. margin-bottom: 22rpx;
  159. }
  160. .item-wrapper {
  161. width: 100%;
  162. display: flex;
  163. background: #fff;
  164. border-radius: 8rpx;
  165. color: #fff;
  166. height: 180rpx;
  167. .coupon-type {
  168. position: absolute;
  169. top: 0;
  170. right: 0;
  171. z-index: 10;
  172. width: 128rpx;
  173. padding: 6rpx 0;
  174. background: #fa2209;
  175. font-size: 20rpx;
  176. text-align: center;
  177. color: #ffffff;
  178. transform: rotate(45deg);
  179. transform-origin: 64rpx 64rpx;
  180. }
  181. &.color-default {
  182. background: linear-gradient(-128deg, #6bf6f6, #008a8a);
  183. }
  184. &.color-gray {
  185. background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
  186. .coupon-type {
  187. background: #9e9e9e;
  188. }
  189. }
  190. .content {
  191. flex: 1;
  192. padding: 30rpx 20rpx;
  193. border-radius: 16rpx 0 0 16rpx;
  194. .title {
  195. font-size: 32rpx;
  196. }
  197. .bottom {
  198. .time {
  199. font-size: 24rpx;
  200. }
  201. .receive {
  202. height: 46rpx;
  203. width: 122rpx;
  204. line-height: 46rpx;
  205. text-align: center;
  206. border: 1rpx solid #fff;
  207. border-radius: 6rpx;
  208. color: #fff;
  209. font-size: 24rpx;
  210. &.state {
  211. border: none;
  212. }
  213. }
  214. }
  215. }
  216. .tip {
  217. position: relative;
  218. flex: 0 0 32%;
  219. text-align: center;
  220. border-radius: 0 16rpx 16rpx 0;
  221. .money {
  222. font-weight: bold;
  223. font-size: 52rpx;
  224. }
  225. .pay-line {
  226. font-size: 22rpx;
  227. }
  228. }
  229. .split-line {
  230. position: relative;
  231. flex: 0 0 0;
  232. border-left: 4rpx solid #fff;
  233. margin: 0 10rpx 0 6rpx;
  234. background: #fff;
  235. &:before,
  236. {
  237. border-radius: 0 0 16rpx 16rpx;
  238. top: 0;
  239. }
  240. &:after {
  241. border-radius: 16rpx 16rpx 0 0;
  242. bottom: 0;
  243. }
  244. &:before,
  245. &:after {
  246. content: '';
  247. position: absolute;
  248. width: 24rpx;
  249. height: 12rpx;
  250. background: #f7f7f7;
  251. left: -14rpx;
  252. z-index: 1;
  253. }
  254. }
  255. }
  256. }
  257. /* 积分抵扣 */
  258. .points {
  259. .title {
  260. margin-right: 5rpx;
  261. }
  262. .icon-help {
  263. font-size: 28rpx;
  264. }
  265. .points-money {
  266. margin-right: 20rpx;
  267. }
  268. }
  269. // 积分说明
  270. .points-content {
  271. padding: 30rpx 48rpx;
  272. font-size: 28rpx;
  273. line-height: 50rpx;
  274. text-align: left;
  275. color: #606266;
  276. height: 620rpx;
  277. box-sizing: border-box;
  278. }
  279. /* 支付方式 */
  280. .pay-method {
  281. .pay-item {
  282. padding: 20rpx 0;
  283. font-size: 28rpx;
  284. border-bottom: 1rpx solid rgb(248, 248, 248);
  285. .item-left_icon {
  286. margin-right: 20rpx;
  287. font-size: 32rpx;
  288. &.wechat {
  289. color: #00c800;
  290. }
  291. &.balance {
  292. color: #ff9700;
  293. }
  294. }
  295. }
  296. }
  297. // 商品规格
  298. .goods-props {
  299. padding-top: 10rpx;
  300. font-size: 24rpx;
  301. color: #999;
  302. .goods-props-item {
  303. float: left;
  304. .group-name {
  305. margin-right: 6rpx;
  306. }
  307. }
  308. }
  309. // 右侧箭头
  310. .right-arrow {
  311. margin-left: 16rpx;
  312. // color: #777;
  313. font-size: 26rpx;
  314. }
  315. // 底部操作栏
  316. .flow-fixed-footer {
  317. position: fixed;
  318. bottom: var(--window-bottom);
  319. width: 100%;
  320. height: 180rpx;
  321. background: #fff;
  322. border-top: 1px solid #eee;
  323. z-index: 11;
  324. padding-top: 25rpx;
  325. .chackout-left {
  326. font-size: 28rpx;
  327. height: 98rpx;
  328. color: #777;
  329. flex: 4;
  330. padding-left: 12px;
  331. text-align: right;
  332. padding-right: 40rpx;
  333. .col-amount-do {
  334. font-size:35rpx;
  335. padding-top: 2rpx;
  336. height: 100%;
  337. .pay-amount {
  338. color: #f03c3c;
  339. font-weight: bold;
  340. }
  341. .delivery-fee {
  342. margin-top: 8rpx;
  343. font-size: 24rpx;
  344. }
  345. }
  346. }
  347. .chackout-right {
  348. font-size: 34rpx;
  349. flex: 2;
  350. }
  351. // 提交按钮
  352. .flow-btn {
  353. background: linear-gradient(to right, $fuint-theme, $fuint-theme);
  354. color: #fff;
  355. text-align: center;
  356. height: 92rpx;
  357. line-height: 92rpx;
  358. display: block;
  359. font-size: 28rpx;
  360. border-radius: 5rpx;
  361. margin-right: 20rpx;
  362. // 禁用按钮
  363. &.disabled {
  364. background: #CCCCCC;
  365. }
  366. }
  367. }
  368. /* 共几张卡券 */
  369. .flow-num-box {
  370. font-size: 28rpx;
  371. color: #777;
  372. padding: 16rpx 24rpx;
  373. text-align: right;
  374. }
  375. /* app.scss */
  376. .flow-shopList {
  377. padding: 18rpx 0;
  378. .flow-list-left {
  379. margin-right: 20rpx;
  380. image {
  381. width: 120rpx;
  382. height: 100rpx;
  383. border: 1rpx solid #eee;
  384. border-radius: 5rpx;
  385. background: #fff;
  386. }
  387. }
  388. .flow-list-right {
  389. .flow-cont {
  390. font-size: 28rpx;
  391. color: #fa2209;
  392. }
  393. .small {
  394. font-size: 26rpx;
  395. color: #777;
  396. }
  397. .flow-list-cont {
  398. padding-top: 10rpx;
  399. }
  400. }
  401. }
  402. .flow-all-money {
  403. padding: 0 24rpx;
  404. color: #444;
  405. .flow-all-list {
  406. font-size: 28rpx;
  407. padding: 20rpx 0;
  408. border-bottom: 1rpx solid rgb(248, 248, 248);
  409. }
  410. .flow-all-list:last-child {
  411. border-bottom: none;
  412. }
  413. .flow-all-list-cont {
  414. font-size: 28rpx;
  415. padding: 10rpx 0;
  416. }
  417. .flow-arrow {
  418. justify-content: flex-end;
  419. align-items: center;
  420. }
  421. }