You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
OneAuth/oa/front/t2/teamMembers.html

129 lines
4.8 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>