Quellcode durchsuchen

fix: admin-h5 App 端底部安全区适配

弹窗底栏与悬浮按钮避让手势条(env(safe-area-inset-bottom));capacitor.config.ts 声明 SystemBars viewport-fit=cover 与浅色状态栏,避免首帧布局偏移
skyline vor 2 Wochen
Ursprung
Commit
7b0e415357

+ 9 - 0
admin-h5/capacitor.config.ts

@@ -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;

+ 1 - 0
admin-h5/src/pages/finance/settlement.vue

@@ -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 {

+ 1 - 0
admin-h5/src/pages/order/detail.vue

@@ -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);

+ 1 - 1
admin-h5/src/pages/setting/device-config.vue

@@ -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;

+ 1 - 1
admin-h5/src/pages/setting/rate-config.vue

@@ -111,7 +111,7 @@ onMounted(() => {
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 60rpx;
+  bottom: calc(60rpx + env(safe-area-inset-bottom));
   width: 110rpx;
   height: 110rpx;
   background: #C6171E;

+ 1 - 0
admin-h5/src/pages/statistics/index.vue

@@ -663,6 +663,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 {