99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<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: #B3B3B3;
|
|
background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%), linear-gradient(
|
|
344deg, #B3B3B2 16%, #000000 66%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-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> |