feat: videoType选择

src/assets/icons/CPlay.svg

@@ -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>

src/component/home/tools/poseTransfer/index.vue

@@ -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>