u-bottom.vue 841 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <view class="bottom-wrap" :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. color:{
  21. type: String,
  22. default: ''
  23. }
  24. },
  25. }
  26. </script>
  27. <style lang="scss" >
  28. .bottom-wrap{
  29. text-align: center;
  30. height: 200rpx;
  31. .bottom{
  32. position: fixed;
  33. left: 0;
  34. right: 0;
  35. bottom: 76rpx;
  36. font-size: 26rpx;
  37. line-height: 33rpx;
  38. .bottom-p + .bottom-p{
  39. margin-top: 10rpx;
  40. }
  41. }
  42. }
  43. </style>