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

.eslintrc.cjs

@@ -2,6 +2,22 @@
 require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
+rules: {
+	 // 忽略未使用的变量和参数
+	 '@typescript-eslint/no-unused-vars': 'off',
+	 'no-unused-vars': 'off',
+	 
+	 // 或者设置为警告级别
+	 // '@typescript-eslint/no-unused-vars': 'warn',
+	 // 'no-unused-vars': 'warn',
+	 
+	 // Vue 相关规则
+	 'vue/multi-word-component-names': 'off',
+	 'vue/no-unused-vars': 'off',
+	 'vue/no-mutating-props': 'off',
+	 'no-empty-pattern': 'off'
+
+	},
   root: true,
   'extends': [
     'plugin:vue/vue3-essential',

src/assets/icons/modelSelected.svg

@@ -0,0 +1,9 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="60" height="60" fill="url(#pattern0_1_2934)"/>
+<defs>
+<pattern id="pattern0_1_2934" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1_2934" transform="scale(0.0111111)"/>
+</pattern>
+<image id="image0_1_2934" width="90" height="90" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsTAAALEwEAmpwYAAAETUlEQVR4nO2dS2jVRxSHv9a0SbGtm4JGhVpS10KtqypKSCsBS+3CFtIH9UnBglYRdSG4M2YlAbsSuuo2TZuFortuFGtJE+HSLrRdtBbNy66aQuKRgRMIITfexzzO/3/ng98m3DuZ+THMzDnzuJDJZDKZTCaTyWQymZpZBWwDDgIDwDAwDtwDpoH/VdP6t3H9zEX9zttaRmYZNgLHgRHgX0Ca1GPgR+AYsIEW5yXgM+AGMO/B3GqaA64DnwIdtBAva0/7O6C51fQIOA+socS8AJwCphIYvFSuDie1TqViB3DXgMFL9RvQQwlwY+Jl4IkBU6vJ1W0QaKegbAJuGTBSatQvwJsUjB5PyzSJLLcs7KYgfAj8Z8A0aVAuGPoY4xwJvCaWSHJtOIxR9mpwkNok8Wj2RxjDjWuzBsyRAMPIexhhc0EnPqljguxKbXK7Louk5LqTep192YAJEkkuqEkWVluO+MSzXFt3xja5DRgz0HiJrLuxE1GnDDRaEunrmPnkSQMNlkSaVA+Cc9pAYyWxXC47eNrzgYGGSmL9o1txwfjcQCPFiPpCGn3DQAPFiK6GPBJQhszcrM4z61SnNadRbzkugdYZwujjJTG5d5m2nWmwvK9CGD1iwChpQq7Xvl+lbWsbLHPIt8nuiNVMSU12rG+w3Bnfx8+2GTBLPA8XiznbRPlbfRp9sMQm9za5abHfp9EDBkwTz8OFY7eHjeQLPo3+wYBxYtBk7xNikVKisxGGi8Ua9Wn0nwYMFGM9eUH3fRpt4QSoGDTZacKn0Y2EqK1gsugQZNLon4AvNXz9uYBjclCjfe2ofAc8t2Tv8UqBTfY+dPzhqVKblin7+QbNtmCy98nQx/JuHnixSvn1mm3FZO/Lu2FPlepe4X/UarYlk70HLL5C8N+B15ow25rJTv1Wk0oV3dmohpssvzG2hFtJX1hOk47V2bMt9uQFvWU98V+psWdb7clBEv/o3WpJ0LO3GO3JQbay0GvFksBsqyY7HSUA6wPeUak8YxixNFwsaK6BOtfM9YAVr9RR8dQmBz1Agz77IInN3m3A5OBHwjoiPP9QWcFsKyYHP+QY6xD6mB5qWcweQ1fsThCBVyLtuDwEzmnk9a2hc38uLbqaSJw00GBJJLfMjYZL2P9qoNFS9stCju35+ls8Bg0YIJF0iYS06/VdKblur7A7FI0uvZguJdUM8AZG2GUkkBDPcinadzHGByV8GGUfRjlsKLCQJuQ6zCGMs7fgw8isxSd+qtFd0AlyRuebQvE6cNOAeVKj7lh40qeZdfag8QjyiQYjydfJvsL1MQOmLpWr0zuUjDZ9VGTCgMETmoVzdSotq7WRfyUw+KE+1P0qLUQH8AlwLXCgM6cbqX2t9vT8cnTqDYDv9dcomjV3Wss6GvJIQNFZpefZDuhJzSE9g3xPt9AWfh5kSv82qp/p11us7rv550EymUwmk8lkMplMhhp5CqaIor9P1Mi+AAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

src/components/selectStyle/selectItem.vue

@@ -1,11 +1,50 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { onMounted, onUnmounted, reactive, toRefs } from "vue";
-//const props = defineProps({
+const props = defineProps({
-//})
+	selectList: {
+		type: Array,
+		default: () => [],
+	} as any,
+})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
+
+const setLike = (item,str)=>{
+	if(str === 'like'){
+		item.isLike = true
+	}else{
+		item.isLike = false
+	}
+}
+
+const addLibrary = (item,str)=>{
+	if(str === 'add'){
+		item.isAdd = true
+	}else{
+		item.isAdd = false
+	}
+}
+
+const deleteStyle = (index)=>{
+	props.selectList.splice(index,1)
+}
+
+const updateStyle = (item,index)=>{
+	props.selectList[index] = {
+		id:item.id,
+		imgList:[
+			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.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=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
+			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.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=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
+			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.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=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
+			'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.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=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
+		],
+		isLike: false,
+		isAdd: false,
+	}
+}
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -14,14 +53,69 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<div class="item">
+	<div class="list">
+		<div class="item" v-for="(item,index) in selectList" :key="item.id">
+			<div class="imgBox">
+				<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
+			</div>
+			<div class="btn">
+				<div>
+					<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="40" />
+					<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="40" />
+				</div>
+				<div>
+					<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="40" />
+				</div>
+				<div>
+					<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="40" />
+					<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="40" />
+				</div>
+				<div>
+					<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="40" />
+				</div>
+			</div>
+		</div>
 		
 	</div>
 </template>
 <style lang="less" scoped>
-	.item{
+	.list{
-		width: 100%;
+		> .item{
-		height: 100%;
+			width: 100%;
-		position: relative;
+			position: relative;
+			margin-bottom: 5.8rem;
+			height: 29rem;
+			display: flex;
+			align-items: center;
+			&:last-child{
+				margin-bottom: 0;
+			}
+			> .imgBox{
+				flex: 1;
+				display: flex;
+				height: 100%;
+				justify-content: space-between;
+				align-items: center;
+				> img{
+					height: 26rem;
+					object-fit: cover;
+					// object-fit: contain;
+					width: calc((100% - 1.4rem * 3) / 4);
+				}
+			}
+			> .btn{
+				margin-left: 7rem;
+				> div{
+					color: #989898;
+					margin-bottom: 2.6rem;
+					&:last-child{
+						margin-bottom: 0;
+					}
+					&:hover{
+						color: #000;
+					}
+				}
+			}
+		}
 	}
 </style>

src/router/index.ts

@@ -23,6 +23,16 @@ const router = createRouter({
 				name: 'SelectStyle',
 				component: () => import('../views/Workshop/selectStyle.vue'),
 			},
+			{
+				path: '/workshop/selectModel',
+				name: 'SelectModel',
+				component: () => import('../views/Workshop/selectModel.vue'),
+			},
+			{
+				path: '/workshop/selectModelContinue',
+				name: 'SelectModelContinue',
+				component: () => import('../views/Workshop/selectModelContinue.vue'),
+			},
 			
 			
 		]

src/utils/flexible.js

@@ -1,6 +1,6 @@
 import { getUniversalZoomLevel } from '@/utils/tools'
 
-let flexible = (designWidth, maxWidth,minWidth) =>{
+let flexible = (designWidth) =>{
     var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
     designWidth = designWidth || 1080;
     // maxWidth = maxWidth || 1920;

src/views/Workshop/selectModel.vue

@@ -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>

src/views/Workshop/selectModelContinue.vue

@@ -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>

src/views/Workshop/selectStyle.vue

@@ -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="text">
-			<div class="icon">
+			<div class="title">
-				<SvgIcon name="noLike" size="30" />
+				What’s your Style?
-				<SvgIcon name="like" size="30" />
+			</div>
-				<SvgIcon name="delete" color="red" size="30" />
+			<div class="info">
-				<SvgIcon name="add" color="red" size="30" />
+				Select the outfit that matches you the most.
-				<SvgIcon name="update" color="red" size="30" />
-				<SvgIcon name="confirmation" color="red" size="30" />
 			</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>