fix: 修复图片bug

This commit is contained in:
imeepos 2025-09-04 21:44:50 +08:00
parent 9055f9e62e
commit 8326d4c6f3
2 changed files with 20 additions and 6 deletions

View File

@ -171,11 +171,21 @@
backface-visibility: hidden;
}
/* 确保video的poster填满整个容器 */
.single-video[poster] {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* 自定义视频封面 */
.video-poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
border-radius: 32rpx;
}
.single-video {
position: relative;
z-index: 2;
}
/* 视频样式 */

View File

@ -83,10 +83,14 @@ export default function TemplateCard({ template, onClick }: TemplateCardProps) {
{isOutputVideo ? (
// 当output是视频时只显示单个视频
<View className='single-video-container'>
<Image
className='video-poster'
src={template.inputExample}
mode='aspectFill'
/>
<Video
className='single-video'
src={template.outputExample}
poster={template.inputExample} // 使用input作为视频缩略图
autoplay
muted
loop