shoot-miniprograms/src/components/Container.vue

<script setup>
import { ref, onMounted } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
defineProps({
  title: {
    type: String,
    default: "",
  },
  bgType: {
    type: Number,
    default: 0,
  },
});
const isIos = ref(true);
onMounted(() => {
  const deviceInfo = uni.getDeviceInfo();
  isIos.value = deviceInfo.osName === "ios";
});
</script>

<template>
  <view>
    <AppBackground :type="bgType" />
    <Header :title="title" />
    <view
      class="content"
      :style="{ height: `calc(100vh - ${isIos ? 105 : 95}px)` }"
    >
      <slot></slot>
    </view>
  </view>
</template>

<style scoped>
.content {
  width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
}
</style>