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

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { ref, onMounted, reactive, computed } from 'vue';
import ArchitectureModule from '@/components/technology/ArchitectureModule.vue';
import InnovationModule from '@/components/technology/InnovationModule.vue';
import EcosystemIntegrationModule from '@/components/technology/EcosystemIntegrationModule.vue';
import AppListModule from '@/components/ecosystem/AppListModule.vue';
import { useI18n } from 'vue-i18n';
import { useConfig } from '@/utils/config';
// 导入Swiper相关组件和模块
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Navigation, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

import type {TechnologyItem } from '@/api/modules/technology' 

const { getConfigImage } = useConfig();

import { queryTechnologyList, queryStructuralList } from '@/api/modules/technology';
import { queryAppList } from '@/api/modules/ecosystem';







const { t } = useI18n();





// 从API获取核心技术数据
const technologies = ref([]);



// 获取核心技术列表
const fetchTechnologies = async () => {
  try {
    const result = await queryTechnologyList({
      pageSize: 10,
      pageNo: 1
    });
    if (result && result.length > 0) {
      // 只使用API返回的图片数据，文本全部使用i18n
      technologies.value = result.map((item, index) => {
        const colors = ['primary', 'secondary', 'accent', 'primary'];
        const icons = ['carbon:security', 'carbon:growth', 'carbon:currency', 'carbon:bridge'];
        return {
          id: item.id || `${index + 1}`,
          title: t(`technology.core.tech${index + 1}.title`),
          description: t(`technology.core.tech${index + 1}.description`),
          image: item.image || '/LOGO.png',
          color: colors[index % colors.length],
          icon: icons[index % icons.length]
        };
      });
    } else {
      // 使用默认数据
      technologies.value = defaultTechnologies.value;
    }
  } catch (error) {
    console.error('Failed to load technologies:', error);
    technologies.value = defaultTechnologies.value;
  }
};

// 默认核心技术数据（当API数据不可用时使用）
const defaultTechnologies = computed(() => [
  {
    id: '1',
    title: t('technology.core.tech_barrier.title'),
    description: t('technology.core.tech_barrier.description'),
    icon: 'carbon:security',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    id: '2',
    title: t('technology.core.ecosystem_advantage.title'),
    description: t('technology.core.ecosystem_advantage.description'),
    icon: 'carbon:growth',
    color: 'secondary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    id: '3',
    title: t('technology.core.mixer.title'),
    description: t('technology.core.mixer.description'),
    icon: 'carbon:currency',
    color: 'accent',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    id: '4',
    title: t('technology.core.crosschain_bridge.title'),
    description: t('technology.core.crosschain_bridge.description'),
    icon: 'carbon:bridge',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  }
]);



// 应用数据
const apps = computed(() => [
  {
    id: 1,
    name: t('technology.apps.wallet.name'),
    description: t('technology.apps.wallet.description'),
    image: '/LOGO.png',
    color: 'from-blue-600 to-indigo-900',
    icon: 'carbon:wallet'
  },
  {
    id: 2,
    name: t('technology.apps.exchange.name'),
    description: t('technology.apps.exchange.description'),
    image: '/LOGO.png',
    color: 'from-purple-600 to-indigo-900',
    icon: 'carbon:chart-line'
  },
  {
    id: 3,
    name: t('technology.apps.bridge.name'),
    description: t('technology.apps.bridge.description'),
    image: '/LOGO.png',
    color: 'from-green-600 to-teal-900',
    icon: 'carbon:bridge'
  },
  {
    id: 4,
    name: t('technology.apps.pay.name'),
    description: t('technology.apps.pay.description'),
    image: '/LOGO.png',
    color: 'from-orange-600 to-red-900',
    icon: 'carbon:purchase'
  },
  {
    id: 5,
    name: t('technology.apps.dao.name'),
    description: t('technology.apps.dao.description'),
    image: '/LOGO.png',
    color: 'from-amber-600 to-orange-900',
    icon: 'carbon:group'
  },
  {
    id: 6,
    name: t('technology.apps.nft.name'),
    description: t('technology.apps.nft.description'),
    image: '/LOGO.png',
    color: 'from-pink-600 to-rose-900',
    icon: 'carbon:image'
  },
  {
    id: 7,
    name: t('technology.apps.defi.name'),
    description: t('technology.apps.defi.description'),
    image: '/LOGO.png',
    color: 'from-cyan-600 to-blue-900',
    icon: 'carbon:money'
  },
  {
    id: 8,
    name: t('technology.apps.id.name'),
    description: t('technology.apps.id.description'),
    image: '/LOGO.png',
    color: 'from-emerald-600 to-green-900',
    icon: 'carbon:user'
  }
]);

// 从API获取应用列表
const appList = ref([]);

// 获取应用列表
const fetchAppList = async () => {
  try {
    const result = await queryAppList({
      pageSize: 10,
      pageNo: 1
    });
    if (result && result.length > 0) {
      // 只使用API返回的图片数据，文本全部使用i18n
      appList.value = result.map((item, index) => {
        const colors = [
          'from-blue-600 to-indigo-900',
          'from-purple-600 to-indigo-900',
          'from-green-600 to-teal-900',
          'from-orange-600 to-red-900',
          'from-amber-600 to-orange-900',
          'from-pink-600 to-rose-900',
          'from-cyan-600 to-blue-900',
          'from-emerald-600 to-green-900'
        ];
        const icons = [
          'carbon:wallet', 'carbon:chart-line', 'carbon:bridge', 'carbon:purchase',
          'carbon:group', 'carbon:image', 'carbon:money', 'carbon:user'
        ];
        const appKeys = ['wallet', 'exchange', 'bridge', 'pay', 'dao', 'nft', 'defi', 'id'];
        const appKey = appKeys[index] || `app${index + 1}`;
        return {
          id: item.id || index + 1,
          name: t(`technology.apps.${appKey}.name`),
          description: t(`technology.apps.${appKey}.description`),
          image: item.image || '/LOGO.png',
          color: colors[index % colors.length],
          icon: icons[index % icons.length]
        };
      });
    } else {
      appList.value = apps.value;
    }
  } catch (error) {
    console.error('Failed to load app list:', error);
    appList.value = apps.value;
  }
};

// 加载状态
const loading = ref(false);

const structural = ref<TechnologyItem[]>([]);

// 从API获取创新技术数据
const fetchInnovation = async () => {
  try {
    const result = await queryStructuralList({
      pageSize: 10,
      pageNo: 1
    });
    if (result && result.length > 0) {
      // 只使用API返回的图片数据，文本全部使用i18n
      structural.value = result.map((item, index) => ({
        id: item.id || `${index + 1}`,
        title: t(`technology.architecture.layers.layer${index + 1}.title`),
        description: t(`technology.architecture.layers.layer${index + 1}.description`),
        image: item.image || '/LOGO.png'
      }));
      console.log('Structural data with i18n:', structural.value);
    } else {
      // 使用默认的i18n数据
      structural.value = Array.from({ length: 4 }, (_, index) => ({
        id: `${index + 1}`,
        title: t(`technology.architecture.layers.layer${index + 1}.title`),
        description: t(`technology.architecture.layers.layer${index + 1}.description`),
        image: '/LOGO.png'
      }));
    }
  } catch (error) {
    console.error('Failed to load innovation data:', error);
    // 使用默认的i18n数据作为fallback
    structural.value = Array.from({ length: 4 }, (_, index) => ({
      id: `${index + 1}`,
      title: t(`technology.architecture.layers.layer${index + 1}.title`),
      description: t(`technology.architecture.layers.layer${index + 1}.description`),
      image: '/LOGO.png'
    }));
  }
}

// Swiper配置
const swiperOptions = {
  modules: [Pagination, Navigation, Autoplay],
  slidesPerView: 1,
  spaceBetween: 0,
  loop: true,
  grabCursor: true,
  pagination: {
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
};

// 初始化
onMounted(() => {
  // 初始化WOW.js动画
  try {
    const WOW = window.WOW;
    if (WOW) {
      new WOW({
        boxClass: 'wow',
        animateClass: 'animate__animated',
        offset: 100,
        mobile: true,
        live: true
      }).init();
    }
  } catch (error) {
    console.error('Failed to initialize WOW.js:', error);
  }
  
  // 获取核心技术数据
  fetchTechnologies();
  
  // 获取应用列表
  fetchAppList();

  // 获取创新技术数据
  fetchInnovation();
});


</script>

<template>
  <div class="bg-background min-h-screen">
    <!-- Hero Section -->
    <section class="relative py-16 md:py-24 px-4 md:px-12 lg:px-24 bg-background-dark overflow-hidden">
      <div class="container mx-auto relative z-10">
        <div class="max-w-4xl mx-auto text-center">
          <!-- 移动端优化的标题 -->
          <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 md:mb-6 leading-tight wow animate__animated animate__fadeInDown animate__duration-fast">
            {{ t('technology.hero.title') }}
          </h1>
          
          <!-- 移动端优化的副标题 -->
          <p class="text-base sm:text-lg md:text-xl text-text-secondary mb-8 md:mb-10 leading-relaxed px-2 wow animate__animated animate__fadeIn animate__delay-xs animate__duration-fast">
            {{ t('technology.hero.description') }}
          </p>
          
          <!-- 移动端优化的按钮组 -->
          <div class="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4 px-4 sm:px-0">
            <a href="#architecture" class="inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200">
              <Icon icon="carbon:arrow-down" />
              {{ t('technology.buttons.learn_architecture') }}
            </a>
            <a href="#innovation" class="inline-flex items-center justify-center gap-2 bg-transparent border border-primary hover:bg-primary-light/10 text-primary font-medium py-3 px-6 rounded-lg transition-colors duration-200">
              <Icon icon="carbon:launch" />
              {{ t('technology.buttons.core_innovation') }}
            </a>
          </div>
        </div>
      </div>
      
      <!-- 优化的背景装饰 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-20">
        <!-- 移动端优化的装饰球 -->
        <div class="absolute -top-16 -left-16 w-32 h-32 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
        <div class="absolute top-1/2 -right-8 w-24 h-24 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-sm"></div>
        <div class="absolute -bottom-12 left-1/4 w-28 h-28 md:w-72 md:h-72 rounded-full bg-gradient-to-br from-cyan-500 to-blue-500 blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-md"></div>
        
        <!-- 移动端新增的小装饰点 -->
        <div class="absolute top-1/4 right-1/4 w-2 h-2 md:w-4 md:h-4 rounded-full bg-white opacity-60 animate-ping"></div>
        <div class="absolute bottom-1/3 left-1/3 w-1 h-1 md:w-3 md:h-3 rounded-full bg-blue-400 opacity-80 animate-pulse"></div>
      </div>
      
      <!-- 移动端新增的网格背景 -->
      <div class="absolute inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.3) 1px, transparent 0); background-size: 20px 20px;"></div>
      </div>
    </section>
    
    <!-- 技术架构模块 - 4列布局 带底图 (优化移动端显示) -->
    <section id="architecture" class="bg-background-light">
      <div class="w-full bg-background-dark">
        <h2 class="text-3xl md:text-4xl font-bold text-white pt-8 mb-8 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
          {{ t('technology.architecture.title') }}
        </h2>
        
        <!-- 移动端自然流动展示 -->
        <div class="md:hidden architecture-gallery">
          <div 
            v-for="(arch, index) in structural" 
            :key="index"
            class="architecture-section h-[80vh] relative overflow-hidden bg-cover bg-center flex items-center"
            :style="{backgroundImage: `url(${arch.image})`}"
          >
            <!-- 背景遮罩 -->
            <div class="absolute inset-0 bg-black/40"></div>
            
            <!-- 内容区域 -->
            <div class="relative z-10 px-8 py-12 text-left max-w-md">
               <h3 class="text-3xl font-bold text-white mb-6">{{ t(`technology.architecture.layers.layer${index + 1}.title`) }}</h3>
               <div class="text-white/90 text-lg leading-relaxed mb-8" v-html="t(`technology.architecture.layers.layer${index + 1}.description`)"></div>
              
              <!-- 特性列表 -->
              <div v-if="arch.features" class="space-y-3 mb-8">
                <div v-for="(feature, idx) in arch.features" :key="idx" class="flex items-center text-white/80">
                  <div class="w-2 h-2 bg-white rounded-full mr-3"></div>
                  <span>{{ feature }}</span>
                </div>
              </div>
              
              <!-- 按钮 -->
              <button class="px-6 py-3 bg-white/20 backdrop-blur-sm border border-white/30 text-white rounded-lg hover:bg-white/30 transition-all duration-300 flex items-center gap-2">
                {{ t('common.buttons.learn_more') }}
                <Icon icon="carbon:arrow-right" />
              </button>
            </div>
            
            <!-- 装饰元素 -->
            <div class="absolute inset-0 pointer-events-none">
              <!-- 随机位置的装饰圆圈 -->
              <div 
                v-for="i in 3" 
                :key="i"
                class="absolute w-20 h-20 rounded-full border border-white/20"
                :class="`animate-float${i % 2 === 0 ? '-reverse' : ''}`"
                :style="{
                  top: `${20 + (i * 25)}%`,
                  right: `${10 + (i * 15)}%`,
                  animationDelay: `${i * 2}s`
                }"
              ></div>
              
              <!-- 渐变装饰 -->
              <div class="absolute top-1/4 right-1/4 w-32 h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-xl animate-float"></div>
              <div class="absolute bottom-1/3 right-1/3 w-24 h-24 bg-gradient-to-br from-green-500/20 to-blue-500/20 rounded-full blur-xl animate-float-reverse" style="animation-delay: 4s;"></div>
            </div>
            
            <!-- 序号装饰 -->
            <div class="absolute bottom-8 right-8">
              <span class="text-6xl font-bold text-white/10">0{{ index + 1 }}</span>
            </div>
            
            <!-- 滚动提示 -->
            <div v-if="index < structural.length - 1" class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white/60 animate-bounce">
              <Icon icon="carbon:arrow-down" class="h-6 w-6" />
            </div>
          </div>
        </div>
        
        <!-- 桌面端网格布局 -->
        <div class="hidden md:flex flex-wrap justify-between w-full">
          <!-- 动态生成技术架构卡片 (桌面端) -->
          <div 
            v-for="(arch, index) in structural" 
            :key="index"
            class="sm:w-1/2 lg:w-1/4 px-4 mb-8 wow animate__animated animate__fadeInUp flex-1 bg-background-dark py-64 relative"
            :style="{backgroundImage: `url(${arch.image})`}"
            :class="[`delay-${index*100}`]"
          >
            <!-- 内容 -->
             <div class="flex flex-col items-center text-center">
               <h4 class="text-white text-xl font-medium mb-6">{{ t(`technology.architecture.layers.layer${index + 1}.title`) }}</h4>
               <p class="text-white text-sm font-medium mb-6 px-14" v-html="t(`technology.architecture.layers.layer${index + 1}.description`)"></p>
              
              <!-- 按钮 -->
              <button class="px-6 py-2 bg-red-600 hover:bg-red-700 rounded-sm text-white text-sm flex items-center gap-2 transition-all duration-300 absolute bottom-40  transform %">
                {{ t('common.buttons.learn_more') }}
                <Icon icon="carbon:arrow-right" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 核心技术模块 - 优化移动端显示 -->
    <section id="innovation" class="relative">
      <!-- 移动端垂直排列布局 -->
      <div class="md:hidden bg-background-dark py-12 px-4">
        <h2 class="text-3xl font-bold text-white mb-8 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
          {{ t('technology.innovation.title') }}
        </h2>
        
        <!-- 移动端垂直滚动列表 -->
        <div class="space-y-6">
          <div 
            v-for="(tech, index) in technologies" 
            :key="tech.id"
            class="bg-background rounded-xl overflow-hidden shadow-lg wow animate__animated animate__fadeInUp"
            :class="[`animate__delay-${index}s`]"
          >
            <!-- 图片部分 -->
            <div class="h-48 relative">
              <img :src="tech.image" :alt="tech.title" class="w-full h-full object-cover" />
              <div 
                class="absolute inset-0" 
                :class="{
                  'bg-gradient-to-b from-transparent to-indigo-900/90': tech.color === 'primary',
                  'bg-gradient-to-b from-transparent to-emerald-900/90': tech.color === 'secondary',
                  'bg-gradient-to-b from-transparent to-amber-900/90': tech.color === 'accent',
                  'bg-gradient-to-b from-transparent to-blue-900/90': tech.color === 'primary' && index === 3
                }"
              ></div>
              
              <!-- 图标 -->
              <div class="absolute bottom-4 left-4 flex items-center">
                <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center mr-3">
                  <Icon :icon="tech.icon" class="h-6 w-6" :class="`text-${tech.color}`" />
                </div>
                <h3 class="text-2xl font-bold text-white">{{ tech.title }}</h3>
              </div>
            </div>
            
            <!-- 内容部分 -->
            <div class="p-6">
              <div class="text-text-secondary text-sm leading-relaxed mb-6" v-html="tech.description"></div>
              
              <!-- 按钮 -->
              <button class="w-full py-3 bg-primary hover:bg-primary-dark text-white text-sm font-medium rounded-lg flex items-center justify-center gap-2 transition-all duration-300">
                {{ t('common.buttons.learn_more') }}
                <Icon icon="carbon:arrow-right" />
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 桌面端全屏垂直布局 -->
      <div class="hidden md:block">
        <div 
          v-for="(tech, index) in technologies" 
          :key="tech.id"
          class="relative w-full h-screen flex items-center justify-center overflow-hidden wow animate__animated animate__fadeInUp"
          :class="[`delay-${index*100}`]"
        >
          <!-- 背景图片 -->
          <div class="absolute inset-0 w-full h-full">
            <img :src="tech.image" :alt="tech.title" class="w-full h-full object-cover" />
            <div 
              class="absolute inset-0" 
              
            ></div>
          </div>
          
          <!-- 内容 - 左右交替布局 -->
          <div class="relative z-10 w-full max-w-7xl mx-auto px-8 md:px-12 lg:px-24 flex flex-col md:flex-row items-center">
            <!-- 左侧内容 (偶数索引) 或 右侧内容 (奇数索引) -->
            <div 
              class="md:w-1/2 mb-8 md:mb-0"
              :class="{ 'order-1': index % 2 === 0, 'order-2': index % 2 === 1 }"
            >
              <div class="flex items-center mb-6">
                <div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center mr-4">
                  <Icon :icon="tech.icon" class="h-8 w-8" :class="`text-${tech.color}`" />
                </div>
                <h3 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white">{{ tech.title }}</h3>
              </div>
              <div class="text-white/90 text-lg md:text-xl leading-relaxed mb-6" v-html="tech.description">
              </div>
              
              <!-- 按钮 -->
              <div>
                <button class="px-6 py-3 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full text-white text-base flex items-center gap-2 transition-all duration-300 border border-white/30">
                  {{ t('common.buttons.learn_more') }}
                  <Icon icon="carbon:arrow-right" />
                </button>
              </div>
            </div>
            
            <!-- 右侧装饰元素 (偶数索引) 或 左侧装饰元素 (奇数索引) -->
            <div 
              class="md:w-1/2 md:px-12 flex justify-center"
              :class="{ 
                'order-2 md:justify-end': index % 2 === 0, 
                'order-1 md:justify-start': index % 2 === 1 
              }"
            >
              <div 
                class="w-48 h-48 md:w-64 md:h-64 rounded-full border-2 border-white/20 flex items-center justify-center relative overflow-hidden"
                :class="{
                  'bg-indigo-900/20': tech.color === 'primary',
                  'bg-emerald-900/20': tech.color === 'secondary',
                  'bg-amber-900/20': tech.color === 'accent',
                  'bg-blue-900/20': tech.color === 'primary' && index === 3
                }"
              >
                <!-- 内圈 -->
                <div class="w-32 h-32 md:w-40 md:h-40 rounded-full border border-white/40 absolute animate-spin-slow"></div>
                
                <!-- 技术图标 -->
                <div class="w-20 h-20 md:w-24 md:h-24 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center">
                  <Icon :icon="tech.icon" class="h-10 w-10 md:h-12 md:w-12" :class="`text-${tech.color}`" />
                </div>
                
                <!-- 装饰点 -->
                <div class="absolute top-1/4 right-1/4 w-3 h-3 rounded-full bg-white"></div>
                <div class="absolute bottom-1/4 left-1/4 w-3 h-3 rounded-full bg-white"></div>
              </div>
            </div>
          </div>
          
          <!-- 序号装饰 -->
          <div 
            class="absolute bottom-8"
            :class="{ 'right-12': index % 2 === 0, 'left-12': index % 2 === 1 }"
          >
            <span class="text-9xl font-bold text-white opacity-10">0{{ index + 1 }}</span>
          </div>
          
          <!-- 滚动提示 -->
          <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white/60 animate-bounce">
            <Icon icon="carbon:arrow-down" class="h-6 w-6" />
          </div>
        </div>
      </div>
    </section>
    
    <!-- 应用程序模块 - Swiper轮播 (重新实现) -->
    <section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light relative overflow-hidden" :style="{ backgroundImage: `url(${getConfigImage('eco_app_bg')})` }">
      <div class="container mx-auto relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold text-text mb-12 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
          {{ t('technology.integration.title') }}
        </h2>
        
        <div v-if="loading" class="flex justify-center py-20">
          <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
        </div>
        
        <div v-else class="relative overflow-hidden rounded-2xl shadow-lg">
          <!-- 重新实现的Swiper轮播 (单图模式) -->
          <Swiper
            v-bind="swiperOptions"
            class="mySwiper"
          >
            <SwiperSlide v-for="app in appList" :key="app.id" class="flex justify-center items-center">
              <div class="w-full h-full rounded-xl overflow-hidden shadow-xl flex flex-col p-5 transition-transform duration-300 hover:translate-y-[-10px] bg-cover bg-center relative" :style="{ backgroundImage: `url(${app.image})` }">
                <div class="absolute inset-0 bg-gradient-to-b from-black/30 to-black/80 z-[1]"></div>
                <div class="w-[60px] h-[60px] rounded-full bg-white/20 flex justify-center items-center mb-5 relative z-[2]">
                  <img :src="app.image" alt="" />
                </div>
                <div class="flex-1 flex flex-col relative z-[2]">
                  <h3 class="text-2xl font-bold text-white mb-2.5">{{ app.name }}</h3>
                  <p class="text-base text-white/80 mb-5 flex-1" v-html="app.description"></p>
                  <a 
                    :href="app.link" 
                    target="_blank" 
                    class="inline-flex items-center gap-2 bg-white/20 text-white py-2 px-4 rounded-full text-sm transition-colors duration-300 border border-white/30 hover:bg-white/30 w-fit"
                  >
                    {{ t('common.buttons.try_now') }}
                    <Icon icon="carbon:launch" />
                  </a>
                </div>
              </div>
            </SwiperSlide>
            
            <!-- 自定义导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 自定义分页器 -->
            <div class="swiper-pagination"></div>
          </Swiper>
        </div>
      </div>
      
      <!-- 背景装饰 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-5 pointer-events-none">
        <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full border border-primary"></div>
        <div class="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full border border-secondary"></div>
        <div class="absolute top-3/4 left-3/4 w-48 h-48 rounded-full border border-accent"></div>
      </div>
    </section>
    
    <!-- 保留原有模块 -->
    <!-- <div class="py-16 px-6 md:px-12 lg:px-24 bg-background">
      <ArchitectureModule />
    </div> -->
    
    <!-- 保留原有模块 -->
    <!-- <div class="py-16 px-6 md:px-12 lg:px-24 bg-background-light">
      <InnovationModule />
    </div> -->
    
    <!-- 保留原有模块 -->
    <!-- <div class="py-16 px-6 md:px-12 lg:px-24">
      <EcosystemIntegrationModule />
    </div> -->
  </div>
</template> 

<style scoped>
@reference "tailwindcss";

/* 自定义动画 - 只保留无法用Tailwind实现的部分 */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* 隐藏滚动条但保留功能 */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Swiper相关样式 - 这部分需要保留，因为Swiper组件需要特定样式 */
:deep(.tech-swiper .swiper-pagination) {
  @apply bottom-0;
}

:deep(.tech-swiper .swiper-pagination-bullet) {
  @apply w-2 h-2 bg-white/50 opacity-100 transition-all duration-300;
}

:deep(.tech-swiper .swiper-pagination-bullet-active) {
  @apply bg-white scale-110;
}

:deep(.mySwiper) {
  @apply w-full pt-5 pb-10;
}

:deep(.swiper-slide) {
  @apply bg-center bg-cover h-[400px];
}

:deep(.swiper-button-next),
:deep(.swiper-button-prev) {
  @apply text-white w-10 h-10 rounded-full bg-black/50 transition-colors duration-300;
}

:deep(.swiper-button-next:hover),
:deep(.swiper-button-prev:hover) {
  @apply bg-black/70;
}

:deep(.swiper-button-next:after),
:deep(.swiper-button-prev:after) {
  @apply text-lg;
}

:deep(.swiper-pagination-bullet) {
  @apply w-2.5 h-2.5 bg-white/50 opacity-100 transition-all duration-300;
}

:deep(.swiper-pagination-bullet-active) {
  @apply bg-white scale-110;
}

:deep(.swiper-pagination) {
  @apply bottom-2.5;
}

/* 移动端隐藏导航按钮 */
@media (max-width: 640px) {
  :deep(.swiper-button-next),
  :deep(.swiper-button-prev) {
    @apply hidden;
  }
}
</style>