修改样式

app/components/findpwd.module.scss

@@ -6,6 +6,7 @@
      -moz-appearance: none;
           appearance: none;
   cursor: pointer;
+  width: 163px;
   background-color: var(--white);
   color: var(--black);
   text-align: left;
@@ -100,4 +101,4 @@
   display: inline;
   margin: 0 auto;
   font-size: 8px;
-}
+}

app/components/login.module.scss

@@ -6,6 +6,22 @@
      -moz-appearance: none;
           appearance: none;
   cursor: pointer;
+  width: 163px;
+  background-color: var(--white);
+  color: var(--black);
+  text-align: left;
+}
+
+.password{
+  border: var(--border-in-light);
+  padding: 10px;
+  border-radius: 10px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  width: 185px;
+  max-width: 60% !important;
   background-color: var(--white);
   color: var(--black);
   text-align: left;

app/components/login.tsx

@@ -72,7 +72,7 @@ export function Login() {
           <div>
             <input
               type="password"
-              className={styles.name}
+              className={styles.password}
               placeholder={Locale.User.Password}
               onInput={(e) => onPassword(e.currentTarget.value)}
               value={password}

app/components/register.module.scss

@@ -6,6 +6,22 @@
      -moz-appearance: none;
           appearance: none;
   cursor: pointer;
+  width: 163px;
+  background-color: var(--white);
+  color: var(--black);
+  text-align: left;
+}
+
+.password{
+  border: var(--border-in-light);
+  padding: 10px;
+  border-radius: 10px;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  max-width: 60% !important;
+  width: 183px;
   background-color: var(--white);
   color: var(--black);
   text-align: left;
@@ -105,4 +121,4 @@
 .title{
   font-size: 4px;
   color: red;
-}
+}

app/components/register.tsx

@@ -3,12 +3,12 @@ import Locale, { AllLangs, changeLang, getLang } from "../locales";
 import { useUserStore } from "../store";
 import { useEffect, useState } from "react";
 import styles from "./register.module.scss";
-import ChatIcon from "../icons/chatgpt.svg"
+import ChatIcon from "../icons/chatgpt.svg";
 import { IconButton } from "./button";
 import { showToast } from "./ui-lib";
 
-export function Register(){
-  const userStore=useUserStore() 
+export function Register() {
+  const userStore = useUserStore();
   const [userName, setUserName] = useState("");
   const [getcode, setgetcode] = useState("");
   const [codeStatus, setcodeStatus] = useState("");
@@ -19,62 +19,60 @@ export function Register(){
   const [status, setStatus] = useState("");
 
   const onUserName = (text: string) => {
-    setUserName(text)
+    setUserName(text);
   };
   const onName = (text: string) => {
-    setName(text)
+    setName(text);
   };
   const onPassword = (text: string) => {
-    setPassword(text)
+    setPassword(text);
   };
   const onMail = (text: string) => {
-    setMail(text)
+    setMail(text);
   };
   const onCode = (text: string) => {
-    setCode(text)
+    setCode(text);
   };
 
-  const registerTo=()=>{
-    userStore.register(userName,password,name,mail,code)
-    setStatus("false")
-    setTimeout(()=>{
-      setStatus("")
-    },4000)
-  }
+  const registerTo = () => {
+    userStore.register(userName, password, name, mail, code);
+    setStatus("false");
+    setTimeout(() => {
+      setStatus("");
+    }, 4000);
+  };
 
-  const getMailCode=()=>{
-    userStore.getMailCode(mail)
-    getCode()
-  }
-  var countdown=60;
-  const getCode=()=>{
-      if (countdown == 0) {
-          setcodeStatus("")
-          setgetcode("发送验证码")
-          countdown = 60;
-          return;
-      } else {
-          setcodeStatus("true")
-          setgetcode("(" + countdown + ")")
-          countdown--;
-      }
-      setTimeout(function() {
-              getCode() }
-          ,1000)
-  }
+  const getMailCode = () => {
+    userStore.getMailCode(mail);
+    getCode();
+  };
+  var countdown = 60;
+  const getCode = () => {
+    if (countdown == 0) {
+      setcodeStatus("");
+      setgetcode("发送验证码");
+      countdown = 60;
+      return;
+    } else {
+      setcodeStatus("true");
+      setgetcode("(" + countdown + ")");
+      countdown--;
+    }
+    setTimeout(function () {
+      getCode();
+    }, 1000);
+  };
 
-  useEffect(()=>{
-    setcodeStatus("")
-    setgetcode("发送验证码")
-  },[])
+  useEffect(() => {
+    setcodeStatus("");
+    setgetcode("发送验证码");
+  }, []);
 
   return (
     <ErrorBoundary>
       <div className="window-header">
         <div className="window-header-title">
-          <div className="window-header-main-title">
-            {Locale.User.Register}
-          </div>
+          <div className="window-header-main-title">{Locale.User.Register}</div>
           <div className="window-header-sub-title">
             {Locale.User.RegisterTitle}
           </div>
@@ -83,7 +81,9 @@ export function Register(){
 
       <div>
         <div className={styles.register}>
-          <div><ChatIcon></ChatIcon></div>
+          <div>
+            <ChatIcon></ChatIcon>
+          </div>
           {/* <div className={styles.title}>账号为QQ号将自动绑定QQ邮箱方便找回密码</div> */}
           <div>
             <input
@@ -106,7 +106,7 @@ export function Register(){
           <div>
             <input
               type="password"
-              className={styles.name}
+              className={styles.password}
               placeholder={Locale.User.Password}
               onInput={(e) => onPassword(e.currentTarget.value)}
               value={password}
@@ -133,22 +133,26 @@ export function Register(){
               disabled={!!codeStatus}
               text={getcode}
               className={styles.codeButton}
-              onClick={()=>{
-                getMailCode()
+              onClick={() => {
+                getMailCode();
               }}
             ></IconButton>
           </div>
           <div>
-            <span className={styles.wangji}><a href="/#/findpwd">{Locale.User.Findpwd}</a></span>
-            <span className={styles.zhuce}><a href="/#/login">{Locale.User.Login}</a></span>
+            <span className={styles.wangji}>
+              <a href="/#/findpwd">{Locale.User.Findpwd}</a>
+            </span>
+            <span className={styles.zhuce}>
+              <a href="/#/login">{Locale.User.Login}</a>
+            </span>
           </div>
           <div>
             <IconButton
               text={Locale.User.Register}
               disabled={!!status}
               className={styles.registerButton}
-              onClick={()=>{
-                registerTo()
+              onClick={() => {
+                registerTo();
               }}
             ></IconButton>
           </div>
@@ -156,4 +160,4 @@ export function Register(){
       </div>
     </ErrorBoundary>
   );
-}
+}