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
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
This commit is contained in:
李志鹏
@@ -179,7 +179,7 @@ const onContinue = () => {
|
||||
|
||||
<template>
|
||||
<div class="creation-list">
|
||||
<div class="title" @click="handleOpenShare">Your Creation</div>
|
||||
<div class="title">Your Creation</div>
|
||||
<div class="list">
|
||||
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
|
||||
<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)">
|
||||
@@ -230,7 +230,7 @@ const onContinue = () => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title {
|
||||
font-family: satoshiRegular;
|
||||
font-family: 'satoshiRegular';
|
||||
font-size: 9rem;
|
||||
text-align: center;
|
||||
line-height: 124%;
|
||||
@@ -284,8 +284,9 @@ const onContinue = () => {
|
||||
}
|
||||
> .ai {
|
||||
color: #646464;
|
||||
background: linear-gradient(
|
||||
137.95deg,
|
||||
background: linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5)),
|
||||
linear-gradient(
|
||||
165.5deg,
|
||||
#7a96ac 2.28%,
|
||||
#eaeff3 19.8%,
|
||||
#c2d4e1 32.94%,
|
||||
@@ -293,8 +294,7 @@ const onContinue = () => {
|
||||
#d4dee5 62.15%,
|
||||
#abbdc8 78.69%,
|
||||
#bccad7 95.24%
|
||||
),
|
||||
linear-gradient(0deg, rgba(230, 219, 219, 0.5), rgba(230, 219, 219, 0.5));
|
||||
);
|
||||
}
|
||||
}
|
||||
> .icons {
|
||||
@@ -309,7 +309,7 @@ const onContinue = () => {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 1rem;
|
||||
border: 0.2rem solid #000;
|
||||
border: 0.2rem solid rgba(0, 0, 0, 0.5);
|
||||
--svg-icon-color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -151,7 +151,7 @@ const { isLoading } = toRefs(data);
|
||||
</div>
|
||||
<div class="again">
|
||||
<!-- <div @click="changeModel">Change Model</div> -->
|
||||
<button @click="onContinue" class="general_button smail" style="margin-left: auto;">Continue</button>
|
||||
<button class="flex flex-center" @click="onContinue" style="margin-left: auto;">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,6 +199,7 @@ const { isLoading } = toRefs(data);
|
||||
font-weight: 700;
|
||||
font-size: 9.6rem;
|
||||
line-height: 124%;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
> .selectContent{
|
||||
@@ -261,8 +262,18 @@ const { isLoading } = toRefs(data);
|
||||
margin-top: 4.4rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> div{
|
||||
margin-right: 3.9rem;
|
||||
> button{
|
||||
border-radius: .7rem;
|
||||
border: 3px solid #000;
|
||||
background-color: #000;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -118,14 +118,14 @@ const { styleList, select } = toRefs(data);
|
||||
Select the outfit that matches you the most.
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectContent">
|
||||
<div class="selectContent flex-1">
|
||||
<SelectItem :selectList="styleList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button class="flex flex-center" @click.stop="toProduct">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="footer placeholder"></div> -->
|
||||
<div class="footer">
|
||||
<button class="general_button smail" @click.stop="toProduct">Continue</button>
|
||||
</div>
|
||||
<footer-navigation is-placeholder />
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
@@ -144,40 +144,59 @@ const { styleList, select } = toRefs(data);
|
||||
> .text{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 3.4rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 4.9rem;
|
||||
> .title{
|
||||
font-family: satoshiBold;
|
||||
font-weight: 700;
|
||||
font-size: 9.6rem;
|
||||
line-height: 124%;
|
||||
color: #000;
|
||||
}
|
||||
> .info{
|
||||
font-size: 4rem;
|
||||
font-weight: 400;
|
||||
line-height: 124%;
|
||||
margin-top: 1.3rem;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
.selectContent{
|
||||
padding: 0 4rem;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
// position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// margin-top: 4.4rem;
|
||||
// padding: 4rem 4rem 0 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: 5.6rem;
|
||||
margin-right: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
background-color: #f6f6f6;
|
||||
// position: absolute;
|
||||
// right: 4rem;
|
||||
// bottom: 4rem;
|
||||
height: 6.7rem;
|
||||
// background-color: #f6f6f6;
|
||||
&.placeholder{
|
||||
position: relative;
|
||||
}
|
||||
> button {
|
||||
margin-right: 5rem;
|
||||
// margin-right: 5rem;
|
||||
border-radius: .7rem;
|
||||
border: 3px solid #000;
|
||||
background-color: #000;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: satoshiMedium;
|
||||
font-size: 3.6rem;
|
||||
width: 24.6rem;
|
||||
height: 6.7rem;
|
||||
box-sizing: border-box;
|
||||
line-height: 6.7rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -45,10 +45,10 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button class="sandblasted-blurred" @click="handleUploadFace">
|
||||
<button class="sandblasted-blurred flex flex-center" @click="handleUploadFace">
|
||||
<span>Upload Face</span>
|
||||
</button>
|
||||
<button class="sandblasted-blurred" @click="handleFinish" v-if="!isDemo"><span>Finish</span></button>
|
||||
<button class="sandblasted-blurred flex flex-center" @click="handleFinish" v-if="!isDemo"><span>Finish</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -91,10 +91,14 @@
|
||||
justify-content: center;
|
||||
bottom: 19.7rem;
|
||||
> button {
|
||||
width: 40rem;
|
||||
width: 35rem;
|
||||
height: 8.3rem;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.7rem;
|
||||
margin: 0 1.8rem;
|
||||
&.sandblasted-blurred {
|
||||
border-width: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -296,7 +296,7 @@ const stopRecording = () => {
|
||||
.shortcut-item {
|
||||
font-size: 4.2rem;
|
||||
width: fit-content;
|
||||
font-family: 'robotoBold';
|
||||
font-family: 'robotoRegular';
|
||||
white-space: nowrap;
|
||||
height: 8.1rem;
|
||||
line-height: 8.1rem;
|
||||
@@ -351,7 +351,7 @@ const stopRecording = () => {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 4rem;
|
||||
font-family: 'robotoBold';
|
||||
font-family: 'robotoRegular';
|
||||
font-weight: 400;
|
||||
line-height: 4.8rem; /* 设置行高等于实际渲染高度，实现垂直居中 */
|
||||
padding: 0;
|
||||
@@ -362,7 +362,7 @@ const stopRecording = () => {
|
||||
color: #888;
|
||||
letter-spacing: -0.01em;
|
||||
font-weight: 400;
|
||||
font-family: 'robotoBold';
|
||||
font-family: 'robotoRegular';
|
||||
word-spacing: -5px;
|
||||
line-height: 4.8rem;
|
||||
}
|
||||
@@ -405,7 +405,7 @@ const stopRecording = () => {
|
||||
}
|
||||
|
||||
.recording-text {
|
||||
font-family: 'robotoBold';
|
||||
font-family: 'robotoRegular';
|
||||
font-size: 2.8rem;
|
||||
color: #6d6868;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
@@ -97,11 +97,11 @@ const actionList: ActionItem[] = [
|
||||
align-items: flex-start;
|
||||
.message-text {
|
||||
font-size: 4.2rem;
|
||||
font-family: 'robotoBold';
|
||||
font-family: 'robotoRegular';
|
||||
line-height: 121%;
|
||||
font-weight: 400;
|
||||
background-color: #efefef;
|
||||
padding: 4.95rem 3.95rem;
|
||||
padding: 3.43rem 4.35rem;
|
||||
}
|
||||
|
||||
&.user-message {
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
</div>
|
||||
<div class="footer" v-if="!isLoading">
|
||||
<InputArea @send-message="handleSendMessage" />
|
||||
<div class="continue">
|
||||
<button class="btn" @click="handleContinue">Continue</button>
|
||||
<div class="continue flex">
|
||||
<div class="btn flex flex-center" @click="handleContinue">Continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -117,7 +117,7 @@ const handleFetchMessage = (message: string) => {
|
||||
const params = {
|
||||
message: message,
|
||||
sessionId: sessionId.value,
|
||||
gender: 'male'
|
||||
gender: userInfoStore.state.generateParams.sex
|
||||
}
|
||||
|
||||
// 创建AI消息对象
|
||||
@@ -306,8 +306,9 @@ const handleContinue = () => {
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
padding: 2.6rem 4.5rem;
|
||||
flex-direction: row-reverse;
|
||||
.btn {
|
||||
border-radius: 7px;
|
||||
border-radius: 0.7rem;
|
||||
background-color: #000;
|
||||
width: 24.6rem;
|
||||
height: 5.9rem;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="login-page">
|
||||
<div class="content">
|
||||
<div class="back-button" @click="goBack">
|
||||
<img src="@/assets/images/arrow_left.png" class="back-icon" />
|
||||
<SvgIcon name="left" size="50" color="#fff" />
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
@@ -176,22 +176,16 @@ const handleSignup = () => {
|
||||
}
|
||||
|
||||
.back-button {
|
||||
// position: absolute;
|
||||
// top: 2rem;
|
||||
// left: 2rem;
|
||||
margin-top: 2.4rem;
|
||||
margin-left: 6.1rem;
|
||||
width: 2rem;
|
||||
height: 3.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
font-size: 3.4rem;
|
||||
.back-icon {
|
||||
width: 2.83rem;
|
||||
height: 3.47rem;
|
||||
.c-svg{
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -234,8 +228,8 @@ const handleSignup = () => {
|
||||
height: 107.8rem;
|
||||
background: radial-gradient(
|
||||
100% 100% at 0% 0%,
|
||||
rgba(115, 115, 115, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
rgba(0, 0, 0, 0.4) 0%,
|
||||
rgba(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
backdrop-filter: blur(35px);
|
||||
-webkit-backdrop-filter: blur(35px);
|
||||
|
||||
@@ -72,8 +72,14 @@ const goToLogin = () => {
|
||||
border: 1px solid #fff;
|
||||
text-align: center;
|
||||
// padding: 2rem 1.3rem;
|
||||
box-sizing: content-box;
|
||||
box-sizing: border-box;
|
||||
font-family: 'satoshiRegular';
|
||||
backdrop-filter: blur(5.27rem);
|
||||
-webkit-backdrop-filter: blur(5.27rem);
|
||||
-moz-backdrop-filter: blur(5.27rem);
|
||||
-ms-backdrop-filter: blur(5.27rem);
|
||||
-o-backdrop-filter: blur(5.27rem);
|
||||
box-shadow: 1.9rem 2.3rem 1.66rem 0.23rem -0.3rem 0.23rem #36180c40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
|
||||
<template v-if="pageMode === 'entry'">
|
||||
<div class="setting flex flex-between">
|
||||
<SvgIcon name="left" size="70" @click="handleBack" />
|
||||
<SvgIcon name="left" size="70" @click="handleBack" />
|
||||
|
||||
<SvgIcon name="setting" size="70" />
|
||||
</div>
|
||||
@@ -13,13 +13,17 @@
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="form-container">
|
||||
<div class="back-container flex flex-center" @click="handleBack">
|
||||
<SvgIcon name="left" size="70" @click="handleBack" />
|
||||
<div class="menu flex flex-between">
|
||||
<div class="back-container flex flex-between" @click="handleBack">
|
||||
<SvgIcon name="left" size="70" />
|
||||
</div>
|
||||
<SvgIcon name="setting" size="70" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="form-title">Customer ID</div>
|
||||
<div class="description">
|
||||
Redefine the styling experience with AI. Use<br />Styling Angel to speed up your fashion<br />journey.
|
||||
Redefine the styling experience with AI. Use<br />Styling Angel to speed up your
|
||||
fashion<br />journey.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -100,12 +104,12 @@ const handleConfirm = async () => {
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
|
||||
// background: url('@/assets/images/no_shouder_bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
&.form-mode {
|
||||
background: url('@/assets/images/has_shouder_bg.png') no-repeat center center;
|
||||
background: url('@/assets/images/has_shouder_bg.png') no-repeat center center/cover;
|
||||
padding-top: 15.9rem;
|
||||
}
|
||||
|
||||
@@ -149,25 +153,19 @@ const handleConfirm = async () => {
|
||||
}
|
||||
|
||||
.form-container {
|
||||
.back-container {
|
||||
width: 7.3rem;
|
||||
height: 7.3rem;
|
||||
// border: 0.2rem solid #fff;
|
||||
border-radius: 1.8rem;
|
||||
font-size: 4.3rem;
|
||||
// background: rgba(0, 0, 0, 0.2);
|
||||
// backdrop-filter: blur(20px);
|
||||
// -webkit-backdrop-filter: blur(20px);
|
||||
// -moz-backdrop-filter: blur(20px);
|
||||
// -ms-backdrop-filter: blur(20px);
|
||||
// -o-backdrop-filter: blur(20px);
|
||||
margin-left: 7rem;
|
||||
position: relative;
|
||||
// box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 #000000;
|
||||
.menu {
|
||||
padding: 0 4.8rem 0 8.4rem;
|
||||
.back-container {
|
||||
width: 7.3rem;
|
||||
height: 7.3rem;
|
||||
border-radius: 1.8rem;
|
||||
font-size: 4.3rem;
|
||||
position: relative;
|
||||
|
||||
.back-icon {
|
||||
width: 2.08rem;
|
||||
height: 3.47rem;
|
||||
.back-icon {
|
||||
width: 2.08rem;
|
||||
height: 3.47rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text {
|
||||
@@ -193,8 +191,8 @@ const handleConfirm = async () => {
|
||||
border: 0.2rem solid #ffffff;
|
||||
border-radius: 4.7rem;
|
||||
margin: 0 14.2rem;
|
||||
// padding: 8.2rem 7.9rem;
|
||||
padding: 11rem 7.5rem;
|
||||
// padding: 8.2rem 7.9rem;
|
||||
padding: 11rem 7.5rem;
|
||||
margin-top: 11rem;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
@@ -206,10 +204,10 @@ const handleConfirm = async () => {
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
backdrop-filter: blur(35px);
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 6.8rem;
|
||||
margin-bottom: 6.8rem;
|
||||
&.email {
|
||||
margin-bottom: 6.8rem;
|
||||
}
|
||||
@@ -265,4 +263,7 @@ const handleConfirm = async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.c-svg {
|
||||
width: initial;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -169,6 +169,10 @@ onUnmounted(() => {
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.c-svg{
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
.dressfor-container {
|
||||
height: calc(100vh - 12rem - 14.9rem);
|
||||
overflow: hidden;
|
||||
@@ -203,7 +207,7 @@ onUnmounted(() => {
|
||||
width: 59.8rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border: 2px solid #5f5f5f;
|
||||
// border: 2px solid #5f5f5f;
|
||||
border-radius: 1rem;
|
||||
color: #222222;
|
||||
font-size: 3.2rem;
|
||||
|
||||
@@ -10,9 +10,8 @@
|
||||
|
||||
<div class="carousel-container" v-show="!showVideo">
|
||||
<div class="nav-arrow left" @click="handleChangeSwiper('prev')">
|
||||
|
||||
<!-- <van-icon name="arrow-left" color="#fff" /> -->
|
||||
<SvgIcon name="left" size="70" color="#fff" />
|
||||
<SvgIcon name="left" size="70" color="#fff" />
|
||||
</div>
|
||||
|
||||
<van-swipe touchable ref="swiperRef" @change="handleChangeCurrent">
|
||||
@@ -30,7 +29,7 @@
|
||||
</van-swipe>
|
||||
|
||||
<div class="nav-arrow right" @click="handleChangeSwiper('next')">
|
||||
<van-icon name="arrow" color="#fff" />
|
||||
<SvgIcon class="arrow-right" name="left" size="70" color="#fff" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,7 +102,6 @@ const swiperRef = ref<any>(null)
|
||||
const showVideo = ref<boolean>(false)
|
||||
const videoRef = ref<any>(null)
|
||||
|
||||
|
||||
const handleChangeCurrent = (index: number) => {
|
||||
currentChoosed.value = stylists.value[index].id
|
||||
}
|
||||
@@ -118,7 +116,7 @@ const handleChangeSwiper = (type: 'next' | 'prev') => {
|
||||
|
||||
const handleClickStylist = (item: any) => {
|
||||
console.log(item)
|
||||
// showVideo.value = true
|
||||
// showVideo.value = true
|
||||
}
|
||||
|
||||
const handleContinue = () => {
|
||||
@@ -202,13 +200,16 @@ watch(showVideo, (newValue) => {
|
||||
z-index: 3;
|
||||
box-shadow: 0 2rem 2.5rem rgba(0, 0, 0, 0.25), 0 0 6rem rgba(0, 0, 0, 0.25);
|
||||
border: 0.1rem solid rgba(255, 255, 255, 0.2);
|
||||
filter: drop-shadow(.2rem 4px 6.6px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0.2rem 4px 6.6px rgba(0, 0, 0, 0.25));
|
||||
&.left {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 1rem;
|
||||
.arrow-right {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,7 +220,7 @@ watch(showVideo, (newValue) => {
|
||||
.swiper-container {
|
||||
width: 66rem;
|
||||
height: 100rem;
|
||||
border: .2rem solid #fff;
|
||||
border: 0.2rem solid #fff;
|
||||
border-radius: 1.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -281,11 +282,13 @@ watch(showVideo, (newValue) => {
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
height: 5.9rem;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 6.4rem;
|
||||
right: 7.6rem;
|
||||
padding: 1.2rem 2.4rem;
|
||||
border: 1px solid #fff;
|
||||
padding: 0 3.4rem;
|
||||
border: 0.3rem solid #fff;
|
||||
border-radius: 1rem;
|
||||
color: white;
|
||||
font-size: 4rem;
|
||||
@@ -293,6 +296,8 @@ watch(showVideo, (newValue) => {
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
font-family: 'satoshiRegular';
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.van-overlay) {
|
||||
@@ -326,12 +331,6 @@ watch(showVideo, (newValue) => {
|
||||
inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.2rem);
|
||||
box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.5),
|
||||
inset 0 0.2rem 0.4rem rgba(255, 255, 255, 0.15), inset 0 -0.2rem 0.4rem rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: white;
|
||||
font-size: 3.64rem;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<div class="select-list">
|
||||
<div
|
||||
class="option"
|
||||
class="option flex flex-center"
|
||||
v-for="option in options"
|
||||
:key="option.value"
|
||||
@click="handleSelect(option.value)"
|
||||
@@ -23,7 +23,7 @@ import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import {useUserInfoStore} from '@/stores'
|
||||
import { useUserInfoStore } from '@/stores'
|
||||
const router = useRouter()
|
||||
const userInfoStore = useUserInfoStore()
|
||||
|
||||
@@ -33,11 +33,14 @@ const options = ref<any[]>([
|
||||
])
|
||||
|
||||
const handleSelect = (value: string) => {
|
||||
if (value === 'male') {// 男性开发中
|
||||
return showToast(`This feature is currently under development. Please select the 'Female' option for now.`)
|
||||
if (value === 'male') {
|
||||
// 男性开发中
|
||||
return showToast(
|
||||
`This feature is currently under development. Please select the 'Female' option for now.`
|
||||
)
|
||||
}
|
||||
const generateParams = userInfoStore.getGenerateParams()
|
||||
generateParams.sex = value
|
||||
generateParams.sex = value
|
||||
userInfoStore.setGenerateParams(generateParams)
|
||||
router.push('/stylist/dressfor')
|
||||
}
|
||||
@@ -71,12 +74,24 @@ const handleSelect = (value: string) => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.option {
|
||||
// flex: 1;
|
||||
// frosted glass style
|
||||
text-align: center;
|
||||
font-family: 'satoshiRegular';
|
||||
font-size: 6.4rem;
|
||||
font-size: 4.8rem;
|
||||
width: 29.7rem;
|
||||
border: .2rem solid #fff;
|
||||
height: 8.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: .2rem;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 0.2rem solid #fff;
|
||||
backdrop-filter: blur(95px);
|
||||
-webkit-backdrop-filter: blur(95px);
|
||||
-moz-backdrop-filter: blur(95px);
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user