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.
759 lines
28 KiB
759 lines
28 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相关组件和模块
|
|
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>
|