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="Username" - /> - - - } - type="password" - placeholder="Password" - /> - -
+
+
+
登录 通用比赛管理评审系统
} - placeholder="Validate code" - // value={validateValue} - // onChange={value=>{setValidateValue(value.target.value)}} - ref={clearRef} + className="login-form-input" + prefix={} + placeholder="Username" /> - validate code + + } + type="password" + placeholder="Password" + /> + +
+ + } + placeholder="Validate code" + // value={validateValue} + // onChange={value=>{setValidateValue(value.target.value)}} + ref={clearRef} + /> + + validate code +
+ + +
- - - ) } 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; + } } } }