lcoco/pages/my/model/my-nav.vue

<template>
  <view class="">
    <view class="header"  :style="[{'height': customBarH + 'rpx', 'padding-top': statusBarH + 'px'}]">
      <view class="header-left">
        <image class="left-img" src="/static/img/my/like.png" mode="heightFix"></image>
      </view>

      <view class="header-right">
        <image class="right-img" src="/static/img/my/edit.png" mode="aspectFill"></image>
        <image class="right-img" src="/static/img/my/set.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="box-title">
      <view class="" :style="[{'height': customBarH + 'rpx', 'padding-top': statusBarH + 'px'}]">
      </view>
    </view>
  </view>


</template>

<script>


  export default {
    name: "my-nav",
    data() {
      return {
        statusBarH: 0,
        customBarH: 132,
        left: 35,
        isXcx:false,
        tabNum:0
      }
    },
    props: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
      setTabNum(tabNum){
        if(this.tabNum!==tabNum){
          this.tabNum=tabNum
          this.$emit('setTabNum',tabNum)
        }
      }
    },
    created() {
      uni.getSystemInfo({
        success: (e) =>{
          this.statusBarH = e.statusBarHeight + 10

          this.$emit('navHeight', this.customBarH+this.statusBarH)
        }
      })

    }
  }
</script>

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

  .header {
    width: calc(100vw - 62rpx);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 44rpx 0 18rpx;
    height: 132rpx;
    //box-sizing: border-box;
    .header-left{
      .left-img{
        height: 132rpx;
      }
    }

    .header-right{
      height: 52rpx;
      display: flex;
      justify-content: flex-end;
      .right-img{
        width: 52rpx;
        height: 52rpx;
      }
      .right-img:first-child{
        margin-right: 40rpx;
      }
    }


  }



  .box-title {
    width: 100vw;
  }


</style>