99 lines
2.4 KiB
Vue
99 lines
2.4 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: 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>
|