- 将 @import 替换为 @use,提高代码的可维护性 - 统一使用 index 作为命名空间,避免变量名冲突 - 移除不必要的注释和空格,精简代码 - 删除未使用的 isSocketOpen 属性,简化数据结构
75 lines
1.4 KiB
SCSS
75 lines
1.4 KiB
SCSS
@use './index.scss' as index;
|
|
|
|
/* 页面宽度小于1200px
|
|
------------------------------- */
|
|
@media screen and (max-width: index.$lg) and (min-width: index.$xs) {
|
|
.login-container {
|
|
.login-left {
|
|
.login-left-img {
|
|
top: 90% !important;
|
|
left: 12% !important;
|
|
width: 30% !important;
|
|
height: 18% !important;
|
|
}
|
|
}
|
|
.login-right {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 页面宽度小于576px
|
|
------------------------------- */
|
|
@media screen and (max-width: index.$xs) {
|
|
.login-container {
|
|
.login-left {
|
|
display: none;
|
|
}
|
|
.login-right {
|
|
width: 100% !important;
|
|
.login-right-warp {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
border: none !important;
|
|
.login-right-warp-mian {
|
|
.el-form-item {
|
|
display: flex !important;
|
|
}
|
|
.login-right-warp-main-title {
|
|
font-size: 20px !important;
|
|
}
|
|
}
|
|
.login-right-warp-one {
|
|
&::after {
|
|
right: 0 !important;
|
|
}
|
|
}
|
|
.login-right-warp-two {
|
|
&::before {
|
|
bottom: 1px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 页面宽度小于375px
|
|
------------------------------- */
|
|
@media screen and (max-width: index.$us) {
|
|
.login-container {
|
|
.login-right {
|
|
.login-right-warp {
|
|
.login-right-warp-mian {
|
|
.login-right-warp-main-title {
|
|
font-size: 18px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|