dvcp_v2_webapp/packages/extra/AppOnlineManager/AppOnlineManager.vue

<template>
  <section class="AppOnlineManager">
    <ai-detail list>
      <ai-title slot="title" :title="menuName" isShowBottomBorder/>
      <template #content>
        <ai-search-bar>
          <template #right>
            <el-input placeholder="姓名/手机号" size="small" clearable v-model="search.name" @change="page.current=1,getTableData()"/>
          </template>
        </ai-search-bar>
        <el-row type="flex" class="fill">
          <div flex v-for="item in tableData" :key="item.id" class="itemCard mar-b8 mar-r8">
            <el-avatar :src="item.avatar"/>
            <div class="fill mar-l8 mar-r8">
              <h4 v-text="item.name"/>
              <div class="dept" v-text="item.dept"/>
            </div>
            <i class="el-icon-switch-button"/>
          </div>
        </el-row>
      </template>
    </ai-detail>
  </section>
</template>

<script>
const label = "在线管理"
export default {
  name: "AppOnlineManager",
  label,
  props: {
    menuName: {default: label},
    instance: Function,
    dict: Object,
    permissions: Function,
  },
  data() {
    return {
      tableData: [{
        id: 1,
        name: "艾贤凌阿啊",
        dept: "研发部",
        avatar: "http://wework.qpic.cn/wwhead/duc2TvpEgSQO4BpE0WZSZ8ReqnNFtOlpHOHmcRvBiaPO5BUEyszdnocog5MKktUUFq3iaVrsXFhKI/0"
      }],
      search: {name: ""},
      page: {current: 1, size: 10, total: 0}
    }
  },
  methods: {
    getTableData() {

    }
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.AppOnlineManager {
  height: 100%;

  .itemCard {
    width: 180px;
    height: 60px;
    padding: 8px;
    border: 1px solid #eee;
    box-shadow: 0 4px 6px -2px rgb(15 15 21 / 15%);
    background-color: #fff;
    font-size: 16px;

    .el-icon-switch-button {
      font-weight: bold;
      font-size: 20px;
      cursor: pointer;
      color: rgba(#f46,.6);
      &:hover{
        color: #f46;
      }
    }
    h4{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dept {
      color: #999;
      font-size: 12px;
    }
  }
}
</style>