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.
126 lines
5.2 KiB
126 lines
5.2 KiB
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t, locale } = useI18n();
|
|
|
|
// 使用计算属性实现响应式语言切换
|
|
const eventsData = computed(() => [
|
|
{
|
|
id: 1,
|
|
date: "2024-05",
|
|
title: locale.value === 'zh' ? "新加坡共识大会2024" : "Consensus 2024 Singapore",
|
|
description: locale.value === 'zh' ? "隐私技术主题演讲" : "Keynote speech on privacy technology",
|
|
location: "Singapore",
|
|
link: "#",
|
|
icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h2a2 2 0 012 2h6a2 2 0 012-2h2a2 2 0 012 2v12a2 2 0 01-2 2z'
|
|
},
|
|
{
|
|
id: 2,
|
|
date: "2024-06",
|
|
title: locale.value === 'zh' ? "东京开发者黑客松" : "Tokyo Developer Hackathon",
|
|
description: locale.value === 'zh' ? "50万美元奖金池" : "$500,000 prize pool",
|
|
location: "Tokyo",
|
|
link: "#",
|
|
icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'
|
|
}
|
|
]);
|
|
|
|
const events = computed(() => {
|
|
return eventsData.value.map(event => ({
|
|
...event,
|
|
formattedTitle: event.title,
|
|
formattedDescription: event.description,
|
|
formattedLocation: event.location
|
|
}));
|
|
});
|
|
|
|
// 格式化日期
|
|
const formatDate = (dateString: string) => {
|
|
// 处理"2024-05"这种格式，转换为"2024-05-01"以便创建Date对象
|
|
const fullDateString = dateString.length === 7 ? `${dateString}-01` : dateString;
|
|
const date = new Date(fullDateString);
|
|
|
|
// 如果只有年月，则只显示年月
|
|
if (dateString.length === 7) {
|
|
return new Intl.DateTimeFormat(locale.value === 'zh' ? 'zh-CN' : 'en-US', {
|
|
year: 'numeric',
|
|
month: 'long'
|
|
}).format(date);
|
|
}
|
|
|
|
// 否则显示完整日期
|
|
return new Intl.DateTimeFormat(locale.value === 'zh' ? 'zh-CN' : 'en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
}).format(date);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<section class="py-16 px-6 md:px-12 lg:px-24">
|
|
<div class="container mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast">
|
|
{{ t('home.events.title') }}
|
|
</h2>
|
|
<p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs">
|
|
{{ t('home.events.subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div
|
|
v-for="(event, index) in events"
|
|
:key="event.id"
|
|
class="bg-background-light rounded-xl overflow-hidden shadow-card hover:transform hover:scale-105 transition-all duration-300 wow animate__animated animate__fadeInUp animate__duration-fast"
|
|
:class="{
|
|
'animate__delay-xs': index === 1,
|
|
'animate__delay-sm': index === 2
|
|
}"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="event.icon" />
|
|
</svg>
|
|
</div>
|
|
<div class="text-xs font-medium text-primary-light">
|
|
{{ formatDate(event.date) }}
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-bold text-text mb-3">{{ event.formattedTitle }}</h3>
|
|
|
|
<p class="text-text-secondary text-sm mb-4">{{ event.formattedDescription }}</p>
|
|
|
|
<div class="flex items-center text-xs text-text-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<span>{{ event.formattedLocation }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-background px-6 py-4 border-t border-background-dark">
|
|
<a :href="event.link" class="text-primary-light hover:text-primary-dark text-sm font-medium transition-colors btn-hover-glow inline-block">
|
|
{{ t('home.events.learn_more') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-10">
|
|
<a href="/community" class="inline-flex items-center text-primary-light hover:text-primary-dark transition-colors">
|
|
{{ t('home.events.view_all') }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|