<template>
  <div class="home-page">
    <img class="background-image" :src="bgback" alt="背景图">
    <el-header>
        <myheader />
    </el-header>
    <el-main>
      <div class="home-page-container">
        <div class="home-page-content">
          <router-view />
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import myheader from '@/components/layout/header.vue'

import { RouterView, RouterLink,useRouter, useRoute } from "vue-router"
import { request, enPassword } from "@/utils/request";
import { ElMessage } from 'element-plus'

import bgback from "@/assets/img/bgback.png"

const router = useRouter();
// 获取路由实例
const route = useRoute()


</script>

<style scoped>
.home-page {
  width: 100%;
  min-width: 1400px;
  height: 100vh;
  overflow: hidden;

  position: relative; /* 关键：为子元素绝对定位提供参照 */
}

.home-page-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.background-image {
  position: absolute; /* 脱离文档流 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* 或 contain，根据需求选择 */
  object-position: center;
  z-index: 0; /* 置于底层 */
}

.home-page-content {
  position: relative; /* 关键：确保内容在背景上方 */
  z-index: 1; /* 高于背景图的层级 */
  display: flex;
  width: 100%;
  height: calc(100vh - 70px);
}
</style>