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

123

Browse Source
This commit is contained in:
李志鹏
2025-10-20 15:45:42 +08:00
parent 8994b4a1d2
commit 408b159860
10 changed files with 324 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/assets/css/style.css
View File

@@ -29,13 +29,26 @@ button.sandblasted-blurred:active {
opacity: 0.7;
}
html:root {
--van-dialog-width: 90rem;
--van-dialog-font-size: 5rem;
--van-dialog-header-line-height: 150%;
--van-dialog-message-font-size: 3.5rem;
--van-dialog-message-line-height: 150%;
--van-button-default-font-size: 4rem;
--van-dialog-button-height: 9rem;
--van-dialog-message-padding: 3rem 2.5rem;
--van-overlay-background: rgba(0, 0, 0, 0.4);
--van-dialog-width: 45rem;
--van-dialog-font-size: 2.83rem;
--van-dialog-header-font-weight: 600;
--van-dialog-header-line-height: 95%;
--van-text-color: #000;
--van-dialog-header-padding-top: 3rem;
--van-dialog-message-font-size: 2rem;
--van-dialog-message-line-height: 130%;
--van-dialog-has-title-message-text-color: #000;
--van-button-default-font-size: 2.8rem;
--van-dialog-button-height: 6.8rem;
--van-dialog-message-padding: 3.5rem;
--van-dialog-has-title-message-padding-top: 2.5rem;
--van-button-default-color: #1B73E7;
--van-dialog-confirm-button-text-color: #1B73E7;
}
.van-toast__text {
font-size: 4rem;
height: 5rem;
line-height: 5rem;
padding: 0 2rem;
}

33
src/assets/css/style.less
View File

@@ -23,6 +23,7 @@ button.sandblasted-blurred {
&::before {
backdrop-filter: blur(9.5rem);
}
&::after {
opacity: 0.1;
background: url('@/assets/images/customer_form_bg.png');
@@ -37,20 +38,28 @@ button.sandblasted-blurred {
// vant dialog
html:root {
--van-dialog-width: 90rem;
--van-dialog-font-size: 5rem;
--van-dialog-header-line-height: 150%;
--van-dialog-message-font-size: 3.5rem;
--van-dialog-message-line-height: 150%;
--van-button-default-font-size: 4rem;
--van-dialog-button-height: 9rem;
--van-dialog-message-padding: 3rem 2.5rem;
--van-overlay-background: rgba(0, 0, 0, 0.4);
--van-dialog-width: 45rem;
--van-dialog-font-size: 2.83rem;
--van-dialog-header-font-weight: 600;
--van-dialog-header-line-height: 95%;
--van-text-color: #000;
--van-dialog-header-padding-top: 3rem;
--van-dialog-message-font-size: 2rem;
--van-dialog-message-line-height: 130%;
--van-dialog-has-title-message-text-color: #000;
--van-button-default-font-size: 2.8rem;
--van-dialog-button-height: 6.8rem;
--van-dialog-message-padding: 3.5rem;
--van-dialog-has-title-message-padding-top: 2.5rem;
--van-button-default-color: #1B73E7;
--van-dialog-confirm-button-text-color: #1B73E7;
}
.van-toast__text {
font-size: 4rem;
height: 5rem;
line-height: 5rem;
padding: 0 2rem;
font-size: 4rem;
height: 5rem;
line-height: 5rem;
padding: 0 2rem;
}

6
src/components/FooterNavigation.vue
View File

@@ -18,8 +18,10 @@
}
const onHome = (nav) => {
showConfirmDialog({
title: 'Tip',
message: 'The current page has not been saved. Do you want to return to the home page?'
title: 'Return to Home Page?',
message: 'You have unsaved changes. Your progress will be lost.',
confirmButtonText: 'Yes',
cancelButtonText: 'Cancel',
})
.then(() => {
nav.path && router.push(nav.path)

2
src/router/index.ts
View File

@@ -107,7 +107,7 @@ const router = createRouter({
// creation
path: '/workshop/creation',
name: 'creation',
component: () => import('../views/Workshop/creation.vue'),
component: () => import('../views/Workshop/creation/index.vue'),
},
{
// 完成创建

122
src/views/Workshop/creation.vue
View File

@@ -1,122 +0,0 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import MyList from '@/components/myList.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['view-type'])
onMounted(() => {
emit('view-type', 1)
})
const onSave = () => {
console.log('保存')
}
const onContinue = () => {
router.push({ name: 'end' })
}
const list = reactive([{},{},{},{},{},{}])
const loading = ref(false)
const finish = ref(false)
const onLoad = () => {
loading.value = true
setTimeout(() => {
list.push({},{},{},{},{},{})
loading.value = false
if (list.length >= 20) {
finish.value = true
}
}, 1500)
}
</script>
<template>
<header-title style-type="2" />
<div class="creation">
<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">
<img src="@/assets/images/workshop/posture/posture_1.png" />
</div>
</my-list>
</div>
<div class="btns">
<button @click="onSave">Save</button>
<button @click="onContinue">Continue</button>
</div>
</div>
<footer-navigation is-placeholder />
</template>
<style scoped lang="less">
.creation {
width: 100%;
flex: 1;
overflow: hidden;
background-color: #e3e3e3;
border-radius: 1rem;
position: relative;
color: #000;
display: flex;
flex-direction: column;
> .title {
font-family: satoshiRegular;
font-size: 9rem;
text-align: center;
line-height: 124%;
font-weight: 500;
margin: 7.2rem 0;
}
> .list {
flex: 1;
margin: 0 3.8rem;
overflow: hidden;
> .my-list {
padding: 0 6rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// justify-content: space-around;
.item {
width: 47%;
height: 52.9rem;
overflow: hidden;
border-radius: 2rem;
background-color: #fff;
margin-bottom: 4rem;
border: 0.1rem solid #000;
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
> .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>

28
src/views/Workshop/creation/creation-details.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const query = router.currentRoute.value.query
onMounted(() => {})
</script>
<template>
<div class="creation-details">
{{ query }}
</div>
</template>
<style scoped lang="less">
.creation-details {
width: 100%;
flex: 1;
overflow: hidden;
background-color: #e3e3e3;
border-radius: 1rem;
position: relative;
color: #000;
display: flex;
flex-direction: column;
}
</style>

195
src/views/Workshop/creation/creation-list.vue Normal file
View File

@@ -0,0 +1,195 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import MyList from '@/components/myList.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['view-type'])
onMounted(() => {
emit('view-type', 1)
})
const onDetailsItem = (v) => {
if(v.isAi) return;
console.log('详情', v)
router.push({ query: { did: v.id } })
}
const onDownloadItem = (v) => {
console.log('保存', v)
}
const onLoveItem = (v) => {
// Outfit暂时不可以like
console.log('喜欢', v)
v.love = !v.love
}
const onSaveAll = () => {
console.log('保存')
}
const onContinue = () => {
router.push({ name: 'end' })
}
const list = reactive([])
const loading = ref(false)
const finish = ref(false)
const onLoad = () => {
loading.value = true
setTimeout(() => {
for (var i = 0; i < 10; i++) list.push({id: list.length, love: Math.random() > 0.5, isAi: Math.random() > 0.5 })
loading.value = false
if (list.length >= 30) {
finish.value = true
}
}, 500)
}
</script>
<template>
<div class="creation-list">
<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="onDetailsItem(v)">
<img src="@/assets/images/workshop/posture/posture_1.png" />
<div class="corner">
<div class="ai" v-if="v.isAi">Gen-AI</div>
<div class="tryon" v-else>Try-on</div>
</div>
<div class="icons">
<div @click.stop="onLoveItem(v)">
<SvgIcon :name="`love_${v.love ? '1' : '0'}`" size="27" />
</div>
<div @click.stop="onDownloadItem(v)"><SvgIcon name="download" size="27" /></div>
</div>
</div>
</my-list>
</div>
<div class="btns">
<button @click="onSaveAll">Save All</button>
<button @click="onContinue">Continue</button>
</div>
</div>
</template>
<style scoped lang="less">
.creation-list {
width: 100%;
flex: 1;
overflow: hidden;
background-color: #e3e3e3;
border-radius: 1rem;
position: relative;
color: #000;
display: flex;
flex-direction: column;
> .title {
font-family: satoshiRegular;
font-size: 9rem;
text-align: center;
line-height: 124%;
font-weight: 500;
margin: 7.2rem 0;
}
> .list {
flex: 1;
margin: 0 3.8rem;
overflow: hidden;
> .my-list {
padding: 0 6rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// justify-content: space-around;
.item {
width: 47%;
height: 52.9rem;
overflow: hidden;
border-radius: 2rem;
background-color: #fff;
margin-bottom: 4rem;
border: 0.1rem solid #000;
position: relative;
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
> .corner {
position: absolute;
top: 0;
right: 0;
> div {
display: flex;
align-items: center;
justify-content: center;
width: 12.6rem;
height: 3.6rem;
font-family: satoshiBold;
font-size: 1.6rem;
border-bottom-left-radius: 1.6rem;
background-color: #000;
color: #fff;
}
> .ai {
color: #646464;
background: linear-gradient(
137.95deg,
#7a96ac 2.28%,
#eaeff3 19.8%,
#c2d4e1 32.94%,
#ffffff 50.16%,
#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 {
position: absolute;
bottom: 0;
right: 1.7rem;
display: flex;
align-items: center;
flex-direction: column;
> div {
margin-bottom: 2.2rem;
width: 5rem;
height: 5rem;
border-radius: 1rem;
border: 0.2rem solid #000;
--svg-icon-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
> .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>

30
src/views/Workshop/creation/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import CreationList from '@/views/Workshop/creation/creation-list.vue'
import CreationDetails from '@/views/Workshop/creation/creation-details.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const detailsID = computed(() => router.currentRoute.value.query.did);
const emit = defineEmits(['view-type'])
watch(
() => router.currentRoute.value,
() => emit('view-type', 1)
)
onMounted(() => {
emit('view-type', 1)
})
</script>
<template>
<header-title style-type="2" />
<creation-list v-show="!detailsID" />
<creation-details v-show="detailsID" />
<footer-navigation is-placeholder />
</template>
<style scoped lang="less">
</style>

33
src/views/Workshop/customize.vue
View File

@@ -27,7 +27,7 @@
const onRetry = () => {
router.back()
}
const onContinue = () => {
const onFinish = () => {
router.push({ name: 'creation' })
}
</script>
@@ -49,20 +49,19 @@
</div>
<div class="card">
<img src="@/assets/images/workshop/posture/posture_1.png" />
<div class="select-box">
<!-- <div class="select-box">
<div class="icon"><SvgIcon name="history" size="35" /></div>
<div class="label">History</div>
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
</div>
</div> -->
<div class="icons">
<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
<div @click="onDownload"><SvgIcon name="download" size="35" /></div>
<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
</div>
</div>
<div class="btns">
<button @click="onRetry">Re-try?</button>
<button @click="onContinue">Continue</button>
<button @click="onFinish">Finish</button>
</div>
</div>
<footer-navigation />
@@ -88,13 +87,14 @@
font-family: satoshiRegular;
font-size: 3.74rem;
line-height: 124%;
color: rgba(0, 0, 0, 0.6);
}
> .input-box {
margin-top: 7.3rem;
margin-top: 6rem;
width: 87.5rem;
height: 8.3rem;
border-radius: 0.5rem;
border: 0.4rem solid #000000;
border: 0.3rem solid #000000;
box-sizing: content-box;
display: flex;
align-items: center;
@@ -127,9 +127,9 @@
}
}
> .card {
margin-top: 6.9rem;
width: 79.8rem;
height: 107.4rem;
margin-top: 6.4rem;
width: 72.9rem;
height: 102.3rem;
border-radius: 2rem;
// box-shadow: 1.3rem 1.4rem 2rem 0.2rem #0000004d;
border: 0.2rem solid #d9d9d9;
@@ -181,20 +181,21 @@
}
}
> .btns {
margin-top: 2.5rem;
margin-top: 5.6rem;
width: 100%;
display: flex;
justify-content: center;
> button {
box-sizing: content-box;
font-family: satoshiRegular;
margin: 0 2rem;
width: 35rem;
height: 6rem;
// margin: 0 1.8rem;
margin: 0 5.2rem 0 auto;
width: 23.8rem;
height: 6.9rem;
border-radius: 1.3rem;
background: #000;
font-weight: 400;
font-size: 3.6rem;
font-size: 3.89rem;
color: #fff;
&:active {
opacity: 0.7;

12
src/views/Workshop/library.vue
View File

@@ -3,6 +3,7 @@
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import MyList from '@/components/myList.vue'
import router from '@/router'
const emit = defineEmits(['view-type'])
onMounted(() => {
@@ -25,10 +26,11 @@
}
loading.value = false
if (list.length >= 50) finish.value = true
}, 1500)
}, 500)
}
const onRetrieveItem = (i: number) => {
console.log('检索' + i)
const onDetailsItem = (v) => {
// console.log('检索' + i)
router.push({ name: 'creation', query: { date: v.datetime } })
}
const deleteItem = (i: number) => {
@@ -47,10 +49,10 @@
<img src="@/assets/images/workshop/posture/posture_1.png" />
</div>
<div class="content">
<span class="userID">User ID: {{ v.userID }}</span>
<!-- <span class="userID">User ID: {{ v.userID }}</span> -->
<span class="datetime">{{ v.datetime }}</span>
<span class="lastopened">Last opened {{ v.lastopened }}</span>
<button @click="onRetrieveItem(i)">Retrieve</button>
<button @click="onDetailsItem(v)">Details</button>
</div>
<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
</div>