u-bottom.vue 924 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <view class="bottom-wrap" :class="{'bottom-wrap-static':static}" :style="[{customStyle,'color': color || 'rgba(255, 255, 255, 1)'}]">
  3. <view v-if="!$slots.content" class="bottom" :style="[customStyle]">
  4. <view class="bottom-p">copyright © 2021 智慧停车</view>
  5. </view>
  6. <slot name="content" v-else />
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name:'u-bottom',
  12. props:{
  13. customStyle:{
  14. type: Object,
  15. default() {
  16. return {};
  17. }
  18. },
  19. static:{
  20. type: Boolean,
  21. default: false
  22. },
  23. color:{
  24. type: String,
  25. default: ''
  26. }
  27. },
  28. }
  29. </script>
  30. <style lang="scss" >
  31. .bottom-wrap{
  32. text-align: center;
  33. height: 200rpx;
  34. .bottom{
  35. position: fixed;
  36. left: 0;
  37. right: 0;
  38. bottom: 76rpx;
  39. font-size: 26rpx;
  40. line-height: 33rpx;
  41. .bottom-p + .bottom-p{
  42. margin-top: 10rpx;
  43. }
  44. }
  45. &-static{
  46. .bottom{
  47. position: static;
  48. }
  49. }
  50. }
  51. </style>