<template>
  <div class="Pb-container" :style="bgColor">
    <span class="Pb-text" :style="style">{{ txt }}</span>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'PageBottomTip',
    computed: {
    ...mapGetters(['pageData']),
    txt() {
      return this.pageData.props.pageBottomTxt;
    },
    style() {
      return {
        color: this.pageData.props.pageBottomColor
      };
    },
    // TODO 这样不太好
    bgColor() {
      return {
        'backgroundColor': this.pageData.commonStyle.backgroundColor
      };
    }
  }
}
</script>
<style lang="less">
  .Pb {
    &-container {
      height: 60px;
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-text {
      font-size: 14px;
      color: #333;
    }
  }
</style>