修复小屏样式:优化修改密码入口与弹窗的移动端布局
变更项: 1. 顶栏新增 1024/768 响应式规则,解决用户信息与改密/退出按钮在小屏挤压错位问题。 2. 小屏下隐藏 user-pill,收紧按钮间距与尺寸,避免导航和操作区互相挤占。 3. 为修改密码弹窗增加 custom-class,宽度改为视口自适应,防止移动端超宽。 4. 仅对密码弹窗在超小屏启用标签堆叠布局,修复表单字段显示紊乱。
This commit is contained in:
@@ -718,6 +718,125 @@
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* 修改密码弹窗:默认宽度受限,避免在中小屏超出视口。 */
|
||||
.password-dialog {
|
||||
width: min(460px, 92vw) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.topbar {
|
||||
gap: 10px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-nav-link {
|
||||
padding: 0 10px;
|
||||
min-height: 34px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-pill {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-btn,
|
||||
.logout-btn {
|
||||
padding: 8px 10px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.topbar {
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.topbar-left {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
width: 100%;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.topbar-right {
|
||||
margin-left: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.account-btn,
|
||||
.logout-btn {
|
||||
padding: 6px 8px !important;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.account-btn span,
|
||||
.logout-btn span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subnav-bar {
|
||||
top: auto;
|
||||
position: static;
|
||||
height: auto;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.subnav-right {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sub-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-shell {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* 小屏下仅对“修改密码”弹窗做堆叠标签,不影响其它弹窗。 */
|
||||
.password-dialog .el-form-item__label {
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
padding: 0 0 6px;
|
||||
}
|
||||
|
||||
.password-dialog .el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/element-ui/theme-chalk/index.min.css">
|
||||
@@ -812,7 +931,8 @@
|
||||
title="修改后台登录密码"
|
||||
:visible.sync="passwordDialogVisible"
|
||||
width="460px"
|
||||
:close-on-click-modal="false">
|
||||
:close-on-click-modal="false"
|
||||
custom-class="password-dialog">
|
||||
<el-form
|
||||
ref="passwordFormRef"
|
||||
:model="passwordForm"
|
||||
|
||||
Reference in New Issue
Block a user