feat: 播放按钮

src/assets/icons/CPlay.svg

@@ -1,6 +1 @@
-<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>
+<svg t="1762937400333" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4603" width="200" height="200"><path d="M817.088 484.96l-512-323.744C295.232 154.976 282.752 154.592 272.576 160.224 262.336 165.856 256 176.608 256 188.256l0 647.328c0 11.648 6.336 22.4 16.576 28.032 4.8 2.656 10.112 3.968 15.424 3.968 5.952 0 11.904-1.664 17.088-4.928l512-323.616C826.368 533.184 832 522.976 832 512 832 501.024 826.368 490.816 817.088 484.96z" fill="currentColor" p-id="4604"></path></svg>

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

@@ -81,6 +81,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 +280,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)=>{
@@ -629,7 +643,7 @@ export default defineComponent({
 		{immediate: true }
 		)
 
-		const videoType = ref('1')
+		const videoType = ref('3')
 		const showMotion = computed(()=> videoType.value === '3' )
 		const options = ref([
 			{ vlaue: '1', label: 'First frame' },
@@ -779,6 +793,7 @@ export default defineComponent({
 						overflow: hidden;
 						overflow-x: auto;
 						column-gap: 2.4rem;
+						position: relative;
 						> .item{
 							// width: calc(100% / 2 - .5rem);
 							// height: 25rem;
@@ -875,6 +890,30 @@ export default defineComponent({
 						> .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;