165 lines
3.7 KiB
Vue
165 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
const props = defineProps({
|
|
selectList: {
|
|
type: Array,
|
|
default: () => [],
|
|
} as any,
|
|
select: {
|
|
type: Object,
|
|
default: () => {},
|
|
} as any,
|
|
})
|
|
const emit = defineEmits([
|
|
'selectItem','updateStyle'
|
|
])
|
|
let data = reactive({
|
|
})
|
|
|
|
const setLike = (item,str)=>{
|
|
if(str === 'like'){
|
|
item.isLike = true
|
|
}else{
|
|
item.isLike = false
|
|
}
|
|
}
|
|
|
|
const setSelectList = (item)=>{
|
|
emit('selectItem', item)
|
|
}
|
|
|
|
const deleteStyle = (index)=>{
|
|
props.selectList.splice(index,1)
|
|
}
|
|
|
|
const updateStyle = (item,index)=>{
|
|
emit('updateStyle', {item,index})
|
|
}
|
|
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="list">
|
|
<div class="item" v-for="(item,index) in selectList" :key="item.id">
|
|
<div class="title">look {{ index + 1 }}</div>
|
|
<div class="imgBox" @click="setSelectList(item)">
|
|
<img v-if="item?.path" :src="item?.path" alt="">
|
|
<van-loading v-else size="20rem"/>
|
|
<!-- <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 class="mask running" v-if="item.status == 'RUNNING'">
|
|
<van-loading type="spinner" size="20rem"/>
|
|
</div>
|
|
<div class="mask" v-if="item.id == select?.oldId"></div>
|
|
</div>
|
|
<div class="btn">
|
|
<!-- <div>
|
|
<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="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 @click.stop="deleteStyle(index)" name="delete" size="30" />
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.list{
|
|
display: flex;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
> .item{
|
|
width: calc(50% - 3.1rem / 2);
|
|
position: relative;
|
|
// margin-bottom: 3.3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .title{
|
|
font-size: 3.44rem;
|
|
font-weight: 700;
|
|
color: #000;
|
|
font-family: 'satoshiMedium';
|
|
}
|
|
> .imgBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
height: 45rem;
|
|
margin: 2.4rem 0;
|
|
background-color: #fff;
|
|
justify-content: center;
|
|
border: .6px solid #acacac;
|
|
border-radius: 1.3px;
|
|
position: relative;
|
|
> .mask{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
top: 0;
|
|
left: 0;
|
|
.van-loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
}
|
|
> .icon{
|
|
position: absolute;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
bottom: -1.8rem;
|
|
right: -2.1rem;
|
|
}
|
|
> img{
|
|
// height: 26rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
// object-fit: cover;
|
|
object-fit: contain;
|
|
// max-width: 50%;
|
|
// max-height: 50%;
|
|
}
|
|
}
|
|
> .btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
> div{
|
|
color: #000;
|
|
margin-right: 1.2rem;
|
|
border-radius: 50%;
|
|
width: 5.2rem;
|
|
height: 5.2rem;
|
|
padding: 1rem;
|
|
background-color: #fff;
|
|
&:last-child{
|
|
margin-right: 0rem;
|
|
}
|
|
&:hover{
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |