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

选择模特页面选择风格页面

Browse Source
This commit is contained in:
X1627315083
2025-10-09 16:04:55 +08:00
parent 2ffb626b49
commit 118c80e809
8 changed files with 464 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/Workshop/selectModel.vue Normal file
View File

@@ -0,0 +1,129 @@
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
modelList:
[
{
id:1,
imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
},
{
id:2,
imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
},
{
id:3,
imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
},
{
id:4,
imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
},
{
id:5,
imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
},
{
id:6,
imgUrl:'https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T012922Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=e5bfc4ad3a9dbad5ea3bbe82a4ba9e081bcc14520269e7a1534bca30871774a4',
},
],
selectedModelId: null,
})
const setSelectedModelId = (item)=>{
data.selectedModelId = item.id;
}
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const { modelList, selectedModelId } = toRefs(data);
</script>
<template>
<div class="selectModel">
<div class="text">
<div class="title">
Pick a Model Photo!
</div>
<div class="info">
Try one of our sample images
</div>
</div>
<div class="selectContent">
<div class="modelList">
<div v-for="item in modelList" :key="item.id" class="item" @click.stop="setSelectedModelId(item)">
<img :src="item.imgUrl" alt="">
<div class="icon" v-if="item.id == selectedModelId">
<SvgIcon name="modelSelected" size="60" />
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.selectModel{
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
> .text{
text-align: center;
width: 100%;
margin-top: 7rem;
margin-bottom: 4rem;
> .title{
font-family: satoshiBold;
font-weight: 700;
font-size: 9.6rem;
line-height: 124%;
}
> .info{
font-size: 4rem;
font-weight: 400;
line-height: 124%;
margin-top: 1.3rem;
}
}
> .selectContent{
flex: 1;
overflow-y: auto;
padding: 0 11.8rem;
> .modelList{
padding: .6rem 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
> .item{
width: calc((100% - 2.5rem * 2) / 3);
border: 2px solid #D9D9D9;
border-radius: 1rem;
margin-bottom: 5.4rem;
height: 75rem;
> img{
width: 100%;
height: 100%;
object-fit: cover;
}
> .icon{
position: absolute;
width: 6rem;
height: 6rem;
bottom: -1.8rem;
right: -2.1rem;
}
}
}
}
}
</style>

118
src/views/Workshop/selectModelContinue.vue Normal file
View File

@@ -0,0 +1,118 @@
<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
// let data = reactive({
// modelList:
// [
// ],
// selectedModelId: null,
// })
// const setSelectedModelId = (item)=>{
// data.selectedModelId = item.id;
// }
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
// const { modelList, selectedModelId } = toRefs(data);
</script>
<template>
<div class="selectModelContinue">
<div class="router">
<div>Home</div>
<div>Liberay</div>
</div>
<div class="text">
<div class="title">
Go with this Look?
</div>
</div>
<div class="selectContent">
<div class="history"></div>
<div class="modelBox">
<div></div>
<div class="model">
<img src="" alt="">
</div>
</div>
<div class="again">
Re-try with a new model?
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.selectModelContinue{
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
> .router{
margin-top: 3rem;
margin-left: 5.4rem;
display: flex;
> div{
margin-right: 4.4rem;
font-size: 3rem;
font-family: satoshiRegular;
font-weight: 400;
&:last-child{
margin-right: 0;
}
}
}
> .text{
text-align: center;
width: 100%;
margin-top: 6rem;
> .title{
font-family: satoshiBold;
font-weight: 700;
font-size: 9.6rem;
line-height: 124%;
}
}
> .selectContent{
flex: 1;
overflow-y: auto;
padding: 0 14.1rem;
margin-top: 1.5rem;
> .history{
}
> .model{
margin-top: 2.5rem;
> .model{
border: 2px solid #D9D9D9;
height: 79.8rem;
position: relative;
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
> .again{
margin-top: 5.6rem;
font-family: satoshiMedium;
padding: 0 10.5rem;
line-height: 10.4rem;
background-color: #000;
color: #fff;
border-radius: 10rem;
font-size: 4.8rem;
}
}
}
</style>

92
src/views/Workshop/selectStyle.vue
View File

@@ -1,34 +1,79 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
import SelectItem from "@/components/selectStyle/selectItem.vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
selectList:
[
{
id:1,
imgList:[
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
],
isLike: false,
isAdd: false,
},
{
id:2,
imgList:[
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
],
isLike: false,
isAdd: false,
},
{
id:2,
imgList:[
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
],
isLike: false,
isAdd: false,
},
{
id:2,
imgList:[
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
'https://www.minio-api.aida.com.hk/aida-users/83/print/4690d6b7-5cc4-47da-bef6-f4585c9c2fdf-3-83.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T024954Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=b57237c2cd7f5b2eb4216de2a99d0bd8827a1289613b5f0813acf1e414a6c334',
],
isLike: false,
isAdd: false,
},
]
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
const { selectList } = toRefs(data);
</script>
<template>
<div class="selectStyle">
<div class="title">
<div class="icon">
<SvgIcon name="noLike" size="30" />
<SvgIcon name="like" size="30" />
<SvgIcon name="delete" color="red" size="30" />
<SvgIcon name="add" color="red" size="30" />
<SvgIcon name="update" color="red" size="30" />
<SvgIcon name="confirmation" color="red" size="30" />
<div class="text">
<div class="title">
What’s your Style?
</div>
<div class="info">
Select the outfit that matches you the most.
</div>
12312
</div>
<SelectItem />
<div class="selectContent">
<SelectItem :selectList="selectList" />
</div>
</div>
</template>
<style lang="less" scoped>
@@ -36,5 +81,26 @@ const {} = toRefs(data);
width: 100%;
height: 100%;
position: relative;
> .text{
text-align: center;
width: 100%;
margin-top: 7rem;
margin-bottom: 4.8rem;
> .title{
font-family: satoshiBold;
font-weight: 700;
font-size: 9.6rem;
line-height: 124%;
}
> .info{
font-size: 4rem;
font-weight: 400;
line-height: 124%;
margin-top: 1.3rem;
}
}
.selectContent{
padding: 0 4rem;
}
}
</style>