<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

//const props = defineProps({
//})
const emit = defineEmits([
	'view-type'
])

// const data = reactive({
// })

onMounted(()=>{
	emit('view-type', 1)
})
onUnmounted(()=>{
})
defineExpose({})
// const {  } = toRefs(data);
</script>
<template>
	<header-title style-type="2" />
	<div class="homeNavPage">
		<div class="title">
			Welcome Back,
			What can I help you today?
		</div>
		<div class="navBox">
			<div class="navTitle">
				Explore
			</div>
			<div class="navList">
				<div class="item" @click="()=>router.push('/stylist/index')">
					<img src="@/assets/images/nav1.png" alt="">
				</div>
				<div class="item" @click="()=>router.push('/workshop/uploadFace')">
					<img src="@/assets/images/nav2.png" alt="">
				</div>
				<div class="item" @click="()=>router.push('/stylist/index')">
					<img src="@/assets/images/nav3.png" alt="">
				</div>
				<div class="item" @click="()=>router.push('/stylist/customer')">
					<img src="@/assets/images/nav4.png" alt="">
				</div>
			</div>
		</div>
	</div>
	<footer-navigation />
</template>
<style lang="less" scoped>
	.header-title {
		--header-title-background: #fff;
		--header-title-height: 12rem !important;
	}
	.homeNavPage{
		> .title{
			padding: 0 8.4rem;
			font-family: satoshiBold;
			font-weight: 700;
			margin-top: 6.8rem;
			font-size: 9.6rem;
			line-height: 124%;
			background: radial-gradient(99.56% 47.68% at 99.56% 93.08%, #E6E6E6 0%, #443E37 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
			linear-gradient(120.09deg, #B3B3B3 0%, rgba(255, 255, 255, 0) 35.41%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent; /* 文字本身透明，显示渐变背景 */
			background-clip: text;
		}
		> .navBox{
			> .navTitle{
				padding: 0 8.4rem;
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 5.2rem;
				margin: 6.3rem 0;
			}
			> .navList{
				display: flex;
				flex-wrap: wrap;
				padding: 0 7.4rem;
				gap: 4.8rem;
				> .item{
					width: 44.2rem;
					height: 41.6rem;
					> img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}
</style>