xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

继续优化H5样式

Browse Source
This commit is contained in:
北枳 2025-09-25 17:28:31 +08:00
parent e2eda2ddb8
commit 3a741b32fb
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/pages/work-flow/H5MediaViewer.tsx
View File

@ -165,7 +165,7 @@ export function H5MediaViewer({
// 渲染视频 slide // 渲染视频 slide
const renderVideoSlides = () => ( const renderVideoSlides = () => (
<div data-alt="carousel-wrapper" className="relative w-full aspect-auto min-h-[200px] overflow-hidden rounded-lg" style={{ <div data-alt="carousel-wrapper" className="relative w-full aspect-auto min-h-[200px] overflow-hidden rounded-lg" style={{
height: 'calc(100vh - 16rem)', height: 'calc(100vh - 20rem)',
}}> }}>
<Carousel <Carousel
ref={carouselRef} ref={carouselRef}
@ -191,7 +191,7 @@ export function H5MediaViewer({
ref={(el) => (videoRefs.current[idx] = el)} ref={(el) => (videoRefs.current[idx] = el)}
className="w-full h-full object-contain [transform:translateZ(0)] [backface-visibility:hidden] [will-change:transform] bg-black" className="w-full h-full object-contain [transform:translateZ(0)] [backface-visibility:hidden] [will-change:transform] bg-black"
style={{ style={{
maxHeight: 'calc(100vh - 16rem)', maxHeight: 'calc(100vh - 20rem)',
}} }}
src={url} src={url}
preload="metadata" preload="metadata"
@ -225,7 +225,7 @@ export function H5MediaViewer({
</> </>
) : ( ) : (
<div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="video-status" style={{ <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="video-status" style={{
height: 'calc(100vh - 16rem)', height: 'calc(100vh - 20rem)',
}}> }}>
{status === 0 && ( {status === 0 && (
<span className="text-blue-500 text-base">Generating...</span> <span className="text-blue-500 text-base">Generating...</span>
@ -251,7 +251,7 @@ export function H5MediaViewer({
// 渲染图片 slide // 渲染图片 slide
const renderImageSlides = () => ( const renderImageSlides = () => (
<div data-alt="carousel-wrapper" className="relative w-full aspect-auto min-h-[200px] overflow-hidden rounded-lg" style={{ <div data-alt="carousel-wrapper" className="relative w-full aspect-auto min-h-[200px] overflow-hidden rounded-lg" style={{
height: 'calc(100vh - 16rem)', height: 'calc(100vh - 20rem)',
}}> }}>
<Carousel <Carousel
ref={carouselRef} ref={carouselRef}
@ -267,7 +267,7 @@ export function H5MediaViewer({
{imageUrls.map((url, idx) => ( {imageUrls.map((url, idx) => (
<div key={`h5-image-${idx}`} data-alt="image-slide" className="relative w-full h-full flex justify-center"> <div key={`h5-image-${idx}`} data-alt="image-slide" className="relative w-full h-full flex justify-center">
<img src={url} alt="scene" className="w-full h-full object-contain" style={{ <img src={url} alt="scene" className="w-full h-full object-contain" style={{
maxHeight: 'calc(100vh - 16rem)', maxHeight: 'calc(100vh - 20rem)',
}} /> }} />
</div> </div>
))} ))}
@ -494,7 +494,7 @@ export function H5MediaViewer({
[data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; } [data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; }
.slick-slider { height: 100% !important;display: flex !important; } .slick-slider { height: 100% !important;display: flex !important; }
.ant-carousel { height: 100% !important; } .ant-carousel { height: 100% !important; }
.slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 16rem); } .slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 20rem); }
.slick-track { display: flex !important; align-items: center;height: 100% !important; } .slick-track { display: flex !important; align-items: center;height: 100% !important; }
`}</style> `}</style>
</div> </div>

2
components/pages/work-flow/H5TaskInfo.tsx
View File

@ -132,7 +132,7 @@ const H5TaskInfo: React.FC<H5TaskInfoProps> = ({
className="flex items-start gap-3" className="flex items-start gap-3"
> >
{/* 左侧标题区域 */} {/* 左侧标题区域 */}
<div data-alt="title-area" className="flex-1 min-w-0 p-2"> <div data-alt="title-area" className="flex-1 min-w-0">
<h1 <h1
data-alt="title" data-alt="title"
className="text-white text-lg font-bold" className="text-white text-lg font-bold"