uniAppXCX/component/pageTitle.vue

<template>
  <div>
    <!-- <div :style="{
			'margin-top': safeAreaTop,
			'height': '60rpx',
		}">
		</div> -->
    <div
      class="text-white bold text-center mt-2 pageTitle"
      :style="{
        'margin-top': safeAreaTop,
        color: color,
      }"
    >
      <uni-icons
        type="left"
        size="20"
        :color="color"
        :style="{
          position: 'absolute',
          left: 0,
          'margin-left': '20rpx',
        }"
        @click="back"
      ></uni-icons>
      {{ title }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#000',
    },
  },
  data() {
    return {
      safeAreaTop: '88rpx',
    }
  },
  mounted() {
    this.getSafeAreaTop()
  },
  methods: {
    getSafeAreaTop() {
      wx.getSystemInfo({
        success: res => {
          this.safeAreaTop = res.safeArea.top + 'px'
        },
      })
    },
    back() {
      wx.navigateBack({ delta: 1 })
    },
  },
}
</script>

<style lang="scss" scoped>
.pageTitle {
  z-index: 10;
  position: relative;
  height: 80rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>