paySuccess.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <view class="content">
  3. <view class="success-icon">
  4. <image src="../../static/img/success.png" mode=""></image>
  5. </view>
  6. <text class="tit">支付成功</text>
  7. <view class="btn-group">
  8. <navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. orderId: ''
  17. }
  18. },
  19. onLoad(opt) {
  20. // 保存订单号
  21. this.orderId = opt.orderid;
  22. },
  23. methods: {
  24. }
  25. }
  26. </script>
  27. <style lang='scss'>
  28. .content {
  29. display: flex;
  30. flex-direction: column;
  31. justify-content: center;
  32. align-items: center;
  33. }
  34. .success-icon {
  35. margin-top: 100upx;
  36. width: 300rpx;
  37. height: 300rpx;
  38. image {
  39. width: 100%;
  40. height: 100%;
  41. }
  42. }
  43. .tit {
  44. font-size: 32rpx;
  45. font-family: PingFang SC;
  46. font-weight: 500;
  47. color: #333333;
  48. margin-top: 40rpx;
  49. }
  50. .btn-group {
  51. padding-top: 100upx;
  52. }
  53. .mix-btn {
  54. margin-top: 30upx;
  55. display: flex;
  56. align-items: center;
  57. justify-content: center;
  58. width: 300rpx;
  59. height: 78rpx;
  60. border: 2rpx solid;
  61. border-image: linear-gradient(0deg, #CA57DC, #65B2E9) 10 10;
  62. background: linear-gradient(0deg, #CA57DC 0%, #65B2E9 100%);
  63. border-radius: 10rpx;
  64. font-size: 30rpx;
  65. font-family: PingFang SC;
  66. font-weight: 500;
  67. color: #DC262B;
  68. background: linear-gradient(0deg, #CA57DC 0%, #65B2E9 100%);
  69. -webkit-background-clip: text;
  70. -webkit-text-fill-color: transparent;
  71. }
  72. </style>