andy
fd89c31640
- 新增响应式工具函数与全局移动端样式，统一适配≤768px屏幕 - 添加移动端底部导航组件，替代桌面端侧边栏菜单 - 为经销商、客户、报备列表页新增移动端卡片视图替换表格布局 - 调整所有页面的表单、弹窗与布局适配移动端尺寸 - 优化移动端viewport配置，适配全面屏安全区域 - 修复密码哈希工具，在非安全上下文下回退使用js-sha256库 - 更新依赖包，新增@vueuse/core与js-sha256
45 lines
1.0 KiB
SCSS
45 lines
1.0 KiB
SCSS
@use './variables.scss' as *;
|
||
|
||
/* ============================================================
|
||
* 移动端全局兜底样式
|
||
* 仅在 ≤768px 生效，PC（≥1025px）零影响。
|
||
* 处理无法在组件内逐个绑定的命令式弹层（ElMessageBox 等）
|
||
* 与通用触摸/溢出问题。
|
||
* ========================================================= */
|
||
|
||
@include mobile {
|
||
// 防止页面横向溢出（宽表格/固定宽度元素）
|
||
html,
|
||
body {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
// 命令式确认框（ElMessageBox.confirm）无法逐个绑宽度，统一兜底
|
||
.el-message-box {
|
||
width: 86% !important;
|
||
max-width: 86vw !important;
|
||
}
|
||
|
||
// 通知/消息更贴顶，避免遮挡底部 Tab
|
||
.el-message {
|
||
min-width: auto !important;
|
||
max-width: 92vw !important;
|
||
}
|
||
|
||
// 分页器触摸热区加大
|
||
.el-pagination {
|
||
.btn-prev,
|
||
.btn-next,
|
||
.el-pager li {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
|
||
// 表单标签更紧凑
|
||
.el-form-item__label {
|
||
font-size: 14px;
|
||
}
|
||
}
|