From 5b9004c3eda0e8d0ed1a05a497f8618733d3519d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B5=B7=E9=BE=99?= Date: Mon, 1 Sep 2025 16:50:21 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/layout/top-bar.tsx | 175 +++-- components/pages/home-page2.tsx | 1232 +++++++++++++++++++++++++------ 2 files changed, 1105 insertions(+), 302 deletions(-) diff --git a/components/layout/top-bar.tsx b/components/layout/top-bar.tsx index 0aee37e..3a40c78 100644 --- a/components/layout/top-bar.tsx +++ b/components/layout/top-bar.tsx @@ -165,10 +165,13 @@ export function TopBar({ collapsed }: { collapsed: boolean }) { }; return ( -
+
router.push("/movies")} > Go Started @@ -289,67 +296,67 @@ export function TopBar({ collapsed }: { collapsed: boolean }) { data-alt="user-menu-dropdown" onClick={(e) => e.stopPropagation()} > - -
- {/* 顶部用户信息 */} -
-
- {currentUser.username - ? currentUser.username.charAt(0) - : "MF"} -
-
-

- {currentUser.name || currentUser.username} -

-

- {currentUser.email} -

-
-
- - {/* AI 积分 */} -
-
- -
- - {isLoadingSubscription - ? "Loading..." - : `${credits} credits`} - + +
+ {/* 顶部用户信息 */} +
+
+ {currentUser.username + ? currentUser.username.charAt(0) + : "MF"}
- - {/* 操作按钮区域 */} -
- - - {currentUser.plan_name !== "none" && ( - - )} - - +
+

+ {currentUser.name || currentUser.username} +

+

+ {currentUser.email} +

-
- +
+ + {/* AI 积分 */} +
+
+ +
+ + {isLoadingSubscription + ? "Loading..." + : `${credits} credits`} + +
+ + {/* 操作按钮区域 */} +
+ + + {currentUser.plan_name !== "none" && ( + + )} + + +
+
+ , document.body ) @@ -357,22 +364,30 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
) : ( -
-
router.push("/signup")} - > - Sign Up -
-
router.push("/movies")} - > - Go Started -
-
+
+
router.push("/signup")} + > + Sign Up +
+
router.push("/movies")} + > + Go Started +
+
)}
diff --git a/components/pages/home-page2.tsx b/components/pages/home-page2.tsx index 0dc5484..16c5e8c 100644 --- a/components/pages/home-page2.tsx +++ b/components/pages/home-page2.tsx @@ -12,7 +12,15 @@ import "./style/home-page2.css"; import { usePathname, useRouter } from "next/navigation"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/swiper-bundle.css"; // 引入样式 -import { Autoplay } from "swiper/modules"; +import "swiper/css/effect-coverflow"; +import "swiper/css/effect-cube"; +import "swiper/css/pagination"; +import { + Autoplay, + EffectCoverflow, + EffectCube, + Pagination, +} from "swiper/modules"; import { VideoCarouselLayout } from "@/components/video-carousel-layout"; import { VideoGridLayout } from "@/components/video-grid-layout"; @@ -160,39 +168,6 @@ function useVideoPreloader() { export function HomePage2() { // 后台静默预加载视频，不显示任何加载界面 useVideoPreloader(); - const [hPading, setHPading] = useState(0); - - useEffect(() => { - // 获取当前窗口尺寸 - const currentWidth = window.innerWidth; - const currentHeight = window.innerHeight; - // 计算缩放比例 (1920x1080) - const wScale = currentWidth / 1920; - const hScale = currentHeight / 1080; - - // 检查app节点是否存在 - const homePage = document.getElementById("home-page"); - if (!homePage) { - console.error("未找到app节点"); - return; - } - // setHPading((hScale || 1) * 10); - // 创建样式元素 - const style = document.createElement("style"); - - // 设置CSS样式 - style.textContent = ` - #home-page { - transform-origin: top left; - transform: scale(${wScale}, ${hScale}); - width: 1920px; - height: 1080px; - } - `; - - // 将样式添加到head - document.head.appendChild(style); - }, []); return ( //
+
-
-

+
+

Ideas Spark Movies

-

+

One line, one film—your story, your scene.

-

+

Everyone is a movie master.

{ if (localStorage.getItem("token")) { router.push("/movies"); @@ -251,6 +300,20 @@ function HomeModule1() { } /**核心价值 */ function HomeModule2() { + const [isMobile, setIsMobile] = useState(true); + + // 检测屏幕尺寸并设置状态 + useEffect(() => { + const checkScreenSize = () => { + setIsMobile(window.innerWidth < 640); + }; + + // 初始检查 + checkScreenSize(); + + // 监听窗口大小变化 + }, []); + const videoList = [ { title: "Text to Movie", @@ -268,53 +331,205 @@ function HomeModule2() { return (
-

+

Just Drop A Thought

-

+

Say your idea in a single line,and MovieFlow will bring it to life.

- {/* 第一个视频 */} - {videoList.map((item, index) => ( -
-
- ))} + { + // 只播放当前活跃的视频 + const activeSlide = swiper.slides[swiper.activeIndex]; + const activeVideo = activeSlide?.querySelector("video"); + if (activeVideo) { + activeVideo.play().catch(() => { + // 忽略播放错误 + }); + } + }} + onSwiper={(swiper) => { + // 初始化时播放第二个视频（索引为1） + const secondVideo = swiper.slides[1]?.querySelector("video"); + if (secondVideo) { + secondVideo.play().catch(() => { + // 忽略播放错误 + }); + } + }} + > + {videoList.map((item, index) => ( + + + ))} +
); } /**案例展示 */ function HomeModule3() { - const videoList = [ + const [isMobile, setIsMobile] = useState(true); + + // 检测屏幕尺寸并设置状态 + useEffect(() => { + const checkScreenSize = () => { + setIsMobile(window.innerWidth < 640); + }; + + // 初始检查 + checkScreenSize(); + + // // 监听窗口大小变化 + }, []); + + // PC端二维数组数据 + const pcVideoList = [ [ "https://cdn.qikongjian.com/1756474023656_60twk5.mp4", "https://cdn.qikongjian.com/1756474023644_14n7is.mp4", @@ -323,7 +538,6 @@ function HomeModule3() { "https://cdn.qikongjian.com/1756474023657_nf8799.mp4", "https://cdn.qikongjian.com/1756474230992_vw0ubf.mp4", ], - [ "https://cdn.qikongjian.com/1756474023655_pov4c3.mp4", "https://cdn.qikongjian.com/1756474023663_yohi7a.mp4", @@ -341,110 +555,277 @@ function HomeModule3() { ], ]; - // 定义内容样式 - const contentStyle: React.CSSProperties = { - height: "100%", - lineHeight: "10rem", - textAlign: "center", - background: "#364d79", - }; + // 移动端一维数组数据（合并所有视频） + const mobileVideoList = [ + "https://cdn.qikongjian.com/1756474023656_60twk5.mp4", + "https://cdn.qikongjian.com/1756474023644_14n7is.mp4", + "https://cdn.qikongjian.com/1756474023648_kocq6z.mp4", + "https://cdn.qikongjian.com/1756474023657_w10boo.mp4", + "https://cdn.qikongjian.com/1756474023657_nf8799.mp4", + "https://cdn.qikongjian.com/1756474230992_vw0ubf.mp4", + "https://cdn.qikongjian.com/1756474023655_pov4c3.mp4", + "https://cdn.qikongjian.com/1756474023663_yohi7a.mp4", + "https://cdn.qikongjian.com/1756474023661_348dx3.mp4", + "https://cdn.qikongjian.com/1756474023683_xlb34s.mp4", + "https://cdn.qikongjian.com/1756474230987_63ooji.mp4", + "https://cdn.qikongjian.com/1756474230997_zysje8.mp4", + "https://cdn.qikongjian.com/1756474230988_tgqzln.mp4", + "https://cdn.qikongjian.com/1756474231007_qneeia.mp4", + "https://cdn.qikongjian.com/1756474231008_qyqtka.mp4", + "https://cdn.qikongjian.com/1756474231009_vs49d9.mp4", + "https://cdn.qikongjian.com/1756474231010_2a48p0.mp4", + ]; return ( -
-
-

+
+
+

Ideas Made Real

-

+

High-quality films, any style, made with MovieFlow.

- {/* 3x3网格布局 */} -
- {/* 上方阴影遮罩 - 使用 mask 实现真正的渐变模糊，加重黑色 */} -
- {/* 下方阴影遮罩 - 使用 mask 实现真正的渐变模糊，加重黑色 */} + {/* 移动端 - 单列布局 */} + {isMobile ? (
- {videoList.map((column, columnIndex) => ( + data-alt="mobile-single-column" + className="w-full px-4 h-[40rem] relative" + > + {/* 上方阴影遮罩 */}
+ + {/* 下方阴影遮罩 */} +
+ + - - {column.map((video, videoIndex) => ( - -
-
- - ))} - -
- ))} -
+ {mobileVideoList.map((video, videoIndex) => ( + +
+
+ + ))} + +

+ ) : ( + /* PC端 - 三列网格布局 */ +
+ {/* 上方阴影遮罩 */} +
+ + {/* 下方阴影遮罩 */} +
+ + {pcVideoList.map((column, columnIndex) => ( +
+ + {column.map((video, videoIndex) => ( + +
+
+ + ))} + +
+ ))} +
+ )}
); } /**电影制作工序介绍 */ function HomeModule4() { const [activeTab, setActiveTab] = useState(0); + const [isMobile, setIsMobile] = useState(true); + + // 检测屏幕尺寸并设置状态 + useEffect(() => { + const checkScreenSize = () => { + setIsMobile(window.innerWidth < 768); + }; + + // 初始检查 + checkScreenSize(); + }, []); + const processSteps = [ { title: " The Story Agent", @@ -477,67 +858,228 @@ function HomeModule4() { }; return ( -
-
-

+
+
+

Create Your Way

-
- {/* 左侧四个切换tab */} -
- {processSteps.map((step, index) => ( -
handleTabClick(index)} - className={`w-[31.75rem] h-[10.5rem] rounded-2xl cursor-pointer transition-all duration-300 border ${ - activeTab === index - ? "bg-[#262626] border-white/20 hover:border-white/40" - : "bg-black border-white/10 hover:border-white/40" - }`} - > -
+ {isMobile ? ( + /* 移动端 - 垂直布局 */ +
+ {/* 视频播放区域 */} +
+
+
+
+ + {/* 切换tabs */} +
+ {processSteps.map((step, index) => ( +
handleTabClick(index)} + className={`p-3 rounded-xl cursor-pointer transition-all duration-300 border ${ + activeTab === index + ? "bg-[#262626] border-white/20" + : "bg-black border-white/10" + }`} + >

{step.title}

{step.description}

-
- ))} -
- - {/* 右侧视频播放区域 */} -
-
-
-
+ ) : ( + /* PC端 - 水平布局 */ +
+ {/* 左侧四个切换tab */} +
+ {processSteps.map((step, index) => ( +
handleTabClick(index)} + className={`rounded-2xl cursor-pointer transition-all flex-1 duration-300 border ${ + activeTab === index + ? "bg-[#262626] border-white/20 hover:border-white/40" + : "bg-black border-white/10 hover:border-white/40" + } + /* 平板及以上 - 使用固定高度，让外层盒子撑起来 */ + sm:w-[12rem] + /* 小屏笔记本 - 13-15寸适配 */ + md:w-[14rem] + /* 大屏笔记本 - 16-17寸适配 */ + lg:w-[16rem] + /* 桌面端 - 21-24寸 */ + xl:w-[22rem] + /* 大屏显示器 - 27寸+ */ + 2xl:w-[32rem]`} + > +
+

+ {step.title} +

+

+ {step.description} +

+
+
+ ))} +
+ + {/* 右侧视频播放区域 */} +
+
+
+
+
+ )}
); } @@ -622,35 +1164,111 @@ function HomeModule5() { return (
-

+

Pick a plan and make it yours

{/* 计费切换 */} -
+
@@ -658,51 +1276,221 @@ function HomeModule5() {
{/* 主要价格卡片 */} -
+
{pricingPlans.map((plan, index) => (
-

+

{plan.title}

-
- +
+ ${plan.price} - + / {billingType === "month" ? "mo" : "year"}
-

+

{plan.credits}

{plan.issubscribed ? ( ) : ( )} -

+

* Billed monthly until cancelled

-
    +
      {plan.features.map((feature, featureIndex) => (
    • - ✓ + + ✓ + {feature}
      • ))}