zhishifufei_uniapp/components/NavBar/index.vue

<template>
  <!-- #ifndef MP-TOUTIAO -->
  <view class="nav-box" :class="[fixed ? 'fixed' : 'pos', blueTheme ? 'blue-theme' : '']" :style="{'background-color':backGround,'color':titleFontColor}">
    <view class="left-btn-box btn-box abs flex flex-center" @click="handleBack">
     
      <image mode="aspectFill" class="back-btn" :src="backIcon" />
      
    </view>
     <!-- #ifdef MP-KUAISHOU -->
    <view class="title flex flex-center">{{ title.slice(0, 6) }}{{ title.length >=6 ? '...' : '' }}</view>
     <!-- #endif -->
      <!-- #ifndef MP-KUAISHOU -->
    <view class="title flex flex-center">{{ title.slice(0, 10) }}{{ title.length >=10 ? '...' : '' }}</view>
    <!-- #endif -->
    <view class="right-btn-box abs flex flex-center">
      <slot name="right" />
    </view>
  </view>
  <!-- #endif -->
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    fixed: {
      type: Boolean,
      default: true,
    },
    blueTheme: {
      type: Boolean,
      default: false
    },
    backGround:{
      type:String,
      default:"#FFF"
    },
    backIcon:{
      type:String,
      default: require("../../static/icon/arrow-left-black.png")
    },
    titleFontColor:{
      type:String,
      default:"#black"
    }
  },
  methods: {
    handleBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.switchTab({
          url: "/pages/index/index"
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.nav-box {
  padding-top: var(--safe-top);
  height: calc(88rpx + var(--safe-top));
  /* #ifdef MP-TOUTIAO */
  .title{
    align-items: flex-end;
    padding-bottom: 16rpx;
  }
  /* #endif */
  &.blue-theme {
    background: linear-gradient(85deg, #3875EA 0%, #1890FC 100%);
    color: #ffffff;

    .btn-box {
      filter: invert(1);
    }
  }

  &.fixed {
    left: 0;
    right: 0;
    z-index: 999;
	top: 0;
  }
}

.btn-box {
  width: 88rpx;
  height: 88rpx;
  left: 0;
  bottom: 0;
}

.title {
  height: 100%;
}

.right-btn-box {
  right: 0;
  bottom: 0;
  height: 88rpx;
}

.back-btn {
  width: 15rpx;
  height: 29rpx;
  
}
</style>