fix: 样式修改

apps/user/app/(main)/(content)/(user)/document/page.tsx

@@ -34,7 +34,7 @@ export default function Page() {
   });
 
   return (
-    <div className='space-y-4'>
+    <div className='max-w-[532px] space-y-4'>
       {DocumentList?.length > 0 && (
         <>
           <h2 className='flex items-center gap-1.5 font-semibold'>{t('document')}</h2>
@@ -62,12 +62,19 @@ export default function Page() {
       )}
 
       {TutorialList && TutorialList?.length > 0 && (
-        <>
-          <h2 className='flex items-center gap-1.5 font-semibold'>{t('tutorial')}</h2>
+        <div className='rounded-[46px] bg-[#EAEAEA] px-[34px] py-[28px]'>
+          <div className='font-semibold text-[#666]'>新手教程</div>
+          <div className={'mb-2.5 text-sm text-[#666]'}>选择对应操作系统，查看对应软件配置教程</div>
           <Tabs defaultValue={TutorialList?.[0]?.title}>
-            <TabsList className='h-full flex-wrap'>
+            <TabsList className='h-full flex-wrap gap-1 bg-transparent'>
               {TutorialList?.map((tutorial) => (
-                <TabsTrigger key={tutorial.title} value={tutorial.title}>
+                <TabsTrigger
+                  key={tutorial.title}
+                  value={tutorial.title}
+                  className={
+                    'rounded-full bg-[#EAEAEA] shadow-[inset_0px_0px_4px_0px_rgba(0,0,0,0.25)] data-[state=active]:bg-[#225BA9] data-[state=active]:text-white'
+                  }
+                >
                   {tutorial.title}
                 </TabsTrigger>
               ))}
@@ -85,7 +92,7 @@ export default function Page() {
               </TabsContent>
             ))}
           </Tabs>
-        </>
+        </div>
       )}
     </div>
   );

apps/user/app/(main)/(content)/(user)/document/tutorial-button.tsx

@@ -121,7 +121,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
             layoutId={`card-${item.title}-${id}`}
             key={`card-${item.title}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-[40px] border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.title}-${id}`}>
@@ -133,13 +133,16 @@ export function TutorialButton({ items }: { items: Item[] }) {
                 </Avatar>
               </motion.div>
               <div className=''>
-                <motion.h3 layoutId={`title-${item.title}-${id}`} className='font-medium'>
+                <motion.h3
+                  layoutId={`title-${item.title}-${id}`}
+                  className='font-medium text-[#225BA9]'
+                >
                   {item.title}
                 </motion.h3>
                 {item.updated_at && (
                   <motion.p
                     layoutId={`description-${item.title}-${id}`}
-                    className='text-center text-neutral-600 md:text-left dark:text-neutral-400'
+                    className='text-center font-bold text-[#848484] md:text-left'
                   >
                     {formatDate(new Date(item.updated_at), false)}
                   </motion.p>
@@ -152,7 +155,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
                 buttonVariants({
                   variant: 'secondary',
                 }),
-                'rounded-full',
+                'min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold text-white hover:bg-[#225BA9] hover:text-white',
               )}
             >
               {t('read')}