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