fix: 适配手机
All checks were successful
构建并部署前端到测试环境 / deploy (push) Successful in 54s

This commit is contained in:
luo
2026-10-08 14:34:56 +08:00
parent f61a3f84b6
commit 633c88d0aa
3 changed files with 32 additions and 15 deletions

View File

@@ -138,7 +138,6 @@
html,
body {
touch-action: none; /* 禁用触摸事件 */
overflow-x: hidden; /* 禁用横向滚动 */
}

View File

@@ -95,9 +95,11 @@ declare module 'vue' {
ElAlert: typeof import('element-plus/es')['ElAlert']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
ElCalendar: typeof import('element-plus/es')['ElCalendar']
ElCard: typeof import('element-plus/es')['ElCard']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
@@ -125,11 +127,13 @@ declare module 'vue' {
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElResult: typeof import('element-plus/es')['ElResult']
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']

View File

@@ -90,6 +90,7 @@
placeholder="请选择省市区"
clearable
class="region-cascader"
popper-class="agent-registration-cascader-popper"
@change="handleRegionChange"
/>
</ElFormItem>
@@ -119,7 +120,7 @@
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { computed, onBeforeUnmount, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { CascaderOption, CascaderValue, FormInstance, FormRules } from 'element-plus'
@@ -307,25 +308,12 @@
form.code = ''
}
onMounted(() => {
document.documentElement.classList.add('allow-touch-scroll')
document.body.classList.add('allow-touch-scroll')
})
onBeforeUnmount(() => {
if (timer) clearInterval(timer)
document.documentElement.classList.remove('allow-touch-scroll')
document.body.classList.remove('allow-touch-scroll')
})
</script>
<style scoped lang="scss">
:global(html.allow-touch-scroll),
:global(body.allow-touch-scroll) {
touch-action: pan-y;
overflow-y: auto;
}
.agent-registration-page {
display: flex;
align-items: flex-start;
@@ -440,4 +428,30 @@
}
}
}
@media (max-width: 600px) {
:global(.agent-registration-cascader-popper) {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
:global(.agent-registration-cascader-popper .el-cascader-panel) {
width: 100%;
max-width: 100%;
}
:global(.agent-registration-cascader-popper .el-cascader-menu) {
flex: 1 1 0;
width: 0;
min-width: 0 !important;
box-sizing: border-box;
}
:global(.agent-registration-cascader-popper .el-cascader-node__label) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>