diff --git a/src/style.css b/src/style.css index 8a7797f..fc5591e 100644 --- a/src/style.css +++ b/src/style.css @@ -62,6 +62,47 @@ input, textarea, select { hyphens: auto; } +/* 移动端级联选择器全局样式 */ +.mobile-cascader-popper { + max-width: calc(100vw - 32px) !important; + left: 16px !important; + right: 16px !important; + transform: none !important; + position: fixed !important; +} + +.mobile-cascader-popper .el-cascader-panel { + max-width: 100% !important; + overflow-x: auto !important; + display: flex !important; +} + +.mobile-cascader-popper .el-cascader-menu { + min-width: 120px !important; + max-width: 150px !important; + flex-shrink: 0 !important; +} + +@media (max-width: 480px) { + .mobile-cascader-popper { + max-width: calc(100vw - 20px) !important; + left: 10px !important; + right: 10px !important; + } + + .mobile-cascader-popper .el-cascader-menu { + min-width: 100px !important; + max-width: 120px !important; + font-size: 14px !important; + } + + .mobile-cascader-popper .el-cascader-menu__item { + padding: 8px 10px !important; + line-height: 1.2 !important; + font-size: 14px !important; + } +} + html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; diff --git a/src/views/Address.vue b/src/views/Address.vue index 2079888..42a715b 100644 --- a/src/views/Address.vue +++ b/src/views/Address.vue @@ -120,6 +120,12 @@ :options="regionOptions" placeholder="请选择省市区" style="width: 100%" + :props="{ expandTrigger: 'hover' }" + :show-all-levels="false" + :collapse-tags="true" + :max-collapse-tags="1" + :teleported="false" + popper-class="mobile-cascader-popper" @change="handleRegionChange" /> @@ -607,4 +613,52 @@ onMounted(() => { width: 95% !important; } } + +/* 移动端级联选择器样式优化 */ +:deep(.mobile-cascader-popper) { + max-width: calc(100vw - 32px) !important; + left: 16px !important; + right: 16px !important; + transform: none !important; +} + +:deep(.mobile-cascader-popper .el-cascader-panel) { + max-width: 100% !important; + overflow-x: auto; + display: flex !important; +} + +:deep(.mobile-cascader-popper .el-cascader-menu) { + min-width: 120px !important; + max-width: 150px !important; + flex-shrink: 0; +} + +@media (max-width: 480px) { + :deep(.mobile-cascader-popper) { + max-width: calc(100vw - 20px) !important; + left: 10px !important; + right: 10px !important; + } + + :deep(.mobile-cascader-popper .el-cascader-menu) { + min-width: 100px !important; + max-width: 120px !important; + font-size: 14px; + } + + :deep(.mobile-cascader-popper .el-cascader-menu__item) { + padding: 8px 10px; + line-height: 1.2; + font-size: 14px; + } + + .address-form :deep(.el-cascader) { + font-size: 14px; + } + + .address-form :deep(.el-cascader .el-input__inner) { + font-size: 14px; + } +} \ No newline at end of file