弹窗底栏与悬浮按钮避让手势条(env(safe-area-inset-bottom));capacitor.config.ts 声明 SystemBars viewport-fit=cover 与浅色状态栏,避免首帧布局偏移
@@ -4,6 +4,15 @@ const config: CapacitorConfig = {
appId: 'com.kym.washadmin',
appName: '自助洗车运营管理',
webDir: 'dist/app',
+ plugins: {
+ // Capacitor 8 内置 SystemBars:状态栏/手势条 inset 处理
+ SystemBars: {
+ // index.html 已含 viewport-fit=cover,提前声明避免首帧布局偏移
+ initialViewportFitValueHint: 'cover',
+ // App 固定浅色主题:状态栏用深色图标(不随系统深色模式翻转)
+ style: 'LIGHT',
+ },
};
export default config;
@@ -513,6 +513,7 @@ onMounted(async () => {
background-color: #FFFFFF;
border-radius: 32rpx 32rpx 0 0;
padding: 30rpx;
+ padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
overflow-y: auto;
}
.detail-header {
@@ -514,6 +514,7 @@ onMounted(async () => {
left: 0;
right: 0;
padding: 24rpx 30rpx;
+ padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
background: #FFFFFF;
border-top: 1rpx solid #F0F0F0;
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
@@ -158,7 +158,7 @@ const goBack = () => {
position: fixed;
left: 50%;
transform: translateX(-50%);
- bottom: 60rpx;
+ bottom: calc(60rpx + env(safe-area-inset-bottom));
width: 110rpx;
height: 110rpx;
background: #C6171E;
@@ -111,7 +111,7 @@ onMounted(() => {
@@ -663,6 +663,7 @@ onMounted(async () => {