-
+
@@ -345,107 +326,56 @@ onMounted(() => {
}
}
- .login-content {
+ .login-form {
display: flex;
- width: 960px;
+ flex-direction: column;
+ justify-content: center;
+ width: 460px;
+ padding: 40px;
overflow: hidden;
background-color: #fff;
border-radius: 5px;
box-shadow: var(--el-box-shadow-light);
- @media (width <= 768px) {
- flex-direction: column;
- max-width: 100%;
- height: 100vh;
- padding: 0 30px;
- border-radius: 0;
- box-shadow: none;
+ @media (width <= 460px) {
+ width: 100%;
+ padding: 0 20px;
}
- .login-carousel {
+ .form-title {
+ position: relative;
display: flex;
- flex: 3;
- flex-direction: column;
align-items: center;
justify-content: center;
- background: linear-gradient(60deg, #165dff, #6aa1ff);
-
- @media (width <= 768px) {
- display: none;
- }
-
- .project-info {
- position: relative;
- color: #fff;
- text-align: center;
-
- .title-container {
- display: flex;
- align-items: center;
- justify-content: center;
-
- h2 {
- margin-right: 10px;
- font-size: 24px;
- font-weight: bold;
- line-height: 18px;
- }
- }
-
- .description {
- font-size: 12px;
- }
- }
+ padding: 0 0 20px;
+ text-align: center;
}
- .login-form {
+ .input-wrapper {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ }
+
+ .captcha-img {
+ height: 48px;
+ cursor: pointer;
+ border-top-right-radius: 6px;
+ border-bottom-right-radius: 6px;
+ }
+
+ .third-party-login {
display: flex;
- flex: 2;
- flex-direction: column;
justify-content: center;
- min-width: 400px;
- padding: 30px;
+ width: 100%;
+ color: var(--el-text-color-secondary);
- @media (width <= 768px) {
- width: 100%;
- padding: 0 20px;
+ *:not(:first-child) {
+ margin-left: 20px;
}
- .form-title {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 0 20px;
- text-align: center;
- }
-
- .input-wrapper {
- display: flex;
- align-items: center;
- width: 100%;
- }
-
- .captcha-img {
- height: 48px;
+ .icon {
cursor: pointer;
- border-top-right-radius: 6px;
- border-bottom-right-radius: 6px;
- }
-
- .third-party-login {
- display: flex;
- justify-content: center;
- width: 100%;
- color: var(--el-text-color-secondary);
-
- *:not(:first-child) {
- margin-left: 20px;
- }
-
- .icon {
- cursor: pointer;
- }
}
}
}