update login样式

NJUPT-SAST · Mar 28, 2024 · 6aadafc · 6aadafc
1 parent d658432
commit 6aadafc
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 99 deletions.
diff --git a/src/assets/backimg.jpg b/src/assets/backimg.jpg
diff --git a/src/pages/home/components/LoginForm.tsx b/src/pages/home/components/LoginForm.tsx
@@ -70,54 +70,56 @@ function LoginForm(props: loginFormProp) {
 
   return (
     <Form name="normal_login" className="login-form" onFinish={props.finishCb}>
-      <div className="avatar"></div>
-      <div className={'login-title'}>登录 通用比赛管理评审系统</div>
-      <Form.Item
-        className="login-form-body"
-        name="username"
-        rules={[{ required: true, message: '请输入正确的用户名！' }]}
-      >
-        <Input
-          className="login-form-input"
-          prefix={<UserOutlined className="site-form-item-icon" />}
-          placeholder="Username"
-        />
-      </Form.Item>
-      <Form.Item
-        className="login-form-body"
-        name="password"
-        rules={[{ required: false, message: '请输入正确的密码！' }]}
-      >
-        <Input
-          className="login-form-input"
-          prefix={<LockOutlined className="site-form-item-icon" />}
-          type="password"
-          placeholder="Password"
-        />
-      </Form.Item>
-      <div className="validate-part-body">
+      <div className='login-container'>
+        <div className="avatar"></div>
+        <div className={'login-title'}>登录 通用比赛管理评审系统</div>
         <Form.Item
-          name="validate"
-          className="validate-input login-form-body"
-          rules={[{ required: true, message: '验证码错误！' }]}
+          className="login-form-body"
+          name="username"
+          rules={[{ required: false, message: '请输入正确的用户名！' }]}
         >
           <Input
-            className="login-form-input validate"
-            id="validate"
-            prefix={<SafetyOutlined className="site-form-item-icon" />}
-            placeholder="Validate code"
-            // value={validateValue}
-            // onChange={value=>{setValidateValue(value.target.value)}}
-            ref={clearRef}
+            className="login-form-input"
+            prefix={<UserOutlined className="site-form-item-icon" />}
+            placeholder="Username"
           />
         </Form.Item>
-        <img src={validateCodeUrl} alt="validate code" className="validate-img" onClick={refreshCode} />
+        <Form.Item
+          className="login-form-body"
+          name="password"
+          rules={[{ required: false, message: '请输入正确的密码！' }]}
+        >
+          <Input
+            className="login-form-input"
+            prefix={<LockOutlined className="site-form-item-icon" />}
+            type="password"
+            placeholder="Password"
+          />
+        </Form.Item>
+        <div className="validate-part-body">
+          <Form.Item
+            name="validate"
+            className="validate-input login-form-body"
+            rules={[{ required: false, message: '验证码错误！' }]}
+          >
+            <Input
+              className="login-form-input validate"
+              id="validate"
+              prefix={<SafetyOutlined className="site-form-item-icon" />}
+              placeholder="Validate code"
+              // value={validateValue}
+              // onChange={value=>{setValidateValue(value.target.value)}}
+              ref={clearRef}
+            />
+          </Form.Item>
+          <img src={validateCodeUrl} alt="validate code" className="validate-img" onClick={refreshCode} />
+        </div>
+        <Form.Item style={{ width: "100%" }}>
+          <Button type="primary" htmlType="submit" className="login-form-button">
+            登 录
+          </Button>
+        </Form.Item>
       </div>
-      <Form.Item>
-        <Button type="primary" htmlType="submit" className="login-form-button">
-          登 录
-        </Button>
-      </Form.Item>
     </Form>
   )
 }

diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
@@ -15,7 +15,7 @@
       .logo {
         width: 38px;
         height: 38px;
-        background-image: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg);
+        // background-image: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg);
         background-position: center;
         background-size: contain;
       }
@@ -187,78 +187,85 @@
 }
 
 .new-login {
-  background: rgba(237, 237, 237, 1);
+  background-image: url(../../assets/backimg.jpg);
   .login-form {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100vh;
-    background: rgba(24, 144, 255, 1);
+    // background: rgba(24, 144, 255, 1);
     //头像缩略图
-
-    .avatar {
-      margin: 10px 0;
-      width: 100px;
-      height: 100px;
-      margin-bottom: 50px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 1);
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
-      background-image: url(https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png);
-      background-position: center;
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-
-    .login-title {
-      font-size: 22px;
-      font-weight: 450;
-      color: rgba(237, 237, 237, 1);
-      line-height: 20px;
-      padding-bottom: 50px;
-    }
-
-    .login-form-body {
+    .login-container {
+      padding: 20px 30px;
+      background-color: rgb(#ffffff, 0.3);
+      border-radius: 10px;
+      backdrop-filter: blur(10px);
       display: flex;
       flex-direction: column;
       align-items: center;
-      margin-bottom: 2vw;
-      width: 20%;
-      .login-form-input {
-        border: 2px solid rgba(255, 255, 255, 1);
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
-        border-radius: 5px;
+      justify-content: center;
+      .avatar {
+        margin: 10px 0;
+        width: 300px;
+        height: 100px;
+        margin-bottom: 50px;
+        // border-radius: 50%;
+        // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+        background-image: url(../../assets/Logo.svg);
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
       }
-      .validate {
-        border-radius: 5px 0 0 5px;
+
+      .login-title {
+        font-size: 22px;
+        font-weight: bold;
+        color: rgba(237, 237, 237, 1);
+        line-height: 20px;
+        padding-bottom: 50px;
       }
-    }
-    //验证码
-    .validate-part-body {
-      display: flex;
-      align-items: top;
-      width: 20%;
-      .validate-input {
-        width: 40%;
+
+      .login-form-body {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 2vw;
+        .login-form-input {
+          border: 2px solid rgba(255, 255, 255, 1);
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+          border-radius: 5px;
+        }
+        .validate {
+          border-radius: 5px 0 0 5px;
+        }
       }
-      .validate-img {
-        width: 60%;
-        height: 33px;
-        border-radius: 0 5px 5px 0;
+      //验证码
+      .validate-part-body {
+        display: flex;
+        align-items: top;
+        .validate-input {
+          width: 60%;
+        }
+        .validate-img {
+          width: 40%;
+          height: 33px;
+          border-radius: 0 5px 5px 0;
+        }
       }
-    }
 
-    //登陆的 button
-    .login-form-button {
-      width: 12vw;
-      align-items: center;
-      border: 1px solid rgba(255, 255, 255, 1);
-      background: rgba(24, 144, 255, 1);
-      color: rgba(255, 255, 255, 1);
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
-      border-radius: 5px;
+      //登陆的 button
+      .login-form-button {
+        width: 100%;
+        align-items: center;
+        border: 1px solid rgba(0, 0, 0, 0.25);
+        background: rgba(24, 144, 255, 1);
+        color: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 5px;
+      }
     }
   }
 }