合并画布,部分样式调整
This commit is contained in:
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user