workApp/components/commonHeader.vue

<template>
	<view class="common_header" :style="{ paddingTop: statusBarHeight + 62 + 'rpx' }">
		<view class="header_left" @click="handleBack">
			<uni-icons type="back" size="24" color="#333333"></uni-icons>
		</view>
		<text class="header_title">{{ title }}</text>
		<view class="header_right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
import { onMounted } from 'vue';
import { useSafeArea } from '@/common/safeArea';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
const props = defineProps({
	title: {
		type: String,
		default: ''
	}
});

const emit = defineEmits(['back']);
const { statusBarHeight, initSafeArea } = useSafeArea();

onMounted(() => {
	initSafeArea();
});

const handleBack = () => {
	emit('back');
};
</script>

<style lang="scss" scoped>
.common_header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-bottom: 24rpx;
	background-color: #FFFFFF;
	border-bottom: 2rpx solid #F3F3F3;

	.header_left {
		width: 48rpx;
	}

	.header_title {
		flex: 1;
		text-align: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.header_right {
		width: 48rpx;
	}
}
</style>