<template>
  <div>
    <div class="readTop">
      <div class="baseMes">基本信息</div>
      <router-link to="/base">
        <span class="back">返回</span>
      </router-link>
    </div>
    <!-- 表格区域-->
    <table style="border-collapse:collapse;">
      <tr class="tr">
        <th>班级名称:</th>
        <td colspan="3"></td>
      </tr>
      <tr>
        <th>学科:</th>
        <td>
          <span>数学</span>
        </td>
        <th>年级:</th>
        <td></td>
      </tr>
      <tr>
        <th>主负责人:</th>
        <td>1</td>
        <th>副负责人:</th>
        <td>2</td>
      </tr>
      <tr>
        <th>学科教师:</th>
        <td>1</td>
        <th>开班日期</th>
        <td>
          <span>2019-9-9</span>
        </td>
      </tr>
      <tr>
        <th>状态:</th>
        <td>未毕业</td>
        <th>毕业日期：</th>
        <td>
          <span>2019-9-9</span>
        </td>
      </tr>
      
    </table>
    <!-- 学生信息区域 -->
    
    <div class="readBottom">
      <div class="baseMes">学生信息</div>
      <router-link to="/editMessage">
        <span>编辑</span>
      </router-link>
     <div class="readRight">
   <a href="#" class="daoru">导入</a> |
     <a href="#" class="zhuanban">转班</a> |
     <a href="#" class="del">删除</a>
     </div>
    </div>
    
    <!-- 表格区域 -->
 <el-table
 :header-cell-style="{background:'#eee'}"
    :data="tableData"
    border
    style="width: 100%">
     <el-table-column
      type="selection"
     >
    </el-table-column>
    <el-table-column
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
      prop="studentName"
      label="学生姓名"
      width="">
    </el-table-column>
    <el-table-column
      prop="xuehao"
      label="学号/登录名"
      width="">
    </el-table-column>
    <el-table-column
      prop="parentName"
      label="家长姓名"
      width="">
    </el-table-column>
    <el-table-column
      prop="parentTel"
      label="家长手机">
    </el-table-column>
    <el-table-column
      prop="studentTel"
      label="学生手机">
    </el-table-column>
    <el-table-column
      prop="idNum"
      label="身份证">
    </el-table-column>
    <el-table-column
      label="操作">
      <template>
          <router-link class="bottomEdit" to="/read" >修改</router-link> 
      </template>
    </el-table-column>
     </el-table>

     <!--底部加号 -->
     <div class="foot">
         <div class="footIcon"><i class="el-icon-circle-plus"></i></div>
     </div>
  </div>
</template>

<script>
export default {
  data() {
     return{
          tableData: [{
          id: '1',
          studentName: '第一期',
          xuehao: 56,
          parentName:'南湖恺',
          parentTel:'数学',
          studentTel:'123',
          idNum:'黄晓静'
        }]
            }
  },
           
   methods:{
      
    }
}
</script>
<style scoped>
.message {
    overflow: hidden;
}
.readTop,.readBottom{
  position: relative;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 45px;
}
.back {
    position: absolute;
    right:0;
    color: #529bff;
}
.readBottom span {
 float: right;
color: #529bff;
}
.baseMes {
  position: absolute;
  top: 29px;
  left: 20px;
  background-color: #fff;
  padding: 0 5px;
}
/* 表格区域 */
table {
  font-size: 14px;
  color: #333;
  width: 100%;
  border: 1px solid #ccc;
  margin-top: 30px;
}
th {
  width: 20%;
  border: 1px solid #ccc;
  height: 50px;
  background-color: #FAFAFA;
}

td {
padding-left:10px;
  width: 30%;
  border: 1px solid #ccc;
}
.readBottom {
    margin-top: 5px;
}
.readBottom span {
line-height: 40px;
}
.readRight {
    color:#C7CEE0;
    position: absolute;
    right: 0;
    top: 55px;
}
.daoru,.zhuanban {
    color: #595959;
    font-size: 14px;

}
.del {
      font-size: 14px;
    color: #EE443E
}

.bottomEdit {
    color: #529BFF;
}
.foot {
position: relative;
width: 100%;
height: 20px;
margin-top: 10px;
}
.footIcon {
    font-size: 20xp;
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
} 
.el-icon-circle-plus:before {
    font-size: 22px;
}
</style>