<template>
  <view class="box-content" :class="customClass"><slot></slot></view>
</template>

<script>
export default {
  props: {
    customClass: {
      type: String,
      default: '',
    },
    bottom: { // rpx
      type: String | Number,
      default: 0
    },
  },
  computed:{
    safeBottom(){
      const systemInfo = uni.getSystemInfoSync()

      return systemInfo.screenHeight - systemInfo.safeArea.bottom
    }
  }
}
</script>

<style lang="scss" scoped>
.box-content {
  padding-bottom: var(--window-bottom);
}
</style>
