<template>
    <div class="box">
        <div class="boxHead">
            <div class="pic">
              
            </div>
            <div class="logo"></div>
            <div class="logoeng"></div>
            <div class="user"></div>
            <span class="name">你好</span>
            <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="boxBody">
    <!-- 左侧菜单栏 -->
    <div class="card1">
        <el-menu
      >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span class="text">基础信息</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="1-1">班级管理</el-menu-item>
          <el-menu-item index="1-2">学生管理</el-menu-item>
          <el-menu-item index="1-3">教师管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
          </el-menu>
        <el-menu
      >
      <el-submenu >
        <template slot="title">
          <i class="el-icon-receiving"></i>
          <span class="text">试题库</span>
        </template>
      </el-submenu>
          </el-menu>
        <el-menu
      >
      <el-submenu>
        <template slot="title">
          <i class="el-icon-document"></i>
          <span class="text">作业管理</span>
        </template>
       
      </el-submenu>
      <el-submenu >
        <template slot="title">
          <i class="el-icon-s-marketing"></i>
          <span class="text">阶段学情</span>
        </template>
       
      </el-submenu>
          </el-menu>
    </div>
    <!-- 卡片视图 -->
    <el-card class="card2">
    <el-row :gutter="40" >
        <el-col :span="4">
        <el-checkbox label="未毕业" name="type" style="fontSize:7px"></el-checkbox>
        </el-col>
        <el-col :span="4" >
        <el-checkbox label="已毕业" name="type"></el-checkbox>
        </el-col>
         <el-col :span="7">
        <el-select v-model="value" placeholder="所属学科" size="mini" style="padding:0" >
            <el-option >
             </el-option>
        </el-select>
        </el-col>
        <el-col :span="3">
    <el-date-picker
      type="date"
      placeholder="选择日期" size="mini" style="width:60px">
    </el-date-picker>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" size='mini'>搜索</el-button>
        </el-col>
        <!-- <el-col :span="2">
            <el-button type="primary">添加</el-button>
        </el-col> -->
      </el-row>
      <el-row>
          <el-table border stripe style="fontSize:7px">
        <el-table-column
      type="selection"
      width="40px">
    </el-table-column>
        <el-table-column label="序号" prop="" width="47px" ></el-table-column>
        <el-table-column label="班级名称" prop="" width="75px"></el-table-column>
        <el-table-column label="人数" prop="" width="60px"></el-table-column>
        <el-table-column label="主负责人" prop="" width="80px"></el-table-column>
        <el-table-column label="学科" prop="" width="60px"></el-table-column>
        <el-table-column label="教师" prop="" width="50px"></el-table-column>
        <el-table-column label="操作" prop="" width="50px">
            <template>
               
            </template>
        </el-table-column>
          </el-table>
      </el-row>
      <!-- 分页区域-->
       <el-pagination
        background
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="1"
      layout=" prev, pager, next,total,jumper"
      :total="3">
    </el-pagination>
    </el-card>
    </div>
    </div>
</template>
<script >

    
</script>
<style scoped>
.pic {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 7.8px;
    left: 9px;
    background-color: pink;
   
}
.logo {
    position: absolute;
    width: 76px;
    height: 13.5px;
    top: 12.5px;
    left: 43.5px;
    background-color: pink;
}

.name {
    position: absolute;
    display: inline-block;
    height: 9px;
    line-height: 9px;
    top: 19px;
    left: 864px;
    font-size: 9px;
    color: #fff;
}
.boxHead i {
    position: absolute;
    top: 15px;
    left: 921.5px;
    color: #fff;
}
.user {
    position: absolute;
    top: 12px;
    left: 835px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: pink;
}
.pic img {
    width: 100%;
  
}
.box {
    position: relative;
    background-color: #EEF2F8;
    width: 960px;
    height: 540px;
    margin: 0 auto;
}
.boxHead {
 width:960px;
height:44px;
background:rgba(82,155,255,1);
}
.boxBody {
    margin: 10px auto 0;
    width: 650px;
    height: 441.5px;
    

}

.card1 {
    float: left;
   overflow: hidden;
    width: 123px;
    height: 441.5px;
    font-size: 7px;
    background-color: #fff;
    
}
.el-menu-item {
    font-size: 7px;
}

.card2 {
     float: right;
width:503px;
height:442px;
background:rgba(255,255,255,1);

}
.el-menu {
    border: none;
    
}
.text {
    font-size: 7px;
}
.card2 {
    width: 503px;
    height: 100%;
}
.el-table-column {
    font-size: 7px!important;
}
.el-table {
    margin-top: 10px;
}
.el-pagination {
    margin-top: 10px;
}
</style>