@@ -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; | |||||
} | } |