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

123123

Browse Source
This commit is contained in:
李志鹏
2025-10-16 11:01:54 +08:00
parent 7a312dd369
commit 6866d69d00
13 changed files with 381 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/icons/home.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="160.000000pt" height="160.000000pt" viewBox="0 0 160.000000 160.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,160.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M752 1589 c-24 -5 -59 -18 -78 -30 -34 -21 -589 -597 -641 -666 -64
-84 -13 -196 97 -210 l40 -6 0 -256 c0 -142 5 -272 10 -293 13 -45 77 -105
122 -113 18 -3 114 -5 213 -3 l179 3 13 25 c9 18 13 93 13 273 l0 247 75 0 75
0 0 -258 c0 -241 1 -260 19 -276 17 -15 41 -17 218 -14 l200 3 37 29 c63 48
66 63 66 366 l0 270 34 0 c102 0 171 81 146 171 -14 51 -617 685 -680 715 -55
27 -101 33 -158 23z m116 -125 c49 -34 613 -638 610 -653 -3 -12 -19 -17 -73
-19 -110 -4 -105 12 -105 -340 0 -261 -2 -298 -17 -314 -14 -16 -33 -18 -160
-18 l-143 0 0 229 c0 126 -4 241 -10 255 -5 14 -24 35 -42 46 -29 18 -46 20
-145 18 -177 -5 -183 -16 -183 -335 l0 -213 -137 0 c-76 0 -143 4 -149 8 -31
20 -34 55 -34 345 0 228 -3 297 -13 305 -7 6 -42 12 -77 14 -51 2 -65 7 -68
19 -3 17 556 617 607 651 33 22 109 23 139 2z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

27
src/assets/icons/library.svg Normal file
View File

@@ -0,0 +1,27 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M25 455 c-21 -20 -25 -34 -25 -85 0 -85 25 -110 110 -110 51 0 65 4
85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25 -85 25 -51 0 -65 -4
-85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100 -16 -116 0 -16 16 -16
100 0 116 7 7 33 12 58 12 25 0 51 -5 58 -12z"/>
<path d="M280 457 c-37 -39 -16 -103 53 -157 35 -28 48 -25 91 16 56 54 69
101 40 139 -12 16 -28 20 -90 21 -65 2 -78 -1 -94 -19z m73 -39 l16 -23 19 24
c13 15 25 22 36 18 26 -10 19 -41 -19 -83 l-35 -39 -35 37 c-19 21 -35 46 -35
56 0 38 30 43 53 10z"/>
<path d="M25 195 c-21 -20 -25 -34 -25 -85 0 -51 4 -65 25 -85 20 -21 34 -25
85 -25 51 0 65 4 85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25
-85 25 -51 0 -65 -4 -85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100
-16 -116 0 -16 16 -16 100 0 116 16 16 100 16 116 0z"/>
<path d="M285 195 c-21 -20 -25 -34 -25 -85 0 -51 4 -65 25 -85 20 -21 34 -25
85 -25 51 0 65 4 85 25 21 20 25 34 25 85 0 51 -4 65 -25 85 -20 21 -34 25
-85 25 -51 0 -65 -4 -85 -25z m143 -27 c16 -16 16 -100 0 -116 -16 -16 -100
-16 -116 0 -16 16 -16 100 0 116 16 16 100 16 116 0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

22
src/assets/icons/profile.svg Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2435 5114 c-16 -2 -65 -9 -109 -15 -246 -33 -541 -172 -741 -349
-253 -223 -432 -545 -486 -875 -20 -120 -17 -390 5 -500 71 -361 275 -695 550
-903 l68 -52 -28 -10 c-121 -46 -173 -69 -276 -120 -444 -223 -805 -560 -1062
-990 -210 -352 -328 -745 -352 -1180 l-7 -120 201 0 202 0 0 49 c0 339 141
807 330 1095 291 445 681 750 1156 905 452 148 896 148 1348 0 475 -155 865
-460 1156 -905 189 -288 330 -756 330 -1095 l0 -49 202 0 201 0 -7 120 c-24
435 -142 828 -352 1180 -257 430 -618 767 -1062 990 -103 51 -155 74 -276 120
l-28 10 68 52 c275 208 479 542 550 903 22 110 25 380 5 500 -43 263 -176 542
-352 742 -219 247 -527 421 -848 479 -77 14 -332 26 -386 18z m294 -409 c588
-96 990 -650 896 -1234 -96 -588 -650 -990 -1234 -896 -588 96 -990 650 -896
1234 96 588 650 990 1234 896z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

71
src/components/FooterNavigation.vue Normal file
View File

@@ -0,0 +1,71 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentRoute = computed(() => router.currentRoute.value.path)
defineProps({
/** 是否显示占位符 */
isPlaceholder: { type: Boolean, default: false }
})
const handleClickReturn = () => {
router.back()
// emit('clickReturn')
}
const navs = [
{ label: 'Home', icon: 'home', size: 73, path: '/home' },
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
]
const onNavClick = (nav) => {
if (currentRoute.value !== nav.path) router.push(nav.path)
}
</script>
<template>
<div class="footer-navigation main">
<div
v-for="nav in navs"
:key="nav.path"
:class="{ active: currentRoute === nav.path }"
@click="onNavClick(nav)"
>
<SvgIcon :name="nav.icon" size="55" />
<span class="label">{{ nav.label }}</span>
</div>
</div>
<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
</template>
<style scoped lang="less">
.footer-navigation {
width: 100%;
height: var(--footer-navigation-height, 14.9rem);
}
.footer-navigation.main {
position: fixed;
bottom: 0;
z-index: var(--footer-navigation-z-index, 999);
background-color: var(--footer-navigation-background, #fff);
box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: space-evenly;
> div {
display: flex;
flex-direction: column;
align-items: center;
&.active > * {
color: #0d99ff;
}
> .label {
margin-top: 1.6rem;
font-family: satoshiRegular;
font-weight: 500;
font-size: 2.4rem;
line-height: 89%;
}
}
}
</style>

86
src/components/HeaderTitle.vue
View File

@@ -4,8 +4,8 @@
defineProps({ defineProps({
title: { type: String, default: 'AI STYLING ASSISTANT' }, title: { type: String, default: 'AI STYLING ASSISTANT' },
light: { type: Boolean,default:false }, hasSetting: { type: Boolean, default: false },
hasSetting: { type: Boolean,default:false } styleType: { type: String, default: '1' },//1低 2高
}) })
defineEmits(['clickReturn']) defineEmits(['clickReturn'])
@@ -17,49 +17,57 @@
</script> </script>
<template> <template>
<div class="header-title main" :class="{ 'light': light }"> <div class="header-title" :style-type="styleType">
<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div> <div class="main">
<span class="title">{{ title }}</span> <div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div> <span class="title">{{ title }}</span>
<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="34" /></div>
</div>
<div class="placeholder"></div>
</div> </div>
<div class="header-title placeholder"></div>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.header-title { .header-title {
width: 100%; width: 100%;
height: var(--header-title-height, 9.9rem); &[style-type="2"] {
} --header-title-height: 14.5rem;
.header-title.main { --header-title-border-bottom-width: 0.2rem;
position: fixed; --header-title-return-left: 7.8rem;
top: 0; }
z-index: var(--header-title-z-index, 999); > div {
background-color: var(--header-title-background, #000000); width: 100%;
display: flex; height: var(--header-title-height, 9.9rem);
align-items: center; border-bottom-width: var(--header-title-border-bottom-width, 0);
justify-content: center; border-bottom-style: solid;
border-bottom-color: var(--header-title-border-bottom-color, #D5D5D5);
}
> .main {
position: fixed;
top: 0;
z-index: var(--header-title-z-index, 999);
background-color: var(--header-title-background, #fff);
display: flex;
align-items: center;
justify-content: center;
> .return {
position: absolute;
left: var(--header-title-return-left, 3.2rem);
display: inline-block;
--svg-icon-color: var(--header-title-color, #000);
}
> .title {
font-size: 4.8rem;
color: var(--header-title-color, #000);
font-family: 'boskaRegular';
}
> .setting {
position: absolute;
right: 3.2rem;
display: inline-block;
}
}
> .return {
position: absolute;
left: 3.2rem;
display: inline-block;
--svg-icon-color: var(--header-title-color, #ffffff);
}
> .title {
font-size: 4.8rem;
color: var(--header-title-color, #ffffff);
font-family: 'boskaRegular';
}
>.setting{
position: absolute;
right: 3.2rem;
display: inline-block;
}
&.light {
--header-title-color: #000000;
--svg-icon-color: #000000;
--header-title-background: #ffffff;
}
} }
</style> </style>

35
src/router/index.ts
View File

@@ -85,36 +85,31 @@ const router = createRouter({
// 上传照片 // 上传照片
path: '/workshop/uploadFace', path: '/workshop/uploadFace',
name: 'uploadFace', name: 'uploadFace',
component: () => import('../views/Workshop/uploadFace/index.vue') component: () => import('../views/Workshop/uploadFace.vue')
}, },
{ {
// 自定义创作 // 自定义创作
path: '/workshop/customize', path: '/workshop/customize',
name: 'customize', name: 'customize',
component: () => import('../views/Workshop/customize/index.vue'), component: () => import('../views/Workshop/customize.vue'),
children: [
{
path: '/workshop/customize',
name: 'customizeHome',
component: () => import('../views/Workshop/customize/home.vue')
},
{
path: '/workshop/customize/library',
name: 'customizeLibrary',
component: () => import('../views/Workshop/customize/library.vue')
},
{
path: '/workshop/customize/creation',
name: 'customizeCreation',
component: () => import('../views/Workshop/customize/creation.vue')
}
]
}, },
{
// library
path: '/workshop/library',
name: 'library',
component: () => import('../views/Workshop/library.vue'),
},
{
// creation
path: '/workshop/creation',
name: 'creation',
component: () => import('../views/Workshop/creation.vue'),
},
{ {
// 完成创建 // 完成创建
path: '/workshop/end', path: '/workshop/end',
name: 'end', name: 'end',
component: () => import('../views/Workshop/end/index.vue') component: () => import('../views/Workshop/end.vue')
} }
] ]
} }

68
src/views/Workshop/customize/creation.vue → src/views/Workshop/creation.vue
View File

@@ -1,7 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const emit = defineEmits(['view-type'])
onMounted(() => {
emit('view-type', 1)
})
const onSave = () => { const onSave = () => {
// console.log('保存') // console.log('保存')
router.push({ name: 'end' }) router.push({ name: 'end' })
@@ -13,6 +21,7 @@
</script> </script>
<template> <template>
<header-title style-type="2" />
<div class="creation"> <div class="creation">
<div class="title">Your Creation</div> <div class="title">Your Creation</div>
<div class="list"> <div class="list">
@@ -20,39 +29,19 @@
<img src="@/assets/images/workshop/posture/posture_1.png" /> <img src="@/assets/images/workshop/posture/posture_1.png" />
</div> </div>
</div> </div>
<div class="btns">
<button @click="onSave">Save</button>
<button @click="onContinue">Continue</button>
</div>
</div> </div>
<div class="creation_btns"> <footer-navigation is-placeholder />
<button @click="onSave">Save</button>
<button @click="onContinue">Continue Creating</button>
</div>
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.creation_btns {
margin: 5.5rem 1rem 0;
display: flex;
justify-content: center;
> button {
box-sizing: content-box;
flex: 1;
height: 8rem;
border-radius: 0.7rem;
border: 0.3rem solid #000;
background: transparent;
font-family: satoshiRegular;
font-weight: 400;
font-size: 4rem;
margin: 0 2rem;
color: #000;
&:active {
opacity: 0.7;
}
}
}
.creation { .creation {
width: 100%; width: 100%;
height: 90%; flex: 1;
overflow: hidden;
background-color: #e3e3e3; background-color: #e3e3e3;
border-radius: 1rem; border-radius: 1rem;
position: relative; position: relative;
@@ -65,7 +54,7 @@
text-align: center; text-align: center;
line-height: 124%; line-height: 124%;
font-weight: 500; font-weight: 500;
margin: 5rem; margin: 7.2rem 0;
} }
> .list { > .list {
flex: 1; flex: 1;
@@ -90,5 +79,26 @@
} }
} }
} }
> .btns {
margin: 9rem 0;
display: flex;
justify-content: center;
> button {
box-sizing: content-box;
font-family: satoshiRegular;
width: 35rem;
height: 8rem;
border-radius: 1.3rem;
background: #000;
font-weight: 400;
font-size: 4.2rem;
margin: 0 3.25rem;
color: #fff;
&:active {
opacity: 0.7;
}
}
}
} }
</style> </style>

18
src/views/Workshop/customize/home.vue → src/views/Workshop/customize.vue
View File

@@ -1,8 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
</script> </script>
<template> <template>
<div class="home"> <header-title style-type="2" />
<div class="customize">
<div class="title">Customize your Look!</div> <div class="title">Customize your Look!</div>
<p class="tip">Refine your Look</p> <p class="tip">Refine your Look</p>
<div class="input-box"> <div class="input-box">
@@ -24,10 +27,12 @@
</div> </div>
</div> </div>
</div> </div>
<footer-navigation />
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.home {
.customize {
width: 100%; width: 100%;
position: relative; position: relative;
color: #000; color: #000;
@@ -39,6 +44,7 @@
font-size: 8.4rem; font-size: 8.4rem;
text-align: center; text-align: center;
line-height: 124%; line-height: 124%;
margin-top: 3.6rem;
} }
> .tip { > .tip {
margin-top: 0.56rem; margin-top: 0.56rem;
@@ -88,7 +94,8 @@
width: 79.8rem; width: 79.8rem;
height: 107.4rem; height: 107.4rem;
border-radius: 2rem; border-radius: 2rem;
box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d; // box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
border: 0.2rem solid #D9D9D9;
overflow: hidden; overflow: hidden;
> * { > * {
position: absolute; position: absolute;
@@ -107,16 +114,15 @@
border: 0.24rem solid #000; border: 0.24rem solid #000;
display: flex; display: flex;
align-items: center; align-items: center;
>.icon{ > .icon {
margin: 0 1.8rem; margin: 0 1.8rem;
} }
>.label{ > .label {
flex: 1; flex: 1;
font-family: satoshiRegular; font-family: satoshiRegular;
font-size: 2.97rem; font-size: 2.97rem;
color: #000; color: #000;
} }
} }
> .icons { > .icons {
bottom: 0.27rem; bottom: 0.27rem;

83
src/views/Workshop/customize/index.vue
View File

@@ -1,83 +0,0 @@
<script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentRouteName = computed(() => router.currentRoute.value.name)
import { ref } from 'vue'
const onHome = () => {
// router.push({ name: 'customizeHome' })
router.push({ path: '/signup' })
}
const onLibrary = () => {
router.push({ name: 'customizeLibrary' })
}
const onContinue = () => {
router.push({ name: 'customizeCreation' })
}
</script>
<template>
<header-title />
<div class="link">
<span @click="onHome">Home</span>
<span @click="onLibrary">Library</span>
</div>
<div class="session"><RouterView /></div>
<div class="footer">
<button v-if="currentRouteName === 'customizeHome'" @click="onContinue">Continue</button>
</div>
</template>
<style scoped lang="less">
.header-title {
--header-title-color: #fff;
--header-title-background: #000;
}
.link {
width: 100%;
padding: 2rem 5.4rem 0;
> span {
font-family: satoshiRegular;
font-size: 3rem;
vertical-align: middle;
text-decoration: underline;
text-underline-offset: 0.8rem;
margin-right: 4.4rem;
}
}
.session {
margin-top: 5.6rem;
width: 100%;
height: 155rem;
overflow: hidden;
padding: 0 2.5rem;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
height: 11.2rem;
background-color: #000;
display: flex;
align-items: center;
justify-content: flex-end;
> button {
width: 24.6rem;
height: 5.9rem;
border-radius: 0.7rem;
box-sizing: content-box;
border: 0.3rem solid #fff;
background: transparent;
font-family: satoshiRegular;
font-weight: 400;
font-size: 4rem;
color: #fff;
margin-right: 5rem;
&:active {
opacity: 0.7;
}
}
}
</style>

57
src/views/Workshop/end/index.vue → src/views/Workshop/end.vue
View File

@@ -1,9 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import { ref } from 'vue' import FooterNavigation from '@/components/FooterNavigation.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const emit = defineEmits(['view-type'])
onMounted(() => {
emit('view-type', 1)
})
const onExit = () => { const onExit = () => {
console.log('exit') console.log('exit')
} }
@@ -12,19 +16,14 @@
<template> <template>
<header-title /> <header-title />
<div class="end"> <div class="end">
<img src="@/assets/images/workshop/bg/end_bg.png" class="bg" />
<div class="link">
<span>Home</span>
<span>Library</span>
</div>
<div class="content"> <div class="content">
<div class="title">Thank you.</div> <div class="title">Thank you.</div>
<div class="tip"> <div class="tip">
We are starting to learn your preferences, Looking forward to see you again, We are starting to learn your preferences, Looking forward to see you again,
</div> </div>
</div> </div>
<button class="exit" @click="onExit">Exit</button>
</div> </div>
<footer-navigation is-placeholder />
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
@@ -34,29 +33,13 @@
} }
.end { .end {
width: 100%; width: 100%;
flex: 1;
position: relative; position: relative;
color: #fff; color: #fff;
> * { background: url('@/assets/images/workshop/bg/end_bg.png') no-repeat center center;
position: absolute; background-size: cover;
}
> .bg {
position: relative;
width: 100%;
height: auto;
}
> .link {
top: 2rem;
left: 5.4rem;
> span {
font-family: satoshiRegular;
font-size: 3rem;
vertical-align: middle;
text-decoration: underline;
text-underline-offset: 0.8rem;
margin-right: 4.4rem;
}
}
> .content { > .content {
position: absolute;
top: 12.9rem; top: 12.9rem;
left: 6rem; left: 6rem;
// width: 100%; // width: 100%;
@@ -75,23 +58,5 @@
line-height: 132%; line-height: 132%;
} }
} }
> .exit {
position: fixed;
bottom: 2.5rem;
right: 4.8rem;
box-sizing: content-box;
width: 19rem;
height: 5.9rem;
border-radius: 0.7rem;
border: 0.3rem solid #000;
background: transparent;
font-family: satoshiRegular;
font-weight: 500;
font-size: 4rem;
color: #000;
&:active {
opacity: 0.7;
}
}
} }
</style> </style>

46
src/views/Workshop/index.vue
View File

@@ -1,28 +1,42 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue"; import { ref, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue'
//const props = defineProps({ import { useRouter } from 'vue-router'
//}) //const props = defineProps({
//const emit = defineEmits([ //})
//]) //const emit = defineEmits([
let data = reactive({ //])
}) let data = reactive({})
onMounted(()=>{ onMounted(() => {})
}) onUnmounted(() => {})
onUnmounted(()=>{ defineExpose({})
}) const {} = toRefs(data)
defineExpose({}) const workshopContent = ref<HTMLDivElement>()
const {} = toRefs(data); const router = useRouter()
const viewType = ref(0)
watch(
() => router.currentRoute.value,
() => (viewType.value = 0)
)
const changeViewType = (v: number) => {
viewType.value = v
}
</script> </script>
<template> <template>
<div class="workshop"> <div class="workshop" :view-type="viewType">
<router-view /> <router-view @view-type="changeViewType" />
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.workshop{ .workshop {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
font-family: 'satoshiRegular'; font-family: 'satoshiRegular';
&[view-type='1'] {
display: flex;
flex-direction: column;
overflow: hidden;
}
} }
</style> </style>

68
src/views/Workshop/customize/library.vue → src/views/Workshop/library.vue
View File

@@ -1,16 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, onMounted, inject } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
const emit = defineEmits(['view-type'])
const onRetrieveItem = (i: number) => { onMounted(() => {
console.log("检索"+i) emit('view-type', 1)
} })
const deleteItem = (i: number) => { const onRetrieveItem = (i: number) => {
console.log("删除"+i) console.log('检索' + i)
} }
const deleteItem = (i: number) => {
console.log('删除' + i)
}
</script> </script>
<template> <template>
<header-title style-type="2" />
<div class="library"> <div class="library">
<div class="title">Library</div> <div class="title">Library</div>
<div class="list"> <div class="list">
@@ -19,6 +27,7 @@ const deleteItem = (i: number) => {
<img src="@/assets/images/workshop/posture/posture_1.png" /> <img src="@/assets/images/workshop/posture/posture_1.png" />
</div> </div>
<div class="content"> <div class="content">
<span class="userID">User ID: 1234567890</span>
<span class="datetime">7/22/2025 18:20</span> <span class="datetime">7/22/2025 18:20</span>
<span class="lastopened">Last opened 18:20</span> <span class="lastopened">Last opened 18:20</span>
<button @click="onRetrieveItem(i)">Retrieve</button> <button @click="onRetrieveItem(i)">Retrieve</button>
@@ -27,24 +36,43 @@ const deleteItem = (i: number) => {
</div> </div>
</div> </div>
</div> </div>
<footer-navigation is-placeholder />
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.workshop {
display: flex;
align-items: center;
justify-content: center;
}
.library { .library {
width: 100%; width: 100%;
height: 100%; flex: 1;
background-color: #e3e3e3; overflow: hidden;
background-color: #fff;
border-radius: 1rem; border-radius: 1rem;
position: relative; position: relative;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&::before {
content: '';
position: absolute;
width: 92rem;
height: 92rem;
z-index: 0;
top: -40rem;
right: -40rem;
background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
transform: rotate(-45deg);
}
> .title { > .title {
font-family: satoshiRegular; font-family: satoshiRegular;
font-size: 9rem; font-size: 9rem;
text-align: left; text-align: left;
line-height: 124%; line-height: 124%;
font-weight: 500;
margin: 5rem; margin: 5rem;
} }
> .list { > .list {
@@ -78,20 +106,28 @@ const deleteItem = (i: number) => {
margin-left: 5.6rem; margin-left: 5.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 80%; height: 90%;
> .userID {
font-family: satoshiRegular;
font-weight: 500;
font-size: 3.8rem;
line-height: 89%;
color: #000;
}
> .datetime { > .datetime {
margin-top: 1.8rem;
font-family: satoshiRegular; font-family: satoshiRegular;
font-weight: 400; font-weight: 400;
font-size: 3.29rem; font-size: 3.2rem;
line-height: 89%; line-height: 89%;
color: #000; color: #000;
} }
> .lastopened { > .lastopened {
margin-top: 2.23rem; margin-top: 1rem;
font-family: satoshiRegular; font-family: satoshiRegular;
font-weight: 400; font-weight: 400;
font-style: Regular; font-style: Regular;
font-size: 2.63rem; font-size: 2.6rem;
line-height: 89%; line-height: 89%;
color: #6f6f6f; color: #6f6f6f;
} }
@@ -115,8 +151,8 @@ const deleteItem = (i: number) => {
} }
> .delete { > .delete {
position: absolute; position: absolute;
top: 5.57rem; top: 2.5rem;
right: 2.91rem; right: 2rem;
width: 5.5rem; width: 5.5rem;
height: 5.5rem; height: 5.5rem;
border: 0.188rem solid #000; border: 0.188rem solid #000;

66
src/views/Workshop/uploadFace/index.vue → src/views/Workshop/uploadFace.vue
View File

@@ -1,7 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import { ref } from 'vue' import FooterNavigation from '@/components/FooterNavigation.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const emit = defineEmits(['view-type'])
onMounted(() => {
emit('view-type', 1)
})
const router = useRouter() const router = useRouter()
const faceUrl = ref('') const faceUrl = ref('')
// 上传照片 // 上传照片
@@ -24,12 +29,12 @@
// 完成上传 // 完成上传
const handleFinish = () => { const handleFinish = () => {
console.log('完成上传') console.log('完成上传')
router.push({ name: 'customizeHome' }) router.push({ name: 'customize' })
} }
// 生成照片 // 生成照片
const handleGenerate = () => { const handleGenerate = () => {
console.log('生成照片') console.log('生成照片')
router.push({ name: 'customizeHome' }) router.push({ name: 'customize' })
} }
</script> </script>
@@ -46,18 +51,14 @@
</p> </p>
</div> </div>
<div class="btns"> <div class="btns">
<button @click="handleUploadFace">Upload Face</button> <button @click="handleUploadFace"><span>Upload Face</span></button>
<button @click="handleFinish">Finish</button> <button @click="handleFinish"><span>Finish</span></button>
</div> </div>
</div> </div>
<!-- 展示照片 --> <!-- 展示照片 -->
<div class="session session_2" v-show="faceUrl"> <div class="session session_2" v-show="faceUrl">
<img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" /> <img src="@/assets/images/workshop/bg/picture_bg.png" class="bg" />
<div class="link">
<span>Home</span>
<span>Library</span>
</div>
<div class="content"> <div class="content">
<div class="title"> <div class="title">
Upload your Face<br /> Upload your Face<br />
@@ -73,15 +74,14 @@
</div> </div>
</div> </div>
</div> </div>
<footer-navigation is-placeholder />
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.header-title {
--header-title-color: #000;
--header-title-background: #fff;
}
.session { .session {
width: 100%; width: 100%;
flex: 1;
overflow: hidden;
position: relative; position: relative;
color: #fff; color: #fff;
> * { > * {
@@ -103,12 +103,24 @@
height: 8.3rem; height: 8.3rem;
border-radius: 0.7rem; border-radius: 0.7rem;
border: 0.4rem solid #fff; border: 0.4rem solid #fff;
background: transparent; font-family: satoshiMedium;
font-family: satoshiRegular;
font-weight: 500; font-weight: 500;
font-size: 5.5rem; font-size: 5.5rem;
margin: 0 1.8rem; margin: 0 1.8rem;
color: #fff; color: #fff;
background-color: transparent;
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// opacity: 0.1;
backdrop-filter: blur(9.5rem);
background: url('@/assets/images/customer_form_bg.png');
}
&:active { &:active {
opacity: 0.7; opacity: 0.7;
} }
@@ -120,35 +132,23 @@
top: 0; top: 0;
left: 0; left: 0;
padding: 9.9rem 0 0 7.2rem; padding: 9.9rem 0 0 7.2rem;
font-family: 'robotoBold';
> .title { > .title {
font-weight: 700; font-family: 'satoshiBold';
font-size: 8.6rem; font-size: 8.63rem;
} }
> .desc { > .desc {
font-weight: 500; font-family: 'satoshiMedium';
font-size: 4rem; font-size: 4rem;
margin-top: 3rem; margin-top: 2rem;
line-height: 132%;
} }
} }
> .btns { > .btns {
bottom: 23.3rem; bottom: 19.7rem;
} }
} }
.session.session_2 { .session.session_2 {
> .link {
top: 2rem;
left: 5.4rem;
> span {
font-family: satoshiRegular;
font-size: 3rem;
vertical-align: middle;
text-decoration: underline;
text-underline-offset: 0.8rem;
margin-right: 4.4rem;
}
}
> .content { > .content {
top: 18.5rem; top: 18.5rem;
left: 0; left: 0;