<template>
  <div class="container">
    <!-- 头部区域 -->
    <dormHeader />

    <!-- 主体内容区域 -->
    <dormMain v-if="activeIndex === 0" />

    <!-- 遮罩层 -->
    <div class="mask"></div>
    <div class="mask2"></div>
  </div>
</template>

<script setup>
import { inject } from 'vue'
import dormHeader from '@/components/dorm/dorm-header.vue'
import dormMain from '@/components/dorm/dorm-main.vue'

// 接受祖先元素传递过来的值
const activeIndex = inject('activeIndex')
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/images/bg.png);
  background-size: 100% 100%;

  .mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 144.5px;
    pointer-events: none;
    background-image: linear-gradient(
      #081f37 5px,
      rgba(18, 50, 81, 0.8) 20px,
      rgba(18, 50, 81, 0) 100%
    );
  }

  .mask2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    background-image: linear-gradient(
      to top,
      #081f37 5px,
      rgba(18, 50, 81, 0.8) 20px,
      rgba(18, 50, 81, 0) 100%
    );
  }
}
</style>
