选择模特页面选择风格页面
This commit is contained in:
X1627315083
@@ -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>
|
||||
Reference in New Issue
Block a user