<template>
  <div>
    <div class="top">
      <a>CocoClass后台管理</a>
      <div class="person">
        <div class="person_img"></div>
        <a>姓名</a>
      </div>
    </div>
    <div class="left">
        <ul>
          <router-link class="menu_left" to="/user-list"><i class="el-icon-s-custom"></i>账号列表</router-link>
          <router-link class="menu_left" to="/user-examine"><i class="el-icon-edit"></i>账号审核</router-link>
      </ul>
    </div>
    <div class="table-container"> <!-- 添加一个容器来包裹 HelloWord -->
      <router-view></router-view> <!-- 这里会显示 UserList 或 UserExamine -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import userList from '@/components/list.vue'
// import userExamine from '@/components/examine.vue'
export default {
  name: 'HomeView',
  components: {
    // userList,
    // userExamine
  },
  data() {
    return {
    }
  },
   mounted() {

  }
}
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f1f2f5; 
  height: 100vh; /* 占据整个视口高度 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  position: absolute;
}
.top{
  width: 100vw;
  height: 50px;
  background-color: #ffffff;
}
.top a{
  float: left;
  font-weight: bold;
  font-size: 20px;
  line-height: 40px;
}
/* 头像个人区域 */
.person{
  width: 120px;
  height: 50px;
  /* border: 1px solid red; */
  float: right;
}
/* 圆圈头像区域 */
.person_img{
  width: 40px;
  height: 40px;
  background-color: #d1d1d1;
  border-radius: 50%;
  margin-top: 5px;
}
/* 姓名样式 */
.person a{
  float: right;
  font-size: 15px;
  color: black;
  margin-top: -35px;
  margin-right: 30px;
  font-weight: 400;
}
.table-container {
  flex-grow: 1; /* 使表格容器填满剩余空间 */
  overflow: hidden;
}
.left{
  width: 150px;
  height: 94.5vh;
  background-color: #ffffff;
  float: left;
  border-right: 2px solid #f2f2f2;
  display: flex; /*使用 Flexbox */
  flex-direction: column; /* 垂直排列子元素 */
}
.top ul{
  width: 150px;
  height: 94.5vh;
  background-color: #ffffff;
  float: left;
}
.menu_left{
  width: 150px;
  height: 40px;
  text-decoration: none; /* 去除下划线 */
  color: rgb(154, 154, 154);
  background-color: #ffffff;
  float: left;
  /* border: 1px solid #ffbdbd; */
  line-height: 40px;
}
/* Vue Router 默认会给 router-link 元素添加这些类 */
.router-link-active {
  background-color: #3d67bc;
  color: rgb(255, 255, 255);
}
/* Vue Router 默认会给 router-link 元素添加这些类 */
.router-link-exact-active {
  background-color: #3d67bc;
  color: rgb(255, 255, 255);
}

</style>
