Gobacktop.vue 934 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <view @click="goback" class="top" :style="{bottom:height+'px'}" :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. height:{
  17. default: 25,
  18. type: Number
  19. }
  20. },
  21. methods: {
  22. goback() {
  23. this.$emit('getop')
  24. },
  25. }
  26. }
  27. </script>
  28. <style>
  29. .top {
  30. width: 80upx;
  31. height: 80upx;
  32. border-radius: 50%;
  33. background-color: #fff;
  34. border: 1px solid #ccc;
  35. position: fixed;
  36. right: 32upx;
  37. bottom: 180upx;
  38. background-color: transparent;
  39. }
  40. .activebottom {
  41. width: 80upx;
  42. height: 80upx;
  43. border-radius: 50%;
  44. background-color: #fff;
  45. border: 1px solid #ccc;
  46. position: fixed;
  47. right: 32upx;
  48. bottom: 230upx;
  49. background-color: transparent;
  50. }
  51. .imgTop {
  52. width: 100%;
  53. height: 100%;
  54. }
  55. </style>