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

调整首页素材样式位置

Browse Source
This commit is contained in:
北枳 2025-07-07 11:54:17 +08:00
parent dc2e9ff656
commit c98ab85e4b
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/pages/home-page2.tsx
View File

@ -107,7 +107,7 @@ export function HomePage2() {
return ( return (
<div className="min-h-screen bg-[var(--background)]" ref={containerRef}> <div className="min-h-screen bg-[var(--background)]" ref={containerRef}>
<div className="min-h-[100%] flex relative"> <div className="flex relative" style={{height: 'calc(100vh - 4rem)'}}>
{/* 工具栏-列表形式切换 */} {/* 工具栏-列表形式切换 */}
<div className="absolute top-[1rem] right-6 w-[8rem] flex justify-end"> <div className="absolute top-[1rem] right-6 w-[8rem] flex justify-end">
<div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]"> <div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
@ -133,6 +133,11 @@ export function HomePage2() {
className={`absolute top-[4rem] w-full transition-all duration-500 className={`absolute top-[4rem] w-full transition-all duration-500
${activeTool === "stretch" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[-100%] pointer-events-none"} ${activeTool === "stretch" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[-100%] pointer-events-none"}
`} `}
style={{
height: 'calc(100% - 8rem)',
display: 'flex',
alignItems: 'center'
}}
> >
<VideoScreenLayout videos={videos} /> <VideoScreenLayout videos={videos} />
</div> </div>
@ -177,7 +182,7 @@ export function HomePage2() {
)} )}
<div className="btn-text text-lg font-medium bg-gradient-to-r text-white <div className="btn-text text-lg font-medium bg-gradient-to-r text-white
bg-clip-text text-transparent"> bg-clip-text text-transparent">
{isCreating ? "Creating..." : "Create"} {isCreating ? "Action..." : "Action"}
</div> </div>
</motion.div> </motion.div>
</motion.div> </motion.div>

7
components/video-screen-layout.tsx
View File

@ -22,6 +22,10 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const videoRefs = useRef<(HTMLVideoElement | null)[]>([]); const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
useEffect(() => {
setCurrentIndex(videos.length > 2 ? 1 : 0);
}, [videos.length]);
// 确保视频refs数组长度与videos数组一致 // 确保视频refs数组长度与videos数组一致
useEffect(() => { useEffect(() => {
videoRefs.current = videoRefs.current.slice(0, videos.length); videoRefs.current = videoRefs.current.slice(0, videos.length);
@ -139,7 +143,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
}; };
return ( return (
<div className="relative w-full h-[360px] mt-[3rem] overflow-hidden bg-[var(--background)]"> <div className="relative w-full h-[360px] overflow-hidden bg-[var(--background)]">
{/* 视频面板容器 */} {/* 视频面板容器 */}
<div <div
ref={containerRef} ref={containerRef}
@ -166,6 +170,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
loop loop
muted={index === currentIndex ? isMuted : true} // 只有当前视频受状态控制 muted={index === currentIndex ? isMuted : true} // 只有当前视频受状态控制
playsInline playsInline
preload="auto"
onLoadedData={() => { onLoadedData={() => {
if (index === currentIndex && videoRefs.current[index]) { if (index === currentIndex && videoRefs.current[index]) {
applyVolumeSettings(videoRefs.current[index]!); applyVolumeSettings(videoRefs.current[index]!);