58 lines
2.0 KiB
Vue
58 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { ElCard, ElTag } from 'element-plus';
|
|
|
|
// 模拟员工数据
|
|
const staffList = ref([
|
|
{
|
|
id: 1,
|
|
name: '张三',
|
|
position: '高级前端开发工程师',
|
|
avatar: 'https://picsum.photos/200/200?random=1',
|
|
intro: '张三在前端开发领域拥有丰富的经验，擅长 Vue、React 等主流框架，对前端性能优化有深入研究。',
|
|
honors: ['优秀员工', '技术创新奖']
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '李四',
|
|
position: '后端架构师',
|
|
avatar: 'https://picsum.photos/200/200?random=2',
|
|
intro: '李四专注于后端系统设计与开发，精通 Java、Go 语言，主导过多个大型项目的架构设计。',
|
|
honors: ['杰出贡献奖', '最佳团队成员']
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '王五',
|
|
position: '产品经理',
|
|
avatar: 'https://picsum.photos/200/200?random=3',
|
|
intro: '王五具备敏锐的市场洞察力和出色的产品规划能力，成功打造过多款用户喜爱的产品。',
|
|
honors: ['优秀产品奖', '最佳创意奖']
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-7xl mx-auto p-6">
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">员工风采</h1>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<ElCard v-for="staff in staffList" :key="staff.id" class="shadow-md hover:shadow-xl transition-shadow">
|
|
<div class="flex flex-col items-center">
|
|
<img :src="staff.avatar" alt="staff avatar" class="w-32 h-32 rounded-full object-cover mb-4">
|
|
<h2 class="text-xl font-semibold text-gray-700">{{ staff.name }}</h2>
|
|
<p class="text-gray-600 text-sm mb-4">{{ staff.position }}</p>
|
|
</div>
|
|
<ElDivider />
|
|
<p class="text-gray-600 mb-4">{{ staff.intro }}</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<ElTag v-for="honor in staff.honors" :key="honor" type="success" size="small">
|
|
{{ honor }}
|
|
</ElTag>
|
|
</div>
|
|
</ElCard>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |