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.
101 lines
3.7 KiB
101 lines
3.7 KiB
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 市场数据
|
|
const marketData = [
|
|
{
|
|
id: 1,
|
|
title: t('incentives.market_data.transaction_volume'),
|
|
value: '120亿美元',
|
|
icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2-3 .895-3 2 1.343 2 3 2',
|
|
description: t('incentives.market_data.transaction_subtitle'),
|
|
isActive: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
title: t('incentives.market_data.growth_rate'),
|
|
value: '3000%',
|
|
icon: 'M7 11l5-5m0 0l5 5m-5-5v12',
|
|
description: t('incentives.market_data.growth_subtitle'),
|
|
isActive: true,
|
|
},
|
|
{
|
|
id: 3,
|
|
title: t('incentives.market_data.security_incidents'),
|
|
value: '20亿美元',
|
|
icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
|
|
description: t('incentives.market_data.security_subtitle'),
|
|
isActive: true,
|
|
}
|
|
];
|
|
|
|
// 过滤出激活的数据
|
|
const activeMarketData = marketData.filter(item => item.isActive);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light relative">
|
|
<div class="container mx-auto relative z-10">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast">
|
|
{{ t('incentives.market_data.title') }}
|
|
</h2>
|
|
<p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs">
|
|
{{ t('incentives.subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<!-- 市场数据统计卡片 -->
|
|
<div
|
|
v-for="(stat, index) in activeMarketData"
|
|
:key="stat.id"
|
|
class="bg-background rounded-xl p-8 shadow-card overflow-hidden relative wow animate__animated animate__fadeInUp"
|
|
:class="{
|
|
'animate__delay-xs': index === 1,
|
|
'animate__delay-sm': index === 2
|
|
}"
|
|
>
|
|
<!-- 卡片内容 -->
|
|
<div class="flex items-start gap-6">
|
|
<!-- 图标 -->
|
|
<div class="p-4 rounded-full bg-primary bg-opacity-10 flex-shrink-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="stat.icon" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 数值和描述 -->
|
|
<div>
|
|
<div class="flex items-baseline mb-2">
|
|
<h3 class="text-4xl font-bold text-text mr-2">{{ stat.value }}</h3>
|
|
</div>
|
|
<div>
|
|
<p class="text-lg font-medium text-primary-light">{{ stat.title }}</p>
|
|
<p class="text-text-secondary">{{ stat.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-primary bg-opacity-5"></div>
|
|
<div class="absolute top-6 right-10 w-20 h-20 rounded-full bg-accent bg-opacity-5"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30">
|
|
<div class="absolute -bottom-24 left-1/4 w-64 h-64 rounded-full bg-primary-light blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 渐变效果 */
|
|
.bg-gradient-primary {
|
|
background: linear-gradient(135deg, var(--primary-light), var(--primary));
|
|
}
|
|
</style>
|