diff --git a/admin/dashboard/templates/base.html b/admin/dashboard/templates/base.html index 624d5c4..5b787f6 100644 --- a/admin/dashboard/templates/base.html +++ b/admin/dashboard/templates/base.html @@ -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; + } + } @@ -812,7 +931,8 @@ title="修改后台登录密码" :visible.sync="passwordDialogVisible" width="460px" - :close-on-click-modal="false"> + :close-on-click-modal="false" + custom-class="password-dialog">