diff --git a/src/views/Register.vue b/src/views/Register.vue index d0d5420..92a5490 100644 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -1012,4 +1012,81 @@ onMounted(() => { :deep(.el-link.viewed:hover) { 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; + } +}