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' },
		hasSetting: { type: Boolean, default: false },
		styleType: { type: String, default: '1' },//1低 2高 3-12rem
		isPlaceholder: { type: Boolean, default: true },
	})

	defineEmits(['clickReturn'])

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

<template>
	<div class="header-title" :style-type="styleType">
		<div class="main">
			<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="44" /></div>
		</div>
		<div class="placeholder" v-if="isPlaceholder"></div>
	</div>
</template>

<style scoped lang="less">
	.header-title {
		width: 100%;
		&[style-type="2"] {
			--header-title-height: 14.5rem;
			--header-title-border-bottom-width: 0.2rem;
			--header-title-return-left: 7.8rem;
		}
		&[style-type="3"] {
			--header-title-height: 12rem;
			--header-title-border-bottom-width: 0.2rem;
		}
		> div {
			width: 100%;
			height: var(--header-title-height, 9.9rem);
			border-bottom-width: var(--header-title-border-bottom-width, 0);
			border-bottom-style: solid;
			border-bottom-color: var(--header-title-border-bottom-color, #D5D5D5);
		}
		> .main {
			position: fixed;
			top: 0;
			z-index: var(--header-title-z-index, 999);
			background-color: var(--header-title-background, #fff);
			display: flex;
			align-items: center;
			justify-content: center;

			> .return {
				position: absolute;
				left: var(--header-title-return-left, 3.2rem);
				display: inline-block;
				--svg-icon-color: var(--header-title-color, #000);
			}
			> .title {
				font-size: 4.8rem;
				color: var(--header-title-color, #000);
				font-family: 'boskaRegular';
			}
			> .setting {
				position: absolute;
				right: 3.2rem;
				display: inline-block;
				color: var(--header-title-color, #000);
			}
		}
		
	}
</style>