diff --git a/components/full-page.vue b/components/full-page.vue
index 59465cb..a4d4135 100644
--- a/components/full-page.vue
+++ b/components/full-page.vue
@@ -1,9 +1,9 @@
 <template>
-  <view class="full-page" :style="pageStyle">
+  <view class="full-page" :class="pageClass" :style="pageStyle">
     <view v-if="hasHeader" class="page-header">
       <slot name="header"></slot>
     </view>
-    <view class="page-main" :style="mainStyle">
+    <view class="page-main" :class="mainClass" :style="mainStyle">
       <view v-if="customScroll" class="page-scroll">
         <slot></slot>
       </view>
@@ -21,9 +21,7 @@
     <view v-if="hasFooter" class="page-footer">
       <slot name="footer"></slot>
     </view>
-    <!-- #ifdef MP-->
-    <!-- <view class="safeareaBottom"></view> -->
-    <!-- #endif -->
+    <view v-if="showSafeArea" class="safeareaBottom"></view>
   </view>
 </template>
 <script setup>
@@ -33,8 +31,11 @@ import useDebounce from "@/utils/useDebounce";
 const emits = defineEmits(["reachBottom"]);
 const props = defineProps({
   customScroll: { type: Boolean, default: false },
-  mainStyle: { default: "" },
-  pageStyle: { default: "" },
+  mainClass: { type: String, default: "" },
+  mainStyle: { default: '' },
+  pageClass: { type: String, default: "" },
+  pageStyle: { default: '' },
+  showSafeArea: { type: Boolean, default: true },
 });
 const slots = useSlots();
 const hasHeader = computed(() => !!slots.header);