From 1ac99100436c4dd77eec03d06bbfa278994460ec Mon Sep 17 00:00:00 2001 From: hflllll Date: Sat, 19 Jul 2025 17:03:51 +0800 Subject: [PATCH] 'hfll' --- src/components/layout/Footer.vue | 6 +- src/components/layout/NavBar.vue | 4 +- src/router/index.ts | 10 +- src/views/Community.vue | 262 ++++++++++++++++-------- src/views/Technology.vue | 419 ++++++++++++++++++++++----------------- 5 files changed, 423 insertions(+), 278 deletions(-) diff --git a/src/components/layout/Footer.vue b/src/components/layout/Footer.vue index 6c74d80..e3b6d38 100644 --- a/src/components/layout/Footer.vue +++ b/src/components/layout/Footer.vue @@ -25,8 +25,8 @@ const currentYear = new Date().getFullYear();
- MOSE Logo - MOSE + MOSE Logo +

{{ t('home.hero.subtitle') }} @@ -70,7 +70,7 @@ const currentYear = new Date().getFullYear();

-

{{ t('nav.resources') }}

+

{{ t('nav.about') }}

  • {{ t('ecosystem.resources.docs') }}
  • {{ t('ecosystem.resources.github') }}
    • diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index 833d04a..32dbff3 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -121,13 +121,13 @@ const emit = defineEmits(['changeLanguage']); - 动画演示 - + -->
    diff --git a/src/router/index.ts b/src/router/index.ts index 0f8d8de..9363b81 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -36,11 +36,11 @@ const routes = [ name: 'Technology', component: () => import('@/views/Technology.vue') }, - { - path: '/animations', - name: 'Animations', - component: () => import('@/components/AnimationDemo.vue') - }, + // { + // path: '/animations', + // name: 'Animations', + // component: () => import('@/components/AnimationDemo.vue') + // }, { path: '/:pathMatch(.*)*', name: 'NotFound', diff --git a/src/views/Community.vue b/src/views/Community.vue index 7c758f4..590b360 100644 --- a/src/views/Community.vue +++ b/src/views/Community.vue @@ -3,6 +3,11 @@ import { useI18n } from 'vue-i18n'; import { ref, onMounted, computed } from 'vue'; import { Icon } from '@iconify/vue'; import { useConfig } from '@/utils/config'; +import { Swiper, SwiperSlide } from 'swiper/vue'; +import { Navigation, Pagination } from 'swiper/modules'; +import 'swiper/css'; +import 'swiper/css/navigation'; +import 'swiper/css/pagination'; import { queryOfficialMediaList, queryForumList, @@ -54,26 +59,46 @@ const isSubmitting = ref(false); // 当前查看的帖子ID const currentForumId = ref(null); -// 社区风采轮播控制 -const currentCommunityPage = ref(0); -const communitiesPerPage = 1; +// Swiper实例 +const swiperInstance = ref(null); + +// Swiper配置 +const swiperOptions = { + slidesPerView: 3, + spaceBetween: 40, + navigation: false, + pagination: false, + modules: [Navigation, Pagination], + breakpoints: { + 320: { + slidesPerView: 1, + spaceBetween: 20 + }, + 768: { + slidesPerView: 2, + spaceBetween: 30 + }, + 1024: { + slidesPerView: 3, + spaceBetween: 40 + } + } +}; -// 当前显示的社区风采 -const currentCommunities = computed(() => { - const start = currentCommunityPage.value * communitiesPerPage; - return communityList.value.slice(start, start + communitiesPerPage); -}); +// 弹窗相关数据 +const showDetailModal = ref(false); +const selectedMessage = ref(null); -// 显示下一页社区 -const nextCommunity = () => { - const totalPages = Math.ceil(communityList.value.length / communitiesPerPage); - currentCommunityPage.value = (currentCommunityPage.value + 1) % totalPages; +// 显示消息详情弹窗 +const showMessageDetail = (message: MessageItem) => { + selectedMessage.value = message; + showDetailModal.value = true; }; -// 显示上一页社区 -const prevCommunity = () => { - const totalPages = Math.ceil(communityList.value.length / communitiesPerPage); - currentCommunityPage.value = (currentCommunityPage.value - 1 + totalPages) % totalPages; +// 关闭消息详情弹窗 +const closeMessageDetail = () => { + showDetailModal.value = false; + selectedMessage.value = null; }; // 跳转到公告详情 @@ -300,10 +325,10 @@ onMounted(async() => {

    - {{ t('community.title') }} + {{ t('community.hero.title') }}

    - {{ t('community.subtitle') }} + {{ t('community.hero.subtitle') }}

    @@ -327,29 +352,76 @@ onMounted(async() => {
    -
    +
    -
    +
    -
    -

    {{ message.title }}

    -

    {{ message.description }}

    -
    - +
    +

    + {{ message.title }} +

    +

    {{ message.description }}

    +
    + {{ formatDate(message.createTime) }}
    + + +
    +
    + +
    +
    +

    {{ selectedMessage?.title }}

    + +
    +
    + + {{ formatDate(selectedMessage?.createTime) }} +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    +
    +
    @@ -364,65 +436,64 @@ onMounted(async() => {
    -
    -
    -
    +
    + -
    - -
    -

    {{ community.title }}

    -

    {{ community.description }}

    - - 了解更多 - - - - + +
    +
    +
    + +
    +
    +
    +

    {{ community.title }}

    +

    {{ community.description }}

    +
    +
    -
    -
    -
    - - -
    + + + + -
    - -
    +
    - -
    + +
    @@ -539,7 +610,7 @@ onMounted(async() => {
    -
    {{ comment.createBy || t('community.forum.anonymous') }}
    +
    {{ comment.createBy || t('community.forum.username') }}

    {{ formatDate(comment.createTime) }}

    @@ -594,7 +665,7 @@ onMounted(async() => {
    @@ -625,24 +696,21 @@ onMounted(async() => { -
    +
    -

    暂无信息公示数据

    -
    { class="bg-background-light rounded-xl p-6 shadow-card hover:shadow-lg transition-all duration-300" >
    -
    @@ -667,27 +734,23 @@ onMounted(async() => {
    -
    + --> -

    {{ t('community.highlights.title') }}

    -
    -

    暂无社区活动数据

    -
    { -webkit-box-orient: vertical; overflow: hidden; } + +/* Swiper分页器样式 */ +:deep(.swiper-pagination-bullet) { + width: 12px; + height: 12px; + background: rgba(255, 255, 255, 0.5); + opacity: 1; + border: 2px solid rgba(255, 255, 255, 0.8); + transition: all 0.3s ease; +} + +:deep(.swiper-pagination-bullet-active) { + background: var(--color-primary); + border-color: var(--color-primary); + transform: scale(1.3); + box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.5); +} + +:deep(.swiper-pagination) { + position: relative; + bottom: 0; + margin-top: 20px; +} \ No newline at end of file diff --git a/src/views/Technology.vue b/src/views/Technology.vue index 8cc7d10..238c658 100644 --- a/src/views/Technology.vue +++ b/src/views/Technology.vue @@ -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 = () => {
    - -
    -
    -

    - 核心技术 -

    + +
    + +
    + +
    + +
    +
    - -
    + +
    +
    - -
    - -
    +
    +
    + +
    +

    {{ tech.title }}

    +
    +
    - -
    - -
    -
    -
    - -
    -

    {{ tech.title }}

    -
    -

    - {{ tech.description }} -

    - - -
    - -
    -
    + +
    + +
    +
    + + +
    +
    + +
    - -
    -
    - -
    - - -
    - -
    - - -
    -
    -
    + +
    +
    -
    - - -
    - 0{{ index + 1 }} + + +
    +
    + + +
    + 0{{ index + 1 }} +
    + + +
    + +
    @@ -398,83 +510,63 @@ const initSwiper = () => {
    - -
    -
    - + +
    +
    -
    - -
    - - -
    -
    - - -
    - -
    -
    - -
    -
    - - -

    {{ app.name }}

    - - -

    - {{ app.description }} -

    - - -
    - - -
    -
    - - 多链支持 -
    -
    - - 隐私保护 -
    -
    - - 安全加密 -
    -
    - - -
    - -
    - - -
    - {{ app.id }} -
    + + +
    +
    +

    {{ app.title }}

    +

    {{ app.description }}

    + + 立即体验 + +
    + + + + -
    +
    + +
    - - -
    -
    @@ -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); -} \ No newline at end of file