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

update pay page

Browse Source
This commit is contained in:
Zixin Zhou 2025-09-03 15:10:04 +08:00
parent 1145ee13d3
commit 73f1df5573
1 changed files with 25 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
app/pricing/page.tsx
View File

@ -73,7 +73,6 @@ function HomeModule5() {
const handleSubscribe = async (planName: string) => { const handleSubscribe = async (planName: string) => {
try { try {
// 使用新的Checkout Session方案（更简单！）
const { createCheckoutSession, redirectToCheckout } = await import( const { createCheckoutSession, redirectToCheckout } = await import(
"@/lib/stripe" "@/lib/stripe"
); );
@ -106,48 +105,30 @@ function HomeModule5() {
<div <div
data-alt="core-value-section" data-alt="core-value-section"
className="home-module5 relative flex flex-col items-center justify-center w-full bg-black snap-start className="home-module5 relative flex flex-col items-center justify-center w-full bg-black snap-start
/* 移动端适配 */
min-h-[100vh] py-8 min-h-[100vh] py-8
/* 平板适配 */
sm:min-h-[100vh] sm:py-12 sm:min-h-[100vh] sm:py-12
/* 小屏笔记本适配 (13-15寸) */
md:h-[1000px] md:py-16 md:h-[1000px] md:py-16
/* 大屏笔记本适配 (16-17寸) */
lg:h-[1100px] lg:py-20 lg:h-[1100px] lg:py-20
/* 桌面端适配 (21-24寸) */
xl:h-[1200px] xl:py-24 xl:h-[1200px] xl:py-24
/* 大屏显示器适配 (27寸+) */
2xl:h-[1500px] 2xl:py-32" 2xl:h-[1500px] 2xl:py-32"
> >
<div <div
data-alt="core-value-content" data-alt="core-value-content"
className="center z-10 flex flex-col items-center className="center z-10 flex flex-col items-center
/* 移动端间距 */
mb-8 px-4 mb-8 px-4
/* 平板间距 */
sm:mb-12 sm:px-6 sm:mb-12 sm:px-6
/* 小屏笔记本间距 */
md:mb-[4rem] md:px-8 md:mb-[4rem] md:px-8
/* 大屏笔记本间距 */
lg:mb-[4rem] lg:px-12 lg:mb-[4rem] lg:px-12
/* 桌面端间距 */
xl:mb-[4rem] xl:px-16 xl:mb-[4rem] xl:px-16
/* 大屏显示器间距 */
2xl:mb-[4rem] 2xl:px-20" 2xl:mb-[4rem] 2xl:px-20"
> >
<h2 <h2
className="text-white font-normal text-center className="text-white font-normal text-center
/* 移动端字体 */
text-[1.5rem] leading-[110%] mb-4 text-[1.5rem] leading-[110%] mb-4
/* 平板字体 */
sm:text-[2rem] sm:leading-[110%] sm:mb-6 sm:text-[2rem] sm:leading-[110%] sm:mb-6
/* 小屏笔记本字体 */
md:text-[2.5rem] md:leading-[110%] md:mb-[1.5rem] md:text-[2.5rem] md:leading-[110%] md:mb-[1.5rem]
/* 大屏笔记本字体 */
lg:text-[3rem] lg:leading-[110%] lg:mb-[1.5rem] lg:text-[3rem] lg:leading-[110%] lg:mb-[1.5rem]
/* 桌面端字体 */
xl:text-[3.375rem] xl:leading-[110%] xl:mb-[1.5rem] xl:text-[3.375rem] xl:leading-[110%] xl:mb-[1.5rem]
/* 大屏显示器字体 */
2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]" 2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]"
> >
Pick a plan and make it yours Pick a plan and make it yours
@ -156,17 +137,11 @@ function HomeModule5() {
{/* 计费切换 */} {/* 计费切换 */}
<div <div
className="flex bg-black rounded-full border border-white/20 className="flex bg-black rounded-full border border-white/20
/* 移动端尺寸 */
h-[2.5rem] p-[0.0625rem] mt-4 h-[2.5rem] p-[0.0625rem] mt-4
/* 平板尺寸 */
sm:h-[3rem] sm:mt-6 sm:h-[3rem] sm:mt-6
/* 小屏笔记本尺寸 */
md:h-[3.375rem] md:mt-[1.5rem] md:h-[3.375rem] md:mt-[1.5rem]
/* 大屏笔记本尺寸 */
lg:h-[3.375rem] lg:mt-[1.5rem] lg:h-[3.375rem] lg:mt-[1.5rem]
/* 桌面端尺寸 */
xl:h-[3.375rem] xl:mt-[1.5rem] xl:h-[3.375rem] xl:mt-[1.5rem]
/* 大屏显示器尺寸 */
2xl:h-[3.375rem] 2xl:mt-[1.5rem]" 2xl:h-[3.375rem] 2xl:mt-[1.5rem]"
> >
<button <button
@ -176,17 +151,11 @@ function HomeModule5() {
? "bg-white text-black" ? "bg-white text-black"
: "text-white hover:text-gray-300" : "text-white hover:text-gray-300"
} }
/* 移动端按钮尺寸 */
w-[4.5rem] text-sm w-[4.5rem] text-sm
/* 平板按钮尺寸 */
sm:w-[5rem] sm:text-sm sm:w-[5rem] sm:text-sm
/* 小屏笔记本按钮尺寸 */
md:w-[6rem] md:text-base md:w-[6rem] md:text-base
/* 大屏笔记本按钮尺寸 */
lg:w-[6rem] lg:text-base lg:w-[6rem] lg:text-base
/* 桌面端按钮尺寸 */
xl:w-[6rem] xl:text-base xl:w-[6rem] xl:text-base
/* 大屏显示器按钮尺寸 */
2xl:w-[6rem] 2xl:text-base`} 2xl:w-[6rem] 2xl:text-base`}
> >
Monthly Monthly
@ -198,17 +167,11 @@ function HomeModule5() {
? "bg-white text-black" ? "bg-white text-black"
: "text-white hover:text-gray-300" : "text-white hover:text-gray-300"
} }
/* 移动端按钮尺寸 */
w-[5.5rem] text-sm w-[5.5rem] text-sm
/* 平板按钮尺寸 */
sm:w-[6rem] sm:text-sm sm:w-[6rem] sm:text-sm
/* 小屏笔记本按钮尺寸 */
md:w-[7.125rem] md:text-base md:w-[7.125rem] md:text-base
/* 大屏笔记本按钮尺寸 */
lg:w-[7.125rem] lg:text-base lg:w-[7.125rem] lg:text-base
/* 桌面端按钮尺寸 */
xl:w-[7.125rem] xl:text-base xl:w-[7.125rem] xl:text-base
/* 大屏显示器按钮尺寸 */
2xl:w-[7.125rem] 2xl:text-base`} 2xl:w-[7.125rem] 2xl:text-base`}
> >
Yearly - <span className="text-[#FFCC6D]">20%</span> Yearly - <span className="text-[#FFCC6D]">20%</span>
@ -218,14 +181,10 @@ function HomeModule5() {
{/* 主要价格卡片 */} {/* 主要价格卡片 */}
<div <div
className="w-full max-w-[70%] mx-auto px-4 className="w-full max-w-[95%] mx-auto px-4
/* 移动端 - 单列布局 */
grid grid-cols-1 gap-4 grid grid-cols-1 gap-4
/* 平板 - 双列布局 */
sm:grid-cols-2 sm:gap-6 sm:px-6 sm:grid-cols-2 sm:gap-6 sm:px-6
/* 桌面端 - 三列布局 */
md:grid-cols-3 md:gap-8 md:px-8 md:grid-cols-3 md:gap-8 md:px-8
/* 大屏 - 保持三列但增加间距 */
lg:gap-10 lg:px-12 lg:gap-10 lg:px-12
xl:gap-12 xl:px-16 xl:gap-12 xl:px-16
2xl:gap-16 2xl:px-20" 2xl:gap-16 2xl:px-20"
@ -234,97 +193,64 @@ function HomeModule5() {
<div <div
key={index} key={index}
className="bg-black rounded-2xl border border-white/20 className="bg-black rounded-2xl border border-white/20
/* 移动端卡片尺寸 */
p-4 min-h-[28rem] p-4 min-h-[28rem]
/* 平板卡片尺寸 */
sm:p-5 sm:min-h-[32rem] sm:p-5 sm:min-h-[32rem]
/* 小屏笔记本卡片尺寸 */
md:p-6 md:min-h-[36rem] md:p-6 md:min-h-[36rem]
/* 大屏笔记本卡片尺寸 */
lg:p-[1.375rem] lg:min-h-[37rem] lg:p-[1.375rem] lg:min-h-[37rem]
/* 桌面端卡片尺寸 */
xl:p-[1.5rem] xl:min-h-[38.125rem] xl:p-[1.5rem] xl:min-h-[38.125rem]
/* 大屏显示器卡片尺寸 */
2xl:p-[1.75rem] 2xl:min-h-[40rem]" 2xl:p-[1.75rem] 2xl:min-h-[40rem]"
> >
<h3 <h3
className="text-white font-normal className="text-white font-normal
/* 移动端标题 */
text-lg mb-3 text-lg mb-3
/* 平板标题 */
sm:text-xl sm:mb-4 sm:text-xl sm:mb-4
/* 小屏笔记本标题 */
md:text-xl md:mb-4 md:text-xl md:mb-4
/* 大屏笔记本标题 */
lg:text-2xl lg:mb-[1rem] lg:text-2xl lg:mb-[1rem]
/* 桌面端标题 */
xl:text-2xl xl:mb-[1rem] xl:text-2xl xl:mb-[1rem]
/* 大屏显示器标题 */
2xl:text-3xl 2xl:mb-[1.25rem]" 2xl:text-3xl 2xl:mb-[1.25rem]"
> >
{plan.title} {plan.title}
</h3> </h3>
<div <div
className="mb-3 className="mb-3
/* 平板间距 */
sm:mb-4 sm:mb-4
/* 小屏笔记本间距 */
md:mb-4 md:mb-4
/* 大屏笔记本间距 */
lg:mb-[1rem] lg:mb-[1rem]
/* 桌面端间距 */
xl:mb-[1rem] xl:mb-[1rem]
/* 大屏显示器间距 */
2xl:mb-[1.25rem]" 2xl:mb-[1.25rem]"
> >
<span <div className="flex items-baseline">
className="text-white font-bold <span
/* 移动端价格字体 */ className="text-white font-bold
text-2xl text-2xl
/* 平板价格字体 */ sm:text-3xl
sm:text-3xl md:text-[2.5rem]
/* 小屏笔记本价格字体 */ lg:text-[3rem]
md:text-[2.5rem] xl:text-[3.375rem]
/* 大屏笔记本价格字体 */ 2xl:text-[3.75rem]"
lg:text-[3rem] >
/* 桌面端价格字体 */ ${plan.price}
xl:text-[3.375rem] </span>
/* 大屏显示器价格字体 */ <span
2xl:text-[3.75rem]" className="text-white ml-2 whitespace-nowrap
> text-xs
${plan.price} sm:text-xs
</span> md:text-xs
<span lg:text-xs
className="text-white ml-2 xl:text-xs
/* 移动端单位字体 */ 2xl:text-sm"
text-xs >
/* 平板单位字体 */ / {billingType === "month" ? "month" : "year"}
sm:text-xs </span>
/* 小屏笔记本单位字体 */ </div>
md:text-xs
/* 大屏笔记本单位字体 */
lg:text-xs
/* 桌面端单位字体 */
xl:text-xs
/* 大屏显示器单位字体 */
2xl:text-sm"
>
/ {billingType === "month" ? "mo" : "year"}
</span>
</div> </div>
<p <p
className="text-white mb-4 className="text-white mb-4
/* 移动端描述字体 */
text-sm text-sm
/* 平板描述字体 */
sm:text-sm sm:text-sm
/* 小屏笔记本描述字体 */
md:text-[0.875rem] md:text-[0.875rem]
/* 大屏笔记本描述字体 */
lg:text-[0.875rem] lg:text-[0.875rem]
/* 桌面端描述字体 */
xl:text-[0.875rem] xl:text-[0.875rem]
/* 大屏显示器描述字体 */
2xl:text-base" 2xl:text-base"
> >
{plan.credits} {plan.credits}
@ -333,17 +259,11 @@ function HomeModule5() {
<button <button
disabled disabled
className="w-full bg-gray-400 text-gray-600 rounded-full cursor-not-allowed border border-gray-300 className="w-full bg-gray-400 text-gray-600 rounded-full cursor-not-allowed border border-gray-300
/* 移动端按钮 */
py-2 mb-4 text-sm py-2 mb-4 text-sm
/* 平板按钮 */
sm:py-3 sm:mb-4 sm:text-base sm:py-3 sm:mb-4 sm:text-base
/* 小屏笔记本按钮 */
md:py-[0.75rem] md:mb-[1rem] md:text-base md:py-[0.75rem] md:mb-[1rem] md:text-base
/* 大屏笔记本按钮 */
lg:py-[0.75rem] lg:mb-[1rem] lg:text-base lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
/* 桌面端按钮 */
xl:py-[0.75rem] xl:mb-[1rem] xl:text-base xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
/* 大屏显示器按钮 */
2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg" 2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
> >
Already Owned Already Owned
@ -352,17 +272,11 @@ function HomeModule5() {
<button <button
onClick={() => handleSubscribe(plan.title)} onClick={() => handleSubscribe(plan.title)}
className="w-full bg-white text-black rounded-full hover:bg-black hover:text-white transition-colors border border-white/20 className="w-full bg-white text-black rounded-full hover:bg-black hover:text-white transition-colors border border-white/20
/* 移动端按钮 */
py-2 mb-4 text-sm py-2 mb-4 text-sm
/* 平板按钮 */
sm:py-3 sm:mb-4 sm:text-base sm:py-3 sm:mb-4 sm:text-base
/* 小屏笔记本按钮 */
md:py-[0.75rem] md:mb-[1rem] md:text-base md:py-[0.75rem] md:mb-[1rem] md:text-base
/* 大屏笔记本按钮 */
lg:py-[0.75rem] lg:mb-[1rem] lg:text-base lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
/* 桌面端按钮 */
xl:py-[0.75rem] xl:mb-[1rem] xl:text-base xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
/* 大屏显示器按钮 */
2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg" 2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
> >
{plan.buttonText} {plan.buttonText}
@ -370,64 +284,41 @@ function HomeModule5() {
)} )}
<p <p
className="w-full text-center text-white/60 mb-4 className="w-full text-center text-white/60 mb-4
/* 移动端提示文字 */
text-xs text-xs
/* 平板提示文字 */
sm:text-xs sm:text-xs
/* 小屏笔记本提示文字 */
md:text-[0.75rem] md:mb-[2rem] md:text-[0.75rem] md:mb-[2rem]
/* 大屏笔记本提示文字 */
lg:text-[0.75rem] lg:mb-[2rem] lg:text-[0.75rem] lg:mb-[2rem]
/* 桌面端提示文字 */
xl:text-[0.75rem] xl:mb-[2rem] xl:text-[0.75rem] xl:mb-[2rem]
/* 大屏显示器提示文字 */
2xl:text-sm 2xl:mb-[2.5rem]" 2xl:text-sm 2xl:mb-[2.5rem]"
> >
* Billed monthly until cancelled * Billed monthly until cancelled
</p> </p>
<ul <ul
className="space-y-2 className="space-y-2
/* 平板特性列表间距 */
sm:space-y-3 sm:space-y-3
/* 小屏笔记本特性列表间距 */
md:space-y-[1rem] md:space-y-[1rem]
/* 大屏笔记本特性列表间距 */
lg:space-y-[1rem] lg:space-y-[1rem]
/* 桌面端特性列表间距 */
xl:space-y-[1rem] xl:space-y-[1rem]
/* 大屏显示器特性列表间距 */
2xl:space-y-[1.25rem]" 2xl:space-y-[1.25rem]"
> >
{plan.features.map((feature, featureIndex) => ( {plan.features.map((feature, featureIndex) => (
<li <li
key={featureIndex} key={featureIndex}
className="flex items-center text-white className="flex items-center text-white
/* 移动端特性文字 */
text-sm text-sm
/* 平板特性文字 */
sm:text-sm sm:text-sm
/* 小屏笔记本特性文字 */
md:text-[0.875rem] md:text-[0.875rem]
/* 大屏笔记本特性文字 */
lg:text-[0.875rem] lg:text-[0.875rem]
/* 桌面端特性文字 */
xl:text-[0.875rem] xl:text-[0.875rem]
/* 大屏显示器特性文字 */
2xl:text-base" 2xl:text-base"
> >
<span <span
className="text-[#C73BFF] mr-2 className="text-[#C73BFF] mr-2
/* 移动端勾号间距 */
text-sm text-sm
/* 平板勾号间距 */
sm:mr-2 sm:text-base sm:mr-2 sm:text-base
/* 小屏笔记本勾号间距 */
md:mr-[0.5rem] md:text-base md:mr-[0.5rem] md:text-base
/* 大屏笔记本勾号间距 */
lg:mr-[0.5rem] lg:text-base lg:mr-[0.5rem] lg:text-base
/* 桌面端勾号间距 */
xl:mr-[0.5rem] xl:text-base xl:mr-[0.5rem] xl:text-base
/* 大屏显示器勾号间距 */
2xl:mr-[0.625rem] 2xl:text-lg" 2xl:mr-[0.625rem] 2xl:text-lg"
> >
✓ ✓