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-22 13:03:03 +08:00
parent 41e605a8bf d0ada4e6f0
commit 9ba6804d85
5 changed files with 280 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 849 KiB

130
src/views/Workshop/home.vue
View File

@@ -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.HISTORY}`)
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(2.5rem);
// 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>

74
src/views/Workshop/homeNav.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <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' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
import { showConfirmDialog } from 'vant' import { showConfirmDialog } from 'vant'
@@ -11,6 +11,9 @@ const emit = defineEmits([
'view-type' 'view-type'
]) ])
const navList = ref([])
const navDisabledList = ref([])
// const data = reactive({ // const data = reactive({
// }) // })
@@ -28,17 +31,50 @@ const clickSwitchVIPID = ()=>{
}) })
.catch(() => {}) .catch(() => {})
} }
const openFlow = (path:string,flowType:string)=>{ const openFlow = (path:string)=>{
if(flowType == 'clientId')return clickSwitchVIPID() const query = computed(() => router.currentRoute.value.query)
if(flowType == 'main'){ router.push({ name: path, query: {...query.value} })
router.push({ name: path })
}else{ // if(flowType == 'clientId')return clickSwitchVIPID()
router.push({ name: path, query: { demo: 1 } }) // if(flowType == 'main'){
} // router.push({ name: path })
// }else{
// router.push({ name: path, query: { demo: 1 } })
// }
} }
onMounted(()=>{ onMounted(()=>{
emit('view-type', 1) 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(()=>{ onUnmounted(()=>{
}) })
@@ -56,18 +92,24 @@ defineExpose({})
Explore Explore
</div> </div>
<div class="navList"> <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=""> <img src="@/assets/images/nav1.png" alt="">
</div> </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=""> <img src="@/assets/images/nav2.png" alt="">
</div> </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=""> <img src="@/assets/images/nav3.png" alt="">
</div> </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=""> <img src="@/assets/images/nav4.png" alt="">
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
@@ -110,6 +152,12 @@ defineExpose({})
// height: 41.6rem; // height: 41.6rem;
height: auto; height: auto;
width: calc(50% - 4.8rem / 2); width: calc(50% - 4.8rem / 2);
pointer-events: none;
opacity: .5;
&.active{
pointer-events: auto;
opacity: 1;
}
> img{ > img{
width: 100%; width: 100%;
height: 100%; height: 100%;

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

@@ -1,53 +1,48 @@
<template> <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'"> <template v-if="pageMode === 'entry'">
<div class="setting flex flex-between"> <div class="content flex-1 flex flex-center flex-column">
<SvgIcon name="left" size="70" @click="handleBack" />
<SvgIcon name="setting" size="70" />
</div>
<div class="content flex flex-center flex-column">
<div class="text">Who is Your Customer?</div> <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>
<div class="entry-btn flex flex-center" @click="handleChangeMode('form')">Entry</div>
</template> </template>
<template v-else> <template v-else>
<div class="form-container"> <div class="form-container flex-1 flex flex-column flex-center">
<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="text">
<div class="form-title">Customer ID</div> <div class="form-title">Customer ID</div>
<div class="description"> <div class="description">
Redefine the styling experience with AI. Use<br />Styling Angel to speed up your <p>Redefine the styling experience with AI.</p>
fashion<br />journey. <p>Use Styling Angel to speed up your fashion journey.</p>
</div> </div>
</div> </div>
<div class="glass-form"> <div class="glass-form">
<div class="form-field"> <div class="form-field">
<label class="field-label">VIP ID</label> <label class="field-label">Nickname</label>
<input <input
v-model="customerData.vipId" v-model="customerData.vipId"
type="text" type="text"
placeholder="Enter your ID" placeholder="Enter name"
class="form-input" class="form-input"
/> />
</div> </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> <button class="confirm-btn" @click="handleConfirm">Confirm</button>
</div> </div>
<div class="show-all">Show All</div>
<div class="copyright">Powered by AiDLab for Lane Crawford</div> <div class="copyright">Powered by AiDLab for Lane Crawford</div>
</div> </div>
</template> </template>
@@ -64,10 +59,15 @@ const router = useRouter()
const generateStore = useGenerateStore() const generateStore = useGenerateStore()
type PageMode = 'form' | 'entry' 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) router.go(-1)
} }
@@ -94,7 +94,7 @@ const handleConfirm = async () => {
// console.log('res', res) // console.log('res', res)
generateStore.setCustomerInfo(res) generateStore.setCustomerInfo(res)
// router.push('/workshop/stylist/index') // router.push('/workshop/stylist/index')
router.push('/workshop/homeNav') router.push('/workshop/home')
}) })
} }
</script> </script>
@@ -104,13 +104,12 @@ const handleConfirm = async () => {
overflow: hidden; overflow: hidden;
color: #fff; color: #fff;
position: relative; 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-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
&.form-mode { &.form-mode {
background: url('@/assets/images/has_shouder_bg.png') no-repeat center center/cover; background: url('@/assets/images/has_shouder_bg.png') no-repeat center center/cover;
padding-top: 15.9rem;
} }
.setting { .setting {
@@ -122,7 +121,8 @@ const handleConfirm = async () => {
} }
} }
.content { .content {
margin-top: 55.3rem; // margin-top: 55.3rem;
row-gap: 12.7rem;
.text { .text {
font-family: 'satoshiBold'; font-family: 'satoshiBold';
font-size: 13rem; font-size: 13rem;
@@ -140,37 +140,22 @@ const handleConfirm = async () => {
justify-content: center; justify-content: center;
border-radius: 4rem; border-radius: 4rem;
} }
} .btn-list {
.entry-btn { column-gap: 17rem;
position: absolute; .btn {
border: 0.2rem solid #fff; height: 8.3rem;
bottom: 10.3rem; width: 29.7rem;
right: 5.5rem; line-height: 8.3rem;
height: 9rem; font-size: 4.8rem;
width: 27.5rem; border: 0.2rem solid #fff;
line-height: 9rem; }
font-size: 5.6rem; }
} }
.form-container { .form-container {
.menu { width: 78.8rem;
padding: 0 4.8rem 0 8.4rem; margin: 0 auto;
.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;
}
}
}
.text { .text {
padding-left: 15.2rem;
margin-top: 15.4rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
.form-title { .form-title {
@@ -182,18 +167,16 @@ const handleConfirm = async () => {
font-size: 3.6rem; font-size: 3.6rem;
line-height: 141%; line-height: 141%;
letter-spacing: 0.08rem; letter-spacing: 0.08rem;
margin-top: 2.7rem; margin: 3.1rem 0 11rem 0;
font-family: 'satoshiRegular'; font-family: 'satoshiRegular';
} }
.glass-form { .glass-form {
height: 68.8rem; height: 68.7rem;
width: 78.8rem;
border: 0.2rem solid #ffffff; border: 0.2rem solid #ffffff;
border-radius: 4.7rem; border-radius: 4.7rem;
margin: 0 14.2rem;
// padding: 8.2rem 7.9rem;
padding: 11rem 7.5rem; 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); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -251,6 +234,18 @@ const handleConfirm = async () => {
box-shadow: 0 0.2rem 8px rgba(0, 0, 0, 0.2); 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 { .copyright {
font-family: 'satoshiRegular'; font-family: 'satoshiRegular';
font-size: 3rem; font-size: 3rem;
@@ -259,7 +254,7 @@ const handleConfirm = async () => {
margin-top: 2.31rem; margin-top: 2.31rem;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
margin-top: 18.7rem; margin-top: 11.5rem;
} }
} }
} }

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

@@ -1,11 +1,13 @@
<template> <template>
<div class="dressfor-container flex"> <div class="dressfor-container flex">
<div class="content flex-1 flex flex-column"> <div class="content flex-1 flex flex-column">
<!-- <div class="setting flex flex-between"> <div class="loading-container flex flex-center">
<van-icon name="arrow-left" color="#fff" @click="handleBack" /> <Icon class="icon-element" title="" />
<SvgIcon name="setting" size="70" /> </div>
</div> --> <div class="text">
<div class="text">What are you dressing for?</div> What are you <br />
dressing for?
</div>
<!-- <div class="start-btn" @click="handleStart">Start</div> --> <!-- <div class="start-btn" @click="handleStart">Start</div> -->
<div class="chatbox flex flex-center"> <div class="chatbox flex flex-center">
<div class="input-box flex"> <div class="input-box flex">
@@ -25,7 +27,7 @@
class="audio-icon" class="audio-icon"
:name="isRecording ? 'pause' : 'audio'" :name="isRecording ? 'pause' : 'audio'"
size="35" size="35"
color="#6D6868" color="#6D6868"
@click="handleClickAudio" @click="handleClickAudio"
/> />
</div> </div>
@@ -33,19 +35,45 @@
<SvgIcon class="send-icon" name="send" size="26" color="#000000" /> <SvgIcon class="send-icon" name="send" size="26" color="#000000" />
</div> </div>
</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>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onUnmounted, nextTick, watch } from 'vue' import { ref, onUnmounted, nextTick, watch } from 'vue'
import { showToast } from 'vant' import { showToast, closeToast } from 'vant'
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue' import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue' import AudioVisualizer from '@/views/asistant/components/AudioVisualizer.vue'
import Icon from '../asistant/components/GenerateLoading.vue'
const router = useRouter() 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 inputValue = ref('')
const isRecording = ref(false) const isRecording = ref(false)
const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null) const audioVisualizerRef = ref<InstanceType<typeof AudioVisualizer> | null>(null)
@@ -69,11 +97,11 @@ watch(isRecording, async (newVal) => {
const handleSendMessage = () => { const handleSendMessage = () => {
const message = inputValue.value.trim() const message = inputValue.value.trim()
if(!message){ if (!message) {
showToast('Please enter a message') showToast('Please enter a message')
return return
} }
showToast('Voice-to-text conversion has been completed.')
router.push({ router.push({
path: '/asistant', path: '/asistant',
query: message ? { message } : undefined query: message ? { message } : undefined
@@ -109,6 +137,10 @@ const startRecording = () => {
} }
speechRecognition.onstart = () => { speechRecognition.onstart = () => {
showToast({
message: 'Listening...',
duration: 0
})
isRecording.value = true isRecording.value = true
} }
@@ -136,6 +168,7 @@ const startRecording = () => {
} }
speechRecognition.onend = () => { speechRecognition.onend = () => {
closeToast()
isRecording.value = false isRecording.value = false
lastTranscript = '' lastTranscript = ''
isSpeechRecognitionActive = false isSpeechRecognitionActive = false
@@ -143,6 +176,7 @@ const startRecording = () => {
speechRecognition.onerror = (event: any) => { speechRecognition.onerror = (event: any) => {
console.error('Speech recognition error:', event.error) console.error('Speech recognition error:', event.error)
closeToast()
isRecording.value = false isRecording.value = false
isSpeechRecognitionActive = false isSpeechRecognitionActive = false
showToast('Speech recognition failed, please try again') showToast('Speech recognition failed, please try again')
@@ -159,6 +193,10 @@ const stopRecording = () => {
} }
} }
const handleClickTag = (tag: string) => {
inputValue.value = tag
}
onUnmounted(() => { onUnmounted(() => {
if (speechRecognition && isRecording.value) { if (speechRecognition && isRecording.value) {
speechRecognition.stop() speechRecognition.stop()
@@ -167,35 +205,51 @@ onUnmounted(() => {
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.c-svg{ .c-svg {
width: initial; width: initial;
height: initial; height: initial;
} }
.dressfor-container { .dressfor-container {
height: calc(100vh - 12rem - 14.9rem); height: calc(100vh - 12rem - 14.9rem);
overflow: hidden; // overflow: hidden;
color: #fff; color: #fff;
position: relative; 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-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
padding: 6rem 0 0 0; padding: 6rem 0 0 0;
.content { .content {
.setting { .loading-container {
padding: 0 4.9rem 0 8.4rem; :deep(.loading-image) {
font-size: 7rem; width: 17rem;
.c-svg { height: 17rem;
width: initial; 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 { .text {
font-family: 'satoshiBold'; font-family: 'satoshiBold';
font-size: 11rem; font-size: 9.6rem;
line-height: 106%;
text-align: center; text-align: center;
margin-top: 43.8rem; padding-top: 9rem;
margin-bottom: 14rem; 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 { .chatbox {
height: 9.3rem; height: 9.3rem;
@@ -204,7 +258,7 @@ onUnmounted(() => {
.input-box { .input-box {
width: 59.8rem; width: 59.8rem;
height: 100%; height: 100%;
background-color: #fff; background-color: #efefef;
// border: 2px solid #5f5f5f; // border: 2px solid #5f5f5f;
border-radius: 1rem; border-radius: 1rem;
color: #222222; color: #222222;
@@ -213,7 +267,7 @@ onUnmounted(() => {
padding: 0 2.6rem; padding: 0 2.6rem;
column-gap: 2.6rem; column-gap: 2.6rem;
overflow: hidden; overflow: hidden;
.input-wrapper{ .input-wrapper {
overflow: hidden; overflow: hidden;
} }
.recording-visualizer { .recording-visualizer {
@@ -233,6 +287,7 @@ onUnmounted(() => {
height: 100%; height: 100%;
outline: none; outline: none;
border: none; border: none;
background-color: #efefef;
} }
.audio-icon { .audio-icon {
width: initial; width: initial;
@@ -241,8 +296,34 @@ onUnmounted(() => {
.send { .send {
width: 7.6rem; width: 7.6rem;
height: 7.6rem; height: 7.6rem;
background-color: #fff; background-color: #efefef;
border-radius: 1rem; 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;
}
} }
} }
} }