lanecarford_front/src/components/HeaderTitle.vue

<script setup lang="ts">
	import { useRouter } from 'vue-router'
	const router = useRouter()

	defineProps({
		title: { type: String, default: 'STYLING ASSISTANT' }
	})

	const emit = defineEmits(['clickReturn', 'clickProfile'])

	const handleClickReturn = () => {
		router.back()
		// emit('clickReturn')
	}
	const handleClickProfile = () => {
		// router.push('/workshop/profile')
		emit('clickProfile')
	}
</script>

<template>
	<div class="header-title">
		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
		<span class="title">{{ title }}</span>
		<div class="profile" @click="handleClickProfile"><SvgIcon name="profile" size="45" /></div>
	</div>
</template>

<style scoped lang="less">
	.header-title {
		width: 100%;
		height: var(--header-title-height, 14.6rem);
		border-bottom-style: solid;
		border-bottom-width: var(--header-title-border-bottom-width, 0.2rem);
		border-bottom-color: var(--header-title-border-bottom-color, #d5d5d5);
		z-index: var(--header-title-z-index, 999);
		background-color: var(--header-title-background, #fff);
		display: flex;
		align-items: center;
		justify-content: center;

		> .return {
			color: #2c2c2c;
			position: absolute;
			left: 7rem;
			display: inline-block;
		}
		> .title {
			color: #2c2c2c;
			font-family: 'satoshiRegular';
			font-size: 4rem;
		}
		> .profile {
			position: absolute;
			right: 7rem;
			display: inline-block;
			color: #333;
		}
	}
</style>