<template>
    <div class="section-view" :style="isCssStyle">
      <div class="section-view-h5-wrap">
        <slot></slot>
      </div>
    </div>
</template>

<script>
  export default {
    name: "SectionView",
    props:{
      cssStyle:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    computed:{
      isCssStyle(){
        return this.cssStyle
      }
    },
    mounted() {
      // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
      // let vh = window.innerHeight * 0.01
      // // Then we set the value in the --vh custom property to the root of the document
      // document.documentElement.style.setProperty('--vh', `${vh}px`)
      //
      // // We listen to the resize event
      // window.addEventListener('resize', () => {
      //   // We execute the same script as before
      //   let vh = window.innerHeight * 0.01
      //   console.log(vh);
      //   document.documentElement.style.setProperty('--vh', `${vh}px`)
      // })
    }
  }
</script>

<style scoped lang="less">
.section-view{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  &-h5-wrap{
    display: block;
    height: 100%;
  }
}
</style>
