aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: videoType选择

Browse Source
This commit is contained in:
zhangyh
2025-11-12 15:42:08 +08:00
parent b3432683a7
commit 16bea0f261
2 changed files with 83 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/icons/CPlay.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="currentColor" fill-opacity="0" stroke="currentColor" stroke-dasharray="40" stroke-dashoffset="40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 6l10 6l-10 6Z">
<animate fill="freeze" attributeName="fill-opacity" begin="0.5s" dur="0.5s" values="0;1" />
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.5s" values="40;0" />
</path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 477 B

91
src/component/home/tools/poseTransfer/index.vue
View File

@@ -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" />
@@ -54,7 +65,7 @@
</div>
</div>
</div>
<div class="poses">
<div class="poses" v-show="showMotion">
<div class="head">
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
</div>
@@ -614,7 +625,20 @@ export default defineComponent({
setGenerate(taskIdList[0].taskId)
}
})
},{immediate: true })
},
{immediate: true }
)
const videoType = ref('1')
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)
@@ -643,6 +667,9 @@ export default defineComponent({
setSpeed,
setUploadDelete,
locale,
videoType,
options,
showMotion,
}
},
directives:{
@@ -746,21 +773,22 @@ 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;
> .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;
@@ -841,6 +869,7 @@ export default defineComponent({
> img{
width: 100%;
object-fit: contain;
border: 1px solid #D0D0D0;
}
}
> .upload_item{
@@ -937,5 +966,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>