%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/forge/takeaseat.eco-n-tech.co.uk/components/layout/
Upload File :
Create Path :
Current File : //home/forge/takeaseat.eco-n-tech.co.uk/components/layout/PageHeader.vue

<template>
  <section 
    :class="classObject"
    class="page-header relative mb-8 py-10 px-6 flex flex-col items-center justify-center text-center">
    <slot></slot>
    <div class="page-header-bg"></div>
  </section>
</template>

<script>
export default {
  props: {
    classObject: {
      type: String,
      default: 'bg-yellow'
    }
  }
}
</script>

<style lang="postcss" scoped>
  .page-header {
    min-height: 450px;
  
    @media (min-width: 640px) {
      height: 50vh;

      &.home {
        height: 70vh;
      }
    }
  }

  .page-header-bg {
    @apply z-10 absolute bottom-0 left-0 w-full h-full bg-no-repeat;
    background-image: url('~assets/images/pageheader-bg.svg');
    background-position: bottom center;
    background-size: calc(100% + 2px) auto;
    border-bottom: 100px solid rgba(255, 255, 255, 0.3);
  }

  .page-header-gray .page-header-bg {
    background-image: url('~assets/images/pageheader-gray-bg.svg');
    border: none;
  }

  .page-header-bottom {
    @apply z-20 absolute px-12 pb-6 bottom-0 left-0 w-full;
  }
</style>

Zerion Mini Shell 1.0