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

<template>
  <view class="" :style="[{ 'background':bgckgroundBox}]">
    <view class="header"  :style="[{'height': customBarH + 'px','background':bgckgroundBox, 'padding-top': statusBarH + 'px'}]">
      <view class="flexbox" :style="[{'height': customBarH + 'px'}]">
        <view class="left-button" @tap="goBack">
          <image class="back-img"  :src="'/static/img/common/back'+(titleColor==='#fff'?'-white':'')+'.png'" mode="aspectFill"></image>
        </view>

        <view class="title-text sys-height-44"  :style="[{'marginLeft':left +'px','color':titleColor}]">{{title}}</view>
        <view  class="right-button button" @click="rightClick">
          <view class="right-data" v-if="rightShow">
            <text class="rightName  sys-weight-600" :style="[{'color':titleColor}]" v-if="rightType===1">{{rightText}}</text>
            <slot name="right" v-else>   </slot>
          </view>
        </view>
      </view>
    </view>
    <view class="box-title">
      <view class="" :style="[{'height': (customBarH+statusBarH) + 'px', 'padding-top': statusBarH + 'px'}]">
      </view>
    </view>
  </view>


</template>

<script>
  import tools from "@/service/tools";

  export default {
    name: "en-nav",
    data() {
      return {
        statusBarH: 0,
        customBarH: 0,
        left: 35,
        isXcx:false
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      leftShow: {
        type: Boolean,
        default: true
      },
      bgckgroundBox: {
        type: String,
        default: '#fff'
      },

      titleColor: {
        type: String,
        default: '#fff'
      },

      rightText: {
        type: String,
        default: ''
      },
      rightShow: {
        type: Boolean,
        default: false
      },
      rightType: {
        default: 1
      },
    },
    computed: {

    },
    watch: {
      leftShow(e) {
        if (e == true) {
          this.left = 0
        }
      }
    },
    methods: {
      rightClick() {
        this.$emit('rightClick')
      },
      goBack() {
        if(!this.leftShow){
          return ;
        }
        // this.$emit('leftClick')
        tools.leftClick()
      }
    },
    created() {
      uni.getSystemInfo({
        success: (e) =>{
          this.statusBarH = e.statusBarHeight + 10
          let custom=0;
          //#ifdef MP-WEIXIN
          custom = wx.getMenuButtonBoundingClientRect()
          this.customBarH = custom.height
          //#endif
          //#ifdef H5
          this.customBarH = 30
          this.left=0
          //#endif
          // #ifdef APP-PLUS
          // this.customBarH = 34
          this.left=0
          //#endif
          console.log('self.customBarH---------'+this.customBarH)
          this.$emit('navHeight', this.customBarH+this.statusBarH)
        }
      })
      //#ifdef MP-WEIXIN
      this.isXcx=true
      //#endif
    }
  }
</script>

<style scoped lang="scss">
@import url("../../../static/css/en-common.css") ;

  .header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    .flexbox {
      display: flex;
      justify-content: space-between;
	  align-items: center;
      padding: 0 12px;
	  position: relative;
	  
      .left-button{
		 position: absolute;
		 left: 16rpx;
		 top: 10rpx;
        .back-img{
          width: 40rpx;
          height: 40rpx;
        }
      }
      .iconfont{
        color: #333333;
      }
      .title-text {
		  width: 100%;
		  text-align: center;
        font-size: 36rpx;
        font-weight: 600;
      }
      .icon-left {
        width: 20px;
        height: 20px;
      }

      .button {
        position: absolute;
		right: 16rpx;
        // z-index: 5;
        // width: 21px;
        .rightName {
          font-size: 32rpx;
        }
        .r-but{

          color: #fff;
          font-size: 12px;
          padding: 5px;
          border-radius: 3px;
        }
      }
    }
    .flexbox-xcx{
      justify-content:left;
      position: relative;
      .right-button{
        position: absolute;
        right: 220rpx;
      }
    }

  }


  .box-title {
    //background-color:#FF0000 ;
  }


</style>