index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view class="success-container">
  3. <view class="icon-area">
  4. <!-- 绿色对勾图标 (SVG) -->
  5. <svg class="success-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
  6. <path
  7. d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z m0 960C264.58 960 64 759.42 64 512S264.58 64 512 64s448 200.58 448 448-200.58 448-448 448z"
  8. fill="#64D01D" />
  9. <path
  10. d="M743.08 335.78c-12.23-12.24-32.07-12.24-44.3 0L426.6 607.96 325.22 506.58c-12.24-12.24-32.07-12.24-44.3 0-12.24 12.24-12.24 32.07 0 44.3l124.58 124.58c6.12 6.12 14.14 9.17 22.15 9.17s16.03-3.05 22.15-9.17L743.08 380.08c12.24-12.24 12.24-32.07 0-44.3z"
  11. fill="#64D01D" />
  12. </svg>
  13. <text class="main-title">提交成功</text>
  14. </view>
  15. <text class="sub-tip">请保持手机畅通,等待平台工作人员与您联系</text>
  16. <view class="info-card">
  17. <view class="info-item">
  18. <text class="label">服务站点:</text>
  19. <text class="value">{{ station }}</text>
  20. </view>
  21. <view class="info-item">
  22. <text class="label">报 名 人 :</text>
  23. <text class="value">{{ name }}</text>
  24. </view>
  25. <view class="info-item">
  26. <text class="label">联系手机:</text>
  27. <text class="value">{{ phone }}</text>
  28. </view>
  29. </view>
  30. <view class="footer-btn" @click="goHome">我知道了</view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return { station: '', name: '', phone: '' }
  37. },
  38. onLoad(options) {
  39. if (options.station) this.station = decodeURIComponent(options.station);
  40. if (options.name) this.name = decodeURIComponent(options.name);
  41. if (options.phone) this.phone = options.phone;
  42. },
  43. methods: {
  44. goHome() { uni.reLaunch({ url: '/pages/login/index' }); }
  45. }
  46. }
  47. </script>
  48. <style>
  49. page {
  50. background-color: #fff;
  51. font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  52. }
  53. .success-container {
  54. padding: 60rpx 40rpx;
  55. display: flex;
  56. flex-direction: column;
  57. align-items: center;
  58. }
  59. .icon-area {
  60. margin-top: 60rpx;
  61. margin-bottom: 30rpx;
  62. display: flex;
  63. flex-direction: column;
  64. align-items: center;
  65. }
  66. .success-icon {
  67. width: 120rpx;
  68. height: 120rpx;
  69. margin-bottom: 20rpx;
  70. }
  71. .main-title {
  72. font-size: 36rpx;
  73. font-weight: bold;
  74. color: #333;
  75. }
  76. .sub-tip {
  77. font-size: 26rpx;
  78. color: #FF5722;
  79. margin-bottom: 60rpx;
  80. text-align: center;
  81. }
  82. .info-card {
  83. width: 100%;
  84. background-color: #fff;
  85. border: 2rpx dashed #eee;
  86. border-radius: 12rpx;
  87. padding: 40rpx;
  88. box-sizing: border-box;
  89. margin-bottom: 100rpx;
  90. }
  91. .info-item {
  92. display: flex;
  93. margin-bottom: 25rpx;
  94. font-size: 28rpx;
  95. }
  96. .info-item:last-child {
  97. margin-bottom: 0;
  98. }
  99. .label {
  100. min-width: 160rpx;
  101. color: #999;
  102. }
  103. .value {
  104. color: #333;
  105. font-weight: bold;
  106. }
  107. .footer-btn {
  108. width: 240rpx;
  109. height: 80rpx;
  110. line-height: 80rpx;
  111. background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%);
  112. color: #fff;
  113. font-size: 28rpx;
  114. font-weight: bold;
  115. border-radius: 8rpx;
  116. text-align: center;
  117. margin-top: auto;
  118. }
  119. </style>