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-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;
|
||||||
|
|||||||
Reference in New Issue
Block a user