mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-22 20:37:48 +00:00
style: pay page perf (#2535)
* style: pay page perf * perf: package status logic && add pay text
This commit is contained in:
@@ -53,17 +53,17 @@ export const standardSubLevelMap = {
|
||||
},
|
||||
[StandardSubLevelEnum.experience]: {
|
||||
label: i18nT('common:support.wallet.subscription.standardSubLevel.experience'),
|
||||
desc: '',
|
||||
desc: i18nT('common:support.wallet.subscription.standardSubLevel.experience_desc'),
|
||||
weight: 2
|
||||
},
|
||||
[StandardSubLevelEnum.team]: {
|
||||
label: i18nT('common:support.wallet.subscription.standardSubLevel.team'),
|
||||
desc: '',
|
||||
desc: i18nT('common:support.wallet.subscription.standardSubLevel.team_desc'),
|
||||
weight: 3
|
||||
},
|
||||
[StandardSubLevelEnum.enterprise]: {
|
||||
label: i18nT('common:support.wallet.subscription.standardSubLevel.enterprise'),
|
||||
desc: '',
|
||||
desc: i18nT('common:support.wallet.subscription.standardSubLevel.enterprise_desc'),
|
||||
weight: 4
|
||||
},
|
||||
[StandardSubLevelEnum.custom]: {
|
||||
@@ -72,3 +72,15 @@ export const standardSubLevelMap = {
|
||||
weight: 5
|
||||
}
|
||||
};
|
||||
|
||||
export enum PackageChangeStatusEnum {
|
||||
buy = 'buy',
|
||||
renewal = 'renewal',
|
||||
upgrade = 'upgrade'
|
||||
}
|
||||
|
||||
export const packagePayTextMap = {
|
||||
[PackageChangeStatusEnum.buy]: i18nT('common:pay.package_tip.buy'),
|
||||
[PackageChangeStatusEnum.renewal]: i18nT('common:pay.package_tip.renewal'),
|
||||
[PackageChangeStatusEnum.upgrade]: i18nT('common:pay.package_tip.upgrade')
|
||||
};
|
||||
|
@@ -10,6 +10,8 @@
|
||||
"auto_renew_q": "Will the subscription package automatically renew?",
|
||||
"change_package_a": "When the current package price is greater than the new package, you cannot switch immediately. You will be switched in the form of \"renewal\" after the current package expires.\n\nWhen the current package price is lower than the new package, the system will automatically calculate the remaining balance of the current package, and you can pay the price difference to switch packages.",
|
||||
"change_package_q": "Can I switch subscription plans?",
|
||||
"check_subscription_a": "Account - personal information - package details - usage. \nYou can view the effective and expiry dates of the packages you own. \nWhen the paid package expires, it will automatically switch to the free version.",
|
||||
"check_subscription_q": "Where can I check my subscribed plans?",
|
||||
"dataset_compute_a": "1 knowledge base storage is equal to 1 knowledge base index. \nA piece of knowledge base data can contain one or more knowledge base indexes. \nDuring enhanced training, 1 piece of data will generate 5 indexes.",
|
||||
"dataset_compute_q": "How to calculate knowledge base storage?",
|
||||
"dataset_index_a": "Won't. \nHowever, when the knowledge base index exceeds, knowledge base content cannot be inserted and updated.",
|
||||
@@ -17,7 +19,9 @@
|
||||
"free_user_clean_a": "After free version users (free version without purchasing additional packages) have no usage records for 30 days, the system will automatically clear all knowledge base content under the account.",
|
||||
"free_user_clean_q": "Will the data in the free version be cleared?",
|
||||
"package_overlay_a": "OK. \nEach resource package purchased is independent and will be used stacked within its validity period. \nAI points will be deducted from the resource package that expires first.",
|
||||
"package_overlay_q": "Can additional resource packs be stacked?"
|
||||
"package_overlay_q": "Can additional resource packs be stacked?",
|
||||
"switch_package_a": "The package usage rule is to give priority to more advanced packages. Therefore, if the new package purchased is more advanced than the current package, the new package will take effect immediately: otherwise, the current package will continue to be used.",
|
||||
"switch_package_q": "Switch subscription plans?"
|
||||
},
|
||||
"Folder": "Folder",
|
||||
"Login": "Login",
|
||||
@@ -1070,6 +1074,7 @@
|
||||
},
|
||||
"extraction_results": "Extract results",
|
||||
"field_name": "Name",
|
||||
"free": "free",
|
||||
"get_QR_failed": "Failed to obtain QR code",
|
||||
"get_app_failed": "Failed to get app",
|
||||
"get_laf_failed": "Failed to get Laf function list",
|
||||
@@ -1089,6 +1094,7 @@
|
||||
},
|
||||
"invalid_variable": "Invalid variable",
|
||||
"is_open": "Opened",
|
||||
"is_using": "in use",
|
||||
"item_description": "Field description",
|
||||
"item_name": "Field name",
|
||||
"key_repetition": "key duplicate",
|
||||
@@ -1117,6 +1123,11 @@
|
||||
"notice": "Do not close the page",
|
||||
"old_package_price": "Old package price",
|
||||
"other": "For other amounts, please round up the whole number",
|
||||
"package_tip": {
|
||||
"buy": "The package level you purchased is lower than the current package, and the package will take effect after the current package expires. \nYou can check the package usage in Account—Personal Information—Package Details.",
|
||||
"renewal": "You are renewing your plan. \nYou can check the package usage in Account—Personal Information—Package Details.",
|
||||
"upgrade": "If the package you purchased is higher than the current package, the package will take effect immediately, and the current package will take effect later. \nYou can check the package usage in Account—Personal Information—Package Details."
|
||||
},
|
||||
"to_recharge": "Insufficient balance, please recharge",
|
||||
"wechat": "Please scan the QR code on WeChat to pay:",
|
||||
"yuan": "Yuan"
|
||||
@@ -1205,6 +1216,7 @@
|
||||
"AI Bonus Points": "AI points",
|
||||
"Expired Time": "End time",
|
||||
"Start Time": "Start time",
|
||||
"due_date": "Expiration time",
|
||||
"storage": "Storage amount",
|
||||
"type": "Type"
|
||||
},
|
||||
@@ -1365,10 +1377,18 @@
|
||||
"standardSubLevel": {
|
||||
"custom": "Customized version",
|
||||
"enterprise": "Enterprise edition",
|
||||
"enterprise_desc": "Suitable for small and medium-sized enterprises to build knowledge base applications in production environments",
|
||||
"experience": "Experience edition",
|
||||
"experience_desc": "Unlocks the full functionality of FastGPT",
|
||||
"free": "Free edition",
|
||||
"free desc": "Basic functions can be used for free every month, and the knowledge base will be cleared if there is no usage record for 30 days",
|
||||
"team": "Team edition"
|
||||
"team": "Team edition",
|
||||
"team_desc": "Suitable for small teams to build knowledge base applications and provide external services"
|
||||
},
|
||||
"status": {
|
||||
"active": "Taking effect",
|
||||
"expired": "Expired",
|
||||
"inactive": "To be used"
|
||||
},
|
||||
"token_compute": "Click to view the online Tokens calculator",
|
||||
"type": {
|
||||
|
@@ -1,11 +1,24 @@
|
||||
{
|
||||
"bill": {
|
||||
"balance": "Balance",
|
||||
"buy_plan": "Buy a package",
|
||||
"buy_standard_plan_success": "Package purchased successfully",
|
||||
"contact_customer_service": "Contact customer service",
|
||||
"conversion": "exchange",
|
||||
"convert_error": "Redemption failed",
|
||||
"convert_success": "Redemption successful",
|
||||
"current_token_price": "Current points price",
|
||||
"not_need_invoice": "Balance payment, unable to issue invoice",
|
||||
"price": "price",
|
||||
"renew_plan": "Renewal package",
|
||||
"standard_valid_tip": "Package usage rules: The system gives priority to using more advanced packages, and the original unused packages will take effect later.",
|
||||
"valid_time": "Effective time"
|
||||
"token_expire_1year": "Points are valid for one year",
|
||||
"tokens": "integral",
|
||||
"use_balance": "Use balance",
|
||||
"use_balance_hint": "Due to the system upgrade, the original \"automatic renewal and deduction from balance\" mode has been cancelled, and the balance recharge entrance has been closed. \nYour balance can be used to purchase points",
|
||||
"valid_time": "Effective time",
|
||||
"you_can_convert": "You can redeem",
|
||||
"yuan": "Yuan"
|
||||
},
|
||||
"bind_inform_account_error": "Abnormal binding notification account",
|
||||
"bind_inform_account_success": "Binding notification account successful",
|
||||
|
@@ -17,14 +17,20 @@
|
||||
"free_user_clean_a": "免费版团队(免费版且未购买额外套餐)连续 30 天未登录系统,系统会自动清除该团队下所有知识库内容。",
|
||||
"free_user_clean_q": "免费版数据会清除么?",
|
||||
"package_overlay_a": "可以的。每次购买的资源包都是独立的,在其有效期内将会叠加使用。AI积分会优先扣除最先过期的资源包。",
|
||||
"package_overlay_q": "额外资源包可以叠加么?"
|
||||
"package_overlay_q": "额外资源包可以叠加么?",
|
||||
"switch_package_q": "是否切换订阅套餐?",
|
||||
"switch_package_a": "套餐使用规则为优先使用更高级的套餐,因此,购买的新套餐若比当前套餐更高级,则新套餐立即生效:否则将继续使用当前套餐。",
|
||||
"check_subscription_q": "在哪里查看已订阅的套餐?",
|
||||
"check_subscription_a": "账号-个人信息-套餐详情-使用情况。您可以查看所拥有套餐的生效和到期时间。当付费套餐到期后将自动切换免费版。"
|
||||
},
|
||||
"Folder": "文件夹",
|
||||
"Login": "登录",
|
||||
"is_using": "正在使用",
|
||||
"Move": "移动",
|
||||
"Name": "名称",
|
||||
"Rename": "重命名",
|
||||
"Resume": "恢复",
|
||||
"free": "免费",
|
||||
"Running": "运行中",
|
||||
"UnKnow": "未知",
|
||||
"Warning": "提示",
|
||||
@@ -631,8 +637,7 @@
|
||||
"success": "开始同步"
|
||||
}
|
||||
},
|
||||
"training": {
|
||||
}
|
||||
"training": {}
|
||||
},
|
||||
"data": {
|
||||
"Auxiliary Data": "辅助数据",
|
||||
@@ -1119,7 +1124,12 @@
|
||||
"other": "其他金额,请取整数",
|
||||
"to_recharge": "余额不足,去充值",
|
||||
"wechat": "请微信扫码支付: {{price}}元\n请勿关闭页面",
|
||||
"yuan": "{{amount}}元"
|
||||
"yuan": "{{amount}}元",
|
||||
"package_tip": {
|
||||
"buy": "您购买的套餐等级低于当前套餐,该套餐将在当前套餐过期后生效。您可在账号—个人信息—套餐详情里,查看套餐使用情况。",
|
||||
"renewal": "您正在续费套餐。您可在账号—个人信息—套餐详情里,查看套餐使用情况。",
|
||||
"upgrade": "您购买的套餐等级高于当前套餐,该套餐将即刻生效,当前套餐将延后生效。您可在账号—个人信息—套餐详情里,查看套餐使用情况。"
|
||||
}
|
||||
},
|
||||
"permission": {
|
||||
"Collaborator": "协作者",
|
||||
@@ -1204,6 +1214,7 @@
|
||||
"standard": {
|
||||
"AI Bonus Points": "AI 积分",
|
||||
"Expired Time": "结束时间",
|
||||
"due_date": "到期时间",
|
||||
"Start Time": "开始时间",
|
||||
"storage": "存储量",
|
||||
"type": "类型"
|
||||
@@ -1320,6 +1331,11 @@
|
||||
"noBill": "无账单记录~",
|
||||
"no_invoice": "暂无开票记录",
|
||||
"subscription": {
|
||||
"status": {
|
||||
"expired": "已过期",
|
||||
"active": "生效中",
|
||||
"inactive": "待使用"
|
||||
},
|
||||
"AI points": "AI 积分",
|
||||
"AI points click to read tip": "每次调用 AI 模型时,都会消耗一定的 AI 积分(类似于 token)。点击可查看详细计算规则。",
|
||||
"AI points usage": "AI 积分使用量",
|
||||
@@ -1368,7 +1384,10 @@
|
||||
"experience": "体验版",
|
||||
"free": "免费版",
|
||||
"free desc": "每月均可免费使用基础功能,连续 30 天未登录系统,将会自动清除知识库",
|
||||
"team": "团队版"
|
||||
"team": "团队版",
|
||||
"experience_desc": "可解锁 FastGPT 完整功能",
|
||||
"team_desc": "适合小团队构建知识库应用并提供对外服务",
|
||||
"enterprise_desc": "适合中小企业在生产环境构建知识库应用"
|
||||
},
|
||||
"token_compute": "点击查看在线 Tokens 计算器",
|
||||
"type": {
|
||||
|
@@ -680,6 +680,19 @@ export const theme = extendTheme({
|
||||
800: '#93370D',
|
||||
900: '#7A2E0E'
|
||||
},
|
||||
adora: {
|
||||
25: '#FCFCFF',
|
||||
50: '#F0EEFF',
|
||||
100: '#E4E1FC',
|
||||
200: '#D3CAFF',
|
||||
300: '#B6A8FC',
|
||||
400: '#9E8DFB',
|
||||
500: '#8774EE',
|
||||
600: '#6F5DD7',
|
||||
700: '#5E4EBD',
|
||||
800: '#4E4198',
|
||||
900: '#42387D'
|
||||
},
|
||||
borderColor: {
|
||||
low: '#E8EBF0',
|
||||
base: '#DFE2EA',
|
||||
|
@@ -1,117 +1,60 @@
|
||||
<svg viewBox="0 0 1440 3888" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1529_3242)">
|
||||
<rect x="986.26" y="510.279" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 986.26 510.279)"
|
||||
stroke="url(#paint0_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="923.499" y="886.439" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 923.499 886.439)"
|
||||
stroke="url(#paint1_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="1088.08" y="130.271" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 1088.08 130.271)"
|
||||
stroke="url(#paint2_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="416.019" y="653.422" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 416.019 653.422)"
|
||||
stroke="url(#paint3_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="349.499" y="978.437" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 349.499 978.437)"
|
||||
stroke="url(#paint4_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="517.841" y="273.416" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 517.841 273.416)"
|
||||
stroke="url(#paint5_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="619.664" y="-106.592" width="483.77" height="341.137" rx="13.9824"
|
||||
transform="rotate(15 619.664 -106.592)" stroke="url(#paint6_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="-125.501" y="689.381" width="483.77" height="363.42" rx="13.9824"
|
||||
transform="rotate(15 -125.501 689.381)" stroke="url(#paint7_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="-23.6781" y="309.373" width="483.77" height="363.42" rx="13.9824"
|
||||
transform="rotate(15 -23.6781 309.373)" stroke="url(#paint8_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<rect x="78.1443" y="-70.6332" width="483.77" height="363.42" rx="13.9824"
|
||||
transform="rotate(15 78.1443 -70.6332)" stroke="url(#paint9_linear_1529_3242)" stroke-width="0.717048" />
|
||||
<g filter="url(#filter0_f_1529_3242)">
|
||||
<path
|
||||
d="M1299.4 236.263C1273.92 -58.7703 1292.79 -316.494 1659.87 -519.399L2251.84 551.545L1045.21 1218.52C1022.06 1228.14 991.901 1180.45 1030.53 1003.12C1078.82 781.445 1324.88 531.296 1299.4 236.263Z"
|
||||
fill="url(#paint10_linear_1529_3242)" fill-opacity="0.35" />
|
||||
</g>
|
||||
<g filter="url(#filter1_f_1529_3242)">
|
||||
<path
|
||||
d="M1114.05 72.4481C1088.57 -222.585 1393.67 -224.671 1760.75 -427.575L1615.29 697.061C1615.29 697.061 1499.66 1026.83 992.597 1317.14C943.478 1345.26 752.396 1398.55 495.322 1448.95C461.43 1481.9 423.174 1517.54 379.994 1556.11C276.748 1648.32 23.0323 1890.35 0.935006 2092.17C-36.7924 2436.75 -452.753 1780.5 -340.95 2006.57C-170.001 2352.24 -248.22 2754.86 -923.871 1975.75C-1249 1600.83 -1648.1 1384.37 -1817.79 1305.74C-1938.02 1260.94 -1917.51 1259.55 -1817.79 1305.74C-1717.43 1343.14 -1519 1410.79 -1186.7 1506.26C-745.377 1633.05 -1.69338 1546.39 495.322 1448.95C694.196 1255.58 742.848 1154.8 754.831 1099.79C803.117 878.115 1139.53 367.481 1114.05 72.4481Z"
|
||||
fill="url(#paint11_linear_1529_3242)" fill-opacity="0.4" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_1529_3242" x="829.097" y="-702.298" width="1605.64" height="2104.89"
|
||||
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="91.45" result="effect1_foregroundBlur_1529_3242" />
|
||||
</filter>
|
||||
<filter id="filter1_f_1529_3242" x="-2083.35" y="-610.476" width="4026.99" height="3217.24"
|
||||
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="91.45" result="effect1_foregroundBlur_1529_3242" />
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_1529_3242" x1="1228.25" y1="509.84" x2="1228.25" y2="873.977"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_1529_3242" x1="1165.49" y1="886" x2="1165.49" y2="1250.14"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_1529_3242" x1="1330.07" y1="129.832" x2="1330.07" y2="493.969"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_1529_3242" x1="658.009" y1="652.982" x2="658.009" y2="1017.12"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.1" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_1529_3242" x1="591.489" y1="977.998" x2="641.285" y2="1265.2"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_1529_3242" x1="759.831" y1="272.977" x2="759.831" y2="637.113"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.1" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_1529_3242" x1="861.654" y1="-107.031" x2="861.654" y2="234.823"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_1529_3242" x1="116.489" y1="688.941" x2="162.837" y2="1231.8"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_1529_3242" x1="218.312" y1="308.934" x2="218.312" y2="673.07"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.15" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_1529_3242" x1="253.832" y1="-102.612" x2="344.766" y2="364.261"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_1529_3242" x1="1156.96" y1="-159.622" x2="1812.4" y2="131.08"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.153575" stop-color="#CAECFF" stop-opacity="0.9" />
|
||||
<stop offset="0.4375" stop-color="#ACBEFF" />
|
||||
<stop offset="0.703125" stop-color="#618DFF" />
|
||||
<stop offset="0.833333" stop-color="#628EFF" />
|
||||
<stop offset="1" stop-color="#0058FF" />
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_1529_3242" x1="1257.84" y1="-67.7694" x2="1913.28" y2="222.933"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.153575" stop-color="#CAD9FF" stop-opacity="0.9" />
|
||||
<stop offset="0.4375" stop-color="#ACC8FF" />
|
||||
<stop offset="0.703125" stop-color="#61A0FF" />
|
||||
<stop offset="0.833333" stop-color="#3B7DFF" />
|
||||
<stop offset="1" stop-color="#0058FF" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1529_3242">
|
||||
<rect width="1440" height="3888" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg width="1440" height="1356" viewBox="0 0 1440 1356" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_9342_246)">
|
||||
<rect x="986.259" y="489.279" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 986.259 489.279)" stroke="url(#paint0_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="923.499" y="865.439" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 923.499 865.439)" stroke="url(#paint1_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="1088.08" y="109.271" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 1088.08 109.271)" stroke="url(#paint2_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="416.019" y="632.422" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 416.019 632.422)" stroke="url(#paint3_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="349.499" y="957.437" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 349.499 957.437)" stroke="url(#paint4_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="517.841" y="252.416" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 517.841 252.416)" stroke="url(#paint5_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="619.663" y="-127.592" width="483.77" height="341.137" rx="13.9824" transform="rotate(15 619.663 -127.592)" stroke="url(#paint6_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="-125.501" y="668.381" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 -125.501 668.381)" stroke="url(#paint7_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="-23.6784" y="288.373" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 -23.6784 288.373)" stroke="url(#paint8_linear_9342_246)" stroke-width="0.717048"/>
|
||||
<rect x="78.1439" y="-91.6331" width="483.77" height="363.42" rx="13.9824" transform="rotate(15 78.1439 -91.6331)" stroke="url(#paint9_linear_9342_246)" stroke-width="0.717048"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_9342_246" x1="1228.25" y1="488.84" x2="1228.25" y2="852.977" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_9342_246" x1="1165.49" y1="865" x2="1165.49" y2="1229.14" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_9342_246" x1="1330.07" y1="108.832" x2="1330.07" y2="472.969" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_9342_246" x1="658.009" y1="631.982" x2="658.009" y2="996.119" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.1"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_9342_246" x1="591.489" y1="956.998" x2="641.284" y2="1244.2" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_9342_246" x1="759.831" y1="251.977" x2="759.831" y2="616.113" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.1"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_9342_246" x1="861.653" y1="-128.031" x2="861.653" y2="213.823" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_9342_246" x1="116.489" y1="667.941" x2="162.837" y2="1210.8" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_9342_246" x1="218.312" y1="287.934" x2="218.312" y2="652.07" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.15"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_9342_246" x1="253.832" y1="-123.612" x2="344.766" y2="343.261" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#336FFF" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="#336FFF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_9342_246">
|
||||
<rect width="1440" height="1356" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 4.4 KiB |
@@ -74,7 +74,11 @@ const QRCodePayModal = ({
|
||||
return (
|
||||
<MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
|
||||
<ModalBody textAlign={'center'} py={6} whiteSpace={'pre'}>
|
||||
{tip && <Box mb={3}>{tip}</Box>}
|
||||
{tip && (
|
||||
<Box textAlign={'left'} whiteSpace={'normal'} mb={3}>
|
||||
{tip}
|
||||
</Box>
|
||||
)}
|
||||
<Box id={'payQRCode'} display={'inline-block'} h={'128px'}></Box>
|
||||
<Box mt={3} textAlign={'center'}>
|
||||
{t('common:pay.wechat', { price: readPrice })}
|
||||
|
@@ -78,7 +78,7 @@ const StandardPlanContentList = ({
|
||||
</Flex>
|
||||
<Flex alignItems={'center'}>
|
||||
<MyIcon name={'price/right'} w={'16px'} mr={3} />
|
||||
<Box fontWeight={'bold'}>
|
||||
<Box fontWeight={'bold'} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.function.Max dataset size', {
|
||||
amount: planContent.maxDatasetSize
|
||||
})}
|
||||
@@ -87,7 +87,7 @@ const StandardPlanContentList = ({
|
||||
<Flex alignItems={'center'}>
|
||||
<MyIcon name={'price/right'} w={'16px'} mr={3} />
|
||||
<Flex alignItems={'center'}>
|
||||
<Box fontWeight={'bold'}>
|
||||
<Box fontWeight={'bold'} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.function.Points', {
|
||||
amount: planContent.totalPoints
|
||||
})}
|
||||
|
@@ -49,7 +49,9 @@ const ConversionModal = ({
|
||||
<VStack px="2.25" gap={2} pb="6">
|
||||
<HStack px="4" py="2" color="primary.600" bgColor="primary.50" borderRadius="md">
|
||||
<Icon name="common/info" w="1rem" mr="1" />
|
||||
<Box fontSize={'sm'}>{t('user:bill.use_balance_hint')}</Box>
|
||||
<Box fontSize={'mini'} fontWeight={'500'}>
|
||||
{t('user:bill.use_balance_hint')}
|
||||
</Box>
|
||||
</HStack>
|
||||
<VStack mt={6}>
|
||||
<Box fontSize={'sm'} color="myGray.600" fontWeight="500">
|
||||
@@ -74,7 +76,9 @@ const ConversionModal = ({
|
||||
<Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
|
||||
{points} {t('user:bill.tokens')}
|
||||
</Box>
|
||||
<Tag fontSize={'lg'}>{t('user:bill.token_expire_1year')}</Tag>
|
||||
<Tag fontSize={'xs'} fontWeight={'500'}>
|
||||
{t('user:bill.token_expire_1year')}
|
||||
</Tag>
|
||||
</VStack>
|
||||
|
||||
<VStack mt="6">
|
||||
@@ -88,7 +92,7 @@ const ConversionModal = ({
|
||||
>
|
||||
{t('user:bill.conversion')}
|
||||
</Button>
|
||||
<Link color="primary" mt="2" onClick={onOpenContact}>
|
||||
<Link fontSize={'sm'} color="primary" mt="2" onClick={onOpenContact}>
|
||||
{t('user:bill.contact_customer_service')}
|
||||
</Link>
|
||||
</VStack>
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
@@ -11,7 +11,8 @@ import {
|
||||
TableContainer,
|
||||
ModalCloseButton,
|
||||
HStack,
|
||||
Box
|
||||
Box,
|
||||
Flex
|
||||
} from '@chakra-ui/react';
|
||||
import MyModal from '@fastgpt/web/components/common/MyModal';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
@@ -19,16 +20,47 @@ import { useQuery } from '@tanstack/react-query';
|
||||
import { useLoading } from '@fastgpt/web/hooks/useLoading';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import { getTeamPlans } from '@/web/support/user/team/api';
|
||||
import { subTypeMap, standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
|
||||
import {
|
||||
subTypeMap,
|
||||
standardSubLevelMap,
|
||||
SubTypeEnum
|
||||
} from '@fastgpt/global/support/wallet/sub/constants';
|
||||
import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
|
||||
import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
|
||||
import { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
|
||||
type packageStatus = 'active' | 'inactive' | 'expired';
|
||||
|
||||
const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
|
||||
const { t } = useTranslation();
|
||||
const { Loading } = useLoading();
|
||||
const { subPlans } = useSystemStore();
|
||||
const { data: teamPlans = [], isLoading } = useQuery(['getTeamPlans'], getTeamPlans);
|
||||
const { data: teamPlans = [], loading: isLoading } = useRequest2(
|
||||
() =>
|
||||
getTeamPlans().then((res) => {
|
||||
return [
|
||||
...res.filter((plan) => plan.type === SubTypeEnum.standard),
|
||||
...res.filter((plan) => plan.type === SubTypeEnum.extraDatasetSize),
|
||||
...res.filter((plan) => plan.type === SubTypeEnum.extraPoints)
|
||||
].map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
status:
|
||||
new Date(item.expiredTime).getTime() < new Date().getTime()
|
||||
? 'expired'
|
||||
: item.type === SubTypeEnum.standard
|
||||
? index === 0
|
||||
? 'active'
|
||||
: 'inactive'
|
||||
: 'active'
|
||||
};
|
||||
});
|
||||
}),
|
||||
{
|
||||
manual: false
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<MyModal
|
||||
@@ -39,7 +71,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
|
||||
isCentered
|
||||
>
|
||||
<ModalCloseButton onClick={onClose} />
|
||||
<ModalBody>
|
||||
<ModalBody px={'3.25rem'} py={'2rem'}>
|
||||
<TableContainer mt={2} position={'relative'} minH={'300px'}>
|
||||
<Table>
|
||||
<Thead>
|
||||
@@ -48,7 +80,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
|
||||
<Th>{t('common:support.standard.storage')}</Th>
|
||||
<Th>{t('common:support.standard.AI Bonus Points')}</Th>
|
||||
<Th>{t('user:bill.valid_time')}</Th>
|
||||
<Th>{t('common:support.standard.Expired Time')}</Th>
|
||||
<Th>{t('common:support.standard.due_date')}</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody fontSize={'sm'}>
|
||||
@@ -61,25 +93,36 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
|
||||
surplusPoints = 0,
|
||||
totalPoints = 0,
|
||||
startTime,
|
||||
expiredTime
|
||||
}: TeamSubSchema) => {
|
||||
expiredTime,
|
||||
status
|
||||
}) => {
|
||||
const standardPlan = currentSubLevel
|
||||
? subPlans?.standard?.[currentSubLevel]
|
||||
: undefined;
|
||||
const datasetSize = standardPlan?.maxDatasetSize || currentExtraDatasetSize;
|
||||
const now = new Date();
|
||||
|
||||
return (
|
||||
<Tr key={_id}>
|
||||
<Tr key={_id} fontWeight={500} fontSize={'mini'} color={'myGray.900'}>
|
||||
<Td>
|
||||
<MyIcon
|
||||
mr={2}
|
||||
name={subTypeMap[type]?.icon as any}
|
||||
w={'20px'}
|
||||
color={'myGray.800'}
|
||||
/>
|
||||
{t(subTypeMap[type]?.label as any)}
|
||||
{currentSubLevel &&
|
||||
`(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
|
||||
<Flex>
|
||||
<Flex align={'center'}>
|
||||
<MyIcon
|
||||
mr={2}
|
||||
name={subTypeMap[type]?.icon as any}
|
||||
w={'20px'}
|
||||
h={'20px'}
|
||||
color={'myGray.600'}
|
||||
fontWeight={500}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex align={'center'} color={'myGray.900'}>
|
||||
{t(subTypeMap[type]?.label as any)}
|
||||
{currentSubLevel &&
|
||||
`(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
|
||||
</Flex>
|
||||
<StatusTag status={status as packageStatus} />
|
||||
</Flex>
|
||||
</Td>
|
||||
<Td>
|
||||
{datasetSize ? `${datasetSize + t('common:core.dataset.data.group')}` : '-'}
|
||||
@@ -89,8 +132,8 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
|
||||
? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('common:support.wallet.subscription.point')}`
|
||||
: '-'}
|
||||
</Td>
|
||||
<Td>{formatTime2YMDHM(startTime)}</Td>
|
||||
<Td>{formatTime2YMDHM(expiredTime)}</Td>
|
||||
<Td color={'myGray.600'}>{formatTime2YMDHM(startTime)}</Td>
|
||||
<Td color={'myGray.600'}>{formatTime2YMDHM(expiredTime)}</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
@@ -100,14 +143,56 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
|
||||
</Table>
|
||||
<Loading loading={isLoading} fixed={false} />
|
||||
</TableContainer>
|
||||
<HStack mt={4} color={'primary.600'}>
|
||||
<HStack mt={4} color={'primary.700'}>
|
||||
<MyIcon name={'infoRounded'} w={'1rem'} />
|
||||
<Box fontSize={'sm'}>{t('user:bill.standard_valid_tip')}</Box>
|
||||
<Box fontSize={'mini'} fontWeight={'500'}>
|
||||
{t('user:bill.standard_valid_tip')}
|
||||
</Box>
|
||||
</HStack>
|
||||
</ModalBody>
|
||||
<ModalFooter></ModalFooter>
|
||||
</MyModal>
|
||||
);
|
||||
};
|
||||
|
||||
function StatusTag({ status }: { status: packageStatus }) {
|
||||
const { t } = useTranslation();
|
||||
const statusText = useMemo(() => {
|
||||
return {
|
||||
inactive: t('common:support.wallet.subscription.status.inactive'),
|
||||
active: t('common:support.wallet.subscription.status.active'),
|
||||
expired: t('common:support.wallet.subscription.status.expired')
|
||||
};
|
||||
}, [t]);
|
||||
const styleMap = useMemo(() => {
|
||||
return {
|
||||
inactive: {
|
||||
color: 'adora.600',
|
||||
bg: 'adora.50'
|
||||
},
|
||||
active: {
|
||||
color: 'green.600',
|
||||
bg: 'green.50'
|
||||
},
|
||||
expired: {
|
||||
color: 'myGray.700',
|
||||
bg: 'myGray.100'
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<Box
|
||||
py={'0.25rem'}
|
||||
ml={'0.375rem'}
|
||||
px={'0.5rem'}
|
||||
fontSize={'0.625rem'}
|
||||
fontWeight={500}
|
||||
borderRadius={'sm'}
|
||||
bg={styleMap[status]?.bg}
|
||||
color={styleMap[status]?.color}
|
||||
>
|
||||
{statusText[status]}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default StandDetailModal;
|
||||
|
@@ -119,15 +119,15 @@ const ExtraPlan = () => {
|
||||
|
||||
return (
|
||||
<Flex
|
||||
mt={['40px', '90px']}
|
||||
mt={['40px', '200px']}
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
position={'relative'}
|
||||
>
|
||||
<Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']}>
|
||||
<Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
|
||||
{t('common:support.wallet.subscription.Extra plan')}
|
||||
</Box>
|
||||
<Box mt={8} mb={10} color={'myGray.500'} fontSize={'md'}>
|
||||
<Box mt={2} mb={8} color={'myGray.600'} fontSize={'md'}>
|
||||
{t('common:support.wallet.subscription.Extra plan tip')}
|
||||
</Box>
|
||||
<Grid mt={8} gridTemplateColumns={['1fr', '1fr 1fr']} gap={5} w={['100%', 'auto']}>
|
||||
@@ -143,12 +143,12 @@ const ExtraPlan = () => {
|
||||
>
|
||||
<Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
|
||||
<Box flex={'1 0 0'}>
|
||||
<Box fontSize={'lg'} color={'primary.600'}>
|
||||
<Box fontSize={'lg'} color={'primary.700'}>
|
||||
{t('common:support.wallet.subscription.Extra dataset size')}
|
||||
</Box>
|
||||
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
|
||||
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'} color={'black'}>
|
||||
{`¥${extraDatasetPrice}/1000` + t('common:core.dataset.data.group')}
|
||||
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.600'} fontWeight={'normal'}>
|
||||
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.500'} fontWeight={'normal'}>
|
||||
/{t('common:common.month')}
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -162,12 +162,12 @@ const ExtraPlan = () => {
|
||||
/>
|
||||
</Flex>
|
||||
<Box h={'120px'} w={'100%'}>
|
||||
<Flex mt={4}>
|
||||
<Flex mt={4} color={'myGray.900'}>
|
||||
<MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
|
||||
{t('common:support.wallet.buy_resource')}
|
||||
</Flex>
|
||||
<Flex mt={4} alignItems={'center'}>
|
||||
<Box flex={['0 0 100px', '1 0 0']}>
|
||||
<Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.Month amount')}
|
||||
</Box>
|
||||
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
|
||||
@@ -186,13 +186,13 @@ const ExtraPlan = () => {
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
<Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
|
||||
<Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
|
||||
{t('common:common.month')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex mt={4} alignItems={'center'}>
|
||||
<Box flex={['0 0 100px', '1 0 0']}>
|
||||
<Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.Update extra dataset size')}
|
||||
</Box>
|
||||
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
|
||||
@@ -219,7 +219,7 @@ const ExtraPlan = () => {
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
<Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
|
||||
<Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
|
||||
000{t('common:core.dataset.data.unit')}
|
||||
</Box>
|
||||
</Flex>
|
||||
@@ -231,6 +231,7 @@ const ExtraPlan = () => {
|
||||
variant={'primaryGhost'}
|
||||
isLoading={loading}
|
||||
onClick={handleSubmitDatasetSize(onclickBuyDatasetSize)}
|
||||
color={'primary.700'}
|
||||
>
|
||||
{t('common:support.wallet.Buy')}
|
||||
</Button>
|
||||
@@ -248,12 +249,12 @@ const ExtraPlan = () => {
|
||||
>
|
||||
<Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
|
||||
<Box flex={'1 0 0'}>
|
||||
<Box fontSize={'lg'} color={'primary.600'}>
|
||||
<Box fontSize={'lg'} color={'primary.700'}>
|
||||
{t('common:support.wallet.subscription.Extra ai points')}
|
||||
</Box>
|
||||
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
|
||||
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'} color={'black'}>
|
||||
{`¥${extraPointsPrice}/1000` + t('common:support.wallet.subscription.point')}
|
||||
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.600'} fontWeight={'normal'}>
|
||||
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.500'} fontWeight={'normal'}>
|
||||
/{t('common:common.month')}
|
||||
</Box>
|
||||
</Box>
|
||||
@@ -267,7 +268,7 @@ const ExtraPlan = () => {
|
||||
/>
|
||||
</Flex>
|
||||
<Box h={'120px'} w={'100%'}>
|
||||
<Flex mt={4}>
|
||||
<Flex mt={4} color={'myGray.900'}>
|
||||
<MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
|
||||
{t('common:support.wallet.buy_resource')}
|
||||
</Flex>
|
||||
@@ -297,10 +298,16 @@ const ExtraPlan = () => {
|
||||
</Flex>
|
||||
</Flex> */}
|
||||
<Flex mt={4} alignItems={'center'}>
|
||||
<Box flex={['0 0 100px', '1 0 0']}>
|
||||
<Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.Update extra ai points')}
|
||||
</Box>
|
||||
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
mt={1}
|
||||
w={'180px'}
|
||||
position={'relative'}
|
||||
color={'myGray.500'}
|
||||
>
|
||||
<NumberInput
|
||||
size={'sm'}
|
||||
flex={1}
|
||||
@@ -336,6 +343,7 @@ const ExtraPlan = () => {
|
||||
variant={'primaryGhost'}
|
||||
isLoading={loading}
|
||||
onClick={handleSubmitExtraPoints(onclickBuyExtraPoints)}
|
||||
color={'primary.700'}
|
||||
>
|
||||
{t('common:support.wallet.Buy')}
|
||||
</Button>
|
||||
|
@@ -6,12 +6,12 @@ const FAQ = () => {
|
||||
const { t } = useTranslation();
|
||||
const faqs = [
|
||||
{
|
||||
title: t('common:FAQ.auto_renew_q'),
|
||||
desc: t('common:FAQ.auto_renew_a')
|
||||
title: t('common:FAQ.switch_package_q'),
|
||||
desc: t('common:FAQ.switch_package_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.change_package_q'),
|
||||
desc: t('common:FAQ.change_package_a')
|
||||
title: t('common:FAQ.check_subscription_q'),
|
||||
desc: t('common:FAQ.check_subscription_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.ai_point_q'),
|
||||
@@ -41,21 +41,21 @@ const FAQ = () => {
|
||||
|
||||
return (
|
||||
<Flex
|
||||
mt={['40px', '90px']}
|
||||
mt={['40px', '200px']}
|
||||
pb={'10vh'}
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
position={'relative'}
|
||||
>
|
||||
<Box fontWeight={'bold'} fontSize={['24px', '36px']}>
|
||||
<Box fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
|
||||
{t('common:support.wallet.subscription.FAQ')}
|
||||
</Box>
|
||||
<Grid mt={4} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
|
||||
<Grid mt={12} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
|
||||
{faqs.map((item, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
py={4}
|
||||
px={5}
|
||||
py={8}
|
||||
px={9}
|
||||
borderRadius={'lg'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
@@ -64,8 +64,10 @@ const FAQ = () => {
|
||||
borderColor: 'primary.300'
|
||||
}}
|
||||
>
|
||||
<Box fontWeight={'bold'}>{item.title}</Box>
|
||||
<Box fontSize={'sm'} color={'myGray.600'} whiteSpace={'pre-wrap'}>
|
||||
<Box fontWeight={'bold'} pb={3} color={'myGray.900'}>
|
||||
{item.title}
|
||||
</Box>
|
||||
<Box fontSize={'sm'} color={'myGray.600'}>
|
||||
{item.desc}
|
||||
</Box>
|
||||
</Box>
|
||||
|
@@ -9,18 +9,18 @@ const Points = () => {
|
||||
|
||||
return (
|
||||
<Flex
|
||||
mt={['40px', '90px']}
|
||||
mt={['40px', '200px']}
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
position={'relative'}
|
||||
>
|
||||
<Box id="point-card" fontWeight={'bold'} fontSize={['24px', '36px']}>
|
||||
<Box id="point-card" fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
|
||||
{t('common:support.wallet.subscription.Ai points')}
|
||||
</Box>
|
||||
<Link href="https://tiktokenizer.vercel.app/" target="_blank">
|
||||
{t('common:support.wallet.subscription.token_compute')}
|
||||
</Link>
|
||||
<Grid gap={6} mt={['30px', '40px']} w={'100%'}>
|
||||
<Grid gap={6} mt={['30px', 14]} w={'100%'} color={'myGray.900'}>
|
||||
<Box
|
||||
display={['block', 'flex']}
|
||||
borderRadius={'xl'}
|
||||
@@ -33,16 +33,17 @@ const Points = () => {
|
||||
flex={1}
|
||||
borderRightWidth={'1px'}
|
||||
borderRightColor={'myGray.150'}
|
||||
py={4}
|
||||
px={6}
|
||||
py={8}
|
||||
pl={10}
|
||||
fontSize={'md'}
|
||||
fontWeight={'bold'}
|
||||
color={'myGray.900'}
|
||||
>
|
||||
{t('common:support.wallet.subscription.ai_model')}
|
||||
</Box>
|
||||
<Box flex={4} textAlign={'center'}>
|
||||
{llmModelList?.map((item, i) => (
|
||||
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
|
||||
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.100' : ''}>
|
||||
<Box flex={'1 0 0'}>{item.name}</Box>
|
||||
<Box flex={'1 0 0'}>
|
||||
{item.charsPointsPrice +
|
||||
@@ -61,17 +62,17 @@ const Points = () => {
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
|
||||
<Box fontSize={'md'} fontWeight={'bold'}>
|
||||
{t('common:core.ai.model.Vector Model')}
|
||||
</Box>
|
||||
<Box fontSize={'sm'} mt={1} color={'myGray.500'}>
|
||||
<Box fontSize={'sm'} mt={1} color={'myGray.600'}>
|
||||
{t('common:core.ai.model.doc_index_and_dialog')}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box flex={4} textAlign={'center'}>
|
||||
{vectorModelList?.map((item, i) => (
|
||||
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
|
||||
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.100' : ''}>
|
||||
<Box flex={'1 0 0'}>{item.name}</Box>
|
||||
<Box flex={'1 0 0'}>
|
||||
{item.charsPointsPrice +
|
||||
@@ -90,7 +91,7 @@ const Points = () => {
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
|
||||
<Box fontSize={'md'} fontWeight={'bold'}>
|
||||
{t('common:core.app.TTS')}
|
||||
</Box>
|
||||
@@ -117,7 +118,7 @@ const Points = () => {
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} pl={10}>
|
||||
<Box fontSize={'md'} fontWeight={'bold'}>
|
||||
{t('common:core.app.Whisper')}
|
||||
</Box>
|
||||
|
@@ -1,8 +1,13 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import { Box, Button, Flex, Grid } from '@chakra-ui/react';
|
||||
import { Box, Button, Flex, Grid, HStack } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { StandardSubLevelEnum, SubModeEnum } from '@fastgpt/global/support/wallet/sub/constants';
|
||||
import {
|
||||
StandardSubLevelEnum,
|
||||
SubModeEnum,
|
||||
PackageChangeStatusEnum,
|
||||
packagePayTextMap
|
||||
} from '@fastgpt/global/support/wallet/sub/constants';
|
||||
import { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
@@ -24,7 +29,7 @@ const Standard = ({
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
|
||||
const [packageChange, setPackageChange] = useState<PackageChangeStatusEnum>();
|
||||
const { subPlans, feConfigs } = useSystemStore();
|
||||
const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.month);
|
||||
|
||||
@@ -66,103 +71,180 @@ const Standard = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
|
||||
<Box fontWeight={'bold'} fontSize={['24px', '36px']}>
|
||||
{t('common:support.wallet.subscription.Sub plan')}
|
||||
</Box>
|
||||
<Box mt={8} mb={10} color={'myGray.500'} fontSize={'md'}>
|
||||
{t('common:support.wallet.subscription.Sub plan tip', {
|
||||
title: feConfigs?.systemTitle
|
||||
})}
|
||||
</Box>
|
||||
<Box>
|
||||
<RowTabs
|
||||
list={[
|
||||
{ label: t('common:support.wallet.subscription.mode.Month'), value: SubModeEnum.month },
|
||||
{
|
||||
label: (
|
||||
<Flex>
|
||||
{t('common:support.wallet.subscription.mode.Year')}
|
||||
<Box color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}>
|
||||
({t('common:support.wallet.subscription.mode.Year sale')})
|
||||
<>
|
||||
<Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
|
||||
<Box fontWeight={'600'} color={'myGray.900'} fontSize={['24px', '36px']}>
|
||||
{t('common:support.wallet.subscription.Sub plan')}
|
||||
</Box>
|
||||
<Box mt={8} mb={10} fontWeight={'500'} color={'myGray.600'} fontSize={'md'}>
|
||||
{t('common:support.wallet.subscription.Sub plan tip', {
|
||||
title: feConfigs?.systemTitle
|
||||
})}
|
||||
</Box>
|
||||
<Box>
|
||||
<RowTabs
|
||||
list={[
|
||||
{
|
||||
label: t('common:support.wallet.subscription.mode.Month'),
|
||||
value: SubModeEnum.month
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Flex>
|
||||
{t('common:support.wallet.subscription.mode.Year')}
|
||||
<Box ml={1} color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}>
|
||||
({t('common:support.wallet.subscription.mode.Year sale')})
|
||||
</Box>
|
||||
</Flex>
|
||||
),
|
||||
value: SubModeEnum.year
|
||||
}
|
||||
]}
|
||||
value={selectSubMode}
|
||||
onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
|
||||
/>
|
||||
</Box>
|
||||
{/* card */}
|
||||
<Grid
|
||||
mt={[10, '48px']}
|
||||
gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']}
|
||||
gap={[4, 6, 8]}
|
||||
w={'100%'}
|
||||
maxW={'1440px'}
|
||||
minH={'550px'}
|
||||
>
|
||||
{standardSubList.map((item) => {
|
||||
const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
|
||||
|
||||
const isHigherLevel =
|
||||
standardSubLevelMap[item.level].weight >
|
||||
standardSubLevelMap[myStandardPlan?.currentSubLevel || StandardSubLevelEnum.free]
|
||||
.weight;
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={item.level}
|
||||
pos={'relative'}
|
||||
flex={'1 0 0'}
|
||||
bg={isCurrentPlan ? 'blue.50' : 'rgba(255, 255, 255, 0.90)'}
|
||||
p={'28px'}
|
||||
borderRadius={'xl'}
|
||||
borderWidth={isCurrentPlan ? '4px' : '1.5px'}
|
||||
boxShadow={'1.5'}
|
||||
{...(isCurrentPlan
|
||||
? {
|
||||
borderColor: 'primary.600'
|
||||
}
|
||||
: {
|
||||
borderColor: 'myGray.150'
|
||||
})}
|
||||
>
|
||||
{isCurrentPlan && (
|
||||
<Box
|
||||
position={'absolute'}
|
||||
right={0}
|
||||
top={'1.62rem'}
|
||||
px={3}
|
||||
py={'0.38rem'}
|
||||
color={'blue.700'}
|
||||
fontSize={'xs'}
|
||||
bg={'blue.200'}
|
||||
fontWeight={'500'}
|
||||
borderLeftRadius={'sm'}
|
||||
>
|
||||
{t('common:is_using')}
|
||||
</Box>
|
||||
</Flex>
|
||||
),
|
||||
value: SubModeEnum.year
|
||||
}
|
||||
]}
|
||||
value={selectSubMode}
|
||||
onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
|
||||
/>
|
||||
</Box>
|
||||
{/* card */}
|
||||
<Grid
|
||||
mt={[10, '48px']}
|
||||
gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']}
|
||||
gap={[4, 6, 8]}
|
||||
w={'100%'}
|
||||
maxW={'1440px'}
|
||||
minH={'550px'}
|
||||
>
|
||||
{standardSubList.map((item) => {
|
||||
const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
|
||||
)}
|
||||
<Box fontSize={'md'} fontWeight={'500'} color={'myGray.900'}>
|
||||
{t(item.label)}
|
||||
</Box>
|
||||
<Box fontSize={['32px', '42px']} fontWeight={'bold'} color={'myGray.900'}>
|
||||
¥{item.price}
|
||||
</Box>
|
||||
<Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
|
||||
{t(item.desc as any, { title: feConfigs?.systemTitle })}
|
||||
</Box>
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={item.level}
|
||||
flex={'1 0 0'}
|
||||
bg={'rgba(255, 255, 255, 0.90)'}
|
||||
p={'28px'}
|
||||
borderRadius={'2xl'}
|
||||
borderWidth={'1.5px'}
|
||||
boxShadow={'1.5'}
|
||||
{...(isCurrentPlan
|
||||
? {
|
||||
borderColor: 'primary.600'
|
||||
{/* Button */}
|
||||
{(() => {
|
||||
if (item.level === StandardSubLevelEnum.free) {
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
_active={{}}
|
||||
_hover={{}}
|
||||
boxShadow={'0'}
|
||||
cursor={'default'}
|
||||
w={'100%'}
|
||||
variant={isCurrentPlan ? 'whiteBase' : 'solid'}
|
||||
>
|
||||
{t('common:free')}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
// feature:
|
||||
// if (
|
||||
// item.level === myStandardPlan?.nextSubLevel &&
|
||||
// selectSubMode === myStandardPlan?.nextMode
|
||||
// ) {
|
||||
// return (
|
||||
// <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
|
||||
// {t('common:support.wallet.subscription.Next plan')}
|
||||
// </Button>
|
||||
// );
|
||||
// }
|
||||
if (isCurrentPlan) {
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
w={'100%'}
|
||||
variant={'primary'}
|
||||
isLoading={isLoading}
|
||||
onClick={() => {
|
||||
setPackageChange(PackageChangeStatusEnum.renewal);
|
||||
onPay({
|
||||
type: BillTypeEnum.standSubPlan,
|
||||
level: item.level,
|
||||
subMode: selectSubMode
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t('user:bill.renew_plan')}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
if (isHigherLevel) {
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
w={'100%'}
|
||||
variant={'primaryGhost'}
|
||||
isLoading={isLoading}
|
||||
onClick={() => {
|
||||
setPackageChange(PackageChangeStatusEnum.upgrade);
|
||||
onPay({
|
||||
type: BillTypeEnum.standSubPlan,
|
||||
level: item.level,
|
||||
subMode: selectSubMode
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t('common:support.wallet.subscription.Upgrade plan')}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
: {
|
||||
borderColor: 'myGray.150'
|
||||
})}
|
||||
>
|
||||
<Box fontSize={'md'} fontWeight={'500'}>
|
||||
{t(item.label)}
|
||||
</Box>
|
||||
<Box fontSize={['32px', '42px']} fontWeight={'bold'}>
|
||||
¥{item.price}
|
||||
</Box>
|
||||
<Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
|
||||
{t(item.desc as any, { title: feConfigs?.systemTitle })}
|
||||
</Box>
|
||||
|
||||
{/* Button */}
|
||||
{(() => {
|
||||
if (item.level === StandardSubLevelEnum.free) {
|
||||
return (
|
||||
<Button isDisabled mt={4} mb={6} w={'100%'} variant={'solid'}>
|
||||
{t('common:support.wallet.subscription.Nonsupport')}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
// feature:
|
||||
// if (
|
||||
// item.level === myStandardPlan?.nextSubLevel &&
|
||||
// selectSubMode === myStandardPlan?.nextMode
|
||||
// ) {
|
||||
// return (
|
||||
// <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
|
||||
// {t('common:support.wallet.subscription.Next plan')}
|
||||
// </Button>
|
||||
// );
|
||||
// }
|
||||
if (isCurrentPlan) {
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
w={'100%'}
|
||||
variant={'primary'}
|
||||
variant={'primaryGhost'}
|
||||
isLoading={isLoading}
|
||||
onClick={() => {
|
||||
setPackageChange(PackageChangeStatusEnum.buy);
|
||||
onPay({
|
||||
type: BillTypeEnum.standSubPlan,
|
||||
level: item.level,
|
||||
@@ -170,40 +252,29 @@ const Standard = ({
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t('user:bill.renew_plan')}
|
||||
{t('user:bill.buy_plan')}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
})()}
|
||||
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
w={'100%'}
|
||||
variant={'primaryGhost'}
|
||||
isLoading={isLoading}
|
||||
onClick={() =>
|
||||
onPay({
|
||||
type: BillTypeEnum.standSubPlan,
|
||||
level: item.level,
|
||||
subMode: selectSubMode
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('user:bill.buy_plan')}
|
||||
</Button>
|
||||
);
|
||||
})()}
|
||||
{/* function list */}
|
||||
<StandardPlanContentList level={item.level} mode={selectSubMode} />
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
{/* function list */}
|
||||
<StandardPlanContentList level={item.level} mode={selectSubMode} />
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
{!!qrPayData && <QRCodePayModal tip="您正在购买订阅套餐" {...qrPayData} />}
|
||||
</Flex>
|
||||
{!!qrPayData && packageChange && (
|
||||
<QRCodePayModal tip={t(packagePayTextMap[packageChange])} {...qrPayData} />
|
||||
)}
|
||||
</Flex>
|
||||
<HStack mt={8} color={'blue.700'} ml={8}>
|
||||
<MyIcon name={'infoRounded'} w={'1rem'} />
|
||||
<Box fontSize={'sm'} fontWeight={'500'}>
|
||||
{t('user:bill.standard_valid_tip')}
|
||||
</Box>
|
||||
</HStack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -239,7 +310,7 @@ const RowTabs = ({
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'md'}
|
||||
borderRadius={'sm'}
|
||||
px={'12px'}
|
||||
py={'7px'}
|
||||
userSelect={'none'}
|
||||
@@ -255,7 +326,7 @@ const RowTabs = ({
|
||||
})}
|
||||
>
|
||||
{item.icon && <MyIcon name={item.icon as any} mr={1} w={'14px'} />}
|
||||
<Box>{item.label}</Box>
|
||||
<Box fontWeight={'500'}>{item.label}</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
|
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { serviceSideProps } from '@/web/common/utils/i18n';
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import { useUserStore } from '@/web/support/user/useUserStore';
|
||||
import { getTeamPlanStatus } from '@/web/support/user/team/api';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
@@ -26,13 +26,14 @@ const PriceBox = () => {
|
||||
return (
|
||||
<>
|
||||
<Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
|
||||
<Box
|
||||
<Flex
|
||||
h={'100%'}
|
||||
flexDir={'column'}
|
||||
overflow={'overlay'}
|
||||
w={'100%'}
|
||||
px={['20px', '5vw']}
|
||||
py={['30px', '80px']}
|
||||
backgroundImage={'url(/imgs/priceBg.svg)'}
|
||||
bg={`linear-gradient(to right, #F8F8FD00, #F7F7FF),url(/imgs/priceBg.svg)`}
|
||||
backgroundSize={'cover'}
|
||||
backgroundRepeat={'no-repeat'}
|
||||
>
|
||||
@@ -49,7 +50,7 @@ const PriceBox = () => {
|
||||
|
||||
{/* question */}
|
||||
<FAQ />
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user