forked from 77media/video-flow
更新 套餐信息
This commit is contained in:
moux1024
parent
edc1587ef7
commit
339671c738
@ -62,6 +62,9 @@ function HomeModule5() {
|
|||||||
{
|
{
|
||||||
title: string;
|
title: string;
|
||||||
price: number;
|
price: number;
|
||||||
|
originalPrice: number;
|
||||||
|
monthlyPrice: number;
|
||||||
|
discountMsg: string;
|
||||||
credits: string;
|
credits: string;
|
||||||
buttonText: string;
|
buttonText: string;
|
||||||
features: string[];
|
features: string[];
|
||||||
@ -75,6 +78,9 @@ function HomeModule5() {
|
|||||||
billingType === "month"
|
billingType === "month"
|
||||||
? plan.price_month / 100
|
? plan.price_month / 100
|
||||||
: plan.price_year / 100,
|
: plan.price_year / 100,
|
||||||
|
originalPrice: plan.price_month / 100,
|
||||||
|
monthlyPrice: billingType === "month" ? 0 : plan.price_year / 1200,
|
||||||
|
discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`,
|
||||||
credits: plan.description,
|
credits: plan.description,
|
||||||
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
|
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
|
||||||
issubscribed: plan.is_subscribed,
|
issubscribed: plan.is_subscribed,
|
||||||
@ -226,7 +232,7 @@ function HomeModule5() {
|
|||||||
xl:text-[3.375rem]
|
xl:text-[3.375rem]
|
||||||
2xl:text-[3.75rem]"
|
2xl:text-[3.75rem]"
|
||||||
>
|
>
|
||||||
${plan.price}
|
${plan.monthlyPrice || plan.price}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
className="text-white ml-2 whitespace-nowrap
|
className="text-white ml-2 whitespace-nowrap
|
||||||
@ -237,9 +243,12 @@ function HomeModule5() {
|
|||||||
xl:text-xs
|
xl:text-xs
|
||||||
2xl:text-sm"
|
2xl:text-sm"
|
||||||
>
|
>
|
||||||
/ {billingType === "month" ? "month" : "year"}
|
/ month
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
{plan.originalPrice !== plan.price ? (<div className="pt-2 text-white text-sm line-through">
|
||||||
|
${plan.originalPrice}
|
||||||
|
</div>) : null}
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="text-white mb-4
|
className="text-white mb-4
|
||||||
@ -288,7 +297,7 @@ function HomeModule5() {
|
|||||||
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
|
* {plan.discountMsg}
|
||||||
</p>
|
</p>
|
||||||
<ul
|
<ul
|
||||||
className="space-y-2
|
className="space-y-2
|
||||||
|
|||||||
@ -1205,8 +1205,7 @@ function HomeModule4() {
|
|||||||
}
|
}
|
||||||
/**价格方案 */
|
/**价格方案 */
|
||||||
function HomeModule5() {
|
function HomeModule5() {
|
||||||
const [billingType, setBillingType] = useState<"month" | "year">("month");
|
const [billingType, setBillingType] = useState<"month" | "year">("year");
|
||||||
|
|
||||||
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
const [plans, setPlans] = useState<SubscriptionPlan[]>([]);
|
||||||
const { setShowCallbackModal } = useCallbackModal();
|
const { setShowCallbackModal } = useCallbackModal();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
@ -1228,6 +1227,9 @@ function HomeModule5() {
|
|||||||
{
|
{
|
||||||
title: string;
|
title: string;
|
||||||
price: number;
|
price: number;
|
||||||
|
originalPrice: number;
|
||||||
|
monthlyPrice: number;
|
||||||
|
discountMsg: string;
|
||||||
credits: string;
|
credits: string;
|
||||||
buttonText: string;
|
buttonText: string;
|
||||||
features: string[];
|
features: string[];
|
||||||
@ -1241,6 +1243,9 @@ function HomeModule5() {
|
|||||||
billingType === "month"
|
billingType === "month"
|
||||||
? plan.price_month / 100
|
? plan.price_month / 100
|
||||||
: plan.price_year / 100,
|
: plan.price_year / 100,
|
||||||
|
originalPrice: plan.price_month / 100,
|
||||||
|
monthlyPrice: billingType === "month" ? 0 : plan.price_year / 1200,
|
||||||
|
discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`,
|
||||||
credits: plan.description,
|
credits: plan.description,
|
||||||
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
|
buttonText: plan.is_free ? "Try For Free" : "Subscribe Now",
|
||||||
issubscribed: plan.is_subscribed,
|
issubscribed: plan.is_subscribed,
|
||||||
@ -1372,7 +1377,7 @@ function HomeModule5() {
|
|||||||
/* 大屏显示器按钮尺寸 */
|
/* 大屏显示器按钮尺寸 */
|
||||||
2xl:w-[7.125rem] 2xl:text-base`}
|
2xl:w-[7.125rem] 2xl:text-base`}
|
||||||
>
|
>
|
||||||
Yearly - <span className="text-[#FFCC6D]">20%</span>
|
Yearly
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1438,40 +1443,47 @@ function HomeModule5() {
|
|||||||
/* 大屏显示器间距 */
|
/* 大屏显示器间距 */
|
||||||
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]
|
/* 小屏笔记本价格字体 */
|
||||||
/* 大屏笔记本价格字体 */
|
md:text-[2.5rem]
|
||||||
lg:text-[3rem]
|
/* 大屏笔记本价格字体 */
|
||||||
/* 桌面端价格字体 */
|
lg:text-[3rem]
|
||||||
xl:text-[3.375rem]
|
/* 桌面端价格字体 */
|
||||||
/* 大屏显示器价格字体 */
|
xl:text-[3.375rem]
|
||||||
2xl:text-[3.75rem]"
|
/* 大屏显示器价格字体 */
|
||||||
>
|
2xl:text-[3.75rem]"
|
||||||
${plan.price}
|
>
|
||||||
</span>
|
${plan.monthlyPrice || plan.price}
|
||||||
<span
|
</span>
|
||||||
className="text-white ml-2
|
<span
|
||||||
/* 移动端单位字体 */
|
className="text-white ml-2 whitespace-nowrap
|
||||||
text-xs
|
/* 移动端单位字体 */
|
||||||
/* 平板单位字体 */
|
text-xs
|
||||||
sm:text-xs
|
/* 平板单位字体 */
|
||||||
/* 小屏笔记本单位字体 */
|
sm:text-xs
|
||||||
md:text-xs
|
/* 小屏笔记本单位字体 */
|
||||||
/* 大屏笔记本单位字体 */
|
md:text-xs
|
||||||
lg:text-xs
|
/* 大屏笔记本单位字体 */
|
||||||
/* 桌面端单位字体 */
|
lg:text-xs
|
||||||
xl:text-xs
|
/* 桌面端单位字体 */
|
||||||
/* 大屏显示器单位字体 */
|
xl:text-xs
|
||||||
2xl:text-sm"
|
/* 大屏显示器单位字体 */
|
||||||
>
|
2xl:text-sm"
|
||||||
/ {billingType === "month" ? "mo" : "year"}
|
>
|
||||||
</span>
|
/ month
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{plan.originalPrice !== plan.price ? (
|
||||||
|
<div className="pt-2 text-white text-sm line-through">
|
||||||
|
${plan.originalPrice}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<p
|
<p
|
||||||
className="text-white mb-4
|
className="text-white mb-4
|
||||||
@ -1544,7 +1556,7 @@ function HomeModule5() {
|
|||||||
/* 大屏显示器提示文字 */
|
/* 大屏显示器提示文字 */
|
||||||
2xl:text-sm 2xl:mb-[2.5rem]"
|
2xl:text-sm 2xl:mb-[2.5rem]"
|
||||||
>
|
>
|
||||||
* Billed monthly until cancelled
|
* {plan.discountMsg}
|
||||||
</p>
|
</p>
|
||||||
<ul
|
<ul
|
||||||
className="space-y-2
|
className="space-y-2
|
||||||
|
|||||||
@ -99,7 +99,7 @@ const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
|
|||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-white font-normal text-center
|
<p className="text-white font-normal text-center mb-8
|
||||||
-mt-2
|
-mt-2
|
||||||
/* 移动端字体 */
|
/* 移动端字体 */
|
||||||
text-[1rem] leading-[140%]
|
text-[1rem] leading-[140%]
|
||||||
@ -138,7 +138,7 @@ const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
|
|||||||
} : {})}
|
} : {})}
|
||||||
onAfterInit={handleAfterInit}
|
onAfterInit={handleAfterInit}
|
||||||
onSlideChange={handleSlideChange}
|
onSlideChange={handleSlideChange}
|
||||||
className="w-full py-8"
|
className="w-full"
|
||||||
>
|
>
|
||||||
{videos.map((src, index) => (
|
{videos.map((src, index) => (
|
||||||
<SwiperSlide key={src} className="select-none">
|
<SwiperSlide key={src} className="select-none">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user