MOSE-Official-Website-20250712/src/views/Ecosystem.vue

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 当前选中的分类
const selectedCategory = ref('all');

// 分类列表
const categories = [
  { id: 'all', name: t('ecosystem.categories.all') },
  { id: 'defi', name: t('ecosystem.categories.defi') },
  { id: 'nft', name: t('ecosystem.categories.nft') },
  { id: 'dao', name: t('ecosystem.categories.dao') },
  { id: 'gaming', name: t('ecosystem.categories.gaming') },
  { id: 'infrastructure', name: t('ecosystem.categories.infrastructure') },
  { id: 'social', name: t('ecosystem.categories.social') },
];

// 项目数据
const projects = [
  {
    id: 1,
    name: 'MOSE Swap',
    description: t('projects.mose_swap'),
    category: 'defi',
    image: '/public/images.png',
    url: 'https://moseswap.io',
    featured: true
  },
  {
    id: 2,
    name: 'MOSE NFT Marketplace',
    description: t('projects.mose_nft'),
    category: 'nft',
    image: '/public/images.png',
    url: 'https://mosenft.io',
    featured: true
  },
  {
    id: 3,
    name: 'MOSE DAO',
    description: t('projects.mose_dao'),
    category: 'dao',
    image: '/public/images.png',
    url: 'https://mosedao.io',
    featured: true
  },
  {
    id: 4,
    name: 'MOSE Gaming',
    description: t('projects.mose_gaming'),
    category: 'gaming',
    image: '/public/images.png',
    url: 'https://mosegaming.io',
    featured: false
  },
  {
    id: 5,
    name: 'MOSE Bridge',
    description: t('projects.mose_bridge'),
    category: 'infrastructure',
    image: '/public/images.png',
    url: 'https://mosebridge.io',
    featured: true
  },
  {
    id: 6,
    name: 'MOSE Social',
    description: t('projects.mose_social'),
    category: 'social',
    image: '/public/images.png',
    url: 'https://mosesocial.io',
    featured: false
  },
  {
    id: 7,
    name: 'MOSE Lending',
    description: t('projects.mose_lending'),
    category: 'defi',
    image: '/public/images.png',
    url: 'https://moselending.io',
    featured: false
  },
  {
    id: 8,
    name: 'MOSE Staking',
    description: t('projects.mose_staking'),
    category: 'defi',
    image: '/public/images.png',
    url: 'https://mosestaking.io',
    featured: false
  }
];

// 合作伙伴数据
const partners = [
  {
    id: 1,
    name: 'Partner 1',
    logo: '/public/images.png',
    url: 'https://partner1.com'
  },
  {
    id: 2,
    name: 'Partner 2',
    logo: '/public/images.png',
    url: 'https://partner2.com'
  },
  {
    id: 3,
    name: 'Partner 3',
    logo: '/public/images.png',
    url: 'https://partner3.com'
  },
  {
    id: 4,
    name: 'Partner 4',
    logo: '/public/images.png',
    url: 'https://partner4.com'
  },
  {
    id: 5,
    name: 'Partner 5',
    logo: '/public/images.png',
    url: 'https://partner5.com'
  },
  {
    id: 6,
    name: 'Partner 6',
    logo: '/public/images.png',
    url: 'https://partner6.com'
  }
];

// 筛选项目
const filteredProjects = computed(() => {
  if (selectedCategory.value === 'all') {
    return projects;
  } else {
    return projects.filter(project => project.category === selectedCategory.value);
  }
});

// 特色项目
const featuredProjects = computed(() => {
  return projects.filter(project => project.featured);
});

// 选择分类
const selectCategory = (category: string) => {
  selectedCategory.value = category;
};
</script>

<template>
  <div class="bg-background min-h-screen">
    <!-- Hero Section -->
    <section class="relative py-24 px-6 md:px-12 lg:px-24 bg-background-dark overflow-hidden">
      <div class="container mx-auto relative z-10">
        <div class="max-w-3xl mx-auto text-center">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-text mb-6 wow animate__animated animate__fadeInDown">
            {{ t('ecosystem.title') }}
          </h1>
          <p class="text-lg md:text-xl text-text-secondary mb-8 wow animate__animated animate__fadeIn animate__delay-0-5s">
            {{ t('ecosystem.subtitle') }}
          </p>
        </div>
      </div>
      
      <!-- Background Decoration -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
        <div class="absolute -top-24 -left-24 w-64 h-64 rounded-full bg-primary-light blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
        <div class="absolute top-1/2 right-0 w-80 h-80 rounded-full bg-secondary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-1s"></div>
        <div class="absolute -bottom-24 left-1/3 w-72 h-72 rounded-full bg-accent blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-2s"></div>
      </div>
    </section>
    
    <!-- Featured Projects Section -->
    <section class="py-16 px-6 md:px-12 lg:px-24">
      <div class="container mx-auto">
        <div class="flex justify-between items-center mb-10">
          <h2 class="text-2xl md:text-3xl font-bold text-text wow animate__animated animate__fadeInUp">
            {{ t('ecosystem.projects.featured') }}
          </h2>
          <a href="#all-projects" class="text-primary-light hover:text-primary-dark transition-colors duration-200 wow animate__animated animate__fadeInUp">
            {{ t('ecosystem.projects.viewAll') }}
          </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div 
            v-for="(project, index) in featuredProjects" 
            :key="project.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"
            :class="{
              'animate__delay-0-5s': index === 1,
              'animate__delay-1s': index === 2
            }"
          >
            <img :src="project.image" :alt="project.name" class="w-full h-48 object-cover" />
            <div class="p-6">
              <h3 class="text-xl font-bold text-text mb-2">{{ project.name }}</h3>
              <p class="text-text-secondary mb-4">{{ project.description }}</p>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 bg-background text-primary-light text-xs rounded-full">
                  {{ t(`ecosystem.categories.${project.category}`) }}
                </span>
                <a 
                  :href="project.url" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  class="text-primary-light hover:text-primary-dark transition-colors duration-200"
                >
                  {{ t('ecosystem.projects.learnMore') }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- All Projects Section -->
    <section id="all-projects" class="py-16 px-6 md:px-12 lg:px-24 bg-background-light">
      <div class="container mx-auto">
        <h2 class="text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp">
          {{ t('ecosystem.title') }}
        </h2>
        
        <!-- Categories Filter -->
        <div class="flex flex-wrap gap-2 mb-10 wow animate__animated animate__fadeInUp animate__delay-0-5s">
          <button 
            v-for="category in categories" 
            :key="category.id"
            @click="selectCategory(category.id)"
            class="px-4 py-2 rounded-full text-sm transition-colors duration-200"
            :class="selectedCategory === category.id 
              ? 'bg-primary text-text' 
              : 'bg-background-dark text-text-secondary hover:bg-background hover:text-text'"
          >
            {{ category.name }}
          </button>
        </div>
        
        <!-- Projects Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <div 
            v-for="(project, index) in filteredProjects" 
            :key="project.id"
            class="bg-background rounded-xl overflow-hidden shadow-card hover:shadow-lg transition-all duration-300 wow animate__animated animate__fadeIn"
            :class="{
              'animate__delay-0-5s': index % 4 === 1,
              'animate__delay-1s': index % 4 === 2,
              'animate__delay-1-5s': index % 4 === 3
            }"
          >
            <img :src="project.image" :alt="project.name" class="w-full h-40 object-cover" />
            <div class="p-5">
              <h3 class="text-lg font-bold text-text mb-2">{{ project.name }}</h3>
              <p class="text-text-secondary text-sm mb-4">{{ project.description }}</p>
              <div class="flex justify-between items-center">
                <span class="px-3 py-1 bg-background-dark text-primary-light text-xs rounded-full">
                  {{ t(`ecosystem.categories.${project.category}`) }}
                </span>
                <a 
                  :href="project.url" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  class="text-primary-light hover:text-primary-dark transition-colors duration-200 text-sm"
                >
                  {{ t('ecosystem.projects.learnMore') }}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Partners Section -->
    <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">
            {{ t('ecosystem.partners.title') }}
          </h2>
          <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeInUp animate__delay-0-5s">
            {{ t('ecosystem.partners.subtitle') }}
          </p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
          <a 
            v-for="(partner, index) in partners" 
            :key="partner.id"
            :href="partner.url"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center justify-center p-6 bg-background-light rounded-lg hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__fadeIn"
            :class="{
              'animate__delay-0-5s': index % 6 === 1,
              'animate__delay-1s': index % 6 === 2,
              'animate__delay-1-5s': index % 6 === 3,
              'animate__delay-2s': index % 6 === 4,
              'animate__delay-2-5s': index % 6 === 5
            }"
          >
            <img :src="partner.logo" :alt="partner.name" class="max-h-12 max-w-full" />
          </a>
        </div>
      </div>
    </section>
    
    <!-- Join Ecosystem CTA -->
    <section class="py-20 px-6 md:px-12 lg:px-24 bg-primary bg-opacity-10 relative overflow-hidden">
      <div class="container mx-auto relative z-10">
        <div class="max-w-3xl mx-auto text-center">
          <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp">
            {{ t('ecosystem.join.title') }}
          </h2>
          <p class="text-text-secondary mb-8 wow animate__animated animate__fadeInUp animate__delay-0-5s">
            {{ t('ecosystem.join.subtitle') }}
          </p>
          <a 
            href="#" 
            class="inline-block px-8 py-3 bg-primary text-text rounded-lg hover:bg-primary-dark transition-colors duration-300 shadow-button wow animate__animated animate__fadeInUp animate__delay-1s"
          >
            {{ t('ecosystem.join.cta') }}
          </a>
        </div>
      </div>
      
      <!-- Background Decoration -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30">
        <div class="absolute top-0 right-0 w-64 h-64 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
        <div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-1s"></div>
      </div>
    </section>
    
    <!-- Developer Resources -->
    <section class="py-16 px-6 md:px-12 lg:px-24">
      <div class="container mx-auto">
        <h2 class="text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp">
          {{ t('ecosystem.resources.title') }}
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <a 
            href="#" 
            class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            <h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.docs') }}</h3>
            <p class="text-text-secondary text-sm">
              {{ t('ecosystem.resources.docs') }}
            </p>
          </a>
          
          <a 
            href="#" 
            class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-0-5s"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
            <h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.github') }}</h3>
            <p class="text-text-secondary text-sm">
              {{ t('ecosystem.resources.github') }}
            </p>
          </a>
          
          <a 
            href="#" 
            class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-1s"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.grants') }}</h3>
            <p class="text-text-secondary text-sm">
              {{ t('ecosystem.resources.grants') }}
            </p>
          </a>
          
          <a 
            href="#" 
            class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-1-5s"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            <h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.community') }}</h3>
            <p class="text-text-secondary text-sm">
              {{ t('ecosystem.resources.community') }}
            </p>
          </a>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
/* 添加一些额外的动画效果 */
.hover\:transform:hover {
  transform: translateY(-5px);
}
</style>