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:17:42 +08:00
parent cbbc0b44f3
commit ef428058c1
4 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layout/top-bar.tsx
View File

@ -255,7 +255,7 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
return ( return (
<div <div
className="fixed right-0 top-0 h-16 header z-[999]" className="fixed right-0 top-0 h-16 header"
style={{ style={{
isolation: "isolate", isolation: "isolate",
left: (pathname === "/" || !isDesktop) ? "0" : (collapsed ? "2.5rem" : "16rem") left: (pathname === "/" || !isDesktop) ? "0" : (collapsed ? "2.5rem" : "16rem")

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 - 20rem)', height: 'calc(100vh - 16rem)',
}}> }}>
<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 - 20rem)', maxHeight: 'calc(100vh - 16rem)',
}} }}
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 - 20rem)', height: 'calc(100vh - 16rem)',
}}> }}>
{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 - 20rem)', height: 'calc(100vh - 16rem)',
}}> }}>
<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 - 20rem)', maxHeight: 'calc(100vh - 16rem)',
}} /> }} />
</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 - 20rem); } .slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 16rem); }
.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>

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

@ -125,14 +125,14 @@ const H5TaskInfo: React.FC<H5TaskInfoProps> = ({
return ( return (
<div <div
data-alt="h5-header" data-alt="h5-header"
className={`absolute top-0 -left-4 right-0 z-[50] pr-1 ${className || ''}`} className={`${className || ''}`}
> >
<div <div
data-alt="h5-header-bar" data-alt="h5-header-bar"
className="flex items-start gap-3" className="flex items-start gap-3"
> >
{/* 左侧标题区域 */} {/* 左侧标题区域 */}
<div data-alt="title-area" className="flex-1 min-w-0 bg-gradient-to-b from-slate-900/80 via-slate-900/40 to-transparent backdrop-blur-sm rounded-lg py-4 px-4"> <div data-alt="title-area" className="flex-1 min-w-0 p-2">
<h1 <h1
data-alt="title" data-alt="title"
className="text-white text-lg font-bold" className="text-white text-lg font-bold"

2
components/ui/script-modal.tsx
View File

@ -140,7 +140,7 @@ export function ScriptModal({ isOpen, onClose, currentStage = 0, roles, currentL
{/* 弹窗内容 */} {/* 弹窗内容 */}
<motion.div <motion.div
className="fixed inset-0 z-50 flex items-center justify-center" className="fixed inset-0 z-[61] flex items-center justify-center"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}