mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update login mobile

Browse Source
This commit is contained in:
lb 2023-11-13 16:55:16 +08:00
parent 06c124a149
commit ba92da2d5d
2 changed files with 59 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/assets/styles/login.scss
View File

@ -103,13 +103,13 @@ $buttonHeight: $buttonH * 1px;
background-position: 0 0; background-position: 0 0;
position: relative; position: relative;
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.field { .field {
// background: #ccc3; // background: #ccc3;
@ -304,17 +304,30 @@ $buttonHeight: $buttonH * 1px;
// - - - - - PC 最小尺寸设置 // - - - - - PC 最小尺寸设置
@media screen and (min-width: 599px) and (max-width: 1366px) { @media screen and (min-width: 599px) and (max-width: 1366px) {
.container { .container {
min-width: 599px;
.content { .content {
width: 710px; // width: 710px;
height: 397px; // height: 397px;
width: 100%;
height: 100%;
.pic { .pic {
width: 314px; // width: 314px;
display: none;
} }
.field { .field {
width: calc(710px - 314px); // width: calc(710px - 314px);
left: 314px; // left: 314px;
// justify-content: center;
width: 100%;
.pc-title {
h3 {
font-size: 2.4rem !important;
}
}
.form { .form {
width: 320px; // width: 320px;
:deep(.el-input__inner) { :deep(.el-input__inner) {
width: 320px; width: 320px;
height: 56px; height: 56px;
@ -357,13 +370,17 @@ $iconBgImage: '../assets/images/icon.png';
min-width: 280px; min-width: 280px;
min-height: 568px; min-height: 568px;
// 文字 // 文字
font-size: 17px; font-size: 14px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
.logo { .logo {
display: none; display: none;
} }
.pc-title {
display: none;
}
.content { .content {
// 元素 // 元素
width: $mobileContentWidth; width: $mobileContentWidth;
@ -378,6 +395,7 @@ $iconBgImage: '../assets/images/icon.png';
display: none; display: none;
} }
.field { .field {
padding: 0;
// 元素 // 元素
width: inherit; width: inherit;
min-height: inherit; min-height: inherit;
@ -385,12 +403,15 @@ $iconBgImage: '../assets/images/icon.png';
left: 0; left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.mobile-title { .mobile-title {
// 元素 // 元素
margin: 0 0 20px; margin: 0;
display: block; display: block;
} }
.form { .form {
margin: 0;
width: $mobileFormWidth; width: $mobileFormWidth;
// - - - tab // - - - tab
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
@ -419,6 +440,24 @@ $iconBgImage: '../assets/images/icon.png';
color: #ffffff; color: #ffffff;
} }
} }
.login-form {
:deep(.el-input__inner) {
height: $mobileRowHeight;
line-height: 24px;
// 文字
text-align: center;
color: #262626;
}
:deep(#button-form-item) {
margin: 0 !important;
button {
// 元素
height: $mobileRowHeight;
}
}
}
.mobile-switch { .mobile-switch {
display: block; display: block;
line-height: 20px; line-height: 20px;
@ -439,6 +478,7 @@ $iconBgImage: '../assets/images/icon.png';
} }
} }
} }
.footer { .footer {
// 元素 // 元素
font-size: 12px; font-size: 12px;
@ -448,8 +488,8 @@ $iconBgImage: '../assets/images/icon.png';
color: #333333; color: #333333;
opacity: 0.6; opacity: 0.6;
// 定位 // 定位
position: absolute; // position: absolute;
bottom: 20px; bottom: -32px;
} }
} }
} }

4
src/views/login.vue
View File

@ -55,7 +55,7 @@
style=" style="
user-select: none; user-select: none;
position: absolute; position: absolute;
top: 20%; top: 28%;
width: 100%; width: 100%;
height: 70%; height: 70%;
"></video> "></video>
@ -219,7 +219,7 @@
</div> </div>
<!-- 下方的登录按钮 --> <!-- 下方的登录按钮 -->
<el-form-item style="width: 100%; margin-top: 32px"> <el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"