besure_app/src/components/common/AppTitleHeader.vue

<template>
  <view>
    <view class="header-section">
      <view class="header-main">
        <view class="back-btn" @click="handleBack">
          <text class="back-icon">‹</text>
        </view>
        <view class="header-title-wrap">
          <text class="header-title">{{ title }}</text>
        </view>
        <view class="header-placeholder"></view>
      </view>
    </view>
    <view v-if="showSubTitle && subTitle" class="header-subtitle-wrap">
      <text class="header-desc">{{ subTitle }}</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  subTitle: {
    type: String,
    default: ''
  },
  showSubTitle: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['back'])

function handleBack() {
  emit('back')
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.header-section {
  --status-top: var(--status-bar-height, 0px);
  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
  padding: calc(20rpx + var(--status-top)) 24rpx 28rpx;
  position: relative;
}

.header-main {
  display: flex;
  align-items: center;
  min-height: 72rpx;
}

.back-btn {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 56rpx;
  line-height: 1;
  color: #ffffff;
  font-weight: 500;
}

.header-title-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #ffffff;
}

.header-placeholder {
  width: 72rpx;
  height: 72rpx;
}

.header-subtitle-wrap {
  margin-top: 14rpx;
  padding-left: 16rpx;
}

.header-desc {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  color: #1a3a5c;
}
</style>