diff --git a/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss b/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss index 16f77dadb..3d2c4ed5b 100644 --- a/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss +++ b/k_ry_mobile_form/static/src/scss/status_bar_buttons.scss @@ -4,52 +4,47 @@ bottom: 0; left: 0; right: 0; - z-index: 1050; - background-color: #ffffff; // 明确指定颜色,防止 $o-view-background-color 在 iOS 上透明 + z-index: 1050; // 确保在其他元素之上,但低于模态框 + background-color: $o-view-background-color; border-top: 1px solid $border-color; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); padding: map-get($spacers, 2) map-get($spacers, 3); + // 为底部悬浮栏预留空间,避免内容被遮挡(支持 iOS safe area) padding-bottom: calc(#{map-get($spacers, 2)} + env(safe-area-inset-bottom, 0px)); - // 强制开启硬件加速,解决 iOS 渲染层级问题 - -webkit-transform: translateZ(0); - transform: translateZ(0); + // iOS 优化:确保背景不透明且可见 + -webkit-backface-visibility: visible; + backface-visibility: visible; + -webkit-perspective: 1000; + perspective: 1000; .o_statusbar_buttons { - display: flex !important; // 确保是弹性布局 + max-width: 100%; width: 100%; - gap: 8px; // 使用 gap 代替复杂的 margin - >* { - flex: 1 1 0%; // 强制平分宽度 + > * { + flex: 1; min-width: 0; - display: block; // 确保包装层是块级 - >button { - display: block !important; // 按钮强制块级 - width: 100% !important; - min-height: 44px; - // 核心修复:重置 iOS 默认样式 - -webkit-appearance: none !important; - appearance: none !important; - opacity: 1 !important; - visibility: visible !important; - - // 修正文字显示 + > button { + width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + // 确保按钮有足够的点击区域 + min-height: 44px; - // 确保有背景色和文字颜色(防止变成白色背景白色字) - &.btn-transfer { - background-color: #714B67; - color: white; - } + // iOS 优化:确保按钮可见且可点击 + opacity: 1 !important; + visibility: visible !important; + display: inline-block !important; + -webkit-appearance: none; + appearance: none; - &.btn-return { - background-color: #e0e2e6; - color: #333; - } + // 确保按钮背景和边框可见 + background-color: inherit; + position: relative; + z-index: 1; } } } @@ -65,9 +60,8 @@ // 移动端隐藏原始状态栏中的按钮(避免重复显示) @include media-breakpoint-down(md) { .o_form_statusbar { - // 隐藏状态栏中的按钮容器,但保留字段等其他内容 - >.o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons) { + > .o_statusbar_buttons:not(.o_statusbar_buttons_mobile_fixed .o_statusbar_buttons) { display: none; } } @@ -76,8 +70,7 @@ .o_form_view { padding-bottom: 80px; // 为底部悬浮栏预留空间 } - .o_content .o_form_statusbar { position: relative !important; } -} \ No newline at end of file +} diff --git a/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml b/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml index f27a576d5..875d06036 100644 --- a/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml +++ b/k_ry_mobile_form/static/src/xml/status_bar_buttons.xml @@ -5,8 +5,8 @@ - -
+ +