u-bottom.vue 991 B

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