<template>
    <div class="personMain">
             
         <div class="reportTop"><a href="#">南华凯个人作业报告</a>
         <sapn class="personRight">
             <el-input v-model="input" placeholder="请输入内容" ></el-input>
             <el-button type="primary" size="mini">搜索</el-button>
             </sapn></div>
<el-table
    :header-cell-style="{background:'#FAFAFA'}"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
    align="center"
      prop="HomeworkName"
      label="作业名称"
      width="280">
    </el-table-column>
    <el-table-column
    align="center"
      prop="object"
      label="科目">
    </el-table-column>
    <el-table-column
    align="center"
      prop="riqi"
      label="作业日期">
    </el-table-column>
    <el-table-column
    align="center"
      label="操作">
      <template><a href="#">查看</a></template>
    </el-table-column>
 </el-table>
 <!-- 分页 -->
 <div class="reportPag">
         <el-button>上一页</el-button>
         <div class="fenye"><span>1</span>/<span>5</span></div>
            <el-button>下一页</el-button>
  </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
             tableData:[{
            id: '1',
          HomeworkName: '201910月第一期',
          object: '数学',
          riqi:'2019-9-9',
          object:'数学'
            }]
        }
    }
}
</script>
<style lang="less" scoped>
    .reportPag {
        position: relative;
       display: flex;
       justify-content: flex-end;
       margin-top: 15px;
      .fenye {
          font-size: 14px;
          position: absolute;
          top: 10px;
          right:136px;
      }
      .el-button {
          margin: 0 30px;
      }
    }
    .reportTop {
        margin-bottom: 20px;
         display: flex;
        justify-content: space-between;
        align-content: center;
         .personRight {
        .el-input {
            width: 60%;
        }
        .el-button {
            margin-left: 20px;
        }
    }
    }
</style>