You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
657 lines
23 KiB
657 lines
23 KiB
<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>
|