<template>
  <div class="main">
    <!-- 主体内容左边区域 -->
    <mainLeft />

    <!-- 主体内容中间区域 -->
    <mainCenter />

    <!-- 主体内容右边区域 -->
    <mainRight />

    <!-- 底部边框区域 -->
    <img class="main_img" src="@/assets/images/bottom_bg.png" />
  </div>
</template>

<script setup>
import mainLeft from '@/components/dorm/dorm-main-left.vue'
import mainCenter from '@/components/dorm/dorm-main-center.vue'
import mainRight from '@/components/dorm/dorm-main-right.vue'
</script>
<style lang="scss" scoped>
.main {
  position: relative;
  z-index: 999;
  display: flex;
  height: 980px;

  .main_img {
    position: absolute;
    left: 0;
    bottom: 23px;
    width: 100%;
    height: 32px;
  }
}
</style>
