-
+
+
- 全球战略部署 -
+
+
+
+
+
+
+
+
+
+
- + 全球战略部署 +
++ 全球战略部署，构建全球战略网络 +
+ + + +
-
-
-
- ![]()
+
+
+
+
-
-
+ ![全球地图背景]()
+
+
+
+
+
+
+
+ 加载中...
+
+
-
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/src/components/about/MilestoneModule.vue b/src/components/about/MilestoneModule.vue
index 3bbe8e0..43a4727 100644
--- a/src/components/about/MilestoneModule.vue
+++ b/src/components/about/MilestoneModule.vue
@@ -1,50 +1,47 @@
-
+
-
-
- MOSE
-
+
+
+
-
+
+
+
+
+
+ {{ location.city }}
- {{ location.country }} +
+
+
+
+
-
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ {{ location.title }}
+ +
+
+
+
+ {{ location.title }}, {{ location.description }}
+ {{ location.role }}
-{{ location.address }}
+
+ 通过全球办公室网络，MOSE为不同地区的用户提供本地化服务和支持 +
+
+
+
+
-
-
-
+
+
+
+
-
+
+
加载里程碑数据中...
+
-
-
-
-
-
- - {{ t('about.milestones.title') }} -
-- 见证MOSE的成长历程，从创立之初到现在的每一步 -
- - - -
-
+
+
+
+
-
-
- {{ error }}
+
- {{ error }}
+
+
+
+
+
+ ([]);
+const loading = ref(true);
-// 显示下一个成员
-const showNextMember = () => {
- currentMemberIndex.value = (currentMemberIndex.value + 1) % teamMembers.value.length;
+// 统一的暗蓝色背景
+const getCardBackground = () => {
+ return 'bg-slate-800';
};
-// 显示上一个成员
-const showPrevMember = () => {
- currentMemberIndex.value = (currentMemberIndex.value - 1 + teamMembers.value.length) % teamMembers.value.length;
+// 获取领导团队数据
+const fetchTeamData = async () => {
+ try {
+ loading.value = true;
+ const response = await queryTeamList({
+ pageNo: 1,
+ pageSize: 10
+ });
+ if (response && Array.isArray(response)) {
+ teamMembers.value = response;
+ }
+ } catch (error) {
+ console.error('Failed to fetch team data:', error);
+ } finally {
+ loading.value = false;
+ }
};
-// 当前显示的成员
-const currentMember = computed(() => {
- return teamMembers.value[currentMemberIndex.value];
+// Swiper实例
+let swiper = null;
+
+// 初始化
+onMounted(async () => {
+ // 获取团队数据
+ await fetchTeamData();
+
+ // 初始化WOW.js动画
+ try {
+ const WOW = (window as any).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);
+ }
+
+ // 初始化Swiper
+ initSwiper();
});
+
+// 初始化Swiper
+const initSwiper = () => {
+ // 动态加载Swiper
+ import('swiper/bundle').then(({ Swiper }) => {
+ import('swiper/css/bundle').then(() => {
+ // 等待DOM更新
+ setTimeout(() => {
+ swiper = new Swiper('.team-swiper-container', {
+ effect: 'coverflow',
+ grabCursor: true,
+ centeredSlides: true,
+ slidesPerView: 'auto',
+ loop: true, // 启用无限滚动
+ speed: 800,
+ autoplay: {
+ delay: 5000,
+ disableOnInteraction: false,
+ },
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true,
+ dynamicBullets: true,
+ },
+ navigation: {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ },
+ coverflowEffect: {
+ rotate: 0,
+ stretch: 0,
+ depth: 100,
+ modifier: 1,
+ slideShadows: false,
+ },
+ breakpoints: {
+ 320: {
+ slidesPerView: 1,
+ spaceBetween: 20
+ },
+ 768: {
+ slidesPerView: 2,
+ spaceBetween: 30
+ },
+ 1024: {
+ slidesPerView: 3,
+ spaceBetween: 30
+ }
+ }
+ });
+ }, 500);
+ }).catch(err => {
+ console.error('Failed to load Swiper CSS:', err);
+ });
+ }).catch(err => {
+ console.error('Failed to load Swiper:', err);
+ });
+};
@@ -58,71 +131,158 @@ const currentMember = computed(() => {
-
+
+ ![]()
+
+
+
-
+
-
-
\ No newline at end of file
diff --git a/src/components/about/TeamModule.vue b/src/components/about/TeamModule.vue
index 03213a9..1526144 100644
--- a/src/components/about/TeamModule.vue
+++ b/src/components/about/TeamModule.vue
@@ -2,52 +2,125 @@
import { ref, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useConfig } from '@/utils/config';
+import { Icon } from '@iconify/vue';
+import { queryTeamList } from '@/api';
+import type { TeamMember } from '@/api';
const { t } = useI18n();
const { getConfigImage } = useConfig();
-// 团队成员数据
-const teamMembers = ref([
- {
- id: 1,
- name: '张明宇',
- title: '创始人 & CEO',
- bio: '张明宇拥有10年区块链技术经验，曾在多家知名区块链项目担任技术负责人，主导了多个成功的跨链项目，对密码学和分布式系统有深入研究。',
- image: '/LOGO.png'
- },
- {
- id: 2,
- name: '李华',
- title: '首席技术官 (CTO)',
- bio: '李华是密码学专家，拥有计算机科学博士学位，在零知识证明和安全多方计算领域发表过多篇论文，曾负责设计多个区块链项目的核心安全架构。',
- image: '/LOGO.png'
- },
- {
- id: 3,
- name: '王建国',
- title: '首席运营官 (COO)',
- bio: '王建国拥有20年互联网和金融科技公司运营经验，曾在多家上市公司担任高管职位，对区块链行业商业模式和市场策略有独到见解。',
- image: '/LOGO.png'
- }
-]);
-
-// 当前显示的成员索引
-const currentMemberIndex = ref(0);
+// 领导团队成员数据
+const teamMembers = ref
-
-
-
-
-
+
-
+
+
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ getMilestoneYear(index) }}
-
-
-
-
+
+
-
-
-
-
-
-
- - {{ milestone.title }} -
- - - - - - -
-
+ {{ index + 1 }}
-
- ![]()
-
-
-
-
-
-
-
- {{ index + 1 }}
-
- + {{ milestone.title }} +
+ + +
+
+
+
+
+
+
+ 里程碑 {{ index + 1 }}/{{ milestones.length }}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 继续探索
+
+
-
-
-
-
-
-
-
-
- ![]()
-
-
-
-
-
- {{ currentMember.name }}
-{{ currentMember.title }}
-{{ currentMember.bio }}
-
-
+
+
+
-
\ No newline at end of file
+
+
+
\ No newline at end of file
+
+ 加载中...
-
-
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+ {{ member.name }}
+ + +{{ member.post }}
+ + + + + +
+
+
+
+
+
+ {{ index + 1 }}
+
+
-
-
+
+
+
{{ t('about.team.description') }}
{{ t('about.team.viewAll') }} - +