lcoco/components/en-nav/en-nav.vue

<template>
  <view class="">
    <view class="header" :style="style">
      <view class="flexbox"
        :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px','background':bgckgroundBox}]">
        <view @tap="goBack">
          <text  class="iconfont" v-if="leftShow">
            &#xe60e;
          </text>
        </view>
        <!-- <view v-if="false">

        </view> -->
        <view class="title-text" :style="[{'marginLeft':left +'px'}]">{{title}}</view>
        <view style="width: 36px;"></view>
      </view>
    </view>
    <view class="box">
      <view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
      </view>
    </view>
  </view>


</template>

<script>
  export default {
    data() {
      return {
        statusBarH: 0,
        customBarH: 0,
        left: 35
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      leftShow: {
        type: Boolean,
        default: true
      },
      imgurl: {
        type: String,
        default: require('../../static/home/retreat.png')
      },
      bgckgroundBox: {
        type: String,
        default: '#fff'
      },
      // titleColor: {
      //   type: String,
      //   default: '#fff'
      // },
      // bgColor: {
      //   type: String,
      //   default: '#707'
      // },
    },
    computed: {
      style() {
        let _style = `height: ${this.customBarH}px;`
        return _style
      }
    },
    watch: {
      leftShow(e) {
        if (e == true) {
          this.left = 0
        }
      }
    },
    methods: {
      goBack() {
        if(!this.leftShow){
          return ;
        }
        this.$emit('leftClick')
      }
    },
    created() {
      let self = this;
      uni.getSystemInfo({
        success: function(e) {
          self.statusBarH = e.statusBarHeight + 10
          let custom = wx.getMenuButtonBoundingClientRect()
          self.customBarH = custom.height
        }
      })
    }
  }
</script>

<style scoped lang="scss">
  @font-face {
    font-family: 'iconfont';
    src: url('./iconfont.ttf') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 36rpx;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #000;
  }
  .header {
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    // background: #fff;
    // position: relative;
    z-index: 999999;
  }

  .box {
    width: 100vw;
    // background: #fff;
  }

  .flexbox {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    // background: #fff;
    //background: pink;

    .title-text {
      // flex: 1;
      font-size: 36rpx;
      font-weight: bold;
      font-weight: 600;
      // background: #fff;
    }

    .icon-left {
      width: 20px;
      height: 20px;
    }
  }
</style>