调整home跳转路径
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
This commit is contained in:
X1627315083
BIN
src/assets/images/homeBg.png
Normal file
BIN
src/assets/images/homeBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 849 KiB |
@@ -3,7 +3,7 @@ import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from
|
|||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
import { showConfirmDialog } from 'vant'
|
import { showConfirmDialog } from 'vant'
|
||||||
import MyEvent from '@/utils/myEvent'
|
import { FlowType } from '@/types/enum'
|
||||||
|
|
||||||
//const props = defineProps({
|
//const props = defineProps({
|
||||||
//})
|
//})
|
||||||
@@ -14,27 +14,12 @@ const emit = defineEmits([
|
|||||||
// const data = reactive({
|
// const data = reactive({
|
||||||
// })
|
// })
|
||||||
|
|
||||||
const clickSwitchVIPID = ()=>{
|
const newJourney = ()=>{
|
||||||
showConfirmDialog({
|
router.push(`/workshop/styList/index?flowType=${FlowType.MAIN}`)
|
||||||
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()
|
const historicalReview = ()=>{
|
||||||
if(flowType == 'main'){
|
router.push(`/workshop/creation?flowType=${FlowType.HISTORICAL}`)
|
||||||
router.push({ name: path })
|
|
||||||
}else{
|
|
||||||
router.push({ name: path, query: { demo: 1 } })
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
@@ -46,29 +31,14 @@ defineExpose({})
|
|||||||
// const { } = toRefs(data);
|
// const { } = toRefs(data);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="homeNavPage">
|
<div class="homePage">
|
||||||
<div class="title">
|
<img class="homeBg" src="@/assets/images/homeBg.png" alt="">
|
||||||
Welcome Back,
|
<div class="button">
|
||||||
What can I help you today?
|
<div class="item" @click="newJourney">New Journey</div>
|
||||||
|
<div class="item" @click="historicalReview">Historical Review</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="navBox">
|
<div class="info">
|
||||||
<div class="navTitle">
|
Powered by AiDLab for Lane Crawford
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -77,46 +47,46 @@ defineExpose({})
|
|||||||
--header-title-background: #fff;
|
--header-title-background: #fff;
|
||||||
--header-title-height: 12rem !important;
|
--header-title-height: 12rem !important;
|
||||||
}
|
}
|
||||||
.homeNavPage{
|
.homePage{
|
||||||
> .title{
|
position: relative;
|
||||||
padding: 0 8.4rem;
|
flex: 1;
|
||||||
font-family: satoshiBold;
|
> .homeBg{
|
||||||
font-weight: 700;
|
position: absolute;
|
||||||
margin-top: 6.8rem;
|
width: 100%;
|
||||||
font-size: 9.6rem;
|
height: 100%;
|
||||||
line-height: 124%;
|
object-fit: cover;
|
||||||
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{
|
> .button{
|
||||||
> .navTitle{
|
margin: 64.3rem auto 0;
|
||||||
padding: 0 8.4rem;
|
font-family: satoshiBold;
|
||||||
font-family: satoshiBold;
|
font-size: 4.6rem;
|
||||||
font-weight: 700;
|
color: #fff;
|
||||||
font-size: 5.2rem;
|
text-align: center;
|
||||||
margin: 6.3rem 0;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
> .navList{
|
align-items: center;
|
||||||
display: flex;
|
> .item{
|
||||||
flex-wrap: wrap;
|
width: 45.6rem;
|
||||||
padding: 0 7.4rem;
|
margin-bottom: 8rem;
|
||||||
gap: 4.8rem;
|
line-height: 13.1rem;
|
||||||
> .item{
|
border: 1.16px solid #FFFFFF;
|
||||||
// width: 44.2rem;
|
backdrop-filter: blur(40.50761795043945px);
|
||||||
// height: 41.6rem;
|
background: radial-gradient(100% 100% at 0% 0%, rgba(115, 115, 115, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
|
||||||
height: auto;
|
&:last-child{
|
||||||
width: calc(50% - 4.8rem / 2);
|
margin-bottom: 0;
|
||||||
> img{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> .info{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7rem;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-family: satoshiRegular;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user