Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -2,18 +2,29 @@
|
||||
<div class="poseTransfer">
|
||||
<div class="configuratioBox" :class="{active:button.left}">
|
||||
<div class="configuratio">
|
||||
<!-- <div class="title">Give pose for them to select</div> -->
|
||||
<div class="content">
|
||||
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
|
||||
<div class="video-type-container">
|
||||
<div class="title">Video Type</div>
|
||||
<a-select
|
||||
class="video-type-selection"
|
||||
v-model:value="videoType"
|
||||
size="large"
|
||||
placeholder="Please select"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in options"
|
||||
:key="item.vlaue"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="selectImg">
|
||||
<div class="head">
|
||||
<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)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div> -->
|
||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item,index in fileList" @click="selectImgItem(item)">
|
||||
<div class="" v-if="item.status == 'uploading'" style="display: flex;align-items: center;">
|
||||
<a-spin size="large" />
|
||||
@@ -57,7 +68,7 @@
|
||||
<div style="width: 100%; height: 100px;">
|
||||
<promptInput :content="prompt" ref="promptInput"></promptInput>
|
||||
</div>
|
||||
<div class="poses">
|
||||
<div class="poses" v-show="showMotion">
|
||||
<div class="head">
|
||||
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
|
||||
</div>
|
||||
@@ -73,6 +84,17 @@
|
||||
<i class="fi fi-br-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-container">
|
||||
<div class="icon-list">
|
||||
<SvgIcon
|
||||
class="play-icon"
|
||||
@click="handlePlayMotion(item)"
|
||||
name="CPlay"
|
||||
size="10"
|
||||
color="#fff"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -269,6 +291,9 @@ export default defineComponent({
|
||||
}
|
||||
const gifPause = (e:any,item:any)=>{
|
||||
e.target.src = item.firstFrame//静态图片
|
||||
}
|
||||
const handlePlayMotion = item => {
|
||||
|
||||
}
|
||||
const getPoseList = ()=>{
|
||||
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
|
||||
@@ -625,7 +650,20 @@ export default defineComponent({
|
||||
setGenerate(taskIdList[0].taskId)
|
||||
}
|
||||
})
|
||||
},{immediate: true })
|
||||
},
|
||||
{immediate: true }
|
||||
)
|
||||
|
||||
const videoType = ref('3')
|
||||
const showMotion = computed(()=> videoType.value === '3' )
|
||||
const options = ref([
|
||||
{ vlaue: '1', label: 'First frame' },
|
||||
{ value: '2', label: 'First and last frames' },
|
||||
{ value: '3', label: 'First frame and skeleton' },
|
||||
|
||||
])
|
||||
|
||||
|
||||
onBeforeUnmount(()=>{
|
||||
clearInterval(data.generateTime)
|
||||
clearInterval(data.remGenerateTime)
|
||||
@@ -654,6 +692,9 @@ export default defineComponent({
|
||||
setSpeed,
|
||||
setUploadDelete,
|
||||
locale,
|
||||
videoType,
|
||||
options,
|
||||
showMotion,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
@@ -757,21 +798,23 @@ export default defineComponent({
|
||||
max-height: 45rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
// justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
column-gap: 2.4rem;
|
||||
position: relative;
|
||||
> .item{
|
||||
margin-right: 1rem;
|
||||
width: calc(100% / 2 - .5rem);
|
||||
// width: calc(100% / 2 - .5rem);
|
||||
// height: 25rem;
|
||||
width: 12.7rem;
|
||||
height: 17.8rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
height: 25rem;
|
||||
position: relative;
|
||||
// &.active{
|
||||
// border: 2px solid;
|
||||
@@ -852,11 +895,36 @@ export default defineComponent({
|
||||
> img{
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
border: 1px solid #D0D0D0;
|
||||
}
|
||||
}
|
||||
> .upload_item{
|
||||
border: none;
|
||||
}
|
||||
.control-container{
|
||||
width: 100%;
|
||||
height: 3.3rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(180deg, rgba(8, 9, 13, 0) 0%, rgba(8, 9, 13, 0.27) 80.37%);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
.icon-list{
|
||||
height: 50%;
|
||||
width: calc(100% - 1.6rem);
|
||||
border-top: 1px solid #fff;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.play-icon{
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .head{
|
||||
color: #000;
|
||||
@@ -948,5 +1016,39 @@ export default defineComponent({
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload_file_item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
.ant-upload-list-picture-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ant-upload-select-picture-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #000;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.video-type-container{
|
||||
margin-bottom: 4rem;
|
||||
.title{
|
||||
font-size: 1.8rem;
|
||||
color: #000;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
:deep(.ant-select){
|
||||
width: 100%;
|
||||
.ant-select-selector{
|
||||
border: 2px solid #D0D0D0;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user