.pay-page { padding-bottom: env(safe-area-inset-bottom); } /* 金额展示 */ .amount-section { background-color: transparent; padding: 51rpx 32rpx 129rpx 32rpx; text-align: center; } .amount-section .pay_icon { width: 199rpx; height: 178rpx; margin-bottom: 34rpx; } .amount-section .amount { margin-bottom: 8rpx; } .amount-section .amount .symbol { font-family: DINPro, DINPro; font-weight: bold; font-size: 54rpx; color: #333333; line-height: 70rpx; text-align: left; font-style: normal; } .amount-section .amount .value { font-family: DINPro, DINPro; font-weight: bold; font-size: 88rpx; color: #333333; line-height: 114rpx; text-align: left; font-style: normal; } .amount-section .amount .value2 { font-family: DINPro, DINPro; font-weight: bold; font-size: 56rpx; color: #333333; line-height: 72rpx; text-align: left; font-style: normal; } .amount-section .countdown { font-weight: 400; font-size: 26rpx; color: #333333; line-height: 37rpx; text-align: center; font-style: normal; display: flex; align-items: center; justify-content: center; } .amount-section .countdown .uv-count-down__text { font-weight: 400; font-size: 26rpx; color: #E8101E; line-height: 37rpx; text-align: center; font-style: normal; } /* 支付方式 */ .method-section { background-image: url(/static/images/shop/payBj.png); background-position: top; background-repeat: no-repeat; background-size: contain; background-color: #fff; margin: 0 20rpx; padding: 22rpx 26rpx 62rpx 26rpx; border-radius: 20rpx; } .section-title { font-weight: 400; font-size: 28rpx; color: #333333; line-height: 40rpx; text-align: left; font-style: normal; margin-bottom: 23rpx; } .balance-amount { font-size: 28rpx; color: #999999; margin-left: 16rpx; } /* 底部按钮 */ .footer { position: fixed; left: 0; right: 0; bottom: 0; height: 150rpx; background-color: #ffffff; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding: 0 24rpx; padding-bottom: env(safe-area-inset-bottom); } .total-amount { flex: 1; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .total-amount .symbol { font-size: 24rpx; font-weight: 500; color: #E8101E; } .total-amount .amount { font-size: 28rpx; font-weight: 500; color: #E8101E; } .amount-lable { font-size: 24rpx; color: #999999; } .pay-btn { width: 680rpx; height: 88rpx; background: linear-gradient(180deg, #F52540 0%, #E8101E 100%); border-radius: 43rpx; font-weight: 500; font-size: 30rpx; color: #FFFFFF; line-height: 42rpx; text-align: left; font-style: normal; display: flex; align-items: center; justify-content: center; } .method-item { display: flex; justify-content: space-between; align-items: center; padding: 40rpx 0; border-bottom: 1rpx solid rgba(0, 0, 0, 0.05); } .method-item:last-child { border-bottom: none; padding-bottom: 0; } .method-info { display: flex; align-items: center; } .method-icon { width: 38rpx; height: 38rpx; margin-right: 20rpx; } .method-name { font-weight: 500; font-size: 30rpx; color: #5B5B5B; line-height: 42rpx; text-align: left; font-style: normal; } /* 多端适配 */