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>