update(Login): styles

src/components/Login/Footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="absolute bottom-[30px] left-0 right-0 text-[13px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">
+    <div className="absolute bottom-40px left-0 right-0 text-13px leading-18px text-[rgba(0,0,0,0.4)] text-center">
       注册登录即代表同意
       <a
         className="text-[#000]"

src/components/Login/Login.tsx

@@ -27,10 +27,13 @@ export default function Login() {
         </button>
       </DialogTrigger>
 
-      <DialogContent className="w-420px h-450px px-40px bg-#f2f3f7" onPointerDownOutside={(e) => e.preventDefault()}>
-        <Tab value={currentTab} changeTab={(value: string) => setCurrent(value)} />
+      <DialogContent
+        className="w-400px h-430px pt-55px px-40px bg-#f2f3f7"
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        <Tab value={currentTab} changeTab={(value: string) => setCurrent(value)} className="mt-5px" />
 
-        <DialogClose className="absolute top-[24px] right-[24px] w-24px h-24px cursor-pointer outline-none">
+        <DialogClose className="absolute top-24px right-24px w-24px h-24px cursor-pointer outline-none">
           <IconClose />
         </DialogClose>
 

src/components/Login/LoginForm.tsx

@@ -132,7 +132,7 @@ export default function LoginForm({ className }: { className?: string }) {
           placeholder="输入手机号"
         />
 
-        <div className="relative w-full mt-[24px]">
+        <div className="relative w-full mt-16px">
           <input
             className="w-full h-50px rounded-100px pl-24px pr-[calc(24px_+_60px)] !placeholder-[rgba(0,0,0,0.4)] !placeholder-text-14px text-[rgba(0,0,0,0.95)] bg-#fff leading-20px border-1px border-1px border-#fff focus:border-#000/70 transition-all-100"
             type="text"

src/components/Login/LoginPhone.tsx

@@ -3,14 +3,12 @@ import LoginForm from './LoginForm';
 
 export default function LoginPhone() {
   return (
-    <div className="flex flex-col items-center w-340px bg-#f2f3f7">
+    <div className="flex flex-col items-center w-330px bg-#f2f3f7">
       {/* title */}
-      <p className="mt-[9px] text-[13px] leading-[18px] text-[rgba(0,0,0,0.7)]">
-        输入手机号，开启雀乐；未注册手机，将自动注册
-      </p>
+      <p className="mt-10px text-13px leading-18px text-#000/70">输入手机号，开启雀乐</p>
 
       {/* form */}
-      <LoginForm className="mt-32px w-full" />
+      <LoginForm className="mt-23px w-full" />
     </div>
   );
 }

src/components/Login/LoginQrcode.tsx

@@ -106,9 +106,9 @@ export default function LoginQrcode() {
   return (
     <div className="flex flex-col items-center px-40px bg-#f2f3f7">
       {/* title */}
-      <div className="mt-9px text-13px leading-18px text-#000/70 text-center">通过雀乐APP扫码登录</div>
+      <div className="mt-10px text-13px leading-18px text-#000/70 text-center">通过雀乐APP扫码登录</div>
 
-      <div className="flex items-center justify-center w-200px h-200px rounded-6px mt-15px bg-#fff overflow-hidden shadow-black-[0px_8px_30px_0px] ">
+      <div className="flex items-center justify-center w-200px h-200px rounded-6px mt-23px bg-#fff overflow-hidden shadow-black-[0px_8px_30px_0px] ">
         {!qrCodeValue && <div>加载中...</div>}
 
         {!!qrCodeValue && qrCodeState !== 2 && (

src/components/Login/Tab.tsx

@@ -7,24 +7,21 @@ export default function Tab({
   value: string;
   changeTab: (value: string) => void;
 }) {
-  const tabs = [
-    { name: 'qrCode', label: '扫码登录' },
-    { name: 'phone', label: '手机登录' },
-  ];
-
   return (
-    <div className={`flex justify-center gap-24px w-full ${className}`}>
-      {tabs.map((tab) => {
-        return (
-          <div
-            className={`text-20px leading-28px font-600 cursor-pointer text-#000/40 ${tab.name === value && 'text-#000/95'}`}
-            key={tab.name}
-            onClick={() => changeTab(tab.name)}
-          >
-            {tab.label}
-          </div>
-        );
-      })}
+    <div className={`flex justify-center items-center w-full ${className}`}>
+      <div
+        className={`text-17px leading-24px font-400 cursor-pointer text-#000/70 ${value === 'qrCode' && 'text-#000/95 font-500'}`}
+        onClick={() => changeTab('qrCode')}
+      >
+        扫码登录
+      </div>
+      <div className="h-14.5px mx-10px border-1px border-solid border-#000/40 " />
+      <div
+        className={`text-17px leading-24px font-400 cursor-pointer text-#000/70 ${value === 'phone' && 'text-#000/95 font-500'}`}
+        onClick={() => changeTab('phone')}
+      >
+        手机登录
+      </div>
     </div>
   );
 }