合并画布代码
This commit is contained in:
X1627315083
@@ -11,7 +11,7 @@
|
||||
:closable="false"
|
||||
:mask="true"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:destroyOnClose="false"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
@@ -23,18 +23,33 @@
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
|
||||
<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
|
||||
<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
|
||||
<div v-show="collectionStep === 4">{{ $t('collectionModal.Mannquinboard') }}</div>
|
||||
<div v-show="collectionStep === 5">{{ $t('collectionModal.Sketchboard') }}</div>
|
||||
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
|
||||
<!-- <div class="collection_title_text_intro" v-show="collectionStep === 1">{{ $t('collectionModal.MoodCollection') }}</div>
|
||||
<div class="collection_title_text_intro" v-show="collectionStep === 2">{{ $t('collectionModal.PrinCollection') }}</div>
|
||||
<div class="collection_title_text_intro" v-show="collectionStep === 3">{{ $t('collectionModal.ColorCollection') }}</div>
|
||||
<div class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div>
|
||||
<div class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_content">
|
||||
<!-- <div class="modal_title_text">
|
||||
<div>Setting</div>
|
||||
</div> -->
|
||||
<div class="collectionBox">
|
||||
<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
|
||||
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
|
||||
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
|
||||
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard' || collectionStep == 4"></SketchboardUpload>
|
||||
<mannequin ref="mannequin" v-if="openType == 'mannequin' || collectionStep == 5"></mannequin>
|
||||
<MoodboardUpload ref="moodBoard" v-show="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
|
||||
<PrintboardUpload ref="printBoard" v-show="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
|
||||
<ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
|
||||
<mannequin ref="mannequin" v-show="openType == 'mannequin' || collectionStep == 4"></mannequin>
|
||||
<SketchboardUpload ref="sketchBoard" v-show="openType == 'sketchBoard' || collectionStep == 5"></SketchboardUpload>
|
||||
</div>
|
||||
<div class="collection_page">
|
||||
<div class="collection_page" v-show="isNext">
|
||||
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
|
||||
<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
|
||||
@@ -47,11 +62,12 @@
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { defineComponent,computed,ref,provide,nextTick,inject,toRefs, reactive, onBeforeMount} from 'vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
||||
import { init } from 'echarts/core';
|
||||
import MoodboardUpload from './collection/MoodboardUpload.vue';
|
||||
import PrintboardUpload from './collection/PrintboardUpload.vue';
|
||||
@@ -64,6 +80,10 @@ export default defineComponent({
|
||||
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
|
||||
},
|
||||
props:{
|
||||
isNext:{
|
||||
type:Boolean,
|
||||
default:true,
|
||||
},
|
||||
},
|
||||
emits:['getHistory'],
|
||||
setup(props,{emit}) {
|
||||
@@ -74,6 +94,8 @@ export default defineComponent({
|
||||
openType:'',
|
||||
collectionStep:1,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
createProbject:inject('createProbject') as any
|
||||
|
||||
})
|
||||
let driver__:any = computed(()=>{
|
||||
return store.state.Guide.guide
|
||||
@@ -83,8 +105,8 @@ export default defineComponent({
|
||||
moodBoard:null as any,
|
||||
printBoard:null as any,
|
||||
colorBoard:null as any,
|
||||
sketchBoard:null as any,
|
||||
mannequin:null as any,
|
||||
sketchBoard:null as any,
|
||||
}) as any
|
||||
const init = (value:any)=>{
|
||||
data.habitSetStyle = true
|
||||
@@ -95,14 +117,16 @@ export default defineComponent({
|
||||
dataDom[value].openSetData()
|
||||
})
|
||||
}
|
||||
let cleardata = ()=>{
|
||||
let cleardata = async ()=>{
|
||||
data.habitSetStyle = false
|
||||
if(data.collectionStep == 3)await getPantongName()
|
||||
data.collectionStep = 1
|
||||
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
||||
saveProject(data.openType)
|
||||
}
|
||||
const saveProject = (str:any)=>{
|
||||
const saveProject = async (str:any)=>{
|
||||
if(str == 'design')return
|
||||
if(!data.selectObject.id && data.createProbject)await data.createProbject()
|
||||
let value:any = {
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
@@ -114,11 +138,49 @@ export default defineComponent({
|
||||
})
|
||||
})
|
||||
}
|
||||
let lastStep = ()=>{
|
||||
let getPantongName = ()=>{
|
||||
let colorBoards = store.state.UploadFilesModule.colorBoards;
|
||||
if(!colorBoards || colorBoards?.length == 0) return
|
||||
data.isShowMark = true
|
||||
let value: any = [];
|
||||
for (let v of colorBoards) {
|
||||
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
|
||||
let hsv = rgbToHsv(color);
|
||||
v.hsv = hsv[0] + hsv[1] + hsv[2];
|
||||
value.push({
|
||||
h: hsv[0],
|
||||
s: hsv[1],
|
||||
v: hsv[2],
|
||||
});
|
||||
}
|
||||
|
||||
return new Promise((resolve: any, reject: any) => {
|
||||
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
|
||||
.then((rv: any) => {
|
||||
if (rv) {
|
||||
rv.forEach((ele: any, index: number) => {
|
||||
colorBoards[index].id = ele.id;
|
||||
colorBoards[index].tcx = ele.tcx;
|
||||
colorBoards[index].name = ele.name;
|
||||
});
|
||||
store.commit("setColorboardList", colorBoards);
|
||||
resolve();
|
||||
}
|
||||
data.isShowMark = false
|
||||
})
|
||||
.catch((res) => {
|
||||
reject();
|
||||
data.isShowMark = false
|
||||
});
|
||||
});
|
||||
}
|
||||
let lastStep = async ()=>{
|
||||
if(data.collectionStep == 3)await getPantongName()
|
||||
data.collectionStep = data.collectionStep - 1
|
||||
setOpenSetData()
|
||||
}
|
||||
let nextStep = ()=>{
|
||||
let nextStep = async ()=>{
|
||||
if(data.collectionStep == 3)await getPantongName()
|
||||
data.collectionStep = data.collectionStep + 1
|
||||
setOpenSetData()
|
||||
}
|
||||
@@ -150,6 +212,42 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collectionModal{
|
||||
:deep(.ant-modal-body){
|
||||
padding-top: 10rem;
|
||||
|
||||
}
|
||||
.collection_title{
|
||||
top: calc(4rem*1.2);
|
||||
display: flex;
|
||||
font-size: var(--aida-fsize2);
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
z-index: 999;
|
||||
align-items: center;
|
||||
width: calc(35rem*1.2);
|
||||
justify-content: space-between;
|
||||
.collection_progress{
|
||||
width: calc(8rem*1.2);
|
||||
height: calc(8rem*1.2);
|
||||
>div{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
:deep(.ant-progress-inner){
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collection_title_text{
|
||||
// margin-right: calc(4rem*1.2);
|
||||
}
|
||||
.collection_title_text_intro{
|
||||
font-size: var(--aida-fsize1-4);
|
||||
font-weight: 400;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
|
||||
}
|
||||
:deep(.designOpenrtion_content){
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -560,7 +560,7 @@ export default defineComponent({
|
||||
level2Type:'',
|
||||
designType:'',
|
||||
}
|
||||
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) || []
|
||||
let arr = this.store.state.UploadFilesModule.allBoardData.printboardFiles?JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) : []
|
||||
let setboard = {
|
||||
generate:[] as any,
|
||||
material:[] as any,
|
||||
|
||||
@@ -31,6 +31,12 @@
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>Selection Function</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
|
||||
<a-select style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||
</div>
|
||||
@@ -44,23 +50,16 @@
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="productimgSimilarity">
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction">
|
||||
<!-- <a-slider class="system_silder"
|
||||
v-model:value="similarity"
|
||||
@afterChange="setSimilarity"
|
||||
:tooltipVisible="false"
|
||||
:step="5"
|
||||
>
|
||||
</a-slider> -->
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_Direction">
|
||||
<a-select style="width: 100%;" v-model:value="productimgRelightDirection" :options="productimgRelightDirectionList"></a-select>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Highlight')}}</span>
|
||||
</div>
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_similarity">
|
||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight' && speedData.value != 'flux'" class="productImg_content_item_similarity">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="productimgBrightenValue"
|
||||
:tooltipVisible="false"
|
||||
@@ -109,7 +108,7 @@
|
||||
<div class="generage_btn_box" style="margin-left: auto;">
|
||||
<div class="generage_btn started_btn" v-show="!generateSuccess.productimgIsProductimg">
|
||||
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
|
||||
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType != 'Relight'" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||
<div class="content" v-show="speedState">
|
||||
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
</div>
|
||||
@@ -237,19 +236,37 @@ setup(props:any,{emit}) {
|
||||
})
|
||||
let speed = reactive({
|
||||
speedList:[
|
||||
{
|
||||
title:'Generate high-quality images',
|
||||
label:'High',
|
||||
value:'',
|
||||
},{
|
||||
title:'Generate using Wanxiang',
|
||||
label:'WX',
|
||||
value:'wx',
|
||||
},
|
||||
],
|
||||
] as any,
|
||||
speedTypeList:{
|
||||
poseTransfer:[
|
||||
{
|
||||
title:'Generate high-quality images',
|
||||
label:'High',
|
||||
value:'',
|
||||
},{
|
||||
title:'Generate using Wanxiang',
|
||||
label:'WX',
|
||||
value:'wx',
|
||||
},
|
||||
],
|
||||
toPorductImg:[
|
||||
{
|
||||
title:'Generate with high quality',
|
||||
label:'High',
|
||||
relightLabel:'Relight',
|
||||
value:'',
|
||||
},{
|
||||
title:'',
|
||||
label:'FLUX',
|
||||
relightLabel:'Edit',
|
||||
value:'flux',
|
||||
},
|
||||
]
|
||||
},
|
||||
speedState:false,
|
||||
speedData:{
|
||||
title:'Generate high-quality images',
|
||||
relightLabel:'Relight',
|
||||
label:'High',
|
||||
value:'',
|
||||
},
|
||||
@@ -264,6 +281,7 @@ setup(props:any,{emit}) {
|
||||
}
|
||||
const setSpeed = (item:any)=>{
|
||||
speed.speedData = item
|
||||
speed.speedState = false
|
||||
}
|
||||
let scaleImage: any = ref(false);
|
||||
let isShowMark = ref(false)
|
||||
@@ -316,15 +334,17 @@ setup(props:any,{emit}) {
|
||||
direction:productimg.productimgRelightDirection,
|
||||
prompt:productimg.productimgSearchName,
|
||||
toProductImageVOList:[obj],
|
||||
modelName:speed.speedData.value,
|
||||
brightenValue:productimg.productimgBrightenValue,
|
||||
projectId:productimg.selectObject.id,
|
||||
imageStrength:(100 - imageStrength)/100,
|
||||
ageGroup:productimg.selectObject.ageGroup
|
||||
}
|
||||
// return
|
||||
productimg.generateSuccess.productimgIsProductimg = true
|
||||
productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
|
||||
productimg.generateSuccess.productimgRemProductimg = true
|
||||
},10000)
|
||||
// productimg.generateSuccess.remPrductimgTime = setTimeout(()=>{
|
||||
// productimg.generateSuccess.productimgRemProductimg = true
|
||||
// },10000)
|
||||
let url = Https.httpUrls.relight
|
||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||
url = Https.httpUrls.toProduct
|
||||
@@ -337,6 +357,7 @@ setup(props:any,{emit}) {
|
||||
productimg.generateSuccess.isShowMark = true
|
||||
Https.axiosPost(url, data).then(
|
||||
(rv) => {
|
||||
productimg.generateSuccess.productimgRemProductimg = true
|
||||
productimg.generateSuccess.isShowMark = false
|
||||
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
||||
let arr:any = []
|
||||
@@ -484,7 +505,8 @@ setup(props:any,{emit}) {
|
||||
oldId:productimg.generateSuccess.id,
|
||||
status:productimg.generateSuccess.status,
|
||||
listType:productimg.generateSuccess.listType,
|
||||
isIndex:productimg.generateSuccess.isIndex
|
||||
isIndex:productimg.generateSuccess.isIndex,
|
||||
userLikeSortId:productimg.generateSuccess.userLikeSortId
|
||||
}
|
||||
emit('addGenerateImg',data)
|
||||
|
||||
@@ -565,7 +587,8 @@ methods: {
|
||||
this.generateSuccess.isIndex = index
|
||||
|
||||
}
|
||||
|
||||
// this.
|
||||
this.generateSuccess.userLikeSortId = list[index].userLikeSortId
|
||||
this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
|
||||
this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
|
||||
this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
|
||||
@@ -595,6 +618,12 @@ methods: {
|
||||
this.scaleImage = true
|
||||
this.isGenerate = false
|
||||
this.scaleImageList = list
|
||||
if(this.scaleImageList[index].resultType == "PoseTransfer"){
|
||||
this.speedList = this.speedTypeList.poseTransfer
|
||||
}else{
|
||||
this.speedList = this.speedTypeList.toPorductImg
|
||||
}
|
||||
this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
|
||||
// if(this.scaleImageList[index]?.resultType == 'ToProductImage')this.scaleImageList[index].sourceUrl = this.scaleImageList[index].imgUrl
|
||||
this.scaleImageIndex = index
|
||||
if(dialogueIndex)this.robotAssits = dialogueIndex
|
||||
|
||||
@@ -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>
|
||||
@@ -328,7 +328,8 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .top,> .model{
|
||||
width: 130rem;
|
||||
width: 100%;
|
||||
// width: 130rem;
|
||||
}
|
||||
> .top{
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user