3 changed files with 144 additions and 4 deletions
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav> |
||||
|
<view class="lf-p-30" style="margin: 0 auto;"> |
||||
|
<view class="confirm-card"> |
||||
|
<view class="lf-font-32 lf-color-555"> |
||||
|
请核对支付金额 |
||||
|
</view> |
||||
|
<view style="font-size: 72rpx;color: #15716E;">¥478.50</view> |
||||
|
<view> |
||||
|
<button class="confirmcash-btn">确认</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page { |
||||
|
background-color: #F8F8F8; |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped lang="scss"> |
||||
|
.confirmcash-btn { |
||||
|
width: 550rpx; |
||||
|
height: 100rpx; |
||||
|
background: #15716E; |
||||
|
border-radius: 50rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
font-size: 32rpx; |
||||
|
color: white; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.confirm-card { |
||||
|
padding: 30rpx 0; |
||||
|
width: 686rpx; |
||||
|
height: 475rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="确认金额"></lf-nav> |
||||
|
<view class="lf-p-30" style="margin: 0 auto;"> |
||||
|
<view class="confirm-card"> |
||||
|
<view class="state-btn" v-if="payState"> |
||||
|
<u-icon name="checkbox-mark" style="font-size: 100rpx;" class="lf-color-white"></u-icon> |
||||
|
</view> |
||||
|
<view class="state-btn1" v-else> |
||||
|
<u-icon name="close" style="font-size: 100rpx;" class="lf-color-white"></u-icon> |
||||
|
</view> |
||||
|
<view> |
||||
|
<text class="lf-font-32 lf-color-777 lf-m-r-10">支付</text> |
||||
|
<text style="font-size: 72rpx;color: #15716E;" v-if="payState">¥478.50</text> |
||||
|
<text style="font-size: 72rpx;color: #15716E;" v-else>失败</text> |
||||
|
</view> |
||||
|
<view> |
||||
|
<button class="confirmcash-btn">返回首页</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
payState: true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.state-btn { |
||||
|
width: 220rpx; |
||||
|
height: 220rpx; |
||||
|
background: #15716E; |
||||
|
margin-bottom: 30rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.state-btn1 { |
||||
|
width: 220rpx; |
||||
|
height: 220rpx; |
||||
|
background: #777777; |
||||
|
margin-bottom: 30rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.confirmcash-btn { |
||||
|
width: 550rpx; |
||||
|
height: 100rpx; |
||||
|
background: white; |
||||
|
border-radius: 50rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
font-size: 32rpx; |
||||
|
color: #15716E; |
||||
|
align-items: center; |
||||
|
border: 1px solid #15716E; |
||||
|
margin-top: 100rpx; |
||||
|
} |
||||
|
.confirm-card { |
||||
|
padding: 30rpx 0; |
||||
|
width: 686rpx; |
||||
|
height: max-content; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue