aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://18.167.251.121:10003/aidlab/lanecarford_front
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
Details

Browse Source
This commit is contained in:
李志鹏
2025-12-23 17:29:56 +08:00
parent 70cf624d88 a629a08e66
commit 1a52eaa3c3
20 changed files with 243 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/female_thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
src/assets/images/male_thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

2
src/components/HeaderTitle.vue
View File

@@ -3,7 +3,7 @@
const router = useRouter()
defineProps({
title: { type: String, default: 'AI STYLING ASSISTANT' }
title: { type: String, default: 'STYLING ASSISTANT' }
})
const emit = defineEmits(['clickReturn', 'clickProfile'])

129
src/router/index.ts
View File

@@ -1,16 +1,16 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useGenerateStore } from '@/stores/modules/generate'
const VerifyIDs = (num: number) => {
return true
return true
const ids = [
!!useGenerateStore().customerId,
!!useGenerateStore().visitRecordId,
!!useGenerateStore().styleId,
// !!useGenerateStore().modelPhotoId,
true,
!!useGenerateStore().originalTryOnId,
];
return ids.splice(0, num).every(id => id) ? true : "/stylist/customer";
!!useGenerateStore().customerId,
!!useGenerateStore().visitRecordId,
!!useGenerateStore().styleId,
// !!useGenerateStore().modelPhotoId,
true,
!!useGenerateStore().originalTryOnId
]
return ids.splice(0, num).every((id) => id) ? true : '/stylist/customer'
}
/**
@@ -48,8 +48,8 @@ const router = createRouter({
component: () => import('@/views/login/LoginPage.vue')
},
{
path:'/reset',
name:'ResetPage',
path: '/reset',
name: 'ResetPage',
component: () => import('@/views/login/ResetPage.vue')
},
{
@@ -62,16 +62,16 @@ const router = createRouter({
name: 'WelcomePage',
component: () => import('@/views/login/WelcomePage.vue')
},
{
path: '/customer',
name: 'customer',
component: () => import('@/views/login/customer.vue'),
},
{
path: '/customer',
name: 'customer',
component: () => import('@/views/login/customer.vue')
},
{
path: '/asistant',
name: 'asistant',
component: () => import('../views/asistant/index.vue'),
meta: { cache: true, verify: ()=> VerifyIDs(2) }
meta: { cache: true, verify: () => VerifyIDs(2) }
},
{
path: '/workshop',
@@ -82,115 +82,114 @@ const router = createRouter({
// path: '/workshop',
// redirect: '/workshop/selectStyle'
// },
{
path: '/workshop/home',
name: 'Home',
component: () => import('@/views/Workshop/home.vue')
},
{
path: '/workshop/homeNav',
name: 'HomeNav',
component: () => import('@/views/Workshop/homeNav.vue')
},
{
path: '/workshop/stylist',
name: 'StylistPage',
redirect: '/workshop/stylist/index',
component: () => import('@/views/stylist/container.vue'),
children: [
{
path: 'index',
name: 'index',
component: () => import('@/views/stylist/index.vue'),
meta: { verify: ()=> VerifyIDs(2) }
},
{
path: 'sex',
name: 'sex',
component: () => import('@/views/stylist/sex.vue'),
meta: { verify: ()=> VerifyIDs(2) }
},
{
path: 'dressfor',
name: 'dressfor',
component: () => import('@/views/stylist/dressfor.vue'),
meta: { verify: ()=> VerifyIDs(2) }
},
]
},
{
path: '/workshop/home',
name: 'Home',
component: () => import('@/views/Workshop/home.vue')
},
{
path: '/workshop/homeNav',
name: 'HomeNav',
component: () => import('@/views/Workshop/homeNav.vue')
},
{
path: '/workshop/stylist',
name: 'StylistPage',
redirect: '/workshop/stylist/index',
component: () => import('@/views/stylist/container.vue'),
children: [
{
path: 'index',
name: 'index',
component: () => import('@/views/stylist/index.vue'),
meta: { verify: () => VerifyIDs(2) }
},
{
path: 'sex',
name: 'sex',
component: () => import('@/views/stylist/sex.vue'),
meta: { verify: () => VerifyIDs(2) }
},
{
path: 'dressfor',
name: 'dressfor',
component: () => import('@/views/stylist/dressfor.vue'),
meta: { verify: () => VerifyIDs(2) }
}
]
},
{
path: '/workshop/selectStyle',
name: 'selectStyle',
component: () => import('../views/Workshop/selectStyle.vue'),
meta: { verify: ()=> VerifyIDs(2) }
meta: { verify: () => VerifyIDs(2) }
},
{
path: '/workshop/selectModel',
name: 'SelectModel',
component: () => import('../views/Workshop/selectModel.vue'),
meta: { verify: ()=> VerifyIDs(3) }
meta: { verify: () => VerifyIDs(3) }
},
{
path: '/workshop/product',
name: 'product',
component: () => import('../views/Workshop/product.vue'),
meta: { verify: ()=> VerifyIDs(4) }
meta: { verify: () => VerifyIDs(4) }
},
{
// 推荐try on
path: '/workshop/recommended',
name: 'recommended',
component: () => import('../views/Workshop/recommended.vue'),
meta: { verify: ()=> VerifyIDs(5) }
meta: { verify: () => VerifyIDs(5) }
},
{
// 上传照片1
path: '/workshop/uploadFace',
name: 'uploadFace',
component: () => import('../views/Workshop/uploadFace1.vue'),
meta: { verify: ()=> VerifyIDs(5) }
meta: { verify: () => VerifyIDs(5) }
},
{
// 上传照片2
path: '/workshop/uploadFace2',
name: 'uploadFace2',
component: () => import('../views/Workshop/uploadFace2.vue'),
meta: { verify: ()=> VerifyIDs(5) }
meta: { verify: () => VerifyIDs(5) }
},
{
// 自定义创作
path: '/workshop/customize',
name: 'customize',
component: () => import('../views/Workshop/customize.vue'),
meta: { verify: ()=> VerifyIDs(5) }
meta: { verify: () => VerifyIDs(5) }
},
{
// library
path: '/workshop/library',
name: 'library',
component: () => import('../views/Workshop/library.vue'),
meta: { verify: ()=> VerifyIDs(2) }
meta: { verify: () => VerifyIDs(2) }
},
{
path: '/workshop/profile',
name: 'profile',
component: () => import('../views/Workshop/profile.vue'),
meta: { verify: ()=> VerifyIDs(1) }
meta: { verify: () => VerifyIDs(1) }
},
{
// creation
path: '/workshop/creation',
name: 'creation',
component: () => import('../views/Workshop/creation/index.vue'),
meta: { verify: ()=> VerifyIDs(2) }
meta: { verify: () => VerifyIDs(2) }
},
{
// 完成创建
path: '/workshop/end',
name: 'end',
component: () => import('../views/Workshop/end.vue'),
meta: { verify: ()=> VerifyIDs(2) }
meta: { verify: () => VerifyIDs(2) }
}
]
}

3
src/stores/modules/generate.ts
View File

@@ -2,6 +2,7 @@
import { defineStore } from 'pinia'
import MyEvent from '@/utils/myEvent'
MyEvent.add('clear-generate-state', () => useGenerateStore().clearGenerateData())
MyEvent.add('clear-client-state', () => useGenerateStore().clearCustomerInfo())
export const useGenerateStore = defineStore({
id: 'generate', // 必须指明唯一的pinia仓库的id
@@ -176,7 +177,7 @@ export const useGenerateStore = defineStore({
this.updatePhotoInfo({})
this.clearCustomizeInfo()
this.clearCustomizeInfoDemo()
this.clearCustomerInfo()
// this.clearCustomerInfo()
this.setSessionId('')
},
setCustomerInfo(data: any) {

7
src/stores/modules/userInfo.ts
View File

@@ -9,7 +9,8 @@ export const useUserInfoStore = defineStore('userInfo', () => {
token: '',
generateParams: {
stylist: '',
sex: ''
sex: '',
stylistImage: ''
}
})
@@ -37,7 +38,8 @@ export const useUserInfoStore = defineStore('userInfo', () => {
const resetGenerateParams = () => {
state.value.generateParams = {
stylist: '',
sex: ''
sex: '',
stylistImage: ''
}
}
@@ -49,6 +51,7 @@ export const useUserInfoStore = defineStore('userInfo', () => {
removeLocal('token')
resetGenerateParams()
MyEvent.emit('clear-generate-state')
MyEvent.emit('clear-client-state')
MyEvent.emit('clearAllCache')
resolve('')
})

2
src/views/Workshop/creation/creation-list.vue
View File

@@ -10,6 +10,7 @@
cancelTryOnEffectFavorite
} from '@/api/workshop'
import { useRouter } from 'vue-router'
import MyEvent from '@/utils/myEvent'
const router = useRouter()
const emit = defineEmits(['view-type'])
const query = computed(() => router.currentRoute.value.query)
@@ -243,6 +244,7 @@
hGenerateStore.style.url = selectedItem.url
// selectedItem.isFavorite
}
MyEvent.emit('clear-generate-state')
router.push({ name: 'HomeNav', query: { flowType: nav.flowType } })
} else {
router.push({ name: 'end' })

77
src/views/Workshop/product.vue
View File

@@ -5,6 +5,7 @@ import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
import { useGenerateStore, useHGenerateStore } from '@/stores'
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite, addTryOnEffectComment } from '@/api/workshop'
import { FlowType, IsHistoryFlow } from '@/types/enum'
import gradientButton from '@/components/gradientButton.vue'
const router = useRouter()
//const props = defineProps({
@@ -64,7 +65,6 @@ const startGenerate = ()=>{
generateStore.originalTryOn.id = res.id
generateStore.originalTryOn.tryOnUrl = res.tryOnUrl
// generateStore.useStyleGenerate()//生成后需要对选择衣服页面设置不可选中样式
generateStore.setIsGenerate(false)
generateStore.clearCustomizeInfo()
}).catch((error)=>{
@@ -121,7 +121,7 @@ const handleSubmit = ()=>{
onMounted(() => {
emit('view-type', 1)
if (generateStore.isGenerate) {
if (!generateStore.originalTryOn.id) {
startGenerate()
}
})
@@ -134,7 +134,7 @@ const { isLoading } = toRefs(data);
<div class="product" v-if="!isLoading">
<div class="text">
<div class="title">
Go with this Look?
Generate Result
</div>
</div>
<div class="selectContent">
@@ -150,14 +150,25 @@ const { isLoading } = toRefs(data);
<div class="operation">
<div @click="setLike"><SvgIcon :name="`love_${generateStore.originalTryOn.isLike ? '1' : '0'}`" size="35" /></div>
<div @click="feedback"><SvgIcon name="pen" size="40" /></div>
<div @click="startGenerate"><SvgIcon name="reload" size="35" /></div>
<!-- <div><SvgIcon name="download" size="35" /></div> -->
</div>
</div>
</div>
<div class="again">
<!-- <div @click="changeModel">Change Model</div> -->
<button class="flex flex-center" @click="onContinue" style="margin-left: auto;">Continue</button>
<div class="btn">
<div class="btnItem style1" @click.stop="startGenerate()">
<gradientButton>
<template #content>
<div class="text">
<span class="icon">
<SvgIcon name="reTry" size="40" />
</span>
Re-try
</div>
</template>
</gradientButton>
</div>
<div class="btnItem style2" @click.stop="onContinue">Continue</div>
</div>
</div>
</div>
@@ -190,18 +201,18 @@ const { isLoading } = toRefs(data);
<style lang="less" scoped>
.product{
width: 100%;
// height: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
> .text{
text-align: center;
width: 100%;
margin-top: 4.3rem;
margin-top: 4rem;
> .title{
font-family: satoshiBold;
font-weight: 700;
font-size: 9.6rem;
font-size: 8.6rem;
line-height: 124%;
color: #000;
}
@@ -210,7 +221,7 @@ const { isLoading } = toRefs(data);
flex: 1;
overflow-y: auto;
padding: 0 14.1rem;
margin-top: 4.8rem;
margin-top: 4.3rem;
> .history{
width: 30.2rem;
height: 6.52rem;
@@ -229,7 +240,7 @@ const { isLoading } = toRefs(data);
}
}
> .modelBox{
margin-top: 2.5rem;
margin-top: 4.4rem;
> .model{
border: .2rem solid #D9D9D9;
// height: 110rem;
@@ -262,24 +273,36 @@ const { isLoading } = toRefs(data);
}
}
}
> .again{
margin-top: 4.4rem;
> .btn{
display: flex;
gap: 6.6rem;
justify-content: center;
> button{
border-radius: .7rem;
border: 3px solid #000;
background-color: #000;
text-align: center;
color: #fff;
margin-top: 5.2rem;
> div {
border-radius: .96rem;
width: 33.7rem;
font-size: 4.8rem;
font-family: satoshiMedium;
font-size: 3.6rem;
width: 24.6rem;
line-height: 6.7rem;
height: 6.7rem;
box-sizing: border-box;
&:last-child{
margin-right: 0;
line-height: 9.2rem;
display: flex;
justify-content: center;
&.style1{
--borderRadius: .96rem;
--borderWidth: 2px;
.text{
width: 100%;
text-align: center;
> .icon{
left: 4rem;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
}
}
&.style2{
color: #fff;
background-color: #000;
}
}
}

16
src/views/Workshop/selectStyle.vue
View File

@@ -24,14 +24,14 @@ const hGenerateStore = useHGenerateStore()
const query = computed(() => route.query)
const isHistoryFlow = computed(() => IsHistoryFlow(query.value.flowType))
const isLoading = ref(false)
const loadingTitle= ref('Analyzing the Outfit...')
// const loadingTitle = computed(()=>{
// let str = ''
// if(!select.value.status)str = 'Analyzing the Outfit...'
// if(select.value.status == 'RUNNING')str = 'Generating Results...'
// if(select.value.status == 'PENDING')str = 'Almost there...'
// return str
// })
// const loadingTitle= ref('Analyzing the Outfit...')
const loadingTitle = computed(()=>{
let str = ''
if(!select.value.status)str = 'Analyzing the Outfit...'
if(select.value.status == 'RUNNING')str = 'Generating Results...'
if(select.value.status == 'PENDING')str = 'Almost there...'
return str
})
let data = reactive({
select:computed(()=>generateStore.style),

4
src/views/asistant/components/GenerateLoading.vue
View File

@@ -68,7 +68,7 @@ const setTl1 = ()=>{
nextTick(()=>{
let el = dotBox.value
let width = el.offsetWidth + el.parentElement.offsetWidth
let time = el.parentElement.offsetWidth / 35
let time = el.parentElement.offsetWidth / el.offsetWidth / 2
console.log(time,width)
tl1 = gsap.timeline();
tl1.to(el,time,
@@ -136,7 +136,7 @@ onMounted(() => {
.loading-dot{
height: 100%;
aspect-ratio: 1/1;
aspect-ratio: 1.2/1;
background: radial-gradient(ellipse 150% 150% at center, #ffffff,rgba(255,255,255,.4), transparent);
border-radius: 50%;
position: absolute;

21
src/views/asistant/components/NoticeItem.vue
View File

@@ -2,7 +2,7 @@
<div class="chat-message" :class="{ 'user-message': isMyself, 'ai-message': !isMyself }">
<!-- AI消息显示头像 -->
<div v-if="!isMyself" class="chat-avatar">
<img src="@/assets/images/asistant.png" alt="AI Avatar" />
<img class="avatar" :src="thumb" alt="AI Avatar" />
</div>
<!-- 消息内容 -->
@@ -27,9 +27,15 @@
<script setup lang="ts">
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import { useUserInfoStore } from '@/stores'
const md = new MarkdownIt()
const userInfoStore = useUserInfoStore()
const thumb = computed(() => {
return userInfoStore.state.generateParams.stylistImage
})
// 定义消息类型
interface ChatMessage {
sessionId: string | number
@@ -133,16 +139,17 @@ const actionList: ActionItem[] = [
.chat-avatar {
width: 7.8rem;
height: 7.4rem;
height: 7.8rem;
border-radius: 50%;
margin-right: 1.88rem;
border: .2rem solid #000;
padding: 1.4rem;
overflow: hidden;
// border: 0.2rem solid #000;
// padding: 1.4rem;
img {
width: 4.9rem;
height: 4.9rem;
border-radius: 50%;
width: 100%;
// height: 100%;
// border-radius: 50%;
// object-fit: cover;
}
}

7
src/views/asistant/index.vue
View File

@@ -14,7 +14,7 @@
<div class="footer">
<InputArea @send-message="handleSendMessage" />
<div class="continue flex">
<div class="btn flex flex-center" @click="handleContinue">Continue</div>
<div class="btn flex flex-center" @click="handleContinue">Generate</div>
</div>
</div>
</div>
@@ -272,7 +272,7 @@ const handleContinue = () => {
</script>
<style lang="less" scoped>
.asistant-container {
height: 100vh;
height: 100%;
overflow: hidden;
}
@@ -300,7 +300,8 @@ const handleContinue = () => {
border-radius: 0.7rem;
background-color: #000;
width: 24.6rem;
height: 5.9rem;
height: 6.7rem;
box-sizing: border-box;
}
}
}

29
src/views/login/LoginPage.vue
View File

@@ -2,13 +2,16 @@
<div class="login-page">
<div class="content">
<div class="back-button" @click="goBack">
<SvgIcon name="left" size="50" color="#fff" />
<SvgIcon name="left" size="50" color="#fff" />
</div>
<div class="header">
<div class="title">Log in.</div>
<p class="subtitle">Redefine the styling experience with AI.</p>
<p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
<div class="title">Staff Login.</div>
<p class="subtitle">
<span>Experience our personalised styling journey with</span>
<br />
<span>Lane Crawford.</span>
</p>
</div>
<div class="login-container">
@@ -32,7 +35,11 @@
<img :src="google" class="google-icon" />
Sign in with Google
</div> -->
<GoogleLogin @googelLogin="handleGoogleLogin" ref="googleLoginRef" @click="clickGooleLogin"></GoogleLogin>
<GoogleLogin
@googelLogin="handleGoogleLogin"
ref="googleLoginRef"
@click="clickGooleLogin"
></GoogleLogin>
<div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
</div>
</div>
@@ -183,7 +190,7 @@ const handleSignup = () => {
cursor: pointer;
z-index: 3;
font-size: 3.4rem;
.c-svg{
.c-svg {
width: initial;
height: initial;
}
@@ -191,12 +198,14 @@ const handleSignup = () => {
.header {
margin-top: 1.42rem;
padding-left: 15.5rem;
padding-left: 14.5rem;
padding-right: 14.3rem;
color: white;
font-family: 'satoshiRegular';
.title {
font-size: 11rem;
font-weight: bold;
font-weight: 700;
margin-bottom: 0.8rem;
color: white;
font-family: 'satoshiBold';
@@ -226,11 +235,7 @@ const handleSignup = () => {
position: relative;
width: calc(100% - 28.4rem);
height: 107.8rem;
background: radial-gradient(
100% 100% at 0% 0%,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.2) 100%
);
background: radial-gradient(100% 100% at 0% 0%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
backdrop-filter: blur(35px);
-webkit-backdrop-filter: blur(35px);
-moz-backdrop-filter: blur(35px);

9
src/views/login/ResetPage.vue
View File

@@ -9,9 +9,12 @@
<!-- 标题区域 -->
<div class="header">
<div class="title">Log in.</div>
<p class="subtitle">Redefine the styling experience with AI.</p>
<p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
<div class="title">Staff Login.</div>
<p class="subtitle">
<span>Experience our personalised styling journey with</span>
<br />
<span>Lane Crawford.</span>
</p>
</div>
<div class="login-container">

16
src/views/login/SignupPage.vue
View File

@@ -6,9 +6,8 @@
</div>
<div class="header">
<div class="title">Sign up.</div>
<p class="subtitle">Redefine the styling experience with AI.</p>
<p class="subtitle">Use Styling Angel to speed up your fashion journey.</p>
<div class="title">Staff Sign up.</div>
<p class="subtitle">Start my personalised styling journey with Lane Crawford.</p>
</div>
<div class="login-container">
@@ -30,7 +29,12 @@
<button type="button" class="login-button" @click="handleConfirm">Sign Up</button>
<GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" ref="googleSignupRef" @click="clickGooleLogin" />
<GoogleLogin
text="Sign up with Google"
@googelLogin="handleGoogleSignup"
ref="googleSignupRef"
@click="clickGooleLogin"
/>
</div>
</div>
</div>
@@ -191,7 +195,8 @@ const handleGoogleSignup = async (accessToken: string) => {
.header {
margin-top: 1.42rem;
padding-left: 15.5rem;
padding-left: 14.5rem;
padding-right: 14.3rem;
color: white;
font-family: 'satoshiRegular';
.title {
@@ -281,7 +286,6 @@ const handleGoogleSignup = async (accessToken: string) => {
}
}
.footer {
position: relative;
text-align: center;

19
src/views/login/WelcomePage.vue
View File

@@ -2,10 +2,14 @@
<div class="welcome-page safe-area-top safe-area-bottom">
<div class="content">
<div class="title">
AI STYLING <br />
ASSISTANT
Styling <br />
Assistant
</div>
<p class="subtitle">Redefine the styling experience with AI.</p>
<p class="subtitle">
<span>Experience our personalised styling journey with</span>
<br>
<span> Lane Crawford.</span>
</p>
<div class="btn-container flex">
<div class="log btn" @click="goToLogin">Log in</div>
<div class="sign btn" @click="goToSignup">Sign up</div>
@@ -49,15 +53,16 @@ const goToLogin = () => {
font-weight: 400;
margin-bottom: 31.5rem;
.title {
font-family: 'boskaRegular';
line-height: 93%;
letter-spacing: -0.02em;
font-family: 'satoshiMedium';
line-height: 120%;
// letter-spacing: -0.02em;
}
.subtitle {
font-size: 3.2rem;
font-family: 'satoshiRegular';
margin: 3.2rem 0 6rem;
list-style: 124%;
font-weight: 400;
line-height: 124%;
letter-spacing: 0.08em;
}
.btn-container {

7
src/views/login/customer.vue
View File

@@ -25,8 +25,8 @@
<div class="text">
<div class="form-title">{{ formTitle }}</div>
<div class="description">
<p>Redefine the styling experience with AI.</p>
<p>Use Styling Angel to speed up your fashion journey.</p>
<p>Unlock personalized styling insights.</p>
<p>Enter a client profile to begin curating their next look with Styling Angel.</p>
</div>
</div>
@@ -70,7 +70,6 @@ import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/ap
import Profile from '../Workshop/profile.vue'
import MyEvent from '@/utils/myEvent'
const profileRef = ref<typeof Profile>(null)
const handleOpenProfile = () => {
profileRef.value.open()
@@ -107,6 +106,7 @@ const handleConfirm = async () => {
customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
useUserInfoStore().resetGenerateParams()
generateStore.setCustomerInfo(res)
MyEvent.emit('clear-generate-state')
router.push('/workshop/home')
})
} else {
@@ -213,6 +213,7 @@ const handleBack = (e?: Event) => {
line-height: 8.3rem;
font-size: 4.8rem;
border: 0.2rem solid #fff;
box-sizing: border-box;
}
}
}

5
src/views/stylist/dressfor.vue
View File

@@ -39,6 +39,7 @@
<div class="tag-list short flex flex-justify-center">
<div
class="tag-item"
:class="{ active: item === inputValue }"
v-for="item in tagListShort"
:key="item"
@click="handleClickTag(item)"
@@ -50,6 +51,7 @@
<div
class="tag-item"
v-for="item in tagListLong"
:class="{ active: item === inputValue }"
:key="item"
@click="handleClickTag(item)"
>
@@ -323,6 +325,9 @@ onUnmounted(() => {
text-align: center;
border-radius: 4.6rem;
padding: 0 2.15rem;
&.active{
background-color: #f5f5f5;
}
}
}
}

49
src/views/stylist/index.vue
View File

@@ -4,7 +4,8 @@
<div class="content">
<!-- 标题 -->
<div class="header">
<div class="title">CHOOSE YOUR STYLIST</div>
<div class="title">Choose Stylist.</div>
<div class="sub-title">What style are you looking for? </div>
</div>
<div class="carousel-container" v-show="!showVideo">
@@ -35,7 +36,7 @@
<!-- Continue按钮 -->
<div class="continue-button" @click="handleContinue" v-if="!$route.query?.demo">Continue</div>
<van-dialog
<!-- <van-dialog
class="video-dialog"
:show-confirm-button="false"
:show-cancel-button="false"
@@ -47,7 +48,7 @@
<van-icon name="cross" class="close-icon" />
</div>
<Video ref="videoRef" />
</van-dialog>
</van-dialog> -->
</div>
</template>
@@ -57,7 +58,9 @@ import { useRouter } from 'vue-router'
import Video from './components/Video.vue'
import { useUserInfoStore } from '@/stores'
import male from '@/assets/images/male.png'
import maleThumb from '@/assets/images/male_thumb.png'
import female from '@/assets/images/female.png'
import femaleThumb from '@/assets/images/female_thumb.png'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
@@ -70,28 +73,32 @@ const stylists = ref<any[]>([
value: 'crystal',
name: 'Vera Lo',
description: 'Contemporary, Classic, Simple Silhouettes, Statement Pieces',
image: female
image: female,
thumb: femaleThumb
},
{
id: 2,
value: 'mini',
name: 'Sarah Chen',
description: 'Modern, Edgy, Bold Colors, Street Style',
image: male
image: male,
thumb: maleThumb
},
{
id: 3,
value: 'crystal',
name: 'Emma Wilson',
description: 'Elegant, Feminine, Vintage Inspired, Soft Tones',
image: female
image: female,
thumb: femaleThumb
},
{
id: 4,
value: 'mini',
name: 'Alex Johnson',
description: 'Minimalist, Professional, Neutral Palette, Clean Lines',
image: male
image: male,
thumb: maleThumb
}
])
const currentChoosed = ref(1)
@@ -119,20 +126,22 @@ const handleClickStylist = (item: any) => {
const handleContinue = () => {
const generateParams = userInfoStore.getGenerateParams()
generateParams.stylist =
stylists.value.find((item) => item.id === currentChoosed.value)?.value || ''
const selected = stylists.value.find((item) => item.id === currentChoosed.value)
generateParams.stylist = selected?.value
generateParams.stylistImage = selected?.thumb
userInfoStore.setGenerateParams(generateParams)
router.push('/workshop/stylist/sex')
}
// 监听showVideo变化，关闭时暂停视频
watch(showVideo, (newValue) => {
if (!newValue && videoRef.value) {
videoRef.value.pause()
videoRef.value.reset()
}
})
// watch(showVideo, (newValue) => {
// if (!newValue && videoRef.value) {
// videoRef.value.pause()
// videoRef.value.reset()
// }
// })
</script>
<style scoped lang="less">
@@ -164,11 +173,15 @@ watch(showVideo, (newValue) => {
text-align: center;
margin-bottom: 4rem;
.title {
font-size: 15rem;
font-size: 11rem;
font-weight: 400;
color: white;
font-family: 'boskaRegular';
line-height: 96%;
font-family: 'satoshiBold';
}
.sub-title{
font-family: 'satoshiRegular';
font-size: 4rem;
}
}
@@ -280,7 +293,7 @@ watch(showVideo, (newValue) => {
}
.continue-button {
height: 5.9rem;
height: 6.7rem;
box-sizing: border-box;
position: absolute;
bottom: 6.4rem;

9
src/views/stylist/sex.vue
View File

@@ -55,13 +55,14 @@ const handleSelect = (value: string) => {
background-repeat: no-repeat;
padding: 6rem 12.4rem 0 8.5rem;
.text {
font-family: 'robotoBold';
font-size: 13rem;
font-family: 'satoshiBold';
font-weight: 700;
font-size: 11rem;
line-height: 106%;
}
.desc {
font-family: 'satoshiRegular';
font-size: 6.4rem;
font-size: 4rem;
line-height: 132%;
}
.select-list {
@@ -76,7 +77,7 @@ const handleSelect = (value: string) => {
text-align: center;
font-family: 'satoshiRegular';
font-size: 4.8rem;
width: 29.7rem;
width: 35rem;
height: 8.3rem;
display: flex;
align-items: center;