<template>
  <div class="app-admin-layout">
    <div class="header">
      <!--  头部    -->
      <div class="user-info">
        <span>
          {{ userStore.userinfo?.account }}
        </span>
      </div>
    </div>
    <div class="main">
      <div class="left-menu">
        <div class="title">积分管理系统</div>
        <div class="menu-list">
          <router-link active-class="active-menu" to="/home">HOME</router-link>
          <router-link active-class="active-menu" to="/user">用户管理</router-link>
        </div>
      </div>
      <div class="content-wrapper">
        <!--      内容区域-->
        <div class="content-container-main">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {useUserStore} from "../../service/store";

const userStore = useUserStore();

</script>
<style lang="less">
.app-admin-layout {
  min-height: 100vh;
  background-color: #eee;
}

.header {
  background-color: var(--primary-color);
  color: white;
  line-height: var(--header-height);
  padding: 0 20px;
  text-align: right;
  position: fixed;
  height: var(--header-height);
  left: 0;
  right: 0;
  top: 0;
}

.main {
  padding-top: var(--header-height);
  padding-left: var(--left-menu-width);

  .left-menu {
    width: 200px;
    background-color: black;
    color: white;

    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
  }
  .title{
    height: var(--header-height);
    background-color: #333;
    line-height: var(--header-height);
    text-align: center;
    font-size: var(--font-size-large);
  }
  .menu-list{
    margin-top: 20px;
    a{
      display: block;
      text-decoration: none;
      color:white;
      padding:10px 20px;
      &.active-menu{
        background-color: #666666;
        color: white;
      }
    }
  }
  .content-wrapper {
    margin: 20px;
    background-color: #fff;
    border-radius: var(--border-radius-large);
    padding: 20px;
  }
}
</style>