page { background-color: #f6f7fb; padding-bottom: 0; min-height: 100vh; } image { width: 100%; height: 100%; } .header { display: flex; align-items: center; padding-left: 20rpx; position: relative; z-index: 3; } .container { position: relative; /* background: url(http://192.168.0.172:5500/local_payImg.png); background-size: 750rpx 302rpx; background-repeat: no-repeat; */ } .swiper{ height: 358rpx; width: 750rpx; position: absolute; left: 0; top: 0; z-index: -1; } .swiper image{ object-fit: cover; } .swiper_boxshadow{ position: absolute; left: 0; top: 0; z-index: 2; /* 从上至下 透明至白色 */ width: 750rpx; height: 358rpx; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); } .Tit { margin-top: 138rpx; font-size: 36rpx; color: #222222; font-weight: 600; margin-left: 20rpx; position: relative; z-index: 999; } .Tit span { color: #FF370B; } .Msg { width: 710rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: 0 auto; margin-top: 17rpx; box-sizing: border-box; padding-top: 20rpx; padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 33rpx; } .payMony { font-size: 50rpx; color: #222222; display: flex; padding-bottom: 20rpx; border-bottom: 1rpx solid #EBEBEB; } .payMony input { font-size: 70rpx; color: #222222; height: 70rpx; } .payRemark { margin-top: 26rpx; font-size: 28rpx; color: #999999; padding-left: 27rpx; } .Msg2 { width: 710rpx; height: 162rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; box-sizing: border-box; padding: 30rpx 20rpx 20rpx; margin: 0 auto; margin-top: 20rpx; } .Msg2_tit { display: flex; align-items: center; justify-content: space-between; } .Msg2_tit_left { font-size: 28rpx; color: #999999; } .Msg2_tit_right { display: flex; align-items: center; font-size: 28rpx; color: #FF370B; } .Msg2_con { display: flex; align-items: center; justify-content: space-between; margin-top: 24rpx; } .Msg2_con_left { font-size: 40rpx; color: #FF370B; } .Msg2_con_left span { font-size: 50rpx; } .Msg2_con_right { font-size: 28rpx; color: #222222; } .Msg3 { width: 710rpx; height: 162rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; box-sizing: border-box; padding: 30rpx 20rpx 20rpx; margin: 0 auto; margin-top: 20rpx; } .Msg3_tit { font-weight: 400; font-size: 28rpx; color: #999999; } .Msg3_con { font-weight: 400; font-size: 50rpx; color: #FF370B; margin-top: 24rpx; } .btn { font-size: 36rpx; color: #FFFFFF; width: 600rpx; height: 90rpx; background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%); border-radius: 100rpx 100rpx 100rpx 100rpx; display: flex; align-items: center; justify-content: center; margin: 0 auto; margin-top: 60rpx; } .btnList { display: flex; align-items: center; justify-content: space-between; margin: 0 56rpx; margin-top: 53rpx; } .btnItem { font-size: 28rpx; color: #222222; } .line { height: 20rpx; width: 1rpx; background-color: #999999; } .btnItem2 { font-size: 28rpx; color: #999999; display: flex; align-items: center; } .btnItem2 image{ width: 34rpx; height: 34rpx; margin-right: 10rpx; } .boxshadow{ position: fixed; z-index: 9999; left: 0; right: 0; bottom: 0; top: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .boxshadow_con{ margin-top: -40rpx; padding: 30rpx; box-sizing: border-box; width: 500rpx; height: 500rpx; border-radius: 20rpx 20rpx 20rpx 20rpx; z-index: 99999; position: relative; background-color: #fff; }