workApp/components/common-header.vue

<template>
	<view class="common_header">
		<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>
const props = defineProps({
	title: {
		type: String,
		default: ''
	}
});

const emit = defineEmits(['back']);

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-top: env(safe-area-inset-top);
	height: calc(96rpx + env(safe-area-inset-top));
	padding-left: 24rpx;
	padding-right: 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>