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:
李志鹏
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'
|
||||
const router = useRouter()
|
||||
import { showConfirmDialog } from 'vant'
|
||||
import MyEvent from '@/utils/myEvent'
|
||||
import { FlowType } from '@/types/enum'
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -14,27 +14,12 @@ const emit = defineEmits([
|
||||
// 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 newJourney = ()=>{
|
||||
router.push(`/workshop/styList/index?flowType=${FlowType.MAIN}`)
|
||||
}
|
||||
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 } })
|
||||
}
|
||||
|
||||
const historicalReview = ()=>{
|
||||
router.push(`/workshop/creation?flowType=${FlowType.HISTORY}`)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
@@ -46,29 +31,14 @@ defineExpose({})
|
||||
// const { } = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="homeNavPage">
|
||||
<div class="title">
|
||||
Welcome Back,
|
||||
What can I help you today?
|
||||
<div class="homePage">
|
||||
<img class="homeBg" src="@/assets/images/homeBg.png" alt="">
|
||||
<div class="button">
|
||||
<div class="item" @click="newJourney">New Journey</div>
|
||||
<div class="item" @click="historicalReview">Historical Review</div>
|
||||
</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 class="info">
|
||||
Powered by AiDLab for Lane Crawford
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -77,46 +47,46 @@ defineExpose({})
|
||||
--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;
|
||||
.homePage{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
> .homeBg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
> .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;
|
||||
}
|
||||
> .button{
|
||||
margin: 64.3rem auto 0;
|
||||
font-family: satoshiBold;
|
||||
font-size: 4.6rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .item{
|
||||
width: 45.6rem;
|
||||
margin-bottom: 8rem;
|
||||
line-height: 13.1rem;
|
||||
border: 1.16px solid #FFFFFF;
|
||||
backdrop-filter: blur(2.5rem);
|
||||
background: radial-gradient(100% 100% at 0% 0%, rgba(115, 115, 115, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .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>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
|
||||
import { onMounted, onUnmounted, reactive, ref, computed, onActivated } from "vue";
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
import { showConfirmDialog } from 'vant'
|
||||
@@ -11,6 +11,9 @@ const emit = defineEmits([
|
||||
'view-type'
|
||||
])
|
||||
|
||||
const navList = ref([])
|
||||
const navDisabledList = ref([])
|
||||
|
||||
// const data = reactive({
|
||||
// })
|
||||
|
||||
@@ -28,17 +31,50 @@ const clickSwitchVIPID = ()=>{
|
||||
})
|
||||
.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 } })
|
||||
}
|
||||
const openFlow = (path:string)=>{
|
||||
const query = computed(() => router.currentRoute.value.query)
|
||||
router.push({ name: path, query: {...query.value} })
|
||||
|
||||
// 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)
|
||||
let nav = [
|
||||
{
|
||||
path: 'selectStyle',
|
||||
imgPath: new URL('@/assets/images/nav1.png',import.meta.url).href,
|
||||
flowTypeList: ['history-tryon','history-ai'],
|
||||
},
|
||||
{
|
||||
path: 'recommended',
|
||||
imgPath: new URL('@/assets/images/nav2.png',import.meta.url).href,
|
||||
flowTypeList: ['history-outfit'],
|
||||
},
|
||||
{
|
||||
path: 'uploadFace',
|
||||
imgPath: new URL('@/assets/images/nav3.png',import.meta.url).href,
|
||||
flowTypeList: ['history-tryon','history-ai'],
|
||||
},
|
||||
{
|
||||
path: 'customize',
|
||||
imgPath: new URL('@/assets/images/nav4.png',import.meta.url).href,
|
||||
flowTypeList: ['history-tryon','history-ai'],
|
||||
},
|
||||
]
|
||||
nav.forEach((item)=>{
|
||||
const query = computed(() => router.currentRoute.value.query)
|
||||
if(item.flowTypeList.includes(query.value?.flowType as string)){
|
||||
navList.value.push(item)
|
||||
}else{
|
||||
navDisabledList.value.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
@@ -56,18 +92,24 @@ defineExpose({})
|
||||
Explore
|
||||
</div>
|
||||
<div class="navList">
|
||||
<div class="item" @click="openFlow('index','main')">
|
||||
<div class="item active" v-for="item in navList" :key="item.path" @click="openFlow(item.path)">
|
||||
<img :src="item.imgPath" alt="">
|
||||
</div>
|
||||
<div class="item" v-for="item in navDisabledList" :key="item.path" @click="openFlow(item.path)">
|
||||
<img :src="item.imgPath" alt="">
|
||||
</div>
|
||||
<!-- <div class="item" @click="openFlow('index')">
|
||||
<img src="@/assets/images/nav1.png" alt="">
|
||||
</div>
|
||||
<div class="item" @click="openFlow('recommended','reinventing')">
|
||||
<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('recommended','reinventing')">
|
||||
<img src="@/assets/images/nav2.png" alt="">
|
||||
</div>
|
||||
<div class="item" @click="openFlow('index','stylist')">
|
||||
<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('index','stylist')">
|
||||
<img src="@/assets/images/nav3.png" alt="">
|
||||
</div>
|
||||
<div class="item" @click="openFlow('','clientId')">
|
||||
<div class="item" :class="{'active': ['history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('','clientId')">
|
||||
<img src="@/assets/images/nav4.png" alt="">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,6 +152,12 @@ defineExpose({})
|
||||
// height: 41.6rem;
|
||||
height: auto;
|
||||
width: calc(50% - 4.8rem / 2);
|
||||
pointer-events: none;
|
||||
opacity: .5;
|
||||
&.active{
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -1,53 +1,48 @@
|
||||
<template>
|
||||
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
|
||||
<div
|
||||
class="customer-container safe-area-top flex flex-column"
|
||||
:class="{ 'form-mode': pageMode === 'form' }"
|
||||
>
|
||||
<div class="setting flex flex-between">
|
||||
<SvgIcon name="left" size="70" @click.stop="handleBack" />
|
||||
<SvgIcon name="setting" size="70" />
|
||||
</div>
|
||||
<template v-if="pageMode === 'entry'">
|
||||
<div class="setting flex flex-between">
|
||||
<SvgIcon name="left" size="70" @click="handleBack" />
|
||||
|
||||
<SvgIcon name="setting" size="70" />
|
||||
</div>
|
||||
<div class="content flex flex-center flex-column">
|
||||
<div class="content flex-1 flex flex-center flex-column">
|
||||
<div class="text">Who is Your Customer?</div>
|
||||
<div class="btn-list flex flex-center">
|
||||
<button class="sandblasted-blurred btn">
|
||||
<span>Create</span>
|
||||
</button>
|
||||
<button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
|
||||
<span>Entry</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="form-container">
|
||||
<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="form-container flex-1 flex flex-column flex-center">
|
||||
<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.
|
||||
<p>Redefine the styling experience with AI.</p>
|
||||
<p>Use Styling Angel to speed up your fashion journey.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-form">
|
||||
<div class="form-field">
|
||||
<label class="field-label">VIP ID</label>
|
||||
<label class="field-label">Nickname</label>
|
||||
<input
|
||||
v-model="customerData.vipId"
|
||||
type="text"
|
||||
placeholder="Enter your ID"
|
||||
placeholder="Enter name"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="form-field email">
|
||||
<label class="field-label">Email Address</label>
|
||||
<input
|
||||
v-model="customerData.email"
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
class="form-input"
|
||||
/>
|
||||
</div> -->
|
||||
<button class="confirm-btn" @click="handleConfirm">Confirm</button>
|
||||
</div>
|
||||
<div class="show-all">Show All</div>
|
||||
<div class="copyright">Powered by AiDLab for Lane Crawford</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -64,10 +59,15 @@ const router = useRouter()
|
||||
const generateStore = useGenerateStore()
|
||||
|
||||
type PageMode = 'form' | 'entry'
|
||||
const pageMode = ref<PageMode>('form')
|
||||
// const pageMode = ref<PageMode>('entry')
|
||||
const pageMode = ref<PageMode>('entry')
|
||||
|
||||
const handleBack = () => {
|
||||
const handleBack = (e?: Event) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
if (pageMode.value === 'form') {
|
||||
pageMode.value = 'entry'
|
||||
return
|
||||
}
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
@@ -94,7 +94,7 @@ const handleConfirm = async () => {
|
||||
// console.log('res', res)
|
||||
generateStore.setCustomerInfo(res)
|
||||
// router.push('/workshop/stylist/index')
|
||||
router.push('/workshop/homeNav')
|
||||
router.push('/workshop/home')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -104,13 +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/cover;
|
||||
padding-top: 15.9rem;
|
||||
}
|
||||
|
||||
.setting {
|
||||
@@ -122,7 +121,8 @@ const handleConfirm = async () => {
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-top: 55.3rem;
|
||||
// margin-top: 55.3rem;
|
||||
row-gap: 12.7rem;
|
||||
.text {
|
||||
font-family: 'satoshiBold';
|
||||
font-size: 13rem;
|
||||
@@ -140,37 +140,22 @@ const handleConfirm = async () => {
|
||||
justify-content: center;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
}
|
||||
.entry-btn {
|
||||
position: absolute;
|
||||
border: 0.2rem solid #fff;
|
||||
bottom: 10.3rem;
|
||||
right: 5.5rem;
|
||||
height: 9rem;
|
||||
width: 27.5rem;
|
||||
line-height: 9rem;
|
||||
font-size: 5.6rem;
|
||||
.btn-list {
|
||||
column-gap: 17rem;
|
||||
.btn {
|
||||
height: 8.3rem;
|
||||
width: 29.7rem;
|
||||
line-height: 8.3rem;
|
||||
font-size: 4.8rem;
|
||||
border: 0.2rem solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
width: 78.8rem;
|
||||
margin: 0 auto;
|
||||
.text {
|
||||
padding-left: 15.2rem;
|
||||
margin-top: 15.4rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
.form-title {
|
||||
@@ -182,18 +167,16 @@ const handleConfirm = async () => {
|
||||
font-size: 3.6rem;
|
||||
line-height: 141%;
|
||||
letter-spacing: 0.08rem;
|
||||
margin-top: 2.7rem;
|
||||
margin: 3.1rem 0 11rem 0;
|
||||
font-family: 'satoshiRegular';
|
||||
}
|
||||
|
||||
.glass-form {
|
||||
height: 68.8rem;
|
||||
height: 68.7rem;
|
||||
width: 78.8rem;
|
||||
border: 0.2rem solid #ffffff;
|
||||
border-radius: 4.7rem;
|
||||
margin: 0 14.2rem;
|
||||
// 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;
|
||||
flex-direction: column;
|
||||
@@ -251,6 +234,18 @@ const handleConfirm = async () => {
|
||||
box-shadow: 0 0.2rem 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
.show-all {
|
||||
margin-top: 4rem;
|
||||
width: 19rem;
|
||||
height: 7.6rem;
|
||||
border-radius: 54px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
line-height: 7.6rem;
|
||||
background-color: #fff;
|
||||
font-size: 3.1rem;
|
||||
font-family: 'satoshiRegular';
|
||||
}
|
||||
.copyright {
|
||||
font-family: 'satoshiRegular';
|
||||
font-size: 3rem;
|
||||
@@ -259,7 +254,7 @@ const handleConfirm = async () => {
|
||||
margin-top: 2.31rem;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin-top: 18.7rem;
|
||||
margin-top: 11.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="dressfor-container flex">
|
||||
<div class="content flex-1 flex flex-column">
|
||||
<!-- <div class="setting flex flex-between">
|
||||
<van-icon name="arrow-left" color="#fff" @click="handleBack" />
|
||||
<SvgIcon name="setting" size="70" />
|
||||
</div> -->
|
||||
<div class="text">What are you dressing for?</div>
|
||||
<div class="loading-container flex flex-center">
|
||||
<Icon class="icon-element" title="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
What are you <br />
|
||||
dressing for?
|
||||
</div>
|
||||
<!-- <div class="start-btn" @click="handleStart">Start</div> -->
|
||||
<div class="chatbox flex flex-center">
|
||||
<div class="input-box flex">
|
||||
@@ -25,7 +27,7 @@
|
||||
class="audio-icon"
|
||||
:name="isRecording ? 'pause' : 'audio'"
|
||||
size="35"
|
||||
color="#6D6868"
|
||||
color="#6D6868"
|
||||
@click="handleClickAudio"
|
||||
/>
|
||||
</div>
|
||||
@@ -33,19 +35,45 @@
|
||||
<SvgIcon class="send-icon" name="send" size="26" color="#000000" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-container flex flex-column flex-center">
|
||||
<div class="tag-list short flex flex-justify-center">
|
||||
<div
|
||||
class="tag-item"
|
||||
v-for="item in tagListShort"
|
||||
:key="item"
|
||||
@click="handleClickTag(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-list long flex flex-justify-center">
|
||||
<div
|
||||
class="tag-item"
|
||||
v-for="item in tagListLong"
|
||||
:key="item"
|
||||
@click="handleClickTag(item)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onUnmounted, nextTick, watch } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import { showToast, closeToast } from 'vant'
|
||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
|
||||
import Icon from '../asistant/components/GenerateLoading.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const tagListShort = ['Silk Slip Dress', 'Business Casual', 'Suggest Shoe Styles']
|
||||
const tagListLong = ['Linen Suit For Summer Gaka', 'Recomment Evening Bags']
|
||||
|
||||
const inputValue = ref('')
|
||||
const isRecording = ref(false)
|
||||
const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
|
||||
@@ -69,11 +97,11 @@ watch(isRecording, async (newVal) => {
|
||||
|
||||
const handleSendMessage = () => {
|
||||
const message = inputValue.value.trim()
|
||||
if(!message){
|
||||
if (!message) {
|
||||
showToast('Please enter a message')
|
||||
return
|
||||
}
|
||||
showToast('Voice-to-text conversion has been completed.')
|
||||
|
||||
router.push({
|
||||
path: '/asistant',
|
||||
query: message ? { message } : undefined
|
||||
@@ -109,6 +137,10 @@ const startRecording = () => {
|
||||
}
|
||||
|
||||
speechRecognition.onstart = () => {
|
||||
showToast({
|
||||
message: 'Listening...',
|
||||
duration: 0
|
||||
})
|
||||
isRecording.value = true
|
||||
}
|
||||
|
||||
@@ -136,6 +168,7 @@ const startRecording = () => {
|
||||
}
|
||||
|
||||
speechRecognition.onend = () => {
|
||||
closeToast()
|
||||
isRecording.value = false
|
||||
lastTranscript = ''
|
||||
isSpeechRecognitionActive = false
|
||||
@@ -143,6 +176,7 @@ const startRecording = () => {
|
||||
|
||||
speechRecognition.onerror = (event: any) => {
|
||||
console.error('Speech recognition error:', event.error)
|
||||
closeToast()
|
||||
isRecording.value = false
|
||||
isSpeechRecognitionActive = false
|
||||
showToast('Speech recognition failed, please try again')
|
||||
@@ -159,6 +193,10 @@ const stopRecording = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickTag = (tag: string) => {
|
||||
inputValue.value = tag
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (speechRecognition && isRecording.value) {
|
||||
speechRecognition.stop()
|
||||
@@ -167,35 +205,51 @@ onUnmounted(() => {
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.c-svg{
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
.dressfor-container {
|
||||
height: calc(100vh - 12rem - 14.9rem);
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
|
||||
// background: url('@/assets/images/dress_for_bg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 6rem 0 0 0;
|
||||
.content {
|
||||
.setting {
|
||||
padding: 0 4.9rem 0 8.4rem;
|
||||
font-size: 7rem;
|
||||
.c-svg {
|
||||
width: initial;
|
||||
.loading-container {
|
||||
:deep(.loading-image) {
|
||||
width: 17rem;
|
||||
height: 17rem;
|
||||
animation: none;
|
||||
}
|
||||
:deep(.loading-shadow) {
|
||||
width: 9.2rem;
|
||||
height: 2.4rem;
|
||||
filter: blur(6px);
|
||||
opacity: 0.5;
|
||||
margin: 2.4rem 0 0;
|
||||
// background-color: #d9d9d9;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-family: 'satoshiBold';
|
||||
font-size: 11rem;
|
||||
line-height: 106%;
|
||||
font-size: 9.6rem;
|
||||
text-align: center;
|
||||
margin-top: 43.8rem;
|
||||
margin-bottom: 14rem;
|
||||
padding-top: 9rem;
|
||||
padding-bottom: 14rem;
|
||||
|
||||
font-weight: 700;
|
||||
line-height: 1.12;
|
||||
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;
|
||||
}
|
||||
.chatbox {
|
||||
height: 9.3rem;
|
||||
@@ -204,7 +258,7 @@ onUnmounted(() => {
|
||||
.input-box {
|
||||
width: 59.8rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
background-color: #efefef;
|
||||
// border: 2px solid #5f5f5f;
|
||||
border-radius: 1rem;
|
||||
color: #222222;
|
||||
@@ -213,7 +267,7 @@ onUnmounted(() => {
|
||||
padding: 0 2.6rem;
|
||||
column-gap: 2.6rem;
|
||||
overflow: hidden;
|
||||
.input-wrapper{
|
||||
.input-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
.recording-visualizer {
|
||||
@@ -233,6 +287,7 @@ onUnmounted(() => {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: #efefef;
|
||||
}
|
||||
.audio-icon {
|
||||
width: initial;
|
||||
@@ -241,8 +296,34 @@ onUnmounted(() => {
|
||||
.send {
|
||||
width: 7.6rem;
|
||||
height: 7.6rem;
|
||||
background-color: #fff;
|
||||
border-radius: 1rem;
|
||||
background-color: #efefef;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
.tag-container {
|
||||
row-gap: 3.1rem;
|
||||
padding-top: 5.7rem;
|
||||
.tag-list {
|
||||
color: #000;
|
||||
flex-wrap: wrap;
|
||||
&.short {
|
||||
column-gap: 1.91rem;
|
||||
}
|
||||
&.long {
|
||||
column-gap: 3.1rem;
|
||||
padding-left: 2.1rem;
|
||||
}
|
||||
.tag-item {
|
||||
height: 6.8rem;
|
||||
line-height: 6.8rem;
|
||||
box-sizing: border-box;
|
||||
font-family: 'satoshiRegular';
|
||||
font-size: 2.8rem;
|
||||
border: 0.15rem solid #cdcdcd;
|
||||
text-align: center;
|
||||
border-radius: 4.6rem;
|
||||
padding: 0 2.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user