<!-- 如果有header和footer 则： <v-content :has-header = "true" :has-footer="true"></v-content>-->
<!-- 如果无header和footer 则： <v-content></v-content> -->

<template>
  <div class="content" :class="{'has-header':hasHeader,'has-footer':hasFooter}">
    <div class="content-inner">
      <slot></slot>
    </div>
  </div>
</template>
<script>

export default {

  components: {
  
  },
  props: {
    hasHeader: {
      type: Boolean,
      default: true
    },
    hasFooter:{
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      
    }
  }
}
</script>
<style lang="scss" scoped>
  .has-header{
      padding-top:44px !important;
  }
  .has-footer{
      padding-bottom:58px !important;
  }
  .content{
    width: 100%;
    height:100%;
    overflow-y:scroll;

  }
  .content-inner{
    width: 100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    //padding-bottom: 16px;
    scroll-behavior: smooth; 
  }
  .is-ipx{
    .has-footer{
        padding-bottom: 64px !important;
    }
  }
</style>