style: 增加移动端弹窗全局适配
This commit is contained in:
@@ -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-leave-active {
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
|
||||
Reference in New Issue
Block a user