aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4296ed8f8b5aa98d78060972e69ad30187630b59
lanecarford_front/src/views/Workshop/selectStyle.vue

106 lines
8.1 KiB
Vue
Raw Normal View History

创建基础结构
2025-10-09 10:42:45 +08:00
<script setup lang="ts">
选择模特页面选择风格页面
2025-10-09 16:04:55 +08:00
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
字体文件
2025-10-09 13:56:00 +08:00
import SelectItem from "@/components/selectStyle/selectItem.vue";
创建基础结构
2025-10-09 10:42:45 +08:00
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
选择模特页面选择风格页面
2025-10-09 16:04:55 +08:00
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,
},
]
创建基础结构
2025-10-09 10:42:45 +08:00
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
选择模特页面选择风格页面
2025-10-09 16:04:55 +08:00
const { selectList } = toRefs(data);
创建基础结构
2025-10-09 10:42:45 +08:00
</script>
<template>
<div class="selectStyle">
选择模特页面选择风格页面
2025-10-09 16:04:55 +08:00
<div class="text">
<div class="title">
What’s your Style?
字体文件
2025-10-09 13:56:00 +08:00
</div>
选择模特页面选择风格页面
2025-10-09 16:04:55 +08:00
<div class="info">
Select the outfit that matches you the most.
</div>
</div>
<div class="selectContent">
<SelectItem :selectList="selectList" />
创建基础结构
2025-10-09 10:42:45 +08:00
</div>
</div>
</template>
<style lang="less" scoped>
.selectStyle{
width: 100%;
height: 100%;
position: relative;
选择模特页面选择风格页面
2025-10-09 16:04:55 +08:00
> .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;
}
创建基础结构
2025-10-09 10:42:45 +08:00
}
</style>
Reference in New Issue Copy Permalink