zbAdmin/src/views/circle/detail/components/userList.vue

<template>
  <div>
    <div class="search">
      <el-input size="mini" placeholder="" />
      <el-button type="primary" size="mini">搜索</el-button>
    </div>
    <dl>
      <dt>
        <div>头像</div>
        <div>uid</div>
        <div>加入时间</div>
        <div>到期时间</div>
        <div>操作</div>
      </dt>
      <dd>
        <div><img src="" alt="" /></div>
        <div>
          <p>1234</p>
          <p>小可爱</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <div>
            <el-button type="text">私聊</el-button>
          </div>
          <div>
            <el-button type="text">禁言</el-button>
          </div>
        </div>
      </dd>
      <dd>
        <div><img src="" alt="" /></div>
        <div>
          <p>1234</p>
          <p>小可爱</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <div>
            <el-button type="text">私聊</el-button>
          </div>
          <div>
            <el-button type="text">禁言</el-button>
          </div>
        </div>
      </dd>
    </dl>
  </div>
</template>
<style lang="scss" scoped>
.search {
  display: flex;
  margin-bottom: 10px;
  .el-input {
    margin-right: 10px;
  }
}
dl {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  list-style: none;
  padding: 10px;
  min-height: 500px;
  overflow-y: scroll;
  dt {
    padding: 10px 0;
  }
  dd {
    margin: 0;
    padding: 0;
  }
  dt,
  dd {
    display: flex;
    border-bottom: 1px dashed #999;
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 6px 0;
    }
    & > div:nth-child(1) {
      width: 60px;
    }
    & > div:nth-child(2) {
      width: 100px;
    }
    & > div:nth-child(3) {
      width: 100px;
    }
    & > div:nth-child(4) {
      width: 100px;
    }
    & > div:nth-child(5) {
      flex: 1;
    }
    p {
      font-size: 14px;
      margin: 0;
      line-height: 16px;
    }
    ::v-deep .el-button--medium {
      padding: 4px 8px;
    }
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
  }
}
</style>