forked from 77media/video-flow
支付部分的适配
This commit is contained in:
海龙
parent
5b9004c3ed
commit
08719b2dd8
@ -16,37 +16,6 @@ import { DashboardLayout } from "@/components/layout/dashboard-layout";
|
|||||||
|
|
||||||
export default function PricingPage() {
|
export default function PricingPage() {
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// 获取当前窗口尺寸
|
|
||||||
const currentWidth = window.innerWidth;
|
|
||||||
const currentHeight = window.innerHeight;
|
|
||||||
// 计算缩放比例 (1920x1080)
|
|
||||||
const wScale = currentWidth / 1920;
|
|
||||||
const hScale = currentHeight / 1080;
|
|
||||||
|
|
||||||
// 检查app节点是否存在
|
|
||||||
const pricingPage = document.getElementById("pricing-page");
|
|
||||||
if (!pricingPage) {
|
|
||||||
console.error("未找到app节点");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// setHPading((hScale || 1) * 10);
|
|
||||||
// 创建样式元素
|
|
||||||
const style = document.createElement("style");
|
|
||||||
|
|
||||||
// 设置CSS样式
|
|
||||||
style.textContent = `
|
|
||||||
#pricing-page {
|
|
||||||
transform-origin: top left;
|
|
||||||
transform: scale(${wScale}, ${hScale});
|
|
||||||
width: 1920px;
|
|
||||||
height: 1080px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 将样式添加到head
|
|
||||||
document.head.appendChild(style);
|
|
||||||
}, []);
|
|
||||||
return (
|
return (
|
||||||
<DashboardLayout>
|
<DashboardLayout>
|
||||||
<div className="w-full h-full overflow-y-auto bg-black text-white pb-[10rem]" id="pricing-page">
|
<div className="w-full h-full overflow-y-auto bg-black text-white pb-[10rem]" id="pricing-page">
|
||||||
@ -136,35 +105,111 @@ function HomeModule5() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-alt="core-value-section"
|
data-alt="core-value-section"
|
||||||
className="home-module5 h-[1300px] 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
|
||||||
|
/* 平板适配 */
|
||||||
|
sm:min-h-[100vh] sm:py-12
|
||||||
|
/* 小屏笔记本适配 (13-15寸) */
|
||||||
|
md:h-[1000px] md:py-16
|
||||||
|
/* 大屏笔记本适配 (16-17寸) */
|
||||||
|
lg:h-[1100px] lg:py-20
|
||||||
|
/* 桌面端适配 (21-24寸) */
|
||||||
|
xl:h-[1200px] xl:py-24
|
||||||
|
/* 大屏显示器适配 (27寸+) */
|
||||||
|
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 mb-[4rem]"
|
className="center z-10 flex flex-col items-center
|
||||||
|
/* 移动端间距 */
|
||||||
|
mb-8 px-4
|
||||||
|
/* 平板间距 */
|
||||||
|
sm:mb-12 sm:px-6
|
||||||
|
/* 小屏笔记本间距 */
|
||||||
|
md:mb-[4rem] md:px-8
|
||||||
|
/* 大屏笔记本间距 */
|
||||||
|
lg:mb-[4rem] lg:px-12
|
||||||
|
/* 桌面端间距 */
|
||||||
|
xl:mb-[4rem] xl:px-16
|
||||||
|
/* 大屏显示器间距 */
|
||||||
|
2xl:mb-[4rem] 2xl:px-20"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
className="text-white font-normal text-center
|
||||||
|
/* 移动端字体 */
|
||||||
|
text-[1.5rem] leading-[110%] mb-4
|
||||||
|
/* 平板字体 */
|
||||||
|
sm:text-[2rem] sm:leading-[110%] sm:mb-6
|
||||||
|
/* 小屏笔记本字体 */
|
||||||
|
md:text-[2.5rem] md:leading-[110%] md:mb-[1.5rem]
|
||||||
|
/* 大屏笔记本字体 */
|
||||||
|
lg:text-[3rem] lg:leading-[110%] lg: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]"
|
||||||
>
|
>
|
||||||
<h2 className="text-white text-[3.375rem] leading-[100%] font-normal mb-[1.5rem]">
|
|
||||||
Pick a plan and make it yours
|
Pick a plan and make it yours
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{/* 计费切换 */}
|
{/* 计费切换 */}
|
||||||
<div className="h-[3.375rem] flex bg-black rounded-full p-[0.0625rem] mt-[1.5rem] border border-white/20">
|
<div
|
||||||
|
className="flex bg-black rounded-full border border-white/20
|
||||||
|
/* 移动端尺寸 */
|
||||||
|
h-[2.5rem] p-[0.0625rem] mt-4
|
||||||
|
/* 平板尺寸 */
|
||||||
|
sm:h-[3rem] sm:mt-6
|
||||||
|
/* 小屏笔记本尺寸 */
|
||||||
|
md:h-[3.375rem] md:mt-[1.5rem]
|
||||||
|
/* 大屏笔记本尺寸 */
|
||||||
|
lg:h-[3.375rem] lg:mt-[1.5rem]
|
||||||
|
/* 桌面端尺寸 */
|
||||||
|
xl:h-[3.375rem] xl:mt-[1.5rem]
|
||||||
|
/* 大屏显示器尺寸 */
|
||||||
|
2xl:h-[3.375rem] 2xl:mt-[1.5rem]"
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
onClick={() => setBillingType("month")}
|
onClick={() => setBillingType("month")}
|
||||||
className={`box-border flex justify-center items-center w-[6rem] text-base rounded-full transition-all duration-300 ${
|
className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
|
||||||
billingType === "month"
|
billingType === "month"
|
||||||
? "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
|
||||||
|
/* 平板按钮尺寸 */
|
||||||
|
sm:w-[5rem] sm:text-sm
|
||||||
|
/* 小屏笔记本按钮尺寸 */
|
||||||
|
md:w-[6rem] md:text-base
|
||||||
|
/* 大屏笔记本按钮尺寸 */
|
||||||
|
lg:w-[6rem] lg:text-base
|
||||||
|
/* 桌面端按钮尺寸 */
|
||||||
|
xl:w-[6rem] xl:text-base
|
||||||
|
/* 大屏显示器按钮尺寸 */
|
||||||
|
2xl:w-[6rem] 2xl:text-base`}
|
||||||
>
|
>
|
||||||
Monthly
|
Monthly
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setBillingType("year")}
|
onClick={() => setBillingType("year")}
|
||||||
className={`box-border flex justify-center items-center w-[7.125rem] text-base rounded-full transition-all duration-300 ${
|
className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
|
||||||
billingType === "year"
|
billingType === "year"
|
||||||
? "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
|
||||||
|
/* 平板按钮尺寸 */
|
||||||
|
sm:w-[6rem] sm:text-sm
|
||||||
|
/* 小屏笔记本按钮尺寸 */
|
||||||
|
md:w-[7.125rem] md:text-base
|
||||||
|
/* 大屏笔记本按钮尺寸 */
|
||||||
|
lg:w-[7.125rem] lg:text-base
|
||||||
|
/* 桌面端按钮尺寸 */
|
||||||
|
xl:w-[7.125rem] xl:text-base
|
||||||
|
/* 大屏显示器按钮尺寸 */
|
||||||
|
2xl:w-[7.125rem] 2xl:text-base`}
|
||||||
>
|
>
|
||||||
Yearly - <span className="text-[#FFCC6D]">20%</span>
|
Yearly - <span className="text-[#FFCC6D]">20%</span>
|
||||||
</button>
|
</button>
|
||||||
@ -172,49 +217,221 @@ function HomeModule5() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 主要价格卡片 */}
|
{/* 主要价格卡片 */}
|
||||||
<div className="flex justify-between w-[90%] px-[12rem] mb-[2rem]">
|
<div
|
||||||
|
className="w-full max-w-[70%] mx-auto px-4
|
||||||
|
/* 移动端 - 单列布局 */
|
||||||
|
grid grid-cols-1 gap-4
|
||||||
|
/* 平板 - 双列布局 */
|
||||||
|
sm:grid-cols-2 sm:gap-6 sm:px-6
|
||||||
|
/* 桌面端 - 三列布局 */
|
||||||
|
md:grid-cols-3 md:gap-8 md:px-8
|
||||||
|
/* 大屏 - 保持三列但增加间距 */
|
||||||
|
lg:gap-10 lg:px-12
|
||||||
|
xl:gap-12 xl:px-16
|
||||||
|
2xl:gap-16 2xl:px-20"
|
||||||
|
>
|
||||||
{pricingPlans.map((plan, index) => (
|
{pricingPlans.map((plan, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className=" w-[24rem] h-[38.125rem] bg-black rounded-2xl p-[1.5rem] border border-white/20"
|
className="bg-black rounded-2xl border border-white/20
|
||||||
|
/* 移动端卡片尺寸 */
|
||||||
|
p-4 min-h-[28rem]
|
||||||
|
/* 平板卡片尺寸 */
|
||||||
|
sm:p-5 sm:min-h-[32rem]
|
||||||
|
/* 小屏笔记本卡片尺寸 */
|
||||||
|
md:p-6 md:min-h-[36rem]
|
||||||
|
/* 大屏笔记本卡片尺寸 */
|
||||||
|
lg:p-[1.375rem] lg:min-h-[37rem]
|
||||||
|
/* 桌面端卡片尺寸 */
|
||||||
|
xl:p-[1.5rem] xl:min-h-[38.125rem]
|
||||||
|
/* 大屏显示器卡片尺寸 */
|
||||||
|
2xl:p-[1.75rem] 2xl:min-h-[40rem]"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="text-white font-normal
|
||||||
|
/* 移动端标题 */
|
||||||
|
text-lg mb-3
|
||||||
|
/* 平板标题 */
|
||||||
|
sm:text-xl sm:mb-4
|
||||||
|
/* 小屏笔记本标题 */
|
||||||
|
md:text-xl md:mb-4
|
||||||
|
/* 大屏笔记本标题 */
|
||||||
|
lg:text-2xl lg:mb-[1rem]
|
||||||
|
/* 桌面端标题 */
|
||||||
|
xl:text-2xl xl:mb-[1rem]
|
||||||
|
/* 大屏显示器标题 */
|
||||||
|
2xl:text-3xl 2xl:mb-[1.25rem]"
|
||||||
>
|
>
|
||||||
<h3 className="text-white text-2xl font-normal mb-[1rem]">
|
|
||||||
{plan.title}
|
{plan.title}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="mb-[1rem]">
|
<div
|
||||||
<span className="text-white text-[3.375rem] font-bold">
|
className="mb-3
|
||||||
|
/* 平板间距 */
|
||||||
|
sm:mb-4
|
||||||
|
/* 小屏笔记本间距 */
|
||||||
|
md:mb-4
|
||||||
|
/* 大屏笔记本间距 */
|
||||||
|
lg:mb-[1rem]
|
||||||
|
/* 桌面端间距 */
|
||||||
|
xl:mb-[1rem]
|
||||||
|
/* 大屏显示器间距 */
|
||||||
|
2xl:mb-[1.25rem]"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="text-white font-bold
|
||||||
|
/* 移动端价格字体 */
|
||||||
|
text-2xl
|
||||||
|
/* 平板价格字体 */
|
||||||
|
sm:text-3xl
|
||||||
|
/* 小屏笔记本价格字体 */
|
||||||
|
md:text-[2.5rem]
|
||||||
|
/* 大屏笔记本价格字体 */
|
||||||
|
lg:text-[3rem]
|
||||||
|
/* 桌面端价格字体 */
|
||||||
|
xl:text-[3.375rem]
|
||||||
|
/* 大屏显示器价格字体 */
|
||||||
|
2xl:text-[3.75rem]"
|
||||||
|
>
|
||||||
${plan.price}
|
${plan.price}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-white text-xs ml-[0.5rem]">/ {billingType === "month" ? "mo" : "year"}</span>
|
<span
|
||||||
|
className="text-white ml-2
|
||||||
|
/* 移动端单位字体 */
|
||||||
|
text-xs
|
||||||
|
/* 平板单位字体 */
|
||||||
|
sm:text-xs
|
||||||
|
/* 小屏笔记本单位字体 */
|
||||||
|
md:text-xs
|
||||||
|
/* 大屏笔记本单位字体 */
|
||||||
|
lg:text-xs
|
||||||
|
/* 桌面端单位字体 */
|
||||||
|
xl:text-xs
|
||||||
|
/* 大屏显示器单位字体 */
|
||||||
|
2xl:text-sm"
|
||||||
|
>
|
||||||
|
/ {billingType === "month" ? "mo" : "year"}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-white text-[0.875rem] mb-[1rem]">
|
<p
|
||||||
|
className="text-white mb-4
|
||||||
|
/* 移动端描述字体 */
|
||||||
|
text-sm
|
||||||
|
/* 平板描述字体 */
|
||||||
|
sm:text-sm
|
||||||
|
/* 小屏笔记本描述字体 */
|
||||||
|
md:text-[0.875rem]
|
||||||
|
/* 大屏笔记本描述字体 */
|
||||||
|
lg:text-[0.875rem]
|
||||||
|
/* 桌面端描述字体 */
|
||||||
|
xl:text-[0.875rem]
|
||||||
|
/* 大屏显示器描述字体 */
|
||||||
|
2xl:text-base"
|
||||||
|
>
|
||||||
{plan.credits}
|
{plan.credits}
|
||||||
</p>
|
</p>
|
||||||
{plan.issubscribed ? (
|
{plan.issubscribed ? (
|
||||||
<button
|
<button
|
||||||
disabled
|
disabled
|
||||||
className="w-full bg-gray-400 text-gray-600 py-[0.75rem] rounded-full mb-[1rem] 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
|
||||||
|
/* 平板按钮 */
|
||||||
|
sm:py-3 sm:mb-4 sm:text-base
|
||||||
|
/* 小屏笔记本按钮 */
|
||||||
|
md:py-[0.75rem] md:mb-[1rem] md:text-base
|
||||||
|
/* 大屏笔记本按钮 */
|
||||||
|
lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
|
||||||
|
/* 桌面端按钮 */
|
||||||
|
xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
|
||||||
|
/* 大屏显示器按钮 */
|
||||||
|
2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
|
||||||
>
|
>
|
||||||
Already Owned
|
Already Owned
|
||||||
</button>
|
</button>
|
||||||
) : (
|
) : (
|
||||||
<button
|
<button
|
||||||
onClick={() => handleSubscribe(plan.title)}
|
onClick={() => handleSubscribe(plan.title)}
|
||||||
className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] 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
|
||||||
|
/* 平板按钮 */
|
||||||
|
sm:py-3 sm:mb-4 sm:text-base
|
||||||
|
/* 小屏笔记本按钮 */
|
||||||
|
md:py-[0.75rem] md:mb-[1rem] md:text-base
|
||||||
|
/* 大屏笔记本按钮 */
|
||||||
|
lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
|
||||||
|
/* 桌面端按钮 */
|
||||||
|
xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
|
||||||
|
/* 大屏显示器按钮 */
|
||||||
|
2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
|
||||||
>
|
>
|
||||||
{plan.buttonText}
|
{plan.buttonText}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<p className="w-full text-center text-white/60 text-[0.75rem] mb-[2rem]">
|
<p
|
||||||
|
className="w-full text-center text-white/60 mb-4
|
||||||
|
/* 移动端提示文字 */
|
||||||
|
text-xs
|
||||||
|
/* 平板提示文字 */
|
||||||
|
sm:text-xs
|
||||||
|
/* 小屏笔记本提示文字 */
|
||||||
|
md:text-[0.75rem] md:mb-[2rem]
|
||||||
|
/* 大屏笔记本提示文字 */
|
||||||
|
lg:text-[0.75rem] lg:mb-[2rem]
|
||||||
|
/* 桌面端提示文字 */
|
||||||
|
xl:text-[0.75rem] xl:mb-[2rem]
|
||||||
|
/* 大屏显示器提示文字 */
|
||||||
|
2xl:text-sm 2xl:mb-[2.5rem]"
|
||||||
|
>
|
||||||
* Billed monthly until cancelled
|
* Billed monthly until cancelled
|
||||||
</p>
|
</p>
|
||||||
<ul className="space-y-[1rem]">
|
<ul
|
||||||
|
className="space-y-2
|
||||||
|
/* 平板特性列表间距 */
|
||||||
|
sm:space-y-3
|
||||||
|
/* 小屏笔记本特性列表间距 */
|
||||||
|
md:space-y-[1rem]
|
||||||
|
/* 大屏笔记本特性列表间距 */
|
||||||
|
lg:space-y-[1rem]
|
||||||
|
/* 桌面端特性列表间距 */
|
||||||
|
xl:space-y-[1rem]
|
||||||
|
/* 大屏显示器特性列表间距 */
|
||||||
|
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 text-[0.875rem]"
|
className="flex items-center text-white
|
||||||
|
/* 移动端特性文字 */
|
||||||
|
text-sm
|
||||||
|
/* 平板特性文字 */
|
||||||
|
sm:text-sm
|
||||||
|
/* 小屏笔记本特性文字 */
|
||||||
|
md:text-[0.875rem]
|
||||||
|
/* 大屏笔记本特性文字 */
|
||||||
|
lg:text-[0.875rem]
|
||||||
|
/* 桌面端特性文字 */
|
||||||
|
xl:text-[0.875rem]
|
||||||
|
/* 大屏显示器特性文字 */
|
||||||
|
2xl:text-base"
|
||||||
>
|
>
|
||||||
<span className="text-[#C73BFF] mr-[0.5rem]">✓</span>
|
<span
|
||||||
|
className="text-[#C73BFF] mr-2
|
||||||
|
/* 移动端勾号间距 */
|
||||||
|
text-sm
|
||||||
|
/* 平板勾号间距 */
|
||||||
|
sm:mr-2 sm:text-base
|
||||||
|
/* 小屏笔记本勾号间距 */
|
||||||
|
md:mr-[0.5rem] md:text-base
|
||||||
|
/* 大屏笔记本勾号间距 */
|
||||||
|
lg:mr-[0.5rem] lg:text-base
|
||||||
|
/* 桌面端勾号间距 */
|
||||||
|
xl:mr-[0.5rem] xl:text-base
|
||||||
|
/* 大屏显示器勾号间距 */
|
||||||
|
2xl:mr-[0.625rem] 2xl:text-lg"
|
||||||
|
>
|
||||||
|
✓
|
||||||
|
</span>
|
||||||
{feature}
|
{feature}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
@ -222,8 +439,6 @@ function HomeModule5() {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user