hlm_pl_mall_h5/pages/TitleHeader.vue

<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
	  
	  switch (uni.getSystemInfoSync().platform) {
	  	case 'android':
		this.navHeight = uni.getMenuButtonBoundingClientRect().top + 7 
	  		break;
	  	case 'ios':
		this.navHeight = uni.getMenuButtonBoundingClientRect().top - 40
	  		break;
	  	default:
		this.navHeight = uni.getMenuButtonBoundingClientRect().top + 7 
	  		break;
	  }
      
      // #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>