|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Team Members</title>
|
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
@keyframes fade-In {
|
|
|
|
|
|
from {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
transform: translateY(80px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
to {
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
div[datavv] .fade-in {
|
|
|
|
|
|
animation: fade-In 2s ease-in-out;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body class="p-6 bg-white rounded-lg shadow-md">
|
|
|
|
|
|
<div class="max-w-4xl mx-auto" datavv>
|
|
|
|
|
|
<h3 class="text-2xl sm:text-3xl font-bold tracking-tight mb-6">我们的团队</h3>
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
|
|
<!-- Team Member 1 -->
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md fade-in">
|
|
|
|
|
|
<img src="https://picsum.photos/150/150/" alt="John Doe" class="w-full h-48 object-cover rounded-t-lg">
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-gray-900">John Doe</h4>
|
|
|
|
|
|
<p class="text-gray-500">首席执行官</p>
|
|
|
|
|
|
<p class="mt-2 text-base font-normal text-gray-700">拥有超过15年的行业经验，擅长战略规划和领导。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Team Member 2 -->
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md fade-in">
|
|
|
|
|
|
<img src="https://picsum.photos/150/150/" alt="Jane Smith" class="w-full h-48 object-cover rounded-t-lg">
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-gray-900">Jane Smith</h4>
|
|
|
|
|
|
<p class="text-gray-500">首席技术官</p>
|
|
|
|
|
|
<p class="mt-2 text-base font-normal text-gray-700">专注于技术创新，带领团队开发前沿产品。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Team Member 3 -->
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md fade-in">
|
|
|
|
|
|
<img src="https://picsum.photos/150/150/" alt="Sam Johnson" class="w-full h-48 object-cover rounded-t-lg">
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-gray-900">Sam Johnson</h4>
|
|
|
|
|
|
<p class="text-gray-500">市场总监</p>
|
|
|
|
|
|
<p class="mt-2 text-base font-normal text-gray-700">精通市场营销策略，推动品牌知名度提升。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Team Member 4 -->
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md fade-in">
|
|
|
|
|
|
<img src="https://picsum.photos/150/150/" alt="Emily Davis" class="w-full h-48 object-cover rounded-t-lg">
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-gray-900">Emily Davis</h4>
|
|
|
|
|
|
<p class="text-gray-500">人力资源经理</p>
|
|
|
|
|
|
<p class="mt-2 text-base font-normal text-gray-700">负责招聘和员工发展，营造积极的工作环境。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Team Member 5 -->
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md fade-in">
|
|
|
|
|
|
<img src="https://picsum.photos/150/150/" alt="Chris Brown" class="w-full h-48 object-cover rounded-t-lg">
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-gray-900">{{name}}</h4>
|
|
|
|
|
|
<p class="text-gray-500">财务主管</p>
|
|
|
|
|
|
<p class="mt-2 text-base font-normal text-gray-700">管理公司财务事务，确保资金运作高效透明。</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Team Member 6 -->
|
|
|
|
|
|
{for{teamMembers}}
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md fade-in" @click="add">
|
|
|
|
|
|
<img src="{{image}}" alt="Linda White" class="w-full h-48 object-cover rounded-t-lg">
|
|
|
|
|
|
<div class="mt-4">
|
|
|
|
|
|
<h4 class="text-xl font-semibold text-gray-900">{{name}}</h4>
|
|
|
|
|
|
<p class="text-gray-500">{{role}}</p>
|
|
|
|
|
|
<p class="mt-2 text-base font-normal text-gray-700">{{description}}</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{end{}}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
return {
|
|
|
|
|
|
data: (props) => {
|
|
|
|
|
|
console.log(props)
|
|
|
|
|
|
return {
|
|
|
|
|
|
a: 123,
|
|
|
|
|
|
name: 'vvv',
|
|
|
|
|
|
teamMembers: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'John',
|
|
|
|
|
|
role: '首席执行官',
|
|
|
|
|
|
description: '拥有超过15年的行业经验，擅长战略规划和领导。',
|
|
|
|
|
|
image: 'https://picsum.photos/150/150/',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'Doe',
|
|
|
|
|
|
role: '首席执行官',
|
|
|
|
|
|
description: '拥有超过15年的行业经验，擅长战略规划和领导。',
|
|
|
|
|
|
image: 'https://picsum.photos/150/150/',
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'John Doe',
|
|
|
|
|
|
role: '首席执行官',
|
|
|
|
|
|
description: '拥有超过15年的行业经验，擅长战略规划和领导。',
|
|
|
|
|
|
image: 'https://picsum.photos/150/150/',
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
add() {
|
|
|
|
|
|
console.log(123)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
