<template>
  <el-row :gutter="24" class="flex flex-column">
    <el-col :xs="24" :md="12" v-for="(list, index) in lists" :key="index">
      <el-card class="box-card mb-3">
        <div class="flex flex-column">
          <el-avatar icon="el-icon-user-solid" :size="46" :src="circleUrl"></el-avatar>
          <div class="ml-4 flex-1 flex-col">
            <span class="font-bold">
              {{ list.name }}
            </span>
            <div class="flex flex-col mt-5 text-sm text-gray-400">
              <span class="mb-1">{{ list.operation }}</span>
              <span>{{ list.time }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';

const circleUrl = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
const lists = ref([
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
  {
    name: '管理员01',
    operation: '管理员01',
    time: '2021年10月19日',
  },
]);
</script>
