<template>
  <div class="page-panel">
    <div class="p-top">
      <el-form :model="form" :inline="true" label-width="auto" size="small">
        <el-form-item label="关键字">
          <el-input v-model="form.model" placeholder="请输入内容" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="p-table">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: 'rgba(45, 116, 231,0.2)', 
      color: '#333333', height: '40px', textAlign: 'center' }" height="100%">
        <template slot="empty">
          <img src="@/assets/icon/null.png" alt="暂无数据" />
        </template>
        <el-table-column align="center" type="selection"></el-table-column>
        <el-table-column prop="address" label="数据源" align="center"></el-table-column>
        <el-table-column prop="address" label="竣工时间" align="center"></el-table-column>
        <el-table-column prop="address" label="工程名称" align="center"></el-table-column>
        <el-table-column prop="address" label="管段编号" align="center"></el-table-column>
        <el-table-column prop="address" label="管网类型" align="center"></el-table-column>
        <el-table-column prop="address" label="所在道路" align="center"></el-table-column>
        <el-table-column prop="address" label="管径" align="center"></el-table-column>
        <el-table-column prop="address" label="管材" align="center"></el-table-column>
        <el-table-column prop="address" label="缺陷类型" align="center"></el-table-column>
        <el-table-column prop="address" label="缺陷等级" align="center"></el-table-column>
        <el-table-column prop="address" label="检测时间" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="p-pagination">
      <el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      tableData: []
    }
  }
}
</script>

<style lang="scss" scoped>
.page-panel {
  box-sizing: border-box;
  padding: 0 20px;
  .p-top {
    padding: 20px 0;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .p-table{
    height: calc(100% - 145px);
  }
  .p-pagination{
    padding: 20px 0;
  }
}
</style>