|
@ -1,40 +1,31 @@ |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
|
import { ref, onMounted } from 'vue'; |
|
|
import { useI18n } from 'vue-i18n'; |
|
|
import { useI18n } from 'vue-i18n'; |
|
|
|
|
|
import { queryPartnerList, type PartnerItem } from '@/api'; |
|
|
|
|
|
|
|
|
const { t } = useI18n(); |
|
|
const { t } = useI18n(); |
|
|
|
|
|
|
|
|
// 合作伙伴数据 |
|
|
// 合作伙伴数据 |
|
|
const partners = ref([ |
|
|
|
|
|
{ |
|
|
|
|
|
id: 1, |
|
|
|
|
|
name: 'ABC区块链基金会', |
|
|
|
|
|
description: '专注于区块链技术发展和应用推广的非营利组织,为MOSE提供技术支持和生态扩展。', |
|
|
|
|
|
logo: '/LOGO.png', |
|
|
|
|
|
url: 'https://example.com/partner1' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 2, |
|
|
|
|
|
name: 'DEF科技集团', |
|
|
|
|
|
description: '全球领先的科技集团,与MOSE共同推进区块链在企业级应用的落地和推广。', |
|
|
|
|
|
logo: '/LOGO.png', |
|
|
|
|
|
url: 'https://example.com/partner2' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 3, |
|
|
|
|
|
name: 'GHI金融服务', |
|
|
|
|
|
description: '创新型金融科技公司,与MOSE合作开发基于区块链的金融产品和服务。', |
|
|
|
|
|
logo: '/LOGO.png', |
|
|
|
|
|
url: 'https://example.com/partner3' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: 4, |
|
|
|
|
|
name: 'JKL研究院', |
|
|
|
|
|
description: '专注于密码学和分布式系统研究的学术机构,为MOSE提供理论研究支持。', |
|
|
|
|
|
logo: '/LOGO.png', |
|
|
|
|
|
url: 'https://example.com/partner4' |
|
|
|
|
|
|
|
|
const partners = ref<PartnerItem[]>([]); |
|
|
|
|
|
const loading = ref(false); |
|
|
|
|
|
|
|
|
|
|
|
// 获取合作伙伴列表数据 |
|
|
|
|
|
const fetchPartnerList = async () => { |
|
|
|
|
|
try { |
|
|
|
|
|
loading.value = true; |
|
|
|
|
|
const data = await queryPartnerList(); |
|
|
|
|
|
partners.value = data; |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('获取合作伙伴列表数据失败:', error); |
|
|
|
|
|
} finally { |
|
|
|
|
|
loading.value = false; |
|
|
} |
|
|
} |
|
|
]); |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 组件挂载时获取数据 |
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
fetchPartnerList(); |
|
|
|
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<template> |
|
|
<template> |
|
@ -44,7 +35,12 @@ const partners = ref([ |
|
|
{{ t('about.partners.title') }} |
|
|
{{ t('about.partners.title') }} |
|
|
</h2> |
|
|
</h2> |
|
|
|
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
|
|
|
<!-- 加载状态 --> |
|
|
|
|
|
<div v-if="loading" class="flex justify-center py-10"> |
|
|
|
|
|
<div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary"></div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-else class="space-y-8"> |
|
|
<div |
|
|
<div |
|
|
v-for="(partner, index) in partners" |
|
|
v-for="(partner, index) in partners" |
|
|
:key="partner.id" |
|
|
:key="partner.id" |
|
@ -57,15 +53,15 @@ const partners = ref([ |
|
|
> |
|
|
> |
|
|
<!-- 合作伙伴Logo --> |
|
|
<!-- 合作伙伴Logo --> |
|
|
<div class="md:w-1/3 p-8 flex items-center justify-center bg-background-light"> |
|
|
<div class="md:w-1/3 p-8 flex items-center justify-center bg-background-light"> |
|
|
<img :src="partner.logo" :alt="partner.name" class="max-w-full max-h-24 object-contain" /> |
|
|
|
|
|
|
|
|
<img :src="partner.image" :alt="partner.title" class="max-w-full max-h-24 object-contain" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- 合作伙伴信息 --> |
|
|
<!-- 合作伙伴信息 --> |
|
|
<div class="md:w-2/3 p-6"> |
|
|
<div class="md:w-2/3 p-6"> |
|
|
<h3 class="text-xl font-bold text-text mb-3">{{ partner.name }}</h3> |
|
|
|
|
|
<p class="text-text-secondary mb-4">{{ partner.description }}</p> |
|
|
|
|
|
|
|
|
<h3 class="text-xl font-bold text-text mb-3">{{ partner.title }}</h3> |
|
|
|
|
|
<p class="text-text-secondary mb-4" v-html="partner.description"></p> |
|
|
<a |
|
|
<a |
|
|
:href="partner.url" |
|
|
|
|
|
|
|
|
href="#" |
|
|
target="_blank" |
|
|
target="_blank" |
|
|
rel="noopener noreferrer" |
|
|
rel="noopener noreferrer" |
|
|
class="inline-flex items-center text-primary-light hover:text-primary-dark transition-colors" |
|
|
class="inline-flex items-center text-primary-light hover:text-primary-dark transition-colors" |
|
|