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-16 13:59:18 +08:00
parent 7b6fc2b6ed
commit 43c5b3b16e
9 changed files with 199 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/selectStyle/selectItem.vue
View File

@@ -5,9 +5,14 @@ const props = defineProps({
type: Array,
default: () => [],
} as any,
select: {
type: Array,
default: () => {},
} as any,
})
//const emit = defineEmits([
//])
const emit = defineEmits([
'update:select'
])
let data = reactive({
})
@@ -19,12 +24,8 @@ const setLike = (item,str)=>{
}
}
const addLibrary = (item,str)=>{
if(str === 'add'){
item.isAdd = true
}else{
item.isAdd = false
}
const setSelectList = (item)=>{
emit('update:select', {...item})
}
const deleteStyle = (index)=>{
@@ -55,23 +56,27 @@ const {} = toRefs(data);
<template>
<div class="list">
<div class="item" v-for="(item,index) in selectList" :key="item.id">
<div class="imgBox">
<div class="title">look {{ index + 1 }}</div>
<div class="imgBox" @click="setSelectList(item)">
<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
<div class="icon" v-if="item.id == select?.id">
<SvgIcon name="modelSelected" size="60" />
</div>
</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" />
<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
</div>
<div>
<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="40" />
<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
</div>
<!-- <div>
<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
</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" />
<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
</div>
</div>
</div>
@@ -80,36 +85,63 @@ const {} = toRefs(data);
</template>
<style lang="less" scoped>
.list{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
> .item{
width: 100%;
width: calc(50% - 3.1rem / 2);
position: relative;
margin-bottom: 5.8rem;
height: 29rem;
margin-bottom: 3.3rem;
display: flex;
align-items: center;
&:last-child{
margin-bottom: 0;
flex-direction: column;
> .title{
font-size: 3.6rem;
font-weight: 700;
color: #000;
font-family: 'satoshiMedium';
}
> .imgBox{
flex: 1;
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: 47.2rem;
margin: 2.4rem 0;
background-color: #fff;
justify-content: center;
border: .6px solid #acacac;
border-radius: 1.3px;
position: relative;
> .icon{
position: absolute;
width: 6rem;
height: 6rem;
bottom: -1.8rem;
right: -2.1rem;
}
> img{
height: 26rem;
object-fit: cover;
// object-fit: contain;
width: calc((100% - 1.4rem * 3) / 4);
max-width: 50%;
max-height: 50%;
}
}
> .btn{
margin-left: 7rem;
display: flex;
align-items: center;
justify-content: flex-end;
> div{
color: #989898;
margin-bottom: 2.6rem;
color: #000;
margin-right: 1.2rem;
border-radius: 50%;
width: 6.6rem;
height: 6.6rem;
padding: 1rem;
background-color: #fff;
&:last-child{
margin-bottom: 0;
margin-right: 0rem;
}
&:hover{
color: #000;