You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.6 KiB
69 lines
1.6 KiB
4 years ago
|
<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>
|