From 149ebc0cf37f2e6ad18848fca4717ef806acb4fe Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Sun, 24 Dec 2023 20:44:40 +0800
Subject: [PATCH] =?UTF-8?q?perf:=E7=99=BB=E5=BD=95=E5=85=BC=E5=AE=B9?=
=?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
Yi.Bbs.Vue3/src/assets/styles/login.scss | 374 +++++++++++------------
Yi.Bbs.Vue3/src/views/login/index.vue | 37 ++-
2 files changed, 221 insertions(+), 190 deletions(-)
diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.scss b/Yi.Bbs.Vue3/src/assets/styles/login.scss
index fc04c772..12fc00da 100644
--- a/Yi.Bbs.Vue3/src/assets/styles/login.scss
+++ b/Yi.Bbs.Vue3/src/assets/styles/login.scss
@@ -1,206 +1,204 @@
* {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
/*公共CSS*/
.box {
-
- width: 100vw;
- height: 100vh;
- background-color: rgb(29, 67, 89);
- .content {
- box-shadow: 0px 1px 6px #3B4859;
- .login-wrapper {
-
- h1 {
- text-align: center;
- }
- .login-form {
- .form-item {
- margin: 20px 0;
- span {
- display: block;
- margin: 5px 20px;
- font-weight: 100;
- }
- .input-item {
- width: 100%;
- border-radius: 40px;
- padding: 20px;
- box-sizing: border-box;
- font-size: 20px;
- font-weight: 200;
- &:focus {
- outline: none;
- }
- }
- }
- .login-btn {
- width: 100%;
- border-radius: 40px;
- color: #fff;
- border: 0;
- font-weight: 100;
- margin-top: 10px;
- cursor: pointer;
- }
- }
- .divider {
- width: 100%;
- margin: 20px 0;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- span:nth-child(1) {
- flex: 1;
- }
- span:nth-child(3) {
- flex: 1;
- }
- .line {
- display: inline-block;
- max-width: 30%;
- width: 30%;
- }
- .divider-text {
- vertical-align: middle;
- margin: 0px 20px;
- line-height: 0px;
- display: inline-block;
- width: 100px;
- }
- }
- .other-login-wrapper {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .other-login-item {
- border: 1px solid rgb(214, 222, 228);
- padding: 10px;
- margin: 10px;
- cursor: pointer;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgb(29, 67, 89);
+ .content {
+ box-shadow: 0px 1px 6px #3b4859;
+ .login-wrapper {
+ h1 {
+ text-align: center;
+ }
+ .login-form {
+ .form-item {
+ margin: 20px 0;
+ span {
+ display: block;
+ margin: 5px 20px;
+ font-weight: 100;
+ }
+ .input-item {
+ width: 100%;
+ border-radius: 40px;
+ padding: 20px;
+ box-sizing: border-box;
+ font-size: 20px;
+ font-weight: 200;
+ &:focus {
+ outline: none;
}
+ }
}
+ .login-btn {
+ width: 100%;
+ border-radius: 40px;
+ color: #fff;
+ border: 0;
+ font-weight: 100;
+ margin-top: 10px;
+ cursor: pointer;
+ }
+ }
+ .divider {
+ width: 100%;
+ margin: 20px 0;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ span:nth-child(1) {
+ flex: 1;
+ }
+ span:nth-child(3) {
+ flex: 1;
+ }
+ .line {
+ display: inline-block;
+ max-width: 30%;
+ width: 30%;
+ }
+ .divider-text {
+ vertical-align: middle;
+ margin: 0px 20px;
+ line-height: 0px;
+ display: inline-block;
+ width: 100px;
+ }
+ }
+ .other-login-wrapper {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .other-login-item {
+ border: 1px solid rgb(214, 222, 228);
+ padding: 10px;
+ margin: 10px;
+ cursor: pointer;
+ }
}
+ }
}
/*一般大于手机的尺寸CSS*/
@media (min-width: 767px) {
- .box {
- background-color: #F0F2F5;
- .content {
- width: 85vw;
- height: 90vh;
- background: url("@/assets/login_images/login_two.jpg") no-repeat;
- background-size: 90% 100%;
- position: absolute;
- right: 15%;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- border-radius: 20px;
- background-color: #fff;
- .login-wrapper {
- width: 25vw;
- position: absolute;
- right: 15%;
- top: 50%;
- transform: translateY(-50%);
- h1 {
- text-align: center;
- font-size: 45px;
- color: rgb(81, 100, 115);
- margin-bottom: 40px;
- }
- .login-form {
- margin: 10px 0;
- .form-item {
- span {
- color: rgb(81, 100, 115);
- }
- .input-item {
- height: 60px;
- border: 1px solid rgb(214, 222, 228);
- }
- }
- .login-btn {
- height: 50px;
- background-color: rgb(59, 72, 89);
- font-size: 20px;
- }
- }
- .divider {
- .line {
- border-bottom: 1px solid rgb(214, 222, 228);
- }
- }
- .other-login-item {
- border-radius: 20px;
- img {
- width: 40px;
- height: 40px;
- }
- }
- }
+ .box {
+ background-color: #f0f2f5;
+ .content {
+ width: 85vw;
+ height: 90vh;
+ background: url("@/assets/login_images/login_two.jpg") no-repeat;
+ background-size: 90% 100%;
+ position: absolute;
+ right: 15%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 20px;
+ background-color: #fff;
+ .login-wrapper {
+ width: 25vw;
+ position: absolute;
+ right: 15%;
+ top: 50%;
+ transform: translateY(-50%);
+ h1 {
+ text-align: center;
+ font-size: 45px;
+ color: rgb(81, 100, 115);
+ margin-bottom: 40px;
}
+ .login-form {
+ margin: 10px 0;
+ .form-item {
+ span {
+ color: rgb(81, 100, 115);
+ }
+ .input-item {
+ height: 60px;
+ border: 1px solid rgb(214, 222, 228);
+ }
+ }
+ .login-btn {
+ height: 50px;
+ background-color: rgb(59, 72, 89);
+ font-size: 20px;
+ }
+ }
+ .divider {
+ .line {
+ border-bottom: 1px solid rgb(214, 222, 228);
+ }
+ }
+ .other-login-item {
+ border-radius: 20px;
+ img {
+ width: 40px;
+ height: 40px;
+ }
+ }
+ }
}
+ }
}
/*手机端CSS*/
@media (max-width: 768px) {
- .box {
- .content {
- width: 100vw;
- height: 100vh;
- background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- .login-wrapper {
- width: 70%;
- height: 60%;
- padding-top: 15%;
- h1 {
- font-size: 30px;
- color: #fff;
- }
- .login-form {
- .form-item {
- margin: 10px 0;
- span {
- color: rgb(113, 129, 141);
- }
- .input-item {
- height: 30px;
- border: 1px solid rgb(113, 129, 141);
- background-color: transparent;
- color: #fff;
- }
- }
- .login-btn {
- height: 40px;
- background-color: rgb(235, 95, 93);
- font-size: 16px;
- }
- }
- .divider {
- .line {
- border-bottom: 1px solid #fff;
- }
- .divider-text {
- color: #fff;
- }
- }
- .other-login-item {
- border-radius: 15px;
- img {
- width: 35px;
- height: 35px;
- }
- }
- }
+ .box {
+ .content {
+ width: 100vw;
+ height: 100vh;
+ background: url("@/assets/login_images/login_bg_phone.png") no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ .login-wrapper {
+ width: 70%;
+ height: 60%;
+ padding-top: 15%;
+ h1 {
+ font-size: 30px;
+ color: #fff;
}
+ .login-form {
+ .form-item {
+ margin: 10px 0;
+ span {
+ color: rgb(113, 129, 141);
+ }
+ .input-item {
+ height: 30px;
+ border: 1px solid rgb(113, 129, 141);
+ background-color: transparent;
+ color: #fff;
+ }
+ }
+ .login-btn {
+ height: 40px;
+ background-color: rgb(235, 95, 93);
+ font-size: 16px;
+ }
+ }
+ .divider {
+ .line {
+ border-bottom: 1px solid #fff;
+ }
+ .divider-text {
+ color: #fff;
+ }
+ }
+ .other-login-item {
+ border-radius: 15px;
+ img {
+ width: 35px;
+ height: 35px;
+ }
+ }
+ }
}
+ }
}
diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue
index bbd3e3f5..447922e0 100644
--- a/Yi.Bbs.Vue3/src/views/login/index.vue
+++ b/Yi.Bbs.Vue3/src/views/login/index.vue
@@ -75,7 +75,7 @@
-
+
-
+
{
align-items: center;
.text {
cursor: pointer;
+ color: #2282fe;
}
}
.visitor {
@@ -460,6 +461,38 @@ const handleContact = () => {
.flex-between {
display: flex;
justify-content: space-between;
+ .item {
+ flex: 1;
+ }
+ }
+}
+/*手机端CSS*/
+@media (max-width: 768px) {
+ .login {
+ background: url("@/assets/login_images/phone_login_bg.jpg") no-repeat;
+ &-box {
+ .left {
+ display: none;
+ }
+ .right {
+ flex: 1;
+ .top {
+ .title {
+ font-size: 20px;
+ }
+ .text {
+ margin-top: 10px;
+ }
+ }
+ }
+ .flex-between {
+ display: flex;
+ justify-content: space-between;
+ .item {
+ flex: 1;
+ }
+ }
+ }
}
}