success.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <view class="container">
  3. <image class="circle-image" src="../../static/成功.png" />
  4. <span class="center-text">感谢您的建议</span>
  5. <a-button type="dashed" :size="size" @click="returnMain" class="returnMain">返回主页面</a-button>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. name:'success',
  11. data() {
  12. return {
  13. }
  14. },
  15. methods: {
  16. returnMain(){
  17. uni.reLaunch({
  18. url: './index'
  19. });
  20. }
  21. }
  22. }
  23. </script>
  24. <style>
  25. .container {
  26. display: flex; /* 使容器成为Flex容器 */
  27. flex-direction: column; /* 子元素垂直堆叠 */
  28. align-items: center; /* 沿垂直轴居中对齐子元素 */
  29. justify-content: center; /* 沿水平轴居中对齐子元素 */
  30. }
  31. .circle-image {
  32. top: 20vh;
  33. width: 20vw; /* 设置宽度为屏幕宽度的一半 */
  34. height: 20vw; /* 自动调整高度以保持图片比例 */
  35. border-radius: 50%; /* 设置圆角半径为50%,使图片呈现圆形 */
  36. }
  37. .center-text {
  38. padding-top: 25vh;
  39. text-align: center; /* 文字水平居中 */
  40. }
  41. .returnMain{
  42. color: #32CD32;
  43. margin-top: 34vh;
  44. }
  45. </style>