<template>
  <view>
    <!--  #ifdef  MP-WEIXIN -->
    <view class="navigation" :style="'height:'+navHeight+'px;line-height:'+navHeight+'px;'+(backgroundColor?('color:#fff;background-color:'+backgroundColor):'')">{{config.site_name}}</view>
    <!--  #endif -->
  </view>
</template>

<script>
  import {
    mapState,
  } from 'vuex'
  export default {
    name: 'flexLine',
    data() {
      return {
        navHeight: 0
      }
    },
    props: {
      backgroundColor: {
        type: String,
        default: ''
      }
    },
    computed: {
      ...mapState({
        config: state => state.config.config
      }),
    },
    methods: {

    },
    mounted: function() {
      // #ifdef  MP-WEIXIN
      this.navHeight = uni.getMenuButtonBoundingClientRect().height+7
      // #endif
    },
  }
</script>
<style scoped lang="scss">
  .navigation {
    padding-top:constant(safe-area-inset-top);
    padding-top:env(safe-area-inset-top);
    text-align: center;
    font-size: .7rem;
    background-color: #fff;
  }
</style>
