Gobacktop.vue 851 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view @click="goback" class="top" :class="bottomtop==1?'':'activebottom' ">
  3. <img class="imgTop" src="/static/back_top.png" />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. isTop: {
  10. default: false,
  11. type: Boolean
  12. },
  13. bottomtop: {
  14. default: 1,
  15. }
  16. },
  17. methods: {
  18. goback() {
  19. this.$emit('getop')
  20. },
  21. }
  22. }
  23. </script>
  24. <style>
  25. .top {
  26. width: 80upx;
  27. height: 80upx;
  28. border-radius: 50%;
  29. background-color: #fff;
  30. border: 1px solid #ccc;
  31. position: fixed;
  32. right: 32upx;
  33. bottom: 15upx;
  34. background-color: transparent;
  35. }
  36. .activebottom {
  37. width: 80upx;
  38. height: 80upx;
  39. border-radius: 50%;
  40. background-color: #fff;
  41. border: 1px solid #ccc;
  42. position: fixed;
  43. right: 32upx;
  44. bottom: 150upx;
  45. background-color: transparent;
  46. }
  47. .imgTop {
  48. width: 100%;
  49. height: 100%;
  50. }
  51. </style>