合并画布,部分样式调整

This commit is contained in:
X1627315083
2025-06-26 15:41:08 +08:00
parent fd05c70937
commit fc6d8d4c8d
75 changed files with 1772 additions and 672 deletions

View File

@@ -7,7 +7,7 @@
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
<div class="selectImg">
<div class="head">
<div class="text">Choose design to transfer</div>
<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
</div>
<div class="imgBox" v-mousewheel>
<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
@@ -57,7 +57,7 @@
</div>
<div class="poses">
<div class="head">
<div class="text">Choose pose</div>
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
</div>
<div class="imgBox" v-mousewheel>
<div class="item" v-for="item in poseList" @click="selectPose(item)">
@@ -66,7 +66,11 @@
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
>
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
<div class="btnBox">
<div :class="{active:item.isChecked}">
<i class="fi fi-br-check"></i>
</div>
</div>
</div>
</div>
</div>
@@ -93,7 +97,7 @@
</div>
<div class="likeBox">
<div class="element">
<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.InputVideo')}}</span></div>
<div class="content">
<generalDrag ref="generalDragLeft" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
</div>
@@ -105,9 +109,9 @@
</div>
</div>
</div>
<div class="noLikeBox" :class="{active:button.right}">
<div class="noLikeBox" :class="{active:button.right,designPage:isDesignPage}">
<div class="element">
<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.InputVideo')}}</span></div>
<div class="content">
<generalDrag ref="generalDragRight" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
</div>
@@ -297,6 +301,7 @@ export default defineComponent({
store.dispatch('getCredits')
}else if(element.status == 'Fail'){
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
message.info(t('ProductImg.jsContent3'))
data.noLikeList.splice(index,1)
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
@@ -333,7 +338,12 @@ export default defineComponent({
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:value}).then(
(rv) => {
data.waitList = []
data.noLikeList = data.noLikeList.filter((item:any)=>item.status == 'Success')
const indexes = data.noLikeList
.map((item, index) => item?.status !== 'Success' ? index : -1)
.filter(index => index !== -1);
indexes.forEach((itemIndex:number)=>{
data.noLikeList.splice(itemIndex,1)
})
}
).catch(res=>{
});
@@ -679,6 +689,40 @@ export default defineComponent({
}
}
}
> .btnBox{
position: absolute;
right: 1rem;
top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
> div{
width: 2rem;
height: 2rem;
display: flex;
border: 1px solid;
align-items: center;
border-radius: .5rem;
justify-content: center;
cursor: pointer;
margin-bottom: 1rem;
> i{
display: flex;
}
>.fi-br-check{
color: #fff;
display: none;
}
&.active{
background: #000;
> i{
display: flex;
color: #fff;
}
}
}
}
> img{
width: 100%;
object-fit: contain;
@@ -713,7 +757,7 @@ export default defineComponent({
flex-direction: column;
> .btnLeft,> .btnRight{
position: absolute;
width: 4rem;
width: 3rem;
height: 7rem;
background: #fff;
border: 2px solid;
@@ -727,11 +771,13 @@ export default defineComponent({
justify-content: center;
z-index: 2;
cursor: pointer;
transition: all .3s;
>span{
transition: all .3s;
transform: rotate(90deg);
}
&.active{
>span{
transform: rotate(270deg);
@@ -740,8 +786,12 @@ export default defineComponent({
}
}
> .btnRight{
left: calc(100% + 4rem) ;
left: calc(100% + 3rem);
transform: translate(-100%,-50%) rotate(180deg);
&:hover{
width: 4rem;
left: calc(100% + 4rem);
}
}
> .content{
flex: 1;
@@ -760,6 +810,10 @@ export default defineComponent({
}
}
> .designPage{
padding-left: 4rem;
}
> .noLikeBox{
padding-left: 2.3rem;
&.active{