index.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <view class="success">
  3. <!-- <view class="bgc"></view> -->
  4. <view class="content">
  5. <view>
  6. <nav-bar title="none" icon="none" background="transparent" border-color="transparent"></nav-bar>
  7. </view>
  8. <view class="sur flex-column aic">
  9. <re-image imgSrc="/retail/mall/img_quancoin.png" width="240" height="240"></re-image>
  10. <view class="texts flex-column">
  11. <text class="suce-text">充值成功</text>
  12. <text>支付金额:</text>
  13. <text>购买游戏币:</text>
  14. </view>
  15. <view class="btns">
  16. <u-button class="order" @click="toOrder">查看订单</u-button>
  17. <u-button class="home" @click="toHome">返回首页</u-button>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. }
  28. },
  29. methods: {
  30. // 返回订单
  31. toOrder() {
  32. uni.navigateTo({
  33. url: '/pages/mall/mallRecharge/index'
  34. })
  35. },
  36. toHome() {
  37. uni.switchTab({
  38. url: '/pages/gallery/index'
  39. })
  40. }
  41. },
  42. }
  43. </script>
  44. <style lang="scss" scoped>
  45. .success {
  46. width: 100%;
  47. position: relative;
  48. .bgc {
  49. // position: absolute;
  50. }
  51. .content {
  52. // z-index: 9;
  53. width: 100%;
  54. height: 544rpx;
  55. background: linear-gradient(180deg, #FFF4D6 0%, rgba(255, 251, 193, 0.62) 40%, rgba(255, 221, 202, 0.32) 100%);
  56. padding: 32rpx;
  57. .sur {
  58. width: 100%;
  59. padding: 56rpx 0 64rpx;
  60. background: #FFFFFF;
  61. border-radius: 24rpx;
  62. .texts {
  63. margin-top: 48rpx;
  64. font-weight: 500;
  65. font-size: 28rpx;
  66. color: #2C2B28;
  67. .suce-text {
  68. font-weight: bold;
  69. font-size: 40rpx;
  70. text-align: center;
  71. margin-bottom: 32rpx;
  72. }
  73. }
  74. .btns {
  75. margin-top: 64rpx;
  76. button {
  77. width: 414rpx;
  78. height: 96rpx;
  79. }
  80. .order {
  81. background: linear-gradient(140deg, #FF8500 0%, #FFA600 100%);
  82. border-radius: 48rpx;
  83. font-weight: bold;
  84. font-size: 40rpx;
  85. color: #FFFFFF;
  86. margin-bottom: 32rpx;
  87. }
  88. .home {
  89. background: #FFFFFF;
  90. border-radius: 48rpx;
  91. border: 2rpx solid #9FA2B2;
  92. font-weight: 500;
  93. font-size: 40rpx;
  94. color: #2C2B28;
  95. }
  96. }
  97. }
  98. }
  99. }
  100. </style>