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 // 其他阶段：使用 Carousel
return ( 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） 视频暂停时展示 */} {/* 左侧最终视频缩略图栏（H5） 视频暂停时展示 */}
{taskObject?.final?.url && !isPlaying && ( {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"> <div className="flex items-start">
{isFinalBarOpen && ( {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 <button
type="button" type="button"
onClick={() => onSelectView && onSelectView('final')} onClick={() => onSelectView && onSelectView('final')}
@ -491,8 +491,11 @@ export function H5MediaViewer({
</div> </div>
)} )}
<style jsx global>{` <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-list { width: 100%;height: 100% !important;max-height: calc(100vh - 20rem); }
.slick-track { display: flex !important; align-items: center;height: 100% !important; }
`}</style> `}</style>
</div> </div>
); );

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

@ -125,7 +125,7 @@ const H5TaskInfo: React.FC<H5TaskInfoProps> = ({
return ( return (
<div <div
data-alt="h5-header" 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 <div
data-alt="h5-header-bar" data-alt="h5-header-bar"

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

@ -356,7 +356,7 @@ export function ThumbnailGrid({
<div <div
ref={thumbnailsRef} ref={thumbnailsRef}
tabIndex={0} 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 autoFocus
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}