修复注册省市区选项超过宽度的bug

This commit is contained in:
dzl
2025-09-16 11:23:05 +08:00
parent bf2ca554d4
commit fc6d7b9c5c

View File

@@ -1012,4 +1012,81 @@ onMounted(() => {
:deep(.el-link.viewed:hover) { :deep(.el-link.viewed:hover) {
color: #529b2e !important; color: #529b2e !important;
} }
/* 移动端级联选择器样式优化 */
:deep(.mobile-cascader-popper) {
max-width: calc(100vw - 20px) !important;
left: 10px !important;
right: 10px !important;
transform: none !important;
margin: 0 !important;
}
:deep(.mobile-cascader-popper .el-cascader-panel) {
max-width: 100% !important;
overflow-x: hidden !important;
display: flex !important;
gap: 0 !important;
padding: 0 !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu) {
min-width: 33.33% !important;
max-width: 33.33% !important;
width: 33.33% !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
overflow-x: hidden !important;
border-right: 1px solid #e4e7ed;
margin: 0 !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu:last-child) {
border-right: none !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
padding: 6px 3px !important;
line-height: 1.1 !important;
font-size: 12px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin: 0 !important;
box-sizing: border-box !important;
}
@media (max-width: 480px) {
:deep(.mobile-cascader-popper) {
max-width: calc(100vw - 16px) !important;
left: 8px !important;
right: 8px !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
padding: 5px 2px !important;
font-size: 11px !important;
}
}
@media (max-width: 360px) {
:deep(.mobile-cascader-popper) {
max-width: calc(100vw - 12px) !important;
left: 6px !important;
right: 6px !important;
}
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
padding: 4px 1px !important;
font-size: 10px !important;
line-height: 1.0 !important;
}
}
@media (max-width: 320px) {
:deep(.mobile-cascader-popper .el-cascader-menu__item) {
padding: 3px 1px !important;
font-size: 9px !important;
}
}
</style> </style>