新增home页面

src/views/Workshop/home.vue

@@ -0,0 +1,99 @@
+<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>