| @@ -1,4 +1,21 @@ | |||||
| <view class='content'> | <view class='content'> | ||||
| <image src='./../../assets/images/success.png' mode="widthFix"></image> | |||||
| <!-- <image src='./../../assets/images/success.png' mode="widthFix"></image> --> | |||||
| <view class="payContent"> | |||||
| <view class="payHeader"></view> | |||||
| <view class="payBody"> | |||||
| <view class="payIcon"> | |||||
| <view class="payIcon-body"> | |||||
| <image src='./../../assets/images/pay-success.png' mode="widthFix"></image> | |||||
| <text>支付成功</text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="payMessage"> | |||||
| <view>订单号:{{number}}</view> | |||||
| <view>商户名:{{number}}</view> | |||||
| <view>交易时间:{{number}}</view> | |||||
| <view>金额:<text class="price">{{number}}</text></view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <button bindtap='goIndex'>返回首页</button> | <button bindtap='goIndex'>返回首页</button> | ||||
| </view> | </view> | ||||
| @@ -1,18 +1,76 @@ | |||||
| .content image{ | |||||
| display: block; | |||||
| width: 468rpx; | |||||
| margin: 100rpx auto 0; | |||||
| page{ | |||||
| background: #F5F2F0; | |||||
| } | } | ||||
| button::after{ border: none; } | button::after{ border: none; } | ||||
| .content button{ | .content button{ | ||||
| width: 670rpx; | |||||
| width: 636rpx; | |||||
| height: 95rpx; | height: 95rpx; | ||||
| line-height: 95rpx; | line-height: 95rpx; | ||||
| text-align: center; | text-align: center; | ||||
| color: #333; | |||||
| font-size: 36rpx; | |||||
| background: #fff!important; | |||||
| border-radius:60rpx!important; | |||||
| color: #fff; | |||||
| font-size: 31rpx; | |||||
| background: #02C0FF!important; | |||||
| border-radius:48rpx!important; | |||||
| margin-top: 169rpx; | margin-top: 169rpx; | ||||
| border: 1px solid #C4C4C4; | |||||
| border: 1px solid #02C0FF; | |||||
| } | |||||
| .payContent{ | |||||
| width: 657rpx; | |||||
| margin: 50rpx auto; | |||||
| } | |||||
| .payHeader{ | |||||
| width: 100%; | |||||
| height: 11rpx; | |||||
| background: #02C0FF!important; | |||||
| border-radius:6rpx; | |||||
| } | |||||
| .payBody{ | |||||
| width: 636rpx; | |||||
| height:473rpx; | |||||
| margin:-3rpx auto 0; | |||||
| background: #fff; | |||||
| z-index: 10; | |||||
| box-shadow:0rpx 8rpx 25rpx 2rpx rgba(165,165,165,0.1); | |||||
| border-radius:0rpx 0rpx 20rpx 20rpx; | |||||
| position: relative; | |||||
| } | |||||
| .payIcon { | |||||
| display: inline-block; | |||||
| position: absolute; | |||||
| } | |||||
| .payIcon-body{ | |||||
| display: inline-block; | |||||
| position: absolute; | |||||
| left: 183rpx; | |||||
| top: 78rpx; | |||||
| } | |||||
| .payIcon-body text{ | |||||
| font-size:40rpx; | |||||
| font-family:PingFang-SC-Bold; | |||||
| font-weight:bold; | |||||
| color:#333; | |||||
| position: absolute; | |||||
| display: inline-block; | |||||
| width: 200rpx; | |||||
| height: 70rpx; | |||||
| top:5rpx; | |||||
| left:90rpx; | |||||
| } | |||||
| .payIcon image{ | |||||
| position: absolute; | |||||
| top: 0; | |||||
| left: 0; | |||||
| width: 70rpx; | |||||
| height: 70rpx; | |||||
| } | |||||
| .payMessage{ | |||||
| position: absolute; | |||||
| top:230rpx; | |||||
| left: 53rpx; | |||||
| font-size: 28rpx; | |||||
| } | |||||
| .payMessage .price{ | |||||
| color: #FF3535; | |||||
| } | } | ||||