合并画布代码

src/component/home/design/index.vue

@@ -54,8 +54,6 @@
 						</div>
 						<div class="right_content_block_box">
 							<div class="right_content_block" ref="rightContentBlockBox" @mouseenter="mouseenter($event,'like')">
-								
-
 								<div class="right_content_body">
 									<div class="right_content_header">
 										<div class="content_header_left">
@@ -63,19 +61,23 @@
 												{{ $t('HomeView.SelectedDesign') }}
 												</span>
 										</div>
-										<div class="generalModel_state">
-											<!-- <div class="generalModel_state_item smail" style="margin-right: 0;">
+										<div class="generalModel_state" v-show="domHidden || !recycleDomHidden">
+											<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
 												<span>Type :</span>
 												<a-select
-													v-model:value="widthValue.value"
+													v-model:value="resultType"
 													size="large"
 													style="width: 15rem"
 													placeholder="Please select"
-													:options="widthList"
-													@change="upDataLikeListType(500)"
+													:options="resultTypeList"
+													@change="changeResultType"
 												>
 												</a-select>
-											</div> -->
+											</div>
+											<div @click="setUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
+												<span>Unfold :</span>
+												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
+											</div>
 											<div class="generalModel_state_item smail" style="margin-right: 0;">
 												<span>Size :</span>
 												<a-select
@@ -92,15 +94,19 @@
 									</div>
 									<div class="right_content_img_block scroll_style active">
 										<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
+											<!-- likeDesignCollectionList -->
 											<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
-												v-for="(design, index) in likeDesignCollectionList" :key="design.id || design.designItemId">
+												v-for="(design, index) in selectLikeDesign" :key="design.id || design.designItemId">
 												<div class="content_img_flex"
-												@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId || design.id,'like')" 
-												@touchstart.passive="designMousedown(getMousePosition($event,true),design.userLikeSortId || design.id,'like')"
+												:class="[design.resultType]"
+												@mouseenter="startHover(getMousePosition($event,false),design)"
+												@mouseleave="endHover(getMousePosition($event,false),design)"
+												@mousedown.stop="designMousedown(getMousePosition($event,false),design,'like')" 
+												@touchstart.passive="designMousedown(getMousePosition($event,true),design,'like')"
 												@click="designDetail(
 														design,
 														index,
-														likeDesignCollectionList,
+														selectLikeDesign,
 														'like'
 													)">
 													<img class="content_img" 
@@ -111,33 +117,36 @@
 													<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
 														:key="design.designOutfitUrl" designType="like" :index="index"/>
 													<a-spin v-show="design?.generateAwait" size="large"></a-spin>
-												</div>
-												<div class="btn" v-show="!design?.generateAwait">
-													<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
-													<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
-														<div class="item" @click="dislikeDesignCollection(design,design.resultType,index)">
-															<div class="text">On Like</div>
-															<div class="icon iconfont icon-jushoucanggift icon_like">
+
+													<!-- <div class="content_img_block_child" @click.stop>
+														<div class="content_img_block content_img_GetWidth active childItem"
+															:style="likeStyle"
+															v-for="childItem,childIndex in design.childList"
+														>
+															<div class="content_img_flex">
+																<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
+																<a-spin v-show="design?.generateAwait" size="large"></a-spin>
+															</div>
+															<div class="btn" v-show="!childItem?.generateAwait">
+																<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
 															</div>
 														</div>
-														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'PoseTransfer','add','like')">
-															<div class="text">Transfer Pose</div>
-															<div class="icon iconfont icon-jushoucanggift icon_like"></div>
+														<div class="content_img_block content_img_GetWidth active childItem"
+															:style="likeStyle"
+															v-for="childItem,childIndex in design.childList"
+														>
+															<div class="content_img_flex">
+																<img class="content_img" v-show="!design?.generateAwait" :src="childItem.designOutfitUrl||childItem.url" alt="">
+																<a-spin v-show="design?.generateAwait" size="large"></a-spin>
+															</div>
+															<div class="btn" v-show="!childItem?.generateAwait">
+																<i @click.stop="openEditBtn(childItem,childIndex,$event)" class="fi fi-br-menu-dots-vertical"></i>
+															</div>
 														</div>
-														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'Relight','add','like')">
-															<div class="text">Relight</div>
-															<i class="fi fi fi-br-keyboard-brightness"></i>
-														</div>
-														<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(likeDesignCollectionList,index,'ToProductImage','add','like')">
-															<div class="text">To Product Image</div>
-															<i class="fi fi fi-ss-box-open"></i>
-														</div>
-														<!-- <div class="item" @click="setDeleteDesign(design,index)">
-															<div class="text">Delete</div>
-															<i class="fi fi-rr-trash icon_delete">
-															</i>
-														</div> -->
-													</div>
+													</div> -->
+												</div>
+												<div class="btn" v-show="!design?.generateAwait">
+													<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
 													
 												</div>
 											</div>
@@ -182,31 +191,10 @@
 														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
 													</div> 
 													<div class="btn">
-														<i @click.stop="openEditBtn(design.designItemId||design.id)" class="fi fi-br-menu-dots-vertical"></i>
-														<div class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == design.designItemId||openEditBtnId == design.id}">
-															<div class="item" @click="likeDesignCollection(design,index,design.resultType)">
-																<div class="text">Like</div>
-																<div class="icon iconfont icon-jushoucang icon_like">
-																</div>
-															</div>
-															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'PoseTransfer','add','disLike')">
-																<div class="text">Transfer Pose</div>
-																<div class="icon iconfont icon-jushoucanggift icon_like"></div>
-															</div>
-															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'Relight','add','disLike')">
-																<div class="text">Relight</div>
-																<i class="fi fi fi-br-keyboard-brightness"></i>
-															</div>
-															<div class="item" v-show="design.resultType == 'Design'" @click="setEditDesignType(designCollectionList,index,'ToProductImage','add','disLike')">
-																<div class="text">To Product Image</div>
-																<i class="fi fi fi-ss-box-open"></i>
-															</div>
-															<div class="item" @click="setDeleteDesign(design,index)">
-																<div class="text">Delete</div>
-																<i class="fi fi-rr-trash icon_delete">
-																</i>
-															</div>
+														<div class="icon iconfont icon-jushoucang icon_like" @click="likeDesignCollection(design,index,design.resultType)">
 														</div>
+														<i class="fi fi-rr-trash icon_delete" @click="setDeleteDesign(design,index)">
+														</i>
 													</div>
 											</div>
 											
@@ -219,11 +207,29 @@
 								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
 							</div>
 						</div>
-						
 					</div>
 				</div>
 			</div>
 		</div>
+		<div ref="designBtn"  class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
+			<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
+				<div class="text">Delete</div>
+				<i class="fi fi-rr-trash icon_delete">
+				</i>
+			</div>
+			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
+				<div class="text">Transfer Pose</div>
+				<i class="fi fi fi-rr-play-alt"></i>
+			</div>
+			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
+				<div class="text">Relight</div>
+				<i class="fi fi fi-br-keyboard-brightness"></i>
+			</div>
+			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
+				<div class="text">To Product Image</div>
+				<i class="fi fi fi-ss-box-open"></i>
+			</div>
+		</div>
 		<collectionModal ref="collectionModal"></collectionModal>
 		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
 		<!-- 导出缩略图的蒙层 start-->
@@ -249,7 +255,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef} from "vue";
+import { defineComponent, h, ref, computed, toRefs, inject,provide,nextTick,reactive,onBeforeUnmount, toRef, watch} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import generalCanvas from "@/component/modules/generalCanvas.vue";
@@ -376,9 +382,12 @@ export default defineComponent({
 		const dataDom = reactive({
 			collectionModal:null as any,
 			editDesignType:null as any,
+			designBtn:null as any,
 		})
 		const designData = reactive({
 			openEditBtnId:-1,
+			selectEditBtn:null as any,
+			selectEditBtnIndex:-1,
 			likeLoading: false, //喜欢防抖
 			widthList:[
 				{
@@ -392,6 +401,39 @@ export default defineComponent({
 					value:400,
 				}
 			],
+			selectDesign:null as any,//当前选择的design
+			isUnfold:false,
+			selectLikeDesign:[] as any,
+
+			//类型
+			resultTypeList:[
+				{
+					label:'All',
+					value:'All',
+				},{
+					label:'Design',
+					value:'Design',
+				},{
+					label:'Product',
+					value:'Product',
+				},
+				// ,{
+				// 	label:'To Product Image',
+				// 	value:'ToProductImage',
+				// },{
+				// 	label:'Relight',
+				// 	value:'Relight',
+				// },
+				{
+					label:'Pose Transfer',
+					value:'PoseTransfer',
+				},
+			],
+			resultType:'All',
+			oldSelectLikeDesign:null as any
+		})
+		watch(()=>likeDesignCollectionList.value.length,(val)=>{
+			if(val>0)uploadLikeDom()
 		})
 		provide('exportNav',exportNav)
 		let isShowOperate = ref(false)
@@ -476,9 +518,11 @@ export default defineComponent({
 				for(let i = 0;i < elArr.length;i++){
 					posiitonData.value.likeElList.push({
 						el: elArr[i], 
-						sort: likeDesignCollectionList.value[i].sort - 1, 
+						sort: designData.selectLikeDesign[i].sort - 1, 
+						// sort: likeDesignCollectionList.value[i].sort - 1, 
 						index: i,
-						userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
+						userLikeSortId:designData.selectLikeDesign[i].userLikeSortId || designData.selectLikeDesign[i].id
+						// userLikeSortId:likeDesignCollectionList.value[i].userLikeSortId || likeDesignCollectionList.value[i].id
 					});
 				}
 				moveItem('like')
@@ -513,8 +557,10 @@ export default defineComponent({
 		const cancelDeleteDesign = (index:any)=>{
 			store.commit("cancelDeleteDesignCollectionList",index);
 		}
-		const designMousedown = (e:any,Id:number,str:string)=>{
+		const designMousedown = (e:any,design:any,str:string)=>{
+			if(design.resultType != 'Design' || designData.isUnfold)return
 			if(str != 'like' && showDesignMark.value) return
+			let Id = design.userLikeSortId || design.id
 			let arr = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
 			let item:any  = arr.filter((item:any)=>item.userLikeSortId == Id)[0]
 			item.el.style.zIndex = 2;
@@ -624,6 +670,7 @@ export default defineComponent({
 			}
 		}
 		const setLikeDislLike = (str:string,value:any)=>{
+			designData.selectLikeDesign = []
 			posiitonData.value.likeSelectIndex = 0
 			nextTick(()=>{
 				if(str == 'like'){
@@ -688,8 +735,24 @@ export default defineComponent({
 		const openCollection = (str:string)=>{
 			dataDom.collectionModal.init(str)
 		}
-		const openEditBtn = (id:number)=>{
-			designData.openEditBtnId = id
+		const openEditBtn = (design:any,index:number,event:any)=>{
+			if(designData.selectLikeDesign[index].resultType != 'Design'){
+				designData.selectDesign = designData.selectLikeDesign.filter((item:any)=>(item.resultType == 'Design' && item.userLikeSortId == designData.selectLikeDesign[index].parentId))[0]
+			}else{
+				designData.selectDesign = designData.selectLikeDesign[index]
+			}
+			designData.openEditBtnId = design.designItemId||design.id
+			designData.selectEditBtn = design
+			designData.selectEditBtnIndex = index
+			let width = event.target.offsetWidth
+			let height = event.target.offsetHeight
+			let parentRect = dataDom.designBtn.parentElement.getBoundingClientRect()
+			
+			let x = event.clientX - parentRect.x - event.offsetX + width
+			let y = event.clientY - parentRect.y - event.offsetY + height
+			dataDom.designBtn.style.left = x+'px'
+			dataDom.designBtn.style.top = y+'px'
+			
 			let removeEditBtnId = ()=>{
 				designData.openEditBtnId = -1
 				document.removeEventListener('click',removeEditBtnId)
@@ -714,7 +777,6 @@ export default defineComponent({
 			dataDom.editDesignType.isComparison = true
 		}
 		const addGenerateImg = (data:any)=>{
-			console.log(data)
 			if(!data.id)return
 			let obj = {
 				id:data.id,
@@ -729,6 +791,7 @@ export default defineComponent({
 				userGroupId:data.userGroupId || data.id,
 				firstFrameUrl:data.firstFrameUrl,
 				gifUrl:data.gifUrl,
+				userLikeSortId:data.userLikeSortId,	
 			}
 			let list = []
 			if(data.listType == 'disLike'){
@@ -763,16 +826,18 @@ export default defineComponent({
 				list[data.isIndex].designItemId = obj.designItemId
 				list[data.isIndex].sourceUrl = obj.sourceUrl
 			}
-			nextTick().then(()=>{
-				setDesignItemStyle()
-				setSystemDesigner(100)
-			})
+			// nextTick().then(()=>{
+			// 	// setDesignItemStyle()
+			// 	// setSystemDesigner(100)
+			// 	uploadLikeDom()
+			// })
 		}
 		const setNoDesignLike = (design:any,index:any,type:any,str:string) => {
 			let url
 			let data = {
 				toProductImageResultId:[(design.designItemId || design.id)],
 				projectId: store.state.Workspace.probjects.id,
+				collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
 			} as any
 			let params = {} as any
 			if(type == 'ToProductImage' || type == 'Relight'){
@@ -788,12 +853,14 @@ export default defineComponent({
 						likeOrDislike:'like',
 						transformedId:design.id,
 						projectId:store.state.Workspace.probjects.id,
+						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
 					}
 				}else{
 					params = {
 						likeOrDislike:'dislike',
 						transformedId:design.id,
 						projectId:store.state.Workspace.probjects.id,
+						collectionSortParentId:designData?.selectDesign?.userLikeSortId || design.parentId,
 					}
 				}
 			}else{
@@ -807,28 +874,48 @@ export default defineComponent({
 			Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
 				(rv) => {
 					if(str == 'like'){
-						let value:any = {
-							...design,
-							sort:likeDesignCollectionList.value.length + 1,
-							userLikeGroupId:design.id,
-						}
-						design.groupDetailId = rv.groupDetailId;
-						store.commit(
-							"addLikeDesignCollectionList",
-							value
-						);
-						setLikeDislLike('like',value)
-						if(index != -1)store.commit("deleteDesignCollectionList", index);
-					}else{
-						if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
-						store.commit("addDesignCollectionList", [design]);
 						likeDesignCollectionList.value.forEach((item:any)=>{
-							if(item.sort > design.sort){
-								item.sort-=1
+							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
+								item.childList.push(design)
+							}
+						})
+					}else{
+						likeDesignCollectionList.value.forEach((item:any)=>{
+							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
+								item.childList = item.childList.filter((item:any)=>{
+									return item.id != design.id
+								})
 							}
 						})
-						setLikeDislLike('disLike',design)
 					}
+					nextTick().then(()=>{
+						uploadLikeDom()
+					})
+					
+
+					//一下代码是生成的design时候也可以toproduct
+					// if(str == 'like'){
+					// 	let value:any = {
+					// 		...design,
+					// 		sort:likeDesignCollectionList.value.length + 1,
+					// 		userLikeGroupId:design.id,
+					// 	}
+					// 	design.groupDetailId = rv.groupDetailId;
+					// 	store.commit(
+					// 		"addLikeDesignCollectionList",
+					// 		value
+					// 	);
+					// 	setLikeDislLike('like',value)
+					// 	if(index != -1)store.commit("deleteDesignCollectionList", index);
+					// }else{
+					// 	if(index != -1)store.commit("deleteLikeDesignCollectionList", index);
+					// 	store.commit("addDesignCollectionList", [design]);
+					// 	likeDesignCollectionList.value.forEach((item:any)=>{
+					// 		if(item.sort > design.sort){
+					// 			item.sort-=1
+					// 		}
+					// 	})
+					// }
 					designData.likeLoading = false;
 				}
 			).catch(res=>{
@@ -898,6 +985,81 @@ export default defineComponent({
 		const gifPause = (e:any,item:any)=>{
 			e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
 		}
+		const startHover = (e:any,item:any)=>{
+		}
+		const endHover = (e:any,item:any)=>{
+
+		}
+		const setUnfold = ()=>{
+			designData.isUnfold = !designData.isUnfold
+			if(!designData.isUnfold){
+				designData.selectLikeDesign = designData.oldSelectLikeDesign || []
+			}
+			uploadLikeDom()
+		}
+		const uploadLikeDom = ()=>{
+			if(designData.isUnfold){
+				// const parents = designData.selectLikeDesign.filter((item:any) => item.type === 'design');
+				designData.selectLikeDesign = []
+				likeDesignCollectionList.value.sort((a:any,b:any)=>{return a.sort - b.sort})
+				let childLength = 0
+				likeDesignCollectionList.value.forEach((likeItem:any,index:any)=>{
+					let item = JSON.parse(JSON.stringify(likeItem))
+					item.oldSort = item.sort
+					if(item?.childList?.length > 0){
+						item.childList.forEach((childItem:any,childIndex:number)=>{
+							childItem.sort = childIndex + item.sort + childLength
+							designData.selectLikeDesign.push(childItem)
+						})
+						childLength = item.childList.length + childLength
+					}
+					item.sort = childLength + item.sort
+					designData.selectLikeDesign.push(item)
+				})
+				designData.oldSelectLikeDesign = []
+				designData.resultType = 'All'
+			}else{
+				if(designData.selectLikeDesign.length == 0){
+					designData.selectLikeDesign = likeDesignCollectionList.value
+					return
+				}
+				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
+				parents.map((parent:any) => {
+					parent.sort = parent.oldSort||parent.sort
+					return {
+					...parent,
+					childList: designData.selectLikeDesign.filter((item:any) => 
+						item.parentId === parent.userLikeSortId && item.resultType !== 'Design'
+					)
+					};
+				});
+				designData.selectLikeDesign = parents
+			}
+			nextTick(()=>{
+				setSystemDesigner(0)
+			})
+		}
+		const changeResultType = ()=>{
+			if(designData.resultType != 'All'){
+				if(designData.oldSelectLikeDesign.length == 0)designData.oldSelectLikeDesign = designData.selectLikeDesign
+				if(designData.resultType == 'Product'){
+					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => (item.resultType === 'ToProductImage' || item.resultType === 'Relight'));
+				}else{
+					designData.selectLikeDesign = designData.oldSelectLikeDesign.filter((item:any) => item.resultType === designData.resultType);
+				}
+				designData.selectLikeDesign.forEach((item:any,index:number) => {
+					item.sort = index + 1
+				})
+			}else{
+				designData.selectLikeDesign = designData.oldSelectLikeDesign
+				designData.selectLikeDesign.forEach((item:any,index:number) => {
+					item.sort = index + 1
+				})
+			}
+			nextTick(()=>{
+				setSystemDesigner(0)
+			})
+		}
 		return {
 			store,
 			...toRefs(editDesignType),
@@ -952,6 +1114,10 @@ export default defineComponent({
 			setGenerateAwait,
 			gifPlay,
 			gifPause,
+			startHover,
+			endHover,
+			setUnfold,
+			changeResultType,
 		};
 	},
 	data() {
@@ -1249,6 +1415,7 @@ export default defineComponent({
 				marketingSketchFiles,
 				moodboardPosition,
 			} = this.store.state.UploadFilesModule.allBoardData;
+			console.log(JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData)))
 			this.randomNum()
 			let modelList = [] as any;
 			let workspace:any = this.store.state.Workspace.probjects
@@ -1427,21 +1594,17 @@ export default defineComponent({
 			Https.axiosPost(Https.httpUrls.designDislike, data)
 				.then((rv: any) => {
 					if (rv) {
-						this.store.commit("addDesignCollectionList", [design]);
-						this.store.commit(
-							"deleteLikeDesignCollectionList",
-							index
-						);
+						// this.store.commit("addDesignCollectionList", [design]);
 						this.likeDesignCollectionList.forEach((item:any)=>{
 							if(item.sort > design.sort){
 								item.sort-=1
 							}
 						})
-					
+						this.store.commit(
+							"deleteLikeDesignCollectionList",
+							index
+						);
 						this.setLikeDislLike('disLike',design)
-						// if (!this.likeDesignCollectionList.length) {
-						// 	this.store.commit("deleteUserGroupId");
-						// }
 					}
 					this.disLikeLoading = false;
 				})
@@ -1768,6 +1931,7 @@ export default defineComponent({
 					}
 				}
 			}
+			
 			.designPage_body {
 				width: 100%;
 				height: 100%;
@@ -1913,6 +2077,8 @@ export default defineComponent({
 									.content_img_block{
 										width: 16rem;
 										height: 23rem;
+										position: relative;
+										
 									}
 								}
 							}
@@ -2006,7 +2172,8 @@ export default defineComponent({
 									align-items: center;
 									justify-content: center;
 									position: absolute;
-									transition: top,left .3s;
+									transition: top,left .5s;
+									// transition: top,left .3s;
 									&:hover .btn{
 										display: flex;
 									}
@@ -2020,13 +2187,43 @@ export default defineComponent({
 										border: 2px solid #E0E0E0;
 										overflow: hidden;
 										background: #fff;
+										.content_img_block_child{
+											position: absolute;
+											border-radius: 2rem;
+											border: 2px solid #00000070;
+											background: #fff;
+											display: flex;
+											left: -43%;
+											transform: translateX(69%);
+											top: 0rem;
+											> .childItem{
+												> .content_img_flex{
+													border: 2px solid #00000070;
+												}
+												position: relative !important;
+												>img{
+
+												}
+											}
+										}
 									}
 									&.active{
 										.icon_like,.icon_delete{
 											display: block;
 										}
 										.content_img_flex {
-											border: 2px solid #000;
+											&.Design{
+												border: 2px solid #000;
+											}
+											&.PoseTransfer{
+												border: 2px solid #f0d9d0;
+											}
+											&.ToProductImage{
+												border: 2px solid #ccece5;
+											}
+											&.Relight{
+												border: 2px solid #ccece5;
+											}
 										}
 									}
 									.content_img {
@@ -2050,39 +2247,7 @@ export default defineComponent({
 											align-items: center;
 											justify-content: center;
 										}
-										> .btnOpen{
-											position: absolute;
-											width: max-content;
-											left: 30px;
-											top: 30px;
-											transform: translateX(-100%);
-											background: #e4e4e7;
-											padding: 12px;
-											border-radius: 12px;
-											display: none;
-											z-index: 99;
-											&.active{
-												display: block;
-											}
-											> .item{
-												display: flex;
-												align-items: center;
-												margin-bottom: 8px;
-												padding: 8px;
-												border-radius: 8px;
-												cursor: pointer;
-												&:last-child{
-													margin: 0;
-												}
-												> .text{
-													font-size: 12px;
-													margin-right: 10px;
-												}
-												&:hover{
-													background: #efeff1;
-												}
-											}
-										}
+										
 										.icon_like,.icon_delete {
 											font-size: 1.4rem;
 											cursor: pointer;
@@ -2106,7 +2271,7 @@ export default defineComponent({
 				}
 			}
 		}
-
+		
 		.page_content_bg {
 			position: absolute;
 			width: 100%;
@@ -2130,5 +2295,38 @@ export default defineComponent({
 			text-align: center;
 		}
 	}
+	.btnOpen{
+		position: absolute;
+		width: max-content;
+		left: 30px;
+		top: 30px;
+		transform: translateX(-100%);
+		background: #e4e4e7;
+		padding: 12px;
+		border-radius: 12px;
+		display: none;
+		z-index: 999;
+		&.active{
+			display: block;
+		}
+		> .item{
+			display: flex;
+			align-items: center;
+			margin-bottom: 8px;
+			padding: 8px;
+			border-radius: 8px;
+			cursor: pointer;
+			&:last-child{
+				margin: 0;
+			}
+			> .text{
+				font-size: 12px;
+				margin-right: 10px;
+			}
+			&:hover{
+				background: #efeff1;
+			}
+		}
+	}
 }
 </style>