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

const { getConfigImage } = useConfig();

import { queryTechnologyList } from '@/api/modules/technology';
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' // 这里替换为实际图片路径
  }
];

// 核心技术数据
const technologies = [
  {
    title: '技术壁垒',
    description: 'MOSE采用创新的多层零知识证明协议，确保交易隐私性的同时保持可验证性和安全性。该技术已申请多项国际专利，形成独特的技术壁垒。',
    icon: 'carbon:security',
    color: 'primary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    title: '生态优势',
    description: '基于创新的跨链技术，MOSE能够无缝连接多种主流区块链，使用户可以在不同链上自由转移和交易资产，同时保持完全隐私。',
    icon: 'carbon:growth',
    color: 'secondary',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    title: '混币器',
    description: 'MOSE独创的"混币器"技术，将用户闲置的资产通过智能合约自动参与DeFi流动性挖矿，为用户创造被动收益，同时增强整个生态系统的流动性。',
    icon: 'carbon:currency',
    color: 'accent',
    image: '/LOGO.png' // 这里替换为实际图片路径
  },
  {
    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'
  }
]);

// 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);
  }
  
  // 初始化Swiper
  initSwiper();
});

// 初始化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="py-16 px-6 md:px-12 lg:px-24" :style="{ backgroundImage: `url(${getConfigImage('tec_created_bg')})` }">
      <div class="container mx-auto">
        <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="space-y-8">
          <div 
            v-for="(tech, index) in technologies" 
            :key="index"
            class="relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 group 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 transition-transform duration-700 group-hover:scale-105" />
              <div 
                class="absolute inset-0" 
                :class="{
                  'bg-gradient-to-r from-indigo-900/90 via-indigo-900/50 to-transparent': tech.color === 'primary',
                  'bg-gradient-to-r from-emerald-900/90 via-emerald-900/50 to-transparent': tech.color === 'secondary',
                  'bg-gradient-to-r from-amber-900/90 via-amber-900/50 to-transparent': tech.color === 'accent',
                  'bg-gradient-to-r from-blue-900/90 via-blue-900/50 to-transparent': tech.color === 'primary' && index === 3
                }"
              ></div>
            </div>
            
            <!-- 内容 -->
            <div class="relative p-8 md:p-12 min-h-[300px] flex flex-col md:flex-row items-center">
              <!-- 左侧内容 -->
              <div class="md:w-1/2 mb-6 md:mb-0">
                <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 font-bold text-white">{{ tech.title }}</h3>
                </div>
                <p class="text-white/90 text-lg md:text-xl leading-relaxed">
                  {{ tech.description }}
                </p>
                
                <!-- 按钮 -->
                <div class="mt-8">
                  <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:pl-8 flex justify-center md:justify-end">
                <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-4 right-8">
              <span class="text-8xl font-bold text-white opacity-10">0{{ index + 1 }}</span>
            </div>
          </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">
          生态应用
        </h2>
        
        <div class="relative wow animate__animated animate__fadeIn animate__duration-fast">
          <!-- Swiper轮播 -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <!-- 应用卡片 -->
              <div 
                v-for="(app, index) in apps" 
                :key="app.id"
                class="swiper-slide"
              >
                <div class="app-card relative overflow-hidden rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 mx-4 my-8 h-[500px]">
                  <!-- 背景渐变 -->
                  <div class="absolute inset-0 bg-gradient-to-br" :class="app.color"></div>
                  
                  <!-- 装饰图形 -->
                  <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
                  <div class="absolute bottom-0 left-0 w-48 h-48 bg-black/10 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
                  
                  <!-- 内容 -->
                  <div class="relative p-8 flex flex-col h-full">
                    <!-- 应用图标 -->
                    <div class="mb-6 flex justify-center">
                      <div class="w-24 h-24 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-4 border-white/30">
                        <Icon :icon="app.icon" class="h-12 w-12 text-white" />
                      </div>
                    </div>
                    
                    <!-- 应用名称 -->
                    <h3 class="text-3xl font-bold text-white text-center mb-4">{{ app.name }}</h3>
                    
                    <!-- 应用描述 -->
                    <p class="text-white/90 text-center text-lg mb-8">
                      {{ app.description }}
                    </p>
                    
                    <!-- 装饰线 -->
                    <div class="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
                    
                    <!-- 功能列表 -->
                    <div class="space-y-4 mt-auto">
                      <div class="flex items-center text-white">
                        <Icon icon="carbon:checkmark" class="h-5 w-5 mr-3" />
                        <span>多链支持</span>
                      </div>
                      <div class="flex items-center text-white">
                        <Icon icon="carbon:checkmark" class="h-5 w-5 mr-3" />
                        <span>隐私保护</span>
                      </div>
                      <div class="flex items-center text-white">
                        <Icon icon="carbon:checkmark" class="h-5 w-5 mr-3" />
                        <span>安全加密</span>
                      </div>
                    </div>
                    
                    <!-- 按钮 -->
                    <div class="mt-8 flex justify-center">
                      <button class="px-6 py-3 bg-white text-primary font-medium rounded-full hover:bg-opacity-90 transition-all duration-300 flex items-center gap-2">
                        立即体验
                        <Icon icon="carbon:launch" />
                      </button>
                    </div>
                    
                    <!-- 应用编号 -->
                    <div class="absolute top-6 right-6 bg-white/20 backdrop-blur-sm w-8 h-8 rounded-full flex items-center justify-center">
                      <span class="text-white font-bold">{{ app.id }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 分页器 -->
            <div class="swiper-pagination mt-8"></div>
          </div>
          
          <!-- 导航按钮 -->
          <div class="swiper-button-prev !text-primary after:!text-lg"></div>
          <div class="swiper-button-next !text-primary after:!text-lg"></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);
}

:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: all 0.3s;
}

:deep(.swiper-button-prev:hover),
:deep(.swiper-button-next:hover) {
  background: rgba(255, 255, 255, 0.5);
}

:deep(.swiper-button-prev:after),
:deep(.swiper-button-next:after) {
  font-size: 20px;
  font-weight: bold;
}

/* 卡片悬停效果 */
.app-card {
  transition: all 0.5s;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.app-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
</style>