<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
const span = 12
</script>

<template>
    <el-row class="wrapper layout-grid-line">
        <el-col :span="span">
            <pre>
{{ `import PersonAvatar from '@/components/base/people/PersonAvatar.vue';
<template>
    <person-avatar class="person-avatar" :person="{
        name: '张三',
        position: 'CEO，CTO',
        avatarUrl: '/icon/美国.png'
    }">
    </person-avatar>
</template>
`}}
</pre>
            <person-avatar class="person-avatar" :person="{
                name: '张三',
                position: 'CEO，CTO',
                avatarUrl: '/icon/美国.png'
            }">
            </person-avatar>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
.person-avatar {
    width: 200px;
}
</style>