MOSE-Official-Website-20250712/src/components/rewards/MarketDataModule.vue

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