<template>
  <HeaderVue v-if="store.state.isLogin" class="header"></HeaderVue>
  <div v-if="store.state.isLogin" class="aside"><AsideVue></AsideVue></div>
  <div v-if="store.state.isLogin && route.path != '/index'" class="first-title">
    {{ this.$store.state.firstTitle }}
  </div>
  <div
    :class="[
      'main-section',
      store.state.isLogin ? '' : 'login',
      route.path == '/index' ? 'index' : '',
    ]"
  >
    <AppMain></AppMain>
  </div>
</template>

<script setup>
import store from "../store";
import { useRoute } from "vue-router";
import HeaderVue from "./Header.vue";
import AsideVue from "./Aside.vue";
import FooterVue from "./Footer.vue";
import AppMain from "./AppMain.vue";
const route = useRoute();
</script>
<style scoped>
.header {
  position: absolute;
}
.aside {
  position: absolute;
  top: 60px;
  bottom: 0;
  width: 220px;
}

.first-title {
  position: absolute;
  top: 60px;
  left: 220px;

  height: 52px;
  line-height: 52px;
  width: calc(100% - 220px);
  box-sizing: border-box;
  background: #fff;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333d43;
  padding-left: 20px;
}

.main-section {
  position: absolute;
  top: 132px;
  right: 0;
  left: 220px;
  bottom: 0;
  overflow-y: auto;
  margin-left: 20px;
}

.footer {
  position: absolute;
  bottom: 0;
}

.login {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: 0;
}

.index {
  left: 220px;
  top: 60px;
  margin: 0;
}
</style>
