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导入，使用原生实现

const { getConfigImage } = useConfig();

import { queryTechnologyList } from '@/api/modules/technology';
import { queryAppList } from '@/api/modules/ecosystem';
import { querySummaryList } from '@/api/modules/config';

import { useSummary } from '@/utils/config';
const { getSummaryDescription } = useSummary();

// 返回的是富文本 还需要分段
const tecDesList = computed(() => {
  return getSummaryDescription('config_structural_of_technology').split('\n');
});

const { t } = useI18n();

// 轮播控制
const currentAppIndex = ref(0);
const totalApps = 8; // 假设有8个应用

// 显示下一个应用
const showNextApp = () => {
  currentAppIndex.value = (currentAppIndex.value + 1) % totalApps;
};

// 显示上一个应用
const showPrevApp = () => {
  currentAppIndex.value = (currentAppIndex.value - 1 + totalApps) % totalApps;
};

// 技术架构数据
const architectures = [
  {
    title: '聚合层',
    description: '负责汇总并优化来自各个区块链的交易请求，提高系统整体处理效率。',
    icon: 'carbon:data-1',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    title: '跨链层',
    description: '实现不同区块链之间资产和信息的互通互联，支持多链生态系统整合。',
    icon: 'carbon:connect',
    color: 'secondary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    title: '路由层',
    description: '提供智能路径规划和优化，确定交易的最佳执行路径，降低成本并提高效率。',
    icon: 'carbon:path-finder',
    color: 'accent',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    title: '应用层',
    description: '提供各类去中心化应用接口和服务，支持第三方开发者基于平台构建创新应用。',
    icon: 'carbon:application',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  }
];

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

// 获取核心技术列表
const fetchTechnologies = async () => {
  try {
    const result = await queryTechnologyList({
      pageSize: 10,
      pageNo: 1
    });
    if (result && result.length > 0) {
      // 为每个技术项添加颜色和图标属性
      technologies.value = result.map((item, index) => {
        const colors = ['primary', 'secondary', 'accent', 'primary'];
        const icons = ['carbon:security', 'carbon:growth', 'carbon:currency', 'carbon:bridge'];
        return {
          ...item,
          color: colors[index % colors.length],
          icon: icons[index % icons.length]
        };
      });
    } else {
      // 使用默认数据
      technologies.value = defaultTechnologies;
    }
  } catch (error) {
    console.error('获取核心技术列表失败:', error);
    technologies.value = defaultTechnologies;
  }
};

// 默认核心技术数据（当API数据不可用时使用）
const defaultTechnologies = [
  {
    id: '1',
    title: '技术壁垒',
    description: 'MOSE采用创新的多层零知识证明协议，确保交易隐私性的同时保持可验证性和安全性。该技术已申请多项国际专利，形成独特的技术壁垒。',
    icon: 'carbon:security',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    id: '2',
    title: '生态优势',
    description: '基于创新的跨链技术，MOSE能够无缝连接多种主流区块链，使用户可以在不同链上自由转移和交易资产，同时保持完全隐私。',
    icon: 'carbon:growth',
    color: 'secondary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    id: '3',
    title: '混币器',
    description: 'MOSE独创的"混币器"技术，将用户闲置的资产通过智能合约自动参与DeFi流动性挖矿，为用户创造被动收益，同时增强整个生态系统的流动性。',
    icon: 'carbon:currency',
    color: 'accent',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    id: '4',
    title: '跨链桥',
    description: 'MOSE跨链桥采用创新的多重签名和状态验证机制，实现资产在不同链间的安全高效转移，并保持交易隐私，解决了传统跨链桥容易成为黑客攻击目标的问题。',
    icon: 'carbon:bridge',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  }
];

// 应用数据
const apps = reactive([
  {
    id: 1,
    name: 'MOSE Wallet',
    description: '多链资产管理钱包，支持所有主流区块链，内置隐私保护功能。',
    image: '/LOGO.png',
    color: 'from-blue-600 to-indigo-900',
    icon: 'carbon:wallet'
  },
  {
    id: 2,
    name: 'MOSE Exchange',
    description: '去中心化交易所，支持跨链交易与隐私交易，流动性共享。',
    image: '/LOGO.png',
    color: 'from-purple-600 to-indigo-900',
    icon: 'carbon:chart-line'
  },
  {
    id: 3,
    name: 'MOSE Bridge',
    description: '安全高效的跨链桥，支持资产在不同区块链之间的无缝转移。',
    image: '/LOGO.png',
    color: 'from-green-600 to-teal-900',
    icon: 'carbon:bridge'
  },
  {
    id: 4,
    name: 'MOSE Pay',
    description: '隐私支付解决方案，为商家和用户提供安全、快速的支付服务。',
    image: '/LOGO.png',
    color: 'from-orange-600 to-red-900',
    icon: 'carbon:purchase'
  },
  {
    id: 5,
    name: 'MOSE DAO',
    description: '去中心化自治组织工具，支持社区治理和决策。',
    image: '/LOGO.png',
    color: 'from-amber-600 to-orange-900',
    icon: 'carbon:group'
  },
  {
    id: 6,
    name: 'MOSE NFT',
    description: '隐私NFT市场，支持创作者版权保护和数字资产交易。',
    image: '/LOGO.png',
    color: 'from-pink-600 to-rose-900',
    icon: 'carbon:image'
  },
  {
    id: 7,
    name: 'MOSE DeFi',
    description: '去中心化金融套件，包括借贷、质押、流动性挖矿等功能。',
    image: '/LOGO.png',
    color: 'from-cyan-600 to-blue-900',
    icon: 'carbon:money'
  },
  {
    id: 8,
    name: 'MOSE 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) {
      appList.value = result;
    } else {
      appList.value = apps;
    }
  } catch (error) {
    console.error('获取应用列表失败:', error);
    appList.value = apps;
  }
};

// 轮播控制
const currentSlide = ref(0);
const autoplayInterval = ref(null);

// 切换到下一张
const nextSlide = () => {
  if (appList.value.length > 0) {
    currentSlide.value = (currentSlide.value + 1) % appList.value.length;
  }
};

// 切换到上一张
const prevSlide = () => {
  if (appList.value.length > 0) {
    currentSlide.value = (currentSlide.value - 1 + appList.value.length) % appList.value.length;
  }
};

// 切换到指定幻灯片
const goToSlide = (index: number) => {
  currentSlide.value = index;
};

// 开始自动播放
const startAutoplay = () => {
  autoplayInterval.value = setInterval(() => {
    nextSlide();
  }, 5000);
};

// 停止自动播放
const stopAutoplay = () => {
  if (autoplayInterval.value) {
    clearInterval(autoplayInterval.value);
    autoplayInterval.value = null;
  }
};

// Swiper实例
let swiper = null;

// 初始化
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();
  
  // 开始自动播放
  startAutoplay();
});

// 初始化Swiper
const initSwiper = () => {
  // 动态加载Swiper
  import('swiper/bundle').then(({ Swiper }) => {
    import('swiper/css/bundle').then(() => {
      // 等待DOM更新
      setTimeout(() => {
        swiper = new Swiper('.swiper-container', {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          loop: true,
          speed: 800,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          coverflowEffect: {
            rotate: 0,
            stretch: 80,
            depth: 200,
            modifier: 1,
            slideShadows: true,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: true,
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      }, 500);
    });
  }).catch(err => {
    console.error('Failed to load Swiper:', err);
  });
};
</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 animate__duration-fast">
            领先的区块链隐私技术
          </h1>
          <p class="text-lg md:text-xl text-text-secondary mb-8 wow animate__animated animate__fadeIn animate__delay-xs animate__duration-fast">
            MOSE通过创新的密码学和跨链技术，为区块链世界构建隐私保护的基础设施
          </p>
          
          <div class="flex justify-center gap-4">
            <a href="#architecture" class="inline-flex items-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" />
            </a>
            <a href="#innovation" class="inline-flex items-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" />
            </a>
          </div>
        </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-sm"></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-md"></div>
      </div>
    </section>
    
    <!-- 技术架构模块 - 4列布局 带底图 -->
    <section id="architecture" class="py-54 px-6 md:px-12 lg:px-32 bg-background-light" :style="{ backgroundImage: `url(${getConfigImage('tec_summary_bg')})` }">
      <div class=" w-full">
        <h2 class="text-3xl md:text-4xl font-bold text-text mb-16 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
          技术架构
        </h2>
        
        <div class="flex flex-wrap justify-between w-full">
          <!-- 动态生成技术架构卡片 -->
          <div 
            v-for="(arch, index) in tecDesList" 
            :key="index"
            class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8 wow animate__animated animate__fadeInUp"
            :class="[`animate__delay-${index}00ms`]"
          >
            <!-- 内容 -->
            <div class="flex flex-col items-center text-center">
              <p class="text-white text-xl font-medium mb-6" v-html="arch"></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">
                了解更多
                <Icon icon="carbon:arrow-right" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 核心技术模块 - 全屏垂直布局 -->
    <section id="innovation" class="relative">
      <!-- 核心技术卡片 - 全屏垂直布局 -->
      <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="[`animate__delay-${index}00ms`]"
      >
        <!-- 背景图片 -->
        <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" 
            :class="{
              'bg-gradient-to-r from-indigo-900/90 via-indigo-900/50 to-transparent': tech.color === 'primary' && index % 2 === 0,
              'bg-gradient-to-l from-indigo-900/90 via-indigo-900/50 to-transparent': tech.color === 'primary' && index % 2 === 1,
              'bg-gradient-to-r from-emerald-900/90 via-emerald-900/50 to-transparent': tech.color === 'secondary' && index % 2 === 0,
              'bg-gradient-to-l from-emerald-900/90 via-emerald-900/50 to-transparent': tech.color === 'secondary' && index % 2 === 1,
              'bg-gradient-to-r from-amber-900/90 via-amber-900/50 to-transparent': tech.color === 'accent' && index % 2 === 0,
              'bg-gradient-to-l from-amber-900/90 via-amber-900/50 to-transparent': tech.color === 'accent' && index % 2 === 1,
              'bg-gradient-to-r from-blue-900/90 via-blue-900/50 to-transparent': tech.color === 'primary' && index === 3 && index % 2 === 0,
              'bg-gradient-to-l from-blue-900/90 via-blue-900/50 to-transparent': tech.color === 'primary' && index === 3 && index % 2 === 1
            }"
          ></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">
                了解更多
                <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>
    </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">
          生态应用
        </h2>
        
        <div class="relative wow animate__animated animate__fadeIn animate__duration-fast">
          <!-- 简单轮播 -->
          <div class="relative overflow-hidden rounded-2xl shadow-lg h-96">
            <div class="relative w-full h-full">
              <div 
                v-for="(app, index) in appList" 
                :key="app.id"
                class="absolute inset-0 transition-opacity duration-500"
                :class="{ 'opacity-100': index === currentSlide, 'opacity-0': index !== currentSlide }"
              >
                <img 
                  :src="app.image" 
                  :alt="app.title" 
                  class="w-full h-full object-cover"
                />
                <!-- 应用信息覆盖层 -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end">
                  <div class="p-8 text-white">
                    <h3 class="text-2xl font-bold mb-2">{{ app.title }}</h3>
                    <p class="text-white/90 mb-4">{{ app.description }}</p>
                    <a 
                      :href="app.link" 
                      target="_blank" 
                      class="inline-flex items-center gap-2 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full text-white text-sm px-4 py-2 transition-all duration-300 border border-white/30"
                    >
                      立即体验
                      <Icon icon="carbon:launch" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 导航按钮 -->
            <button 
              @click="prevSlide" 
              class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-black bg-opacity-30 hover:bg-opacity-50 text-white flex items-center justify-center transition-all duration-300"
            >
              <Icon icon="carbon:chevron-left" />
            </button>
            <button 
              @click="nextSlide" 
              class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-black bg-opacity-30 hover:bg-opacity-50 text-white flex items-center justify-center transition-all duration-300"
            >
              <Icon icon="carbon:chevron-right" />
            </button>
            
            <!-- 分页器 -->
            <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
              <button 
                v-for="(app, index) in appList" 
                :key="index"
                @click="goToSlide(index)"
                class="w-3 h-3 rounded-full transition-all duration-300"
                :class="index === currentSlide ? 'bg-white' : 'bg-white bg-opacity-50'"
              ></button>
            </div>
          </div>
        </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>
/* 动画延迟类 */
.animate__delay-0ms {
  animation-delay: 0ms;
}

.animate__delay-100ms {
  animation-delay: 100ms;
}

.animate__delay-200ms {
  animation-delay: 200ms;
}

.animate__delay-300ms {
  animation-delay: 300ms;
}

/* 慢速旋转 */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

/* Swiper样式覆盖 */
:deep(.swiper-container) {
  padding: 30px 0;
  overflow: visible;
}

:deep(.swiper-slide) {
  width: 350px;
  transition: transform 0.3s;
}

:deep(.swiper-slide-active) {
  transform: scale(1.05);
  z-index: 2;
}

:deep(.swiper-pagination-bullet) {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

:deep(.swiper-pagination-bullet-active) {
  background: var(--color-primary);
  transform: scale(1.2);
}
</style>