<script>
import Vue from 'vue'

export default Vue.extend({
  name: "index"
})
</script>

<template>
  <div class="main-box">
    <div class="head">
      <el-input v-permission="'setting.account.search'" prefix-icon="el-icon-search" placeholder="搜索账号" class="input"></el-input>
      <el-button v-permission="'setting.account.add'" icon="el-icon-plus" type="primary">添加账号</el-button>
    </div>
    <div class="body">
      <el-table height="100%" class="table">
        <el-table-column
          label="账号">
        </el-table-column>
        <el-table-column
          label="姓名">
        </el-table-column>
        <el-table-column
          label="角色"
          width="260">
        </el-table-column>
        <el-table-column
          label="最后登录时间"
          width="260">
        </el-table-column>
        <el-table-column
          label="状态">
        </el-table-column>
        <el-table-column
          label="操作">
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <el-pagination
        v-permission="'setting.account.changePage'"
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.main-box{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 24px;
  .head{
    display: flex;
    .input{
      width: 50%;
      margin-right: auto;
    }
  }
  .body{
    height: 100%;
    position: relative;
    .table{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .foot{
    .el-pagination{
      display: flex;
      .el-pagination__total{
        margin-right: auto;
      }
    }
  }
}
</style>
