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 16:26:23 +08:00
parent 3a2eaa1ecc
commit cbbc0b44f3
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -371,13 +371,13 @@ export function H5MediaViewer({
// 其他阶段：使用 Carousel
return (
<div ref={rootRef} data-alt="h5-media-viewer" className="w-[100vw] relative px-4">
<div ref={rootRef} data-alt="h5-media-viewer" className={`w-[100vw] relative ${stage === 'final_video' ? '' : 'px-4'}`}>
{/* 左侧最终视频缩略图栏（H5） 视频暂停时展示 */}
{taskObject?.final?.url && !isPlaying && (
<div className="absolute left-4 top-0 z-[60]" data-alt="final-sidebar-h5">
<div className={`absolute left-0 top-4 z-[10] ${stage === 'final_video' ? 'left-0' : 'left-4'}`} data-alt="final-sidebar-h5">
<div className="flex items-start">
{isFinalBarOpen && (
<div className="w-[3rem] max-h-[50vh] overflow-y-auto rounded-md backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl p-1 mr-2" data-alt="final-thumbnails">
<div className="w-[3rem] max-h-[50vh] overflow-y-auto rounded-md backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl p-1" data-alt="final-thumbnails">
<button
type="button"
onClick={() => onSelectView && onSelectView('final')}
@ -491,8 +491,11 @@ export function H5MediaViewer({
</div>
)}
<style jsx global>{`
[data-alt='carousel-wrapper'] .slick-slide { display: block; }
[data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; }
.slick-slider { height: 100% !important;display: flex !important; }
.ant-carousel { height: 100% !important; }
.slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 20rem); }
.slick-track { display: flex !important; align-items: center;height: 100% !important; }
`}</style>
</div>
);

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

@ -125,7 +125,7 @@ const H5TaskInfo: React.FC<H5TaskInfoProps> = ({
return (
<div
data-alt="h5-header"
className={`absolute top-0 left-0 right-0 z-[50] pr-1 ${className || ''}`}
className={`absolute top-0 -left-4 right-0 z-[50] pr-1 ${className || ''}`}
>
<div
data-alt="h5-header-bar"

2
components/pages/work-flow/thumbnail-grid.tsx
View File

@ -356,7 +356,7 @@ export function ThumbnailGrid({
<div
ref={thumbnailsRef}
tabIndex={0}
className={`w-full h-full grid grid-flow-col gap-2 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none auto-cols-[${cols}] ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '' : '!auto-cols-max'}`}
className={`w-full h-full grid grid-flow-col gap-2 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none auto-cols-[${cols}] ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '' : '!auto-cols-min'}`}
autoFocus
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}