<script setup lang="ts">
import { reactive, computed } from "vue";
import LayoutHeader from "./Header/index.vue";
import LayoutSider from "./Sider/index.vue";
import LayoutContent from "./Content/index.vue";
import { router } from "@/router/index.ts";
import { inject } from "vue";
import bgImg from "@/assets/images/index/bg.jpg";

const data = reactive({
  loading: true,
});
</script>

<template>
  <a-layout class="system-layout">
    <layout-header></layout-header>
    <a-layout>
      <layout-sider v-model:contentLoading="data.loading"> </layout-sider>
      <layout-content v-model:contentLoading="data.loading"> </layout-content>
    </a-layout>
  </a-layout>
</template>

<style lang="scss" scoped>
.system-layout {
  width: 100%;
  height: 100vh;
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    url(@/assets/images/index/bg.jpg) no-repeat center center;
  background-size: cover;
  :deep(.ant-layout) {
    background: transparent;
  }
  &_header {
  }
  &_content {
    // padding-top: 80px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    // position: relative;
    // z-index: 0;
  }
}
</style>
