选择模特页面选择风格页面
This commit is contained in:
X1627315083
@@ -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',
|
||||
|
||||
9
src/assets/icons/modelSelected.svg
Normal file
9
src/assets/icons/modelSelected.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -1,11 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
//const props = defineProps({
|
||||
//})
|
||||
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
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{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.list{
|
||||
> .item{
|
||||
width: 100%;
|
||||
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>
|
||||
@@ -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'),
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
@@ -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;
|
||||
|
||||
129
src/views/Workshop/selectModel.vue
Normal file
129
src/views/Workshop/selectModel.vue
Normal 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
118
src/views/Workshop/selectModelContinue.vue
Normal 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>
|
||||
@@ -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