<template>
  <transition name="fade-slide" mode="out-in" appear>
    <section class="app-page-shell cus-scroll-y wh-full">
      <div class="app-page-body">
        <slot />
        <AppFooter v-if="showFooter" mt-15 />
      </div>
      <n-back-top :bottom="20" />
    </section>
  </transition>
</template>

<script setup>
defineProps({
  showFooter: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped lang="scss">
.app-page-shell {
  position: relative;
  padding: 16px;
  background: #f5f7fa;
}

.app-page-body {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 16px;
}
</style>
