paySuccess.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <view class="content">
  3. <view class="bg">
  4. <view class="bottom"><image src="../../static/img/bottom.png" mode=""></image></view>
  5. </view>
  6. <view class="top">
  7. <view class="img">
  8. <image src="../../static/img/success.png" mode=""></image>
  9. </view>
  10. <view class="title">
  11. 订单支付成功
  12. </view>
  13. </view>
  14. <view class="button"@click="navTo()" >
  15. 返回首页
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. }
  24. },
  25. methods: {
  26. navTo(){
  27. uni.navigateTo({
  28. url:'index'
  29. })
  30. }
  31. }
  32. }
  33. </script>
  34. <style lang="scss">
  35. .content {
  36. width: 100%;
  37. position: absolute;
  38. height: 100%;
  39. background: linear-gradient(180deg, #00081B 0%, #00040D 100%);
  40. .bottom {
  41. position: absolute;
  42. bottom: 0;
  43. width: 750rpx;
  44. height: 588rpx;
  45. image {
  46. width: 100%;
  47. height: 100%;
  48. }
  49. }
  50. .top {
  51. display: flex;
  52. flex-direction: column;
  53. align-items: center;
  54. margin: 147rpx auto 40rpx;
  55. .img {
  56. position: relative;
  57. width: 302rpx;
  58. height: 302rpx;
  59. image {
  60. height: 100%;
  61. width: 100%;
  62. }
  63. }
  64. .title {
  65. margin-top: 40rpx;
  66. font-size: 32rpx;
  67. font-family: PingFang SC;
  68. font-weight: bold;
  69. color: #FFFFFF;
  70. line-height: 42rpx;
  71. }
  72. }
  73. .button {
  74. margin: 20rpx auto;
  75. text-align: center;
  76. width: 301rpx;
  77. height: 78rpx;
  78. border: 2rpx solid #08EDE7;
  79. border-radius: 10rpx;
  80. font-size: 30rpx;
  81. font-family: PingFang SC;
  82. font-weight: 500;
  83. color: #08EDE7;
  84. line-height: 78rpx;
  85. }
  86. }
  87. </style>