feat: 修改样式

apps/user/components/affiliate/components/AffiliateDialog.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Empty } from '@/components/empty';
+import { ProList } from '@/components/pro-list';
 import { queryUserAffiliateList } from '@/services/user/user';
 import {
   Dialog,
@@ -8,7 +9,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@workspace/airo-ui/components/dialog';
-import { ProList } from '@workspace/airo-ui/custom-components/pro-list/pro-list';
 import { formatDate } from '@workspace/airo-ui/utils';
 import { useTranslations } from 'next-intl';
 import { useImperativeHandle, useState } from 'react';
@@ -55,7 +55,7 @@ export const AffiliateDialog = ({ ref }: AffiliateDialogProps) => {
             }}
             renderItem={(invite) => {
               return (
-                <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] sm:text-base'>
+                <div className='flex flex-wrap justify-between gap-2 rounded-[20px] bg-white px-6 py-2 text-[10px] shadow-[0_0_4.5px_0_rgba(0,0,0,0.25)] sm:text-base'>
                   <div>
                     <div className={'text-[#225BA9]'}>{t('userIdentifier')}</div>
                     <div className={'font-bold text-[#091B33]'}>{invite.identifier}</div>

apps/user/components/main/OfferDialog/index.tsx

@@ -179,7 +179,7 @@ const PlanCard = forwardRef<
   return (
     <div
       ref={ref}
-      className='relative w-full min-w-[300px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:w-[345px] sm:p-10'
+      className='relative w-full min-w-[300px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 shadow-[0_0_52.6px_1px_rgba(15,44,83,0.05)] transition-all duration-300 sm:w-[345px] sm:p-10'
     >
       {/* 套餐名称 */}
       <h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
@@ -237,8 +237,8 @@ export const PlanList = ({
   if (plans.length === 0) return <EmptyState message={emptyMessage} />;
 
   return (
-    <div className={'flex justify-center'}>
-      <div className='flex flex-col flex-wrap gap-6 sm:flex-row'>
+    <div className={'flex w-full justify-center px-[6px] sm:px-0'}>
+      <div className='flex w-full flex-col flex-wrap gap-6 sm:w-auto md:flex-row'>
         {plans.map((plan, index) => (
           <PlanCard
             key={`${plan.id}-${plan.name}`}
@@ -308,10 +308,10 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
       const discountItem = item.discount?.find((v) => v.quantity === 12);
       return {
         ...item,
-        origin_price: unitConversion('centsToDollars', item.unit_price * 12).toString(), // 原价
+        origin_price: unitConversion('centsToDollars', item.unit_price).toString(), // 原价
         discount_price: unitConversion(
           'centsToDollars',
-          item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
+          item.unit_price * ((discountItem?.discount || 100) / 100),
         ).toString(), // 优惠价格
       };
     } else {
@@ -338,14 +338,16 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         ref={dialogRef}
-        className='rounded-0 h-full gap-0 px-8 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-full'
+        className='rounded-0 h-full gap-0 px-4 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-full'
       >
         <DialogTitle className={'sr-only'}></DialogTitle>
-        <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
-          {t('selectPlan')}
-        </div>
-        <div className={'text-lg font-medium text-[#666666] md:text-center'}>
-          {t('selectYourPlan')}
+        <div className={'ml-6 sm:ml-0'}>
+          <div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
+            {t('selectPlan')}
+          </div>
+          <div className={'text-lg font-medium text-[#666666] md:text-center'}>
+            {t('selectYourPlan')}
+          </div>
         </div>
         <div>
           <Tabs

apps/user/components/user-nav.tsx

@@ -114,7 +114,7 @@ export function UserNav({ from = '' }: { from?: string }) {
               Logout();
               setUser();
             }}
-            className='flex cursor-pointer items-center gap-3 rounded-full bg-[#E22C2E] px-5 py-2 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-sm md:text-[#0F2C53]'
+            className='flex cursor-pointer items-center gap-3 rounded-full bg-[#E22C2E] px-5 py-2.5 text-base font-medium text-white focus:bg-[#E22C2E] focus:text-white md:bg-white md:text-sm md:text-[#0F2C53]'
           >
             <SvgIcon className='!size-4 flex-none' width='99' height='100' name={'exit'} />
             <span className='flex-grow'>{t('logout')}</span>