ruoyi-miniapp/components/cs-page/index.vue

<template>
  <view class="">
    <view class="container" v-if="isTab" :style="{ height: viewHeight }">
      <s-header :title="title" :isTab="isTab" :isCustom="isCustom" @goback="$emit('goback')">
        <slot name="header"></slot>
      </s-header>
      <view class="view">
        <view class="inner">
          <slot></slot>
        </view>
      </view>
      <s-tabber :selected="selected" :isTab="isTab" v-if="isTab" />
    </view>
    <view v-else>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'cs-page',
  props: {
    selected: Number,
    title: String,
    isTab: {
      type: Boolean,
      default: false
    },
    isCustom: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      viewHeight: '0px'
    }
  },
  created() {
    this.getViewHeight()
  },
  methods: {
    getViewHeight() {
      uni.getSystemInfoAsync({
        success: res => {
          this.viewHeight = `${res.screenHeight}px`
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  .view {
    position: relative;
    width: 100%;
    height: 100%;
    .inner {
      position: absolute;
      overflow: hidden;
      inset: 0;
      background-color: #f9f9f9;
    }
  }
}
</style>