|
|
@ -61,16 +61,16 @@ const fetchTechnologies = async () => { |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
// 使用默认数据 |
|
|
// 使用默认数据 |
|
|
technologies.value = defaultTechnologies; |
|
|
|
|
|
|
|
|
technologies.value = defaultTechnologies.value; |
|
|
} |
|
|
} |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.error('Failed to load technologies:', error); |
|
|
console.error('Failed to load technologies:', error); |
|
|
technologies.value = defaultTechnologies; |
|
|
|
|
|
|
|
|
technologies.value = defaultTechnologies.value; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
// 默认核心技术数据（当API数据不可用时使用） |
|
|
// 默认核心技术数据（当API数据不可用时使用） |
|
|
const defaultTechnologies = [ |
|
|
|
|
|
|
|
|
const defaultTechnologies = computed(() => [ |
|
|
{ |
|
|
{ |
|
|
id: '1', |
|
|
id: '1', |
|
|
title: t('technology.core.tech_barrier.title'), |
|
|
title: t('technology.core.tech_barrier.title'), |
|
|
@ -103,15 +103,15 @@ const defaultTechnologies = [ |
|
|
color: 'primary', |
|
|
color: 'primary', |
|
|
image: '/LOGO.png' // 这里替换为实际图片路径 |
|
|
image: '/LOGO.png' // 这里替换为实际图片路径 |
|
|
} |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 应用数据 |
|
|
// 应用数据 |
|
|
const apps = reactive([ |
|
|
|
|
|
|
|
|
const apps = computed(() => [ |
|
|
{ |
|
|
{ |
|
|
id: 1, |
|
|
id: 1, |
|
|
name: 'MOSE Wallet', |
|
|
|
|
|
|
|
|
name: t('technology.apps.wallet.name'), |
|
|
description: t('technology.apps.wallet.description'), |
|
|
description: t('technology.apps.wallet.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-blue-600 to-indigo-900', |
|
|
color: 'from-blue-600 to-indigo-900', |
|
|
@ -119,7 +119,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 2, |
|
|
id: 2, |
|
|
name: 'MOSE Exchange', |
|
|
|
|
|
|
|
|
name: t('technology.apps.exchange.name'), |
|
|
description: t('technology.apps.exchange.description'), |
|
|
description: t('technology.apps.exchange.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-purple-600 to-indigo-900', |
|
|
color: 'from-purple-600 to-indigo-900', |
|
|
@ -127,7 +127,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 3, |
|
|
id: 3, |
|
|
name: 'MOSE Bridge', |
|
|
|
|
|
|
|
|
name: t('technology.apps.bridge.name'), |
|
|
description: t('technology.apps.bridge.description'), |
|
|
description: t('technology.apps.bridge.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-green-600 to-teal-900', |
|
|
color: 'from-green-600 to-teal-900', |
|
|
@ -135,7 +135,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 4, |
|
|
id: 4, |
|
|
name: 'MOSE Pay', |
|
|
|
|
|
|
|
|
name: t('technology.apps.pay.name'), |
|
|
description: t('technology.apps.pay.description'), |
|
|
description: t('technology.apps.pay.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-orange-600 to-red-900', |
|
|
color: 'from-orange-600 to-red-900', |
|
|
@ -143,7 +143,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 5, |
|
|
id: 5, |
|
|
name: 'MOSE DAO', |
|
|
|
|
|
|
|
|
name: t('technology.apps.dao.name'), |
|
|
description: t('technology.apps.dao.description'), |
|
|
description: t('technology.apps.dao.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-amber-600 to-orange-900', |
|
|
color: 'from-amber-600 to-orange-900', |
|
|
@ -151,7 +151,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 6, |
|
|
id: 6, |
|
|
name: 'MOSE NFT', |
|
|
|
|
|
|
|
|
name: t('technology.apps.nft.name'), |
|
|
description: t('technology.apps.nft.description'), |
|
|
description: t('technology.apps.nft.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-pink-600 to-rose-900', |
|
|
color: 'from-pink-600 to-rose-900', |
|
|
@ -159,7 +159,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 7, |
|
|
id: 7, |
|
|
name: 'MOSE DeFi', |
|
|
|
|
|
|
|
|
name: t('technology.apps.defi.name'), |
|
|
description: t('technology.apps.defi.description'), |
|
|
description: t('technology.apps.defi.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-cyan-600 to-blue-900', |
|
|
color: 'from-cyan-600 to-blue-900', |
|
|
@ -167,7 +167,7 @@ const apps = reactive([ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
id: 8, |
|
|
id: 8, |
|
|
name: 'MOSE ID', |
|
|
|
|
|
|
|
|
name: t('technology.apps.id.name'), |
|
|
description: t('technology.apps.id.description'), |
|
|
description: t('technology.apps.id.description'), |
|
|
image: '/LOGO.png', |
|
|
image: '/LOGO.png', |
|
|
color: 'from-emerald-600 to-green-900', |
|
|
color: 'from-emerald-600 to-green-900', |
|
|
@ -202,21 +202,23 @@ const fetchAppList = async () => { |
|
|
'carbon:wallet', 'carbon:chart-line', 'carbon:bridge', 'carbon:purchase', |
|
|
'carbon:wallet', 'carbon:chart-line', 'carbon:bridge', 'carbon:purchase', |
|
|
'carbon:group', 'carbon:image', 'carbon:money', 'carbon:user' |
|
|
'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 { |
|
|
return { |
|
|
id: item.id || index + 1, |
|
|
id: item.id || index + 1, |
|
|
name: t(`technology.apps.app${index + 1}.name`), |
|
|
|
|
|
description: t(`technology.apps.app${index + 1}.description`), |
|
|
|
|
|
|
|
|
name: t(`technology.apps.${appKey}.name`), |
|
|
|
|
|
description: t(`technology.apps.${appKey}.description`), |
|
|
image: item.image || '/LOGO.png', |
|
|
image: item.image || '/LOGO.png', |
|
|
color: colors[index % colors.length], |
|
|
color: colors[index % colors.length], |
|
|
icon: icons[index % icons.length] |
|
|
icon: icons[index % icons.length] |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
} else { |
|
|
} else { |
|
|
appList.value = apps; |
|
|
|
|
|
|
|
|
appList.value = apps.value; |
|
|
} |
|
|
} |
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.error('Failed to load app list:', error); |
|
|
console.error('Failed to load app list:', error); |
|
|
appList.value = apps; |
|
|
|
|
|
|
|
|
appList.value = apps.value; |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
@ -233,15 +235,32 @@ const fetchInnovation = async () => { |
|
|
pageNo: 1 |
|
|
pageNo: 1 |
|
|
}); |
|
|
}); |
|
|
if (result && result.length > 0) { |
|
|
if (result && result.length > 0) { |
|
|
structural.value = result; |
|
|
|
|
|
console.log(structural.value); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 只使用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 { |
|
|
} else { |
|
|
structural.value = []; |
|
|
|
|
|
|
|
|
// 使用默认的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) { |
|
|
} catch (error) { |
|
|
console.error('Failed to load innovation data:', error); |
|
|
console.error('Failed to load innovation data:', error); |
|
|
// innovation.value = []; |
|
|
|
|
|
|
|
|
// 使用默认的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' |
|
|
|
|
|
})); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -364,8 +383,8 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
<!-- 内容区域 --> |
|
|
<!-- 内容区域 --> |
|
|
<div class="relative z-10 px-8 py-12 text-left max-w-md"> |
|
|
<div class="relative z-10 px-8 py-12 text-left max-w-md"> |
|
|
<h3 class="text-3xl font-bold text-white mb-6">{{ arch.title }}</h3> |
|
|
|
|
|
<div class="text-white/90 text-lg leading-relaxed mb-8" v-html="arch.description"></div> |
|
|
|
|
|
|
|
|
<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-if="arch.features" class="space-y-3 mb-8"> |
|
|
@ -425,9 +444,9 @@ onMounted(() => { |
|
|
:class="[`delay-${index*100}`]" |
|
|
:class="[`delay-${index*100}`]" |
|
|
> |
|
|
> |
|
|
<!-- 内容 --> |
|
|
<!-- 内容 --> |
|
|
<div class="flex flex-col items-center text-center"> |
|
|
|
|
|
<h4 class="text-white text-xl font-medium mb-6">{{arch.title}}</h4> |
|
|
|
|
|
<p class="text-white text-sm font-medium mb-6 px-14" v-html="arch.description"></p> |
|
|
|
|
|
|
|
|
<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 %"> |
|
|
<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 %"> |
|
|
|
hflllll
6 months ago
