122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
const router = useRouter()
|
||
|
|
import { showConfirmDialog } from 'vant'
|
||
|
|
import MyEvent from '@/utils/myEvent'
|
||
|
|
|
||
|
|
//const props = defineProps({
|
||
|
|
//})
|
||
|
|
const emit = defineEmits([
|
||
|
|
'view-type'
|
||
|
|
])
|
||
|
|
|
||
|
|
// const data = reactive({
|
||
|
|
// })
|
||
|
|
|
||
|
|
const clickSwitchVIPID = ()=>{
|
||
|
|
showConfirmDialog({
|
||
|
|
title: 'Switch VIP ID?',
|
||
|
|
message: 'You have unsaved changes. Your progress will be lost.',
|
||
|
|
confirmButtonText: 'Yes',
|
||
|
|
cancelButtonText: 'Cancel',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
MyEvent.emit('clear-generate-state')
|
||
|
|
MyEvent.emit('clearAllCache')
|
||
|
|
router.push({ name: 'customer', query: { demo: 1 } })
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
}
|
||
|
|
const openFlow = (path:string,flowType:string)=>{
|
||
|
|
if(flowType == 'clientId')return clickSwitchVIPID()
|
||
|
|
if(flowType == 'main'){
|
||
|
|
router.push({ name: path })
|
||
|
|
}else{
|
||
|
|
router.push({ name: path, query: { demo: 1 } })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
emit('view-type', 1)
|
||
|
|
})
|
||
|
|
onUnmounted(()=>{
|
||
|
|
})
|
||
|
|
defineExpose({})
|
||
|
|
// const { } = toRefs(data);
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<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="openFlow('index','main')">
|
||
|
|
<img src="@/assets/images/nav1.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="item" @click="openFlow('recommended','reinventing')">
|
||
|
|
<img src="@/assets/images/nav2.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="item" @click="openFlow('index','stylist')">
|
||
|
|
<img src="@/assets/images/nav3.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="item" @click="openFlow('','clientId')">
|
||
|
|
<img src="@/assets/images/nav4.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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;
|
||
|
|
height: auto;
|
||
|
|
width: calc(50% - 4.8rem / 2);
|
||
|
|
> img{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|