diff --git a/src/assets/backimg.jpg b/src/assets/backimg.jpg
new file mode 100644
index 0000000..1e9d955
Binary files /dev/null and b/src/assets/backimg.jpg differ
diff --git a/src/pages/home/components/LoginForm.tsx b/src/pages/home/components/LoginForm.tsx
index bc1b3bc..ed7fd81 100644
--- a/src/pages/home/components/LoginForm.tsx
+++ b/src/pages/home/components/LoginForm.tsx
@@ -70,54 +70,56 @@ function LoginForm(props: loginFormProp) {
return (
+
+
+
登录 通用比赛管理评审系统
}
- placeholder="Validate code"
- // value={validateValue}
- // onChange={value=>{setValidateValue(value.target.value)}}
- ref={clearRef}
+ className="login-form-input"
+ prefix={}
+ placeholder="Username"
/>
-
+
+ }
+ type="password"
+ placeholder="Password"
+ />
+
+
+
+ }
+ placeholder="Validate code"
+ // value={validateValue}
+ // onChange={value=>{setValidateValue(value.target.value)}}
+ ref={clearRef}
+ />
+
+
+
+
+
+
-
-
-
)
}
diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
index 03e4ef6..245de18 100644
--- 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,7 +187,7 @@
}
.new-login {
- background: rgba(237, 237, 237, 1);
+ background-image: url(../../assets/backimg.jpg);
.login-form {
display: flex;
flex-direction: column;
@@ -195,70 +195,77 @@
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;
+ }
}
}
}