修复小屏样式:优化修改密码入口与弹窗的移动端布局

变更项:

1. 顶栏新增 1024/768 响应式规则,解决用户信息与改密/退出按钮在小屏挤压错位问题。

2. 小屏下隐藏 user-pill,收紧按钮间距与尺寸,避免导航和操作区互相挤占。

3. 为修改密码弹窗增加 custom-class,宽度改为视口自适应,防止移动端超宽。

4. 仅对密码弹窗在超小屏启用标签堆叠布局,修复表单字段显示紊乱。
This commit is contained in:
liuwei
2026-04-23 09:45:09 +08:00
parent 32eabf880d
commit 3e5b184440

View File

@@ -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"