yizhizan-h5/components/nav-bar/index.vue

<template>
  <view class="nav-bar" :style="{ paddingTop: 12 + BarHeight + 'px' }">
    <view class="go-back">
      <u-icon name="arrow-leftward" :color="color" size="32" @click="goBack"></u-icon>
    </view>
    <view class="nav-title" :style="{color:color}">
      {{ title }}
    </view>
	<view class="go-back">
		<slot name="right"></slot>
	</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
		BarHeight:'',
        goBack(){
            uni.navigateBack()
        }
    };
  },
  props: {
    title: "",
    color:''
  },
  mounted(){
	// #ifdef APP-PLUS
	let systemInfo = uni.getSystemInfoSync();
	this.BarHeight = systemInfo.statusBarHeight;
	// #endif
  }
};
</script>
<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  padding: 24rpx 32rpx 20rpx 32rpx;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 1);
  font-family: DM Sans;
  font-size: 30rpx;
  font-weight: 700;
  line-height: 26px;
  display: flex;
  // justify-content: center;
  align-items: center;
  position: relative;
  .go-back{
    width: 32.61px;
	height: 26px;
  }
  .nav-title{
	flex: 1;
	text-align: center;
  }
}
</style>