S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 样式修改

Browse Source
This commit is contained in:
speakeloudest
2025-09-07 23:21:41 -07:00
parent 57173a0221
commit 5dde8bd718
13 changed files with 80 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/components/SubscribePlan/PlanContent/index.tsx
+41 -10
View File
@@ -99,18 +99,24 @@ const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: num
</div>
);
import SvgIcon from '@/components/SvgIcon';
// 功能列表组件
const FeatureList = ({ plan }: { plan: API.Subscribe }) => {
const t = useTranslations('subscribe.detail');
const tSubscribe = useTranslations('subscribe');
const tOffer = useTranslations('components.offerDialog');
const features = [{ label: tOffer('availableNodes'), value: plan?.server_count }];
const features = [
{ label: tOffer('availableNodes'), icon: 'feature/Vector (5)', value: plan?.server_count },
];
return (
<div className='mt-6 space-y-0 sm:mt-6'>
<ul className='list-disc space-y-0 pl-5'>
<ul className='space-y-0'>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('availableTraffic')}</span>
<span className='flex items-center'>
<SvgIcon name={'feature/Vector'} className={'ml-1 mr-2'} />
{t('availableTraffic')}
</span>
<span>
<Display type='traffic' value={plan?.traffic} unlimited />
</span>
@@ -118,7 +124,10 @@ const FeatureList = ({ plan }: { plan: API.Subscribe }) => {
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<div className={'flex items-start justify-between'}>
<span className=''>{tSubscribe('billing.duration')}</span>
<span className='flex items-center'>
<SvgIcon name={'feature/Vector (1)'} className={'ml-1 mr-2'} />
{tSubscribe('billing.duration')}
</span>
<span>
{plan.origin_price ? '365' : '30'}
{tSubscribe('Day')}
@@ -127,7 +136,10 @@ const FeatureList = ({ plan }: { plan: API.Subscribe }) => {
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('connectionSpeed')}</span>
<span className='flex items-center'>
<SvgIcon name={'feature/Vector (4)'} className={'ml-1 mr-2'} />
{t('connectionSpeed')}
</span>
<span>
<Display type='trafficSpeed' value={plan?.speed_limit} unlimited />
</span>
@@ -135,7 +147,22 @@ const FeatureList = ({ plan }: { plan: API.Subscribe }) => {
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<div className={'flex items-start justify-between'}>
<span className=''>{t('connectedDevices')}</span>
<span className='flex items-center'>
<SvgIcon name={'feature/Group 69'} className={'ml-1 mr-2'} />
{plan?.name?.includes('pro') ? (
<span className={'font-medium'}>IEPL专线</span>
) : (
<span>国内中转+专线中转</span>
)}
</span>
</div>
</li>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<div className={'flex items-start justify-between'}>
<span className='flex items-center'>
<SvgIcon name={'feature/Vector (3)'} className={'ml-1 mr-2'} />
{t('connectedDevices')}
</span>
<span>
<Display value={plan?.device_limit} type='number' unlimited />
</span>
@@ -147,14 +174,18 @@ const FeatureList = ({ plan }: { plan: API.Subscribe }) => {
className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'
>
<div className={'flex items-start justify-between'}>
<span className=''>{feature.label}：</span>
<span className='flex items-center'>
<SvgIcon name={feature.icon} className={'ml-1 mr-2'} />
{feature.label}：
</span>
<span>{feature.value}</span>
</div>
</li>
))}
<li className='py-1'>
<li className='py-1 text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<div className={'flex items-start justify-between'}>
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-sm'>
<span className='flex items-center'>
<SvgIcon name={'feature/Group 68'} className={'ml-1 mr-2'} />
{tOffer('networkStabilityIndex')}
</span>
<StarRating rating={5} />
@@ -208,7 +239,7 @@ const PlanCard: React.FC<{
{t('subscribe')}
</AiroButton>
<div className={'mx-4'}>
<div className={'mr-4'}>
{/* 功能列表 */}
<FeatureList plan={plan} />
</div>