successfully.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view>
  3. <uni-nav-bar
  4. status-bar = true
  5. fixed = true
  6. left-icon="arrowthinleft"
  7. background-color="#03b6b3"
  8. color="#ffffff"
  9. @clickRight="goHome"
  10. @clickLeft="navigateBack">
  11. <text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Successful</text>
  12. <button slot="right" size="mini" hover-class="button-hover" type="home" class="back-to-home">
  13. <uni-icons type="home-filled" size="22" color="#ffffff"></uni-icons>
  14. </button>
  15. </uni-nav-bar>
  16. <view class="msg-container">
  17. <uni-icons type="checkbox-filled" size="60" color="#03b6b3"></uni-icons>
  18. <text class="msg-success">Successful</text>
  19. <text class="msg-other">Registration is successful, we will inform you of the result as soon as possible.</text>
  20. </view>
  21. <view class="btn-container">
  22. <button class="btn-back" type="back" plain="true" hover-class="button-hover" @click="toIndex">Back</button>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
  28. export default {
  29. components: {uniNavBar},
  30. data() {
  31. return {
  32. }
  33. },
  34. methods: {
  35. goHome(){
  36. this.$mRouter.reLaunch({ route: '/pages/index/index' });
  37. },
  38. navigateBack(){
  39. uni.navigateBack()
  40. },
  41. toIndex(){
  42. uni.navigateTo({
  43. url: '/pages/conference/meetingIndexEn/meetingIndexEn'
  44. })
  45. }
  46. }
  47. }
  48. </script>
  49. <style scoped>
  50. uni-button:after{
  51. border: none;
  52. }
  53. .uni-icons{
  54. line-height: 30px;
  55. }
  56. .msg-container{
  57. background-color: #FFFFFF;
  58. text-align: center;
  59. padding: 200upx 40upx 100upx 40upx;
  60. }
  61. .msg-container text{
  62. display: block;
  63. }
  64. .msg-container .msg-success{
  65. font-size: 20px;
  66. padding: 20px 0 10px 0;
  67. }
  68. .msg-container .msg-other{
  69. color: #999;
  70. }
  71. .btn-container{
  72. padding: 20px;
  73. }
  74. .btn-container .btn-back{
  75. border-color: #03b6b3;
  76. color: #03b6b3;
  77. font-weight: bold;
  78. }
  79. .button-hover[type = back]{
  80. opacity: .75;
  81. transform: scale(0.95, 0.95);
  82. }
  83. .back-to-home{
  84. height: 30px;
  85. border-radius: 15px;
  86. background-color: #1e9694;
  87. }
  88. .button-hover[type = home]{
  89. opacity: .75;
  90. transform: scale(0.95, 0.95);
  91. }
  92. </style>