|
|
|
@ -7,10 +7,12 @@ import EcosystemIntegrationModule from '@/components/technology/EcosystemIntegra |
|
|
|
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'; |
|
|
|
@ -21,8 +23,6 @@ const tecDesList = computed(() => { |
|
|
|
return getSummaryDescription('config_structural_of_technology').split('\n'); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n(); |
|
|
|
|
|
|
|
// 轮播控制 |
|
|
|
@ -71,9 +71,41 @@ const architectures = [ |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
// 核心技术数据 |
|
|
|
const technologies = [ |
|
|
|
// 从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', |
|
|
|
@ -81,6 +113,7 @@ const technologies = [ |
|
|
|
image: '/LOGO.png' // 这里替换为实际图片路径 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
title: '生态优势', |
|
|
|
description: '基于创新的跨链技术，MOSE能够无缝连接多种主流区块链，使用户可以在不同链上自由转移和交易资产，同时保持完全隐私。', |
|
|
|
icon: 'carbon:growth', |
|
|
|
@ -88,6 +121,7 @@ const technologies = [ |
|
|
|
image: '/LOGO.png' // 这里替换为实际图片路径 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
title: '混币器', |
|
|
|
description: 'MOSE独创的"混币器"技术，将用户闲置的资产通过智能合约自动参与DeFi流动性挖矿，为用户创造被动收益，同时增强整个生态系统的流动性。', |
|
|
|
icon: 'carbon:currency', |
|
|
|
@ -95,6 +129,7 @@ const technologies = [ |
|
|
|
image: '/LOGO.png' // 这里替换为实际图片路径 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
title: '跨链桥', |
|
|
|
description: 'MOSE跨链桥采用创新的多重签名和状态验证机制，实现资产在不同链间的安全高效转移，并保持交易隐私，解决了传统跨链桥容易成为黑客攻击目标的问题。', |
|
|
|
icon: 'carbon:bridge', |
|
|
|
@ -171,6 +206,65 @@ const apps = reactive([ |
|
|
|
} |
|
|
|
]); |
|
|
|
|
|
|
|
// 从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; |
|
|
|
|
|
|
|
@ -192,8 +286,14 @@ onMounted(() => { |
|
|
|
console.error('Failed to initialize WOW.js:', error); |
|
|
|
} |
|
|
|
|
|
|
|
// 初始化Swiper |
|
|
|
initSwiper(); |
|
|
|
// 获取核心技术数据 |
|
|
|
fetchTechnologies(); |
|
|
|
|
|
|
|
// 获取应用列表 |
|
|
|
fetchAppList(); |
|
|
|
|
|
|
|
// 开始自动播放 |
|
|
|
startAutoplay(); |
|
|
|
}); |
|
|
|
|
|
|
|
// 初始化Swiper |
|
|
|
@ -303,90 +403,102 @@ const initSwiper = () => { |
|
|
|
</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> |
|
|
|
<!-- 核心技术模块 - 全屏垂直布局 --> |
|
|
|
<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="space-y-8"> |
|
|
|
<!-- 内容 - 左右交替布局 --> |
|
|
|
<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 |
|
|
|
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`]" |
|
|
|
class="md:w-1/2 mb-8 md:mb-0" |
|
|
|
:class="{ 'order-1': index % 2 === 0, 'order-2': index % 2 === 1 }" |
|
|
|
> |
|
|
|
<!-- 背景图片 --> |
|
|
|
<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 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 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> |
|
|
|
<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="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 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> |
|
|
|
|
|
|
|
<!-- 序号装饰 --> |
|
|
|
<div class="absolute bottom-4 right-8"> |
|
|
|
<span class="text-8xl font-bold text-white opacity-10">0{{ index + 1 }}</span> |
|
|
|
|
|
|
|
<!-- 装饰点 --> |
|
|
|
<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> |
|
|
|
|
|
|
|
@ -398,83 +510,63 @@ const initSwiper = () => { |
|
|
|
</h2> |
|
|
|
|
|
|
|
<div class="relative wow animate__animated animate__fadeIn animate__duration-fast"> |
|
|
|
<!-- Swiper轮播 --> |
|
|
|
<div class="swiper-container"> |
|
|
|
<div class="swiper-wrapper"> |
|
|
|
<!-- 应用卡片 --> |
|
|
|
<!-- 简单轮播 --> |
|
|
|
<div class="relative overflow-hidden rounded-2xl shadow-lg h-96"> |
|
|
|
<div class="relative w-full h-full"> |
|
|
|
<div |
|
|
|
v-for="(app, index) in apps" |
|
|
|
v-for="(app, index) in appList" |
|
|
|
:key="app.id" |
|
|
|
class="swiper-slide" |
|
|
|
class="absolute inset-0 transition-opacity duration-500" |
|
|
|
:class="{ 'opacity-100': index === currentSlide, 'opacity-0': index !== currentSlide }" |
|
|
|
> |
|
|
|
<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> |
|
|
|
<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="swiper-pagination mt-8"></div> |
|
|
|
<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 class="swiper-button-prev !text-primary after:!text-lg"></div> |
|
|
|
<div class="swiper-button-next !text-primary after:!text-lg"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -562,37 +654,4 @@ const initSwiper = () => { |
|
|
|
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> |
