style: 增加移动端弹窗全局适配

This commit is contained in:
2026-08-02 11:48:00 +08:00
parent 0059e0ec71
commit c2493e4c71
+40
View File
@@ -56,6 +56,46 @@ a:hover {
} }
} }
/* 移动端弹窗适配:覆盖 Element Plus 内联宽度并约束 footer */
@media (max-width: 768px) {
.el-dialog {
--el-dialog-width: calc(100% - 24px) !important;
--el-dialog-margin-top: 5vh;
max-height: calc(100vh - 60px);
}
.el-dialog__body {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.el-dialog__footer {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.el-dialog__footer .el-button {
flex: 1;
margin-left: 0;
}
.el-message-box {
max-width: calc(100% - 24px);
}
.el-message-box__btns {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.el-message-box__btns .el-button {
flex: 1;
margin-left: 0;
}
}
.fade-up-enter-active, .fade-up-enter-active,
.fade-up-leave-active { .fade-up-leave-active {
transition: opacity 0.22s ease, transform 0.22s ease; transition: opacity 0.22s ease, transform 0.22s ease;