sso-ssr/pages/cloudcenter/enterprise/index.vue

<template>
  <div class="manager">
    <div class="us-member w-over-box">
      <div class="container">
        <div class="table-list">
          <div class="table-top">
            <h3>成员列表</h3>
            <a class="btn-us-apply">申请列表</a>
          </div>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>角色</th>
                <th>用户名称</th>
                <th>个人UU</th>
                <th>手机号</th>
                <th>邮箱</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>管理员</td>
                <td>李事业</td>
                <td>U456</td>
                <td>123456799+66</td>
                <td>112456112@qq.com</td>
              </tr>
            </tbody>
          </table>
          <page :total="pageParams.counts" :page-size="pageParams.count"
                  :current="pageParams.page" @childEvent="handleCurrentChange">
          </page>
        </div>
      </div>
    </div>

    <!--企业管理申请列表部分-->
    <div class="us-apply w-over-box">
      <div class="container">
        <div class="table-list">
          <div class="table-top">
            <h3>申请列表</h3>
            <a class="btn-us-member">成员列表</a>
          </div>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>操作</th>
                <th>用户名称</th>
                <th>个人UU</th>
                <th>手机号</th>
                <th>邮箱</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <button class="btn btn-apply">同意</button>
                  <button class="btn btn-apply">拒绝</button>
                </td>
                <td>李事业</td>
                <td>U456</td>
                <td>123456799+66</td>
                <td>112456112@qq.com</td>
              </tr>
              <tr>
                <td></td>
                <td>李事业</td>
                <td>U456</td>
                <td>123456799+66</td>
                <td>112456112@qq.com</td>
              </tr>
            </tbody>
          </table>
          <page :total="pageParams.counts" :page-size="pageParams.count"
                :current="pageParams.page" @childEvent="handleCurrentChange">
          </page>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Page from '~components/common/page/pageComponent.vue'
  export default {
    name: 'manager',
    layout: 'cloud',
    components: {
      Page
    },
    data () {
      return {
        pageParams: {
          page: 1,
          count: 10,
          counts: 222,
          filter: {}
        }
      }
    },
    methods: {
      handleCurrentChange () {
        console.log('11')
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .manager{
    background: #eee;
    padding:50px 0 112px 30px;
  }

  .w-over-box .table-list{
    position:relative;
    padding:20px 30px;
    margin-bottom:10px;
    background: #fff;
  }
  .w-over-box .table-list .table-top{
    position:relative;
  }
  .w-over-box .table-list .table-top h3{
    font-size: 18px;
    color:#000;
    font-weight: bold;
  }
  .w-over-box .table-list .table-top a{
    display:inline-block;
    position:absolute;
    right:10px;
    top:0;
    width:88px;
    height:28px;
    line-height: 26px;
    text-align: center;
    color:#0076ad;
    border:1px solid #bfbfbf;
    border-radius:3px;
  }
  .w-over-box .table-list .table-top a:hover{
    cursor:pointer;
  }
  .w-over-box .table-list table thead tr th{
    font-size: 14px;
    color:#333;
    border-top:2px solid #ddd!important;
    line-height: 25px!important;
  }
  .w-over-box table tbody tr td{
    font-size: 14px;
    color:#999;
    border:none;
    line-height: 25px!important;
  }
  .w-over-box table tbody tr:hover{
    background: #d0e5f5;
  }
  .w-over-box table tbody tr td button.btn-apply{
    border:1px solid #0076ad;
    width:40px;
    height:22px;
    line-height: 20px;
    font-size: 12px;
    border-radius:0;
    color:#0076ad;
    background: #fff;
    padding:0;
    margin:0 5px;
  }
  .w-over-box table tbody tr td button.btn-apply:hover{
    background: #0076ad;
    color:#fff;
  }
  .w-over-box table tbody tr td span{
    color: #505050;
    font-size: 14px;
  }
</style>