lanecarford_front/src/components/HeaderTitle.vue

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

	defineProps({
		title: { type: String, default: 'AI STYLING ASSISTANT' },
		light: { type: Boolean,default:false },
		hasSetting: { type: Boolean,default:false }
	})

	defineEmits(['clickReturn'])

	const handleClickReturn = () => {
		router.back()
		// emit('clickReturn')
	}
</script>

<template>
	<div class="header-title" :class="{ 'light': light }">
		<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
		<span class="title">{{ title }}</span>
		<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
	</div>
</template>

<style scoped lang="less">
	.header-title {
		position: sticky;
		width: 100%;
		height: var(--header-title-height, 9.9rem);
		top: 0;
		z-index: var(--header-title-z-index, 999);
		background-color: var(--header-title-background, #000000);
		display: flex;
		align-items: center;
		justify-content: center;
		
		> .return {
			position: absolute;
			left: 3.2rem;
			display: inline-block;
			--svg-icon-color: var(--header-title-color, #ffffff);
		}
		> .title {
			font-size: 4.8rem;
			color: var(--header-title-color, #ffffff);
			font-family: 'boskaRegular';
		}
		>.setting{
			position: absolute;
			right: 3.2rem;
			display: inline-block;
		}
	
		&.light {
			--header-title-color: #000000;
			--svg-icon-color: #000000;
			--header-title-background: #ffffff;
		}
	}
</style>