| @ -0,0 +1,143 @@ | |||
| MOSE 官网开发需求文档 | |||
| 一、项目概述 | |||
| 基于《MOSE 市场商业计划》和官网思维导图,构建全球隐私跨链基础设施的官方网站,突出技术优势、生态布局和经济模型,增强用户信任与社区参与。 | |||
| 二、网站结构 | |||
| 首页(Hero Section) | |||
| 头部 Banner | |||
| 主标题:MOSE - 全球隐私跨链基础设施领导者 | |||
| 副标题:让隐私成为区块链的基本权利 | |||
| 背景:动态科技感动画(体现跨链、隐私元素) | |||
| 核心价值主张(3-4个模块) | |||
| 图标 + 文字描述(示例): | |||
| 隐私保护:基于零知识证明的匿名交易 | |||
| 跨链互操作:支持12+主流公链(以太坊/Cosmos/Polkadot) | |||
| 合规安全:新加坡MAS沙盒许可,动态路由规避高风险节点 | |||
| 生态增长:200+项目采用DevKit,代币销毁通缩模型 | |||
| 项目简介 | |||
| 精简描述(来源:PDF P2): | |||
| "由瑞士加密合基金会、新加坡数字金融联盟等联合孵化,专注研发跨链隐私技术,为Web3提供去中心化隐私基础设施。" | |||
| 合作机构LOGO墙 | |||
| 展示:Binance Labs, Polychain Capital, Aleo, StarkWare, LayerZero, Axelar | |||
| 最新动态 | |||
| 滚动公告栏(示例): | |||
| 主网V1.0上线,日交易量破$1亿 | |||
| 获新加坡MAS沙盒许可 | |||
| 关于(About) | |||
| 愿景与使命(PDF P4) | |||
| 愿景:构建Web3世界的“隐私层” | |||
| 使命:实现资产自由、匿名、安全的无边界流通 | |||
| 团队介绍(PDF P6-P7) | |||
| 核心成员(带照片/职位/履历): | |||
| James Park(技术总裁):前Combase亚太负责人 | |||
| Dr. Sophia Müller(全球运营总裁):Branco欧洲合规团队管理者 | |||
| Prof. Hiroshi Sato(品牌策划总裁):东京大学区块链实验室主任 | |||
| 注:PDF P7区域负责人描述需校对(当前文本重复) | |||
| 发展历程(PDF P24时间轴) | |||
| 里程碑设计(示例): | |||
| text | |||
| 2023 Q1: 白皮书发布,种子轮融资$800万 | |||
| 2023 Q4: 测试网上线(接入以太坊/BNB Chain) | |||
| 2024 Q2: 主网V1.0发布,日交易量破$1亿 | |||
| 2025: 启动MOSE DAO | |||
| 合作伙伴 | |||
| 分类展示:技术合作(Aleo/StarkWare)、投资机构(Binance Labs)、合规支持(瑞士FINMA) | |||
| 技术(Technology) | |||
| 四层架构图(PDF P10) | |||
| 可视化展示: | |||
| 聚合层:聚合Tornado/Raijin等协议 | |||
| 跨链层:匿名原子交换(延迟<30秒) | |||
| 路由层:动态监管风险追踪 | |||
| 应用层:开放SDK支持DEX/NFT隐私化 | |||
| 核心创新(PDF P11) | |||
| 技术壁垒:跨链协议互操作性(3项国际专利) | |||
| 生态优势:兼容12+公链,200+项目采用DevKit | |||
| 生态系统(Ecosystem) | |||
| 生态全景图(PDF P22) | |||
| 十大生态模块可视化: | |||
| text | |||
| MOSE L1链 → FlashBox → xRouter → MUSD稳定币 → DEX交易所 → MOSE银行 → 钱包APP | |||
| DApp展示 | |||
| 分类展示合作DApp(名称/Logo/简介),预留API接口未来动态接入 | |||
| 社区(Community) | |||
| 社交媒体墙(PDF P26) | |||
| 图标链接:Twitter (@mose202399)、Telegram (@Nosafuture)、Discord | |||
| 论坛入口 | |||
| 集成Discourse或定制化论坛(支持用户留言/竞赛公示) | |||
| 信息公示 | |||
| 滚动展示竞赛获奖名单(参考PDF P20每日/每周奖励) | |||
| 社区风采 | |||
| 用户故事/UGC内容展示(图文+视频) | |||
| 常见问题(FAQ) | |||
| 高频问题分类: | |||
| 技术:如何保证跨链隐私? → 基于F4-SNAPK5算法+零知识证明 | |||
| 代币:MOSE总供应量? → 3亿枚,手续费100%销毁至1000万枚停止 | |||
| 参与:如何加入DAO? → 持币者通过投票参与治理 | |||
| 联系我们(Footer) | |||
| 商务合作:business@mose.org | |||
| 媒体问询:press@mose.org | |||
| @ -0,0 +1,59 @@ | |||
| # MOSE 生态网站需求文档 | |||
| ## 项目概览 | |||
| - **项目名称**: MOSE 生态网站 | |||
| - **目标**: 构建一个展示 MOSE 隐私跨链基础设施的 Web3 网站,强调隐私保护、全球信任和生态推广。 | |||
| - **背景**: 基于 MOSE 市场商业计划(版本 1.06)文本内容,结合现有 Vue 3 项目进行二次开发。 | |||
| - **技术栈**: Vue 3、Tailwind CSS、vue-video-player、i18, wow.js, animate.css。 | |||
| - **已有内容**: 包含首页(英雄区有生态介绍和 MOSEVideo 播放器、反馈表单)、列表页(项目卡片网格)、详情页(项目详情),支持多语言切换(中文/英文/日语)和反馈表单。 | |||
| ## 页面结构 | |||
| ### 1. 首页 | |||
| - **已有内容**: 英雄区(生态介绍文字和 MOSEVideo 播放器)、反馈表单(POST 提交,含姓名和消息)。 | |||
| - **新增需求**: | |||
| - 展示里程碑“2026年7月份”。 | |||
| - 添加活动计划模块(基于“2024;全球影响力加速市场渗透”、“新加埃共识大会主题演讲”、“瑞士法对斯区共道面闭门会议”、“每年主办‘MOSE隐私峰会’(巡回12国)”)。 | |||
| ### 2. 列表页 | |||
| - **已有内容**: 项目卡片网格(桌面端 3 列,移动端 1 列),从模拟 JSON API 获取数据。 | |||
| - **新增需求**: | |||
| - 展示“十大生态将逐步上线”。 | |||
| - 添加“十大分公司布局”卡片。 | |||
| ### 3. 详情页 | |||
| - **已有内容**: 单个生态详情(标题、描述、图片)和返回按钮。 | |||
| - **新增需求**: 无,保持现有功能。 | |||
| ## 功能需求 | |||
| - **已有功能**: | |||
| - 语言切换(i18,支持中文/英文/日语)。 | |||
| - 反馈表单提交(POST 到 /feedback)。 | |||
| - **新增功能**: | |||
| - **奖励机制展示**(基于“注册空投(平行币):前100000注册地址,前10万注册地址每个地址空投50枚MOSE;奖励每日释放 1%;持币少于100枚 MOSE时奖励停止释放;15日内未完成 ≥ 100 枚闪兑,则奖励销毁。注:MOSE闪兑由合约自动完成,秒进秒出”): | |||
| - 100万注册地址,前10万空投50枚 MOSE。 | |||
| - 持币少于100枚停止释放,15日内未闪兑1000枚则销毁。 | |||
| - **收益制度展示**(基于“目前我们正在测试V4和V5两种激励机制,V4激励机制将每人奖励50,000Mose,V5激励机制将每人奖励300,000Mose”): | |||
| - 支持 V4(50,000 MOSE/人)和 V5(300,000 MOSE/人)激励机制。 | |||
| - **动态数据**: | |||
| - 展示市场数据(基于“2023年匿名交易规模突破$120/亿,年增长超3000,跨链技术成熟度不足,隐私泄露事件频发(如跨链桥攻击导致超$20/亿损失)”)。 | |||
| - 燃烧机制(基于“燃烧机制 跨越协议与聚合混市协议产生手续费 (MOSE) 100%将全部燃烧销毁。注: 代币至1000万枚后停止燃烧。销毁总量: 2.9亿枚, 助力代币良性复利增长”)。 | |||
| ## 样式要求 | |||
| - **已有样式**: 深色主题,品牌色 #1D4ED8,响应式设计(sm: 640px, md: 768px, lg: 1024px)。 | |||
| - **新增需求**: 无,保持现有样式。 | |||
| ## 技术要求 | |||
| - **现有技术**: Vue 3、Tailwind CSS V4、vue-video-player、i18, wow.js, aniamteCSS | |||
| - **新增依赖**: 无。 | |||
| - **开发注意事项**: | |||
| - 使用 Vue Router 管理导航。 | |||
| - 模拟 API 数据(JSON 格式,例如 { id, title, desc, img })。 | |||
| - 保持现有组件结构不变,新增内容集成到对应页面。 | |||
| ## 里程碑与计划 | |||
| - **内容来源**: “2026年7月份”、“2024;全球影响力加速市场渗透”、“新加埃共识大会主题演讲”、“瑞士法对斯区共道面闭门会议”、“每年主办‘MOSE隐私峰会’(巡回12国)”。 | |||
| - **需求**: 在首页动态展示里程碑和活动日程。 | |||
| ## 二次开发说明 | |||
| - **原则**: 基于现有代码进行扩展,现有页面、组件和样式保持不变。 | |||
| - **输出**: 更新后的 Vue 组件、路由配置和 i18n 文件。 | |||
| @ -0,0 +1,206 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| import { ref } from 'vue'; | |||
| const { t } = useI18n(); | |||
| // 十大分公司数据 | |||
| const companies = ref([ | |||
| { | |||
| id: 1, | |||
| name: 'ecosystem.companies.singapore.name', | |||
| description: 'ecosystem.companies.singapore.description', | |||
| location: '新加坡', | |||
| flag: '🇸🇬', | |||
| position: { x: '75%', y: '60%' } | |||
| }, | |||
| { | |||
| id: 2, | |||
| name: 'ecosystem.companies.switzerland.name', | |||
| description: 'ecosystem.companies.switzerland.description', | |||
| location: '瑞士', | |||
| flag: '🇨🇭', | |||
| position: { x: '48%', y: '35%' } | |||
| }, | |||
| { | |||
| id: 3, | |||
| name: 'ecosystem.companies.japan.name', | |||
| description: 'ecosystem.companies.japan.description', | |||
| location: '日本', | |||
| flag: '🇯🇵', | |||
| position: { x: '85%', y: '40%' } | |||
| }, | |||
| { | |||
| id: 4, | |||
| name: 'ecosystem.companies.uk.name', | |||
| description: 'ecosystem.companies.uk.description', | |||
| location: '英国', | |||
| flag: '🇬🇧', | |||
| position: { x: '45%', y: '30%' } | |||
| }, | |||
| { | |||
| id: 5, | |||
| name: 'ecosystem.companies.usa.name', | |||
| description: 'ecosystem.companies.usa.description', | |||
| location: '美国', | |||
| flag: '🇺🇸', | |||
| position: { x: '20%', y: '40%' } | |||
| }, | |||
| { | |||
| id: 6, | |||
| name: 'ecosystem.companies.uae.name', | |||
| description: 'ecosystem.companies.uae.description', | |||
| location: '阿联酋', | |||
| flag: '🇦🇪', | |||
| position: { x: '60%', y: '50%' } | |||
| }, | |||
| { | |||
| id: 7, | |||
| name: 'ecosystem.companies.korea.name', | |||
| description: 'ecosystem.companies.korea.description', | |||
| location: '韩国', | |||
| flag: '🇰🇷', | |||
| position: { x: '80%', y: '42%' } | |||
| }, | |||
| { | |||
| id: 8, | |||
| name: 'ecosystem.companies.australia.name', | |||
| description: 'ecosystem.companies.australia.description', | |||
| location: '澳大利亚', | |||
| flag: '🇦🇺', | |||
| position: { x: '85%', y: '75%' } | |||
| }, | |||
| { | |||
| id: 9, | |||
| name: 'ecosystem.companies.canada.name', | |||
| description: 'ecosystem.companies.canada.description', | |||
| location: '加拿大', | |||
| flag: '🇨🇦', | |||
| position: { x: '22%', y: '30%' } | |||
| }, | |||
| { | |||
| id: 10, | |||
| name: 'ecosystem.companies.germany.name', | |||
| description: 'ecosystem.companies.germany.description', | |||
| location: '德国', | |||
| flag: '🇩🇪', | |||
| position: { x: '50%', y: '32%' } | |||
| } | |||
| ]); | |||
| const selectedCompany = ref(companies.value[0]); | |||
| const selectCompany = (company: any) => { | |||
| selectedCompany.value = company; | |||
| }; | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24"> | |||
| <div class="container mx-auto"> | |||
| <div class="text-center mb-12"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('ecosystem.companies.title') }} | |||
| </h2> | |||
| <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs"> | |||
| {{ t('ecosystem.companies.subtitle') }} | |||
| </p> | |||
| </div> | |||
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |||
| <!-- 公司列表 --> | |||
| <div class="lg:col-span-1"> | |||
| <div class="bg-background-light rounded-xl overflow-hidden shadow-card"> | |||
| <div class="p-6"> | |||
| <h3 class="text-lg font-bold text-text mb-4">{{ t('ecosystem.companies.list_title') }}</h3> | |||
| <div class="space-y-3 max-h-96 overflow-y-auto pr-2"> | |||
| <div | |||
| v-for="company in companies" | |||
| :key="company.id" | |||
| @click="selectCompany(company)" | |||
| class="p-3 rounded-lg cursor-pointer transition-all duration-200 flex items-center" | |||
| :class="selectedCompany.id === company.id ? 'bg-primary bg-opacity-10 shadow-sm' : 'hover:bg-background'" | |||
| > | |||
| <span class="text-2xl mr-3">{{ company.flag }}</span> | |||
| <div> | |||
| <h4 class="font-medium text-text">{{ t(company.name) }}</h4> | |||
| <p class="text-text-secondary text-sm">{{ company.location }}</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 世界地图和详情 --> | |||
| <div class="lg:col-span-2"> | |||
| <div class="grid grid-cols-1 gap-6"> | |||
| <!-- 世界地图 --> | |||
| <div class="bg-background-dark rounded-xl overflow-hidden shadow-card p-6 relative" style="height: 300px;"> | |||
| <!-- 简化的世界地图背景 --> | |||
| <div class="absolute inset-0 opacity-10 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDI0IDUxMiI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEwMjQsMCBDNzAwLjUsMCAxMDI0LDUxMiA3MDAuNSw1MTIgQzUwMCw1MTIgNTAwLDAgMzAwLDAgQzEwMCwwIDAsMjAwIDAsNTEyIEwxMDI0LDUxMiBMMTAyNCwwIFoiPjwvcGF0aD48L3N2Zz4=')]"></div> | |||
| <!-- 公司点标记 --> | |||
| <div | |||
| v-for="company in companies" | |||
| :key="`marker-${company.id}`" | |||
| class="absolute w-4 h-4 rounded-full transform -translate-x-1/2 -translate-y-1/2 cursor-pointer transition-all duration-300" | |||
| :class="selectedCompany.id === company.id ? 'bg-accent animate__animated animate__pulse animate__infinite shadow-lg z-20' : 'bg-primary-light z-10'" | |||
| :style="`left: ${company.position.x}; top: ${company.position.y};`" | |||
| @click="selectCompany(company)" | |||
| > | |||
| <div | |||
| class="absolute inset-0 rounded-full animate-ping" | |||
| :class="selectedCompany.id === company.id ? 'bg-accent opacity-50' : 'bg-primary-light opacity-0'" | |||
| ></div> | |||
| </div> | |||
| </div> | |||
| <!-- 详细信息 --> | |||
| <div class="bg-background-light rounded-xl overflow-hidden shadow-card"> | |||
| <div class="p-6"> | |||
| <div class="flex items-center mb-4"> | |||
| <span class="text-3xl mr-3">{{ selectedCompany.flag }}</span> | |||
| <h3 class="text-xl font-bold text-text">{{ t(selectedCompany.name) }}</h3> | |||
| </div> | |||
| <p class="text-text-secondary mb-6">{{ t(selectedCompany.description) }}</p> | |||
| <div class="grid grid-cols-2 gap-4"> | |||
| <div class="bg-background p-4 rounded-lg"> | |||
| <h4 class="text-sm font-medium text-text-secondary mb-1">{{ t('ecosystem.companies.focus') }}</h4> | |||
| <p class="text-text">{{ t(`ecosystem.companies.${selectedCompany.id}.focus`) }}</p> | |||
| </div> | |||
| <div class="bg-background p-4 rounded-lg"> | |||
| <h4 class="text-sm font-medium text-text-secondary mb-1">{{ t('ecosystem.companies.team') }}</h4> | |||
| <p class="text-text">{{ t(`ecosystem.companies.${selectedCompany.id}.team`) }}</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| <style scoped> | |||
| ::-webkit-scrollbar { | |||
| width: 4px; | |||
| } | |||
| ::-webkit-scrollbar-track { | |||
| background: var(--color-background); | |||
| } | |||
| ::-webkit-scrollbar-thumb { | |||
| background: var(--color-primary-light); | |||
| border-radius: 2px; | |||
| } | |||
| ::-webkit-scrollbar-thumb:hover { | |||
| background: var(--color-primary); | |||
| } | |||
| </style> | |||
| @ -0,0 +1,113 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| const { t } = useI18n(); | |||
| // 十大生态系统项目 | |||
| const ecosystems = [ | |||
| { | |||
| id: 1, | |||
| name: 'ecosystem.ten_ecosystems.mose_layer1.name', | |||
| description: 'ecosystem.ten_ecosystems.mose_layer1.description', | |||
| icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' | |||
| }, | |||
| { | |||
| id: 2, | |||
| name: 'ecosystem.ten_ecosystems.flashbox.name', | |||
| description: 'ecosystem.ten_ecosystems.flashbox.description', | |||
| icon: 'M13 10V3L4 14h7v7l9-11h-7z' | |||
| }, | |||
| { | |||
| id: 3, | |||
| name: 'ecosystem.ten_ecosystems.xrouter.name', | |||
| description: 'ecosystem.ten_ecosystems.xrouter.description', | |||
| icon: 'M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7' | |||
| }, | |||
| { | |||
| id: 4, | |||
| name: 'ecosystem.ten_ecosystems.musd.name', | |||
| description: 'ecosystem.ten_ecosystems.musd.description', | |||
| icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z' | |||
| }, | |||
| { | |||
| id: 5, | |||
| name: 'ecosystem.ten_ecosystems.dex.name', | |||
| description: 'ecosystem.ten_ecosystems.dex.description', | |||
| icon: 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4' | |||
| }, | |||
| { | |||
| id: 6, | |||
| name: 'ecosystem.ten_ecosystems.bank.name', | |||
| description: 'ecosystem.ten_ecosystems.bank.description', | |||
| icon: 'M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3' | |||
| }, | |||
| { | |||
| id: 7, | |||
| name: 'ecosystem.ten_ecosystems.wallet.name', | |||
| description: 'ecosystem.ten_ecosystems.wallet.description', | |||
| icon: 'M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z' | |||
| }, | |||
| { | |||
| id: 8, | |||
| name: 'ecosystem.ten_ecosystems.privacy_tools.name', | |||
| description: 'ecosystem.ten_ecosystems.privacy_tools.description', | |||
| icon: 'M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z' | |||
| }, | |||
| { | |||
| id: 9, | |||
| name: 'ecosystem.ten_ecosystems.dao.name', | |||
| description: 'ecosystem.ten_ecosystems.dao.description', | |||
| icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z' | |||
| }, | |||
| { | |||
| id: 10, | |||
| name: 'ecosystem.ten_ecosystems.defi.name', | |||
| description: 'ecosystem.ten_ecosystems.defi.description', | |||
| icon: 'M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7' | |||
| } | |||
| ]; | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light"> | |||
| <div class="container mx-auto"> | |||
| <div class="text-center mb-12"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('ecosystem.ten_ecosystems.title') }} | |||
| </h2> | |||
| <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs"> | |||
| {{ t('ecosystem.ten_ecosystems.subtitle') }} | |||
| </p> | |||
| </div> | |||
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6"> | |||
| <div | |||
| v-for="(ecosystem, index) in ecosystems" | |||
| :key="ecosystem.id" | |||
| class="bg-background rounded-xl p-6 flex flex-col items-center shadow-card hover:shadow-lg transition-all duration-300 wow animate__animated animate__fadeInUp" | |||
| :class="{ | |||
| 'animate__delay-xs': index % 5 === 1, | |||
| 'animate__delay-sm': index % 5 === 2, | |||
| 'animate__delay-md': index % 5 === 3, | |||
| 'animate__delay-lg': index % 5 === 4 | |||
| }" | |||
| > | |||
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4 btn-hover-pulse"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="ecosystem.icon" /> | |||
| </svg> | |||
| </div> | |||
| <h3 class="text-lg font-bold text-text mb-2 text-center">{{ t(ecosystem.name) }}</h3> | |||
| <p class="text-text-secondary text-sm text-center">{{ t(ecosystem.description) }}</p> | |||
| <div class="mt-4 pt-4 border-t border-background-light w-full text-center"> | |||
| <span class="inline-block px-3 py-1 bg-primary bg-opacity-10 text-primary-light text-xs rounded-full"> | |||
| {{ t('ecosystem.ten_ecosystems.coming_soon') }} | |||
| </span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| @ -0,0 +1,111 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| import { ref } from 'vue'; | |||
| const { t } = useI18n(); | |||
| // 定义活动数据 | |||
| const events = ref([ | |||
| { | |||
| id: 1, | |||
| title: 'home.events.consensus_conference.title', | |||
| description: 'home.events.consensus_conference.description', | |||
| date: '2024-09-15', | |||
| location: 'home.events.consensus_conference.location', | |||
| icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h2a2 2 0 012 2h6a2 2 0 012-2h2a2 2 0 012 2v12a2 2 0 01-2 2z' | |||
| }, | |||
| { | |||
| id: 2, | |||
| title: 'home.events.swiss_meeting.title', | |||
| description: 'home.events.swiss_meeting.description', | |||
| date: '2024-11-10', | |||
| location: 'home.events.swiss_meeting.location', | |||
| icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' | |||
| }, | |||
| { | |||
| id: 3, | |||
| title: 'home.events.privacy_summit.title', | |||
| description: 'home.events.privacy_summit.description', | |||
| date: '2024-07-20', | |||
| location: 'home.events.privacy_summit.location', | |||
| icon: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z' | |||
| } | |||
| ]); | |||
| // 格式化日期 | |||
| const formatDate = (dateString: string) => { | |||
| const date = new Date(dateString); | |||
| return new Intl.DateTimeFormat('zh-CN', { | |||
| year: 'numeric', | |||
| month: 'long', | |||
| day: 'numeric' | |||
| }).format(date); | |||
| }; | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24"> | |||
| <div class="container mx-auto"> | |||
| <div class="text-center mb-12"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('home.events.title') }} | |||
| </h2> | |||
| <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs"> | |||
| {{ t('home.events.subtitle') }} | |||
| </p> | |||
| </div> | |||
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |||
| <div | |||
| v-for="(event, index) in events" | |||
| :key="event.id" | |||
| class="bg-background-light rounded-xl overflow-hidden shadow-card hover:transform hover:scale-105 transition-all duration-300 wow animate__animated animate__fadeInUp animate__duration-fast" | |||
| :class="{ | |||
| 'animate__delay-xs': index === 1, | |||
| 'animate__delay-sm': index === 2 | |||
| }" | |||
| > | |||
| <div class="p-6"> | |||
| <div class="flex items-center mb-4"> | |||
| <div class="w-10 h-10 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="event.icon" /> | |||
| </svg> | |||
| </div> | |||
| <div class="text-xs font-medium text-primary-light"> | |||
| {{ formatDate(event.date) }} | |||
| </div> | |||
| </div> | |||
| <h3 class="text-lg font-bold text-text mb-3">{{ t(event.title) }}</h3> | |||
| <p class="text-text-secondary text-sm mb-4">{{ t(event.description) }}</p> | |||
| <div class="flex items-center text-xs text-text-secondary"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> | |||
| </svg> | |||
| <span>{{ t(event.location) }}</span> | |||
| </div> | |||
| </div> | |||
| <div class="bg-background px-6 py-4 border-t border-background-dark"> | |||
| <a href="#" class="text-primary-light hover:text-primary-dark text-sm font-medium transition-colors btn-hover-glow inline-block"> | |||
| {{ t('home.events.learn_more') }} | |||
| </a> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="text-center mt-10"> | |||
| <a href="/community" class="inline-flex items-center text-primary-light hover:text-primary-dark transition-colors"> | |||
| {{ t('home.events.view_all') }} | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> | |||
| </svg> | |||
| </a> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| @ -0,0 +1,72 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| const { t } = useI18n(); | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light"> | |||
| <div class="container mx-auto"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-10 text-center wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('home.milestone.title') }} | |||
| </h2> | |||
| <div class="max-w-4xl mx-auto bg-background-dark p-6 md:p-10 rounded-2xl shadow-card relative overflow-hidden wow animate__animated animate__fadeIn animate__duration-normal"> | |||
| <!-- 2026年7月里程碑 --> | |||
| <div class="relative z-10 flex flex-col items-center"> | |||
| <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mb-6 shadow-button btn-hover-pulse"> | |||
| <span class="text-2xl font-bold text-white">2026</span> | |||
| </div> | |||
| <h3 class="text-xl md:text-2xl font-bold text-text mb-4 text-center">{{ t('home.milestone.july_2026.title') }}</h3> | |||
| <p class="text-text-secondary text-center max-w-2xl"> | |||
| {{ t('home.milestone.july_2026.description') }} | |||
| </p> | |||
| <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6"> | |||
| <div class="bg-background-light p-6 rounded-xl shadow-card hover:transform hover:scale-105 transition-all duration-300 btn-hover-shadow"> | |||
| <div class="flex flex-col items-center text-center"> | |||
| <div class="w-12 h-12 bg-primary-light bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| </div> | |||
| <h4 class="text-lg font-bold text-text mb-2">{{ t('home.milestone.achievements.one.title') }}</h4> | |||
| <p class="text-text-secondary text-sm">{{ t('home.milestone.achievements.one.description') }}</p> | |||
| </div> | |||
| </div> | |||
| <div class="bg-background-light p-6 rounded-xl shadow-card hover:transform hover:scale-105 transition-all duration-300 btn-hover-shadow"> | |||
| <div class="flex flex-col items-center text-center"> | |||
| <div class="w-12 h-12 bg-secondary bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |||
| </svg> | |||
| </div> | |||
| <h4 class="text-lg font-bold text-text mb-2">{{ t('home.milestone.achievements.two.title') }}</h4> | |||
| <p class="text-text-secondary text-sm">{{ t('home.milestone.achievements.two.description') }}</p> | |||
| </div> | |||
| </div> | |||
| <div class="bg-background-light p-6 rounded-xl shadow-card hover:transform hover:scale-105 transition-all duration-300 btn-hover-shadow"> | |||
| <div class="flex flex-col items-center text-center"> | |||
| <div class="w-12 h-12 bg-accent bg-opacity-20 rounded-full flex items-center justify-center mb-4"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" /> | |||
| </svg> | |||
| </div> | |||
| <h4 class="text-lg font-bold text-text mb-2">{{ t('home.milestone.achievements.three.title') }}</h4> | |||
| <p class="text-text-secondary text-sm">{{ t('home.milestone.achievements.three.description') }}</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 背景装饰 --> | |||
| <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-5"> | |||
| <div class="absolute top-1/3 right-1/4 w-64 h-64 rounded-full bg-primary-light blur-3xl"></div> | |||
| <div class="absolute bottom-1/3 left-1/4 w-64 h-64 rounded-full bg-secondary blur-3xl"></div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| @ -0,0 +1,168 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| import { ref } from 'vue'; | |||
| // 移除有问题的导入 | |||
| // import MarketDataModule from '@/components/rewards/MarketDataModule.vue'; | |||
| const { t } = useI18n(); | |||
| // 激励机制数据 | |||
| const incentiveModels = ref([ | |||
| { | |||
| id: 'v4', | |||
| name: 'V4', | |||
| amount: 50000, | |||
| features: [ | |||
| 'incentives.models.v4.feature1', | |||
| 'incentives.models.v4.feature2', | |||
| 'incentives.models.v4.feature3' | |||
| ], | |||
| color: 'primary', | |||
| active: true | |||
| }, | |||
| { | |||
| id: 'v5', | |||
| name: 'V5', | |||
| amount: 300000, | |||
| features: [ | |||
| 'incentives.models.v5.feature1', | |||
| 'incentives.models.v5.feature2', | |||
| 'incentives.models.v5.feature3' | |||
| ], | |||
| color: 'secondary', | |||
| active: false | |||
| } | |||
| ]); | |||
| // 选择激励模型 | |||
| const selectedModel = ref(incentiveModels.value[0]); | |||
| const selectModel = (model: any) => { | |||
| selectedModel.value = model; | |||
| incentiveModels.value.forEach(m => { | |||
| m.active = m.id === model.id; | |||
| }); | |||
| }; | |||
| // 恢复市场数据 | |||
| const marketData = ref({ | |||
| transactionVolume: 120, | |||
| growthRate: 3000, | |||
| securityIncidents: 20 | |||
| }); | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24"> | |||
| <div class="container mx-auto"> | |||
| <div class="text-center mb-12"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('incentives.title') }} | |||
| </h2> | |||
| <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs"> | |||
| {{ t('incentives.subtitle') }} | |||
| </p> | |||
| </div> | |||
| <!-- 激励模型 --> | |||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |||
| <div | |||
| v-for="model in incentiveModels" | |||
| :key="model.id" | |||
| class="bg-background rounded-xl overflow-hidden shadow-card transition-all duration-300 transform hover:scale-105 wow animate__animated animate__fadeInUp" | |||
| :class="[ | |||
| model.id === 'v4' ? 'animate__delay-xs' : 'animate__delay-sm', | |||
| {'ring-2': model.active, [`ring-${model.color}`]: model.active} | |||
| ]" | |||
| @click="selectModel(model)" | |||
| > | |||
| <div class="p-6"> | |||
| <div class="flex justify-between items-center mb-6"> | |||
| <div> | |||
| <span :class="`text-${model.color} text-xs font-medium px-2 py-1 rounded-full bg-${model.color} bg-opacity-10`"> | |||
| {{ model.name }} | |||
| </span> | |||
| <h3 class="text-2xl font-bold text-text mt-2">{{ t(`incentives.models.${model.id}.title`) }}</h3> | |||
| </div> | |||
| <div :class="`w-6 h-6 rounded-full border-2 border-${model.color} flex items-center justify-center`"> | |||
| <div | |||
| v-if="model.active" | |||
| :class="`w-3 h-3 rounded-full bg-${model.color}`" | |||
| ></div> | |||
| </div> | |||
| </div> | |||
| <div :class="`bg-${model.color} bg-opacity-10 rounded-xl p-6 mb-6 text-center`"> | |||
| <p class="text-text-secondary text-sm mb-1">{{ t('incentives.reward_amount') }}</p> | |||
| <p :class="`text-${model.color} text-3xl font-bold`">{{ model.amount.toLocaleString('zh-CN') }} MOSE</p> | |||
| </div> | |||
| <ul class="space-y-3"> | |||
| <li | |||
| v-for="(feature, index) in model.features" | |||
| :key="`${model.id}-feature-${index}`" | |||
| class="flex items-start" | |||
| > | |||
| <svg xmlns="http://www.w3.org/2000/svg" :class="`h-5 w-5 text-${model.color} mr-2 mt-0.5 flex-shrink-0`" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t(feature) }}</span> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| <div :class="`bg-${model.color} bg-opacity-5 p-4 border-t border-background-dark`"> | |||
| <button :class="`w-full py-2 px-4 rounded-lg ${model.active ? `bg-${model.color}` : 'bg-background-dark'} transition-colors duration-200 btn-hover-glow`"> | |||
| <span :class="model.active ? 'text-white' : `text-${model.color}`">{{ t('incentives.select_model') }}</span> | |||
| </button> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 恢复市场数据展示 --> | |||
| <div class="bg-background rounded-xl overflow-hidden shadow-card wow animate__animated animate__fadeIn animate__delay-md"> | |||
| <div class="p-6"> | |||
| <h3 class="text-xl font-bold text-text mb-6">{{ t('incentives.market_data.title') }}</h3> | |||
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |||
| <!-- 交易规模 --> | |||
| <div class="bg-background-light rounded-xl p-6"> | |||
| <div class="flex items-center justify-between mb-4"> | |||
| <h4 class="text-text-secondary">{{ t('incentives.market_data.transaction_volume') }}</h4> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> | |||
| </svg> | |||
| </div> | |||
| <p class="text-2xl font-bold text-text">{{ marketData.transactionVolume }}亿美元</p> | |||
| <p class="text-text-secondary text-sm mt-2">{{ t('incentives.market_data.transaction_subtitle') }}</p> | |||
| </div> | |||
| <!-- 年增长 --> | |||
| <div class="bg-background-light rounded-xl p-6"> | |||
| <div class="flex items-center justify-between mb-4"> | |||
| <h4 class="text-text-secondary">{{ t('incentives.market_data.growth_rate') }}</h4> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> | |||
| </svg> | |||
| </div> | |||
| <p class="text-2xl font-bold text-secondary">{{ marketData.growthRate }}%</p> | |||
| <p class="text-text-secondary text-sm mt-2">{{ t('incentives.market_data.growth_subtitle') }}</p> | |||
| </div> | |||
| <!-- 安全事件 --> | |||
| <div class="bg-background-light rounded-xl p-6"> | |||
| <div class="flex items-center justify-between mb-4"> | |||
| <h4 class="text-text-secondary">{{ t('incentives.market_data.security_incidents') }}</h4> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> | |||
| </svg> | |||
| </div> | |||
| <p class="text-2xl font-bold text-accent">{{ marketData.securityIncidents }}亿美元</p> | |||
| <p class="text-text-secondary text-sm mt-2">{{ t('incentives.market_data.security_subtitle') }}</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| @ -0,0 +1,101 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| const { t } = useI18n(); | |||
| // 市场数据 | |||
| const marketData = [ | |||
| { | |||
| id: 1, | |||
| title: t('incentives.market_data.transaction_volume'), | |||
| value: '120亿美元', | |||
| icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2-3 .895-3 2 1.343 2 3 2', | |||
| description: t('incentives.market_data.transaction_subtitle'), | |||
| isActive: true, | |||
| }, | |||
| { | |||
| id: 2, | |||
| title: t('incentives.market_data.growth_rate'), | |||
| value: '3000%', | |||
| icon: 'M7 11l5-5m0 0l5 5m-5-5v12', | |||
| description: t('incentives.market_data.growth_subtitle'), | |||
| isActive: true, | |||
| }, | |||
| { | |||
| id: 3, | |||
| title: t('incentives.market_data.security_incidents'), | |||
| value: '20亿美元', | |||
| icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', | |||
| description: t('incentives.market_data.security_subtitle'), | |||
| isActive: true, | |||
| } | |||
| ]; | |||
| // 过滤出激活的数据 | |||
| const activeMarketData = marketData.filter(item => item.isActive); | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light relative"> | |||
| <div class="container mx-auto relative z-10"> | |||
| <div class="text-center mb-16"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('incentives.market_data.title') }} | |||
| </h2> | |||
| <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs"> | |||
| {{ t('incentives.subtitle') }} | |||
| </p> | |||
| </div> | |||
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |||
| <!-- 市场数据统计卡片 --> | |||
| <div | |||
| v-for="(stat, index) in activeMarketData" | |||
| :key="stat.id" | |||
| class="bg-background rounded-xl p-8 shadow-card overflow-hidden relative wow animate__animated animate__fadeInUp" | |||
| :class="{ | |||
| 'animate__delay-xs': index === 1, | |||
| 'animate__delay-sm': index === 2 | |||
| }" | |||
| > | |||
| <!-- 卡片内容 --> | |||
| <div class="flex items-start gap-6"> | |||
| <!-- 图标 --> | |||
| <div class="p-4 rounded-full bg-primary bg-opacity-10 flex-shrink-0"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="stat.icon" /> | |||
| </svg> | |||
| </div> | |||
| <!-- 数值和描述 --> | |||
| <div> | |||
| <div class="flex items-baseline mb-2"> | |||
| <h3 class="text-4xl font-bold text-text mr-2">{{ stat.value }}</h3> | |||
| </div> | |||
| <div> | |||
| <p class="text-lg font-medium text-primary-light">{{ stat.title }}</p> | |||
| <p class="text-text-secondary">{{ stat.description }}</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 背景装饰 --> | |||
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-primary bg-opacity-5"></div> | |||
| <div class="absolute top-6 right-10 w-20 h-20 rounded-full bg-accent bg-opacity-5"></div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 背景装饰 --> | |||
| <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30"> | |||
| <div class="absolute -bottom-24 left-1/4 w-64 h-64 rounded-full bg-primary-light blur-3xl"></div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| <style scoped> | |||
| /* 渐变效果 */ | |||
| .bg-gradient-primary { | |||
| background: linear-gradient(135deg, var(--primary-light), var(--primary)); | |||
| } | |||
| </style> | |||
| @ -0,0 +1,216 @@ | |||
| <script setup lang="ts"> | |||
| import { useI18n } from 'vue-i18n'; | |||
| import { ref, onMounted } from 'vue'; | |||
| const { t } = useI18n(); | |||
| // 模拟数据 | |||
| const totalAddresses = ref(1000000); | |||
| const airdropAddresses = ref(100000); | |||
| const airdropAmount = ref(50); | |||
| // 销毁数据(整合自TokenBurnModule) | |||
| // eslint-disable-next-line | |||
| const burnData = { | |||
| targetSupply: '10,000,000', // 目标供应量(1000万) | |||
| totalBurned: '290,000,000', // 总销毁量(2.9亿) | |||
| initialSupply: '300,000,000', // 初始供应量(3亿) | |||
| burnPercentage: '96.7%' // 销毁比例 | |||
| }; | |||
| // 销毁里程碑 | |||
| // eslint-disable-next-line | |||
| const burnMilestones = [ | |||
| { | |||
| id: 1, | |||
| date: '2022-Q1', | |||
| amount: '50,000,000', | |||
| description: t('rewards.tokenBurn.milestones.first'), | |||
| completed: true, | |||
| }, | |||
| { | |||
| id: 2, | |||
| date: '2022-Q3', | |||
| amount: '75,000,000', | |||
| description: t('rewards.tokenBurn.milestones.second'), | |||
| completed: true, | |||
| }, | |||
| { | |||
| id: 3, | |||
| date: '2023-Q1', | |||
| amount: '80,000,000', | |||
| description: t('rewards.tokenBurn.milestones.third'), | |||
| completed: true, | |||
| }, | |||
| { | |||
| id: 4, | |||
| date: '2023-Q4', | |||
| amount: '85,000,000', | |||
| description: t('rewards.tokenBurn.milestones.fourth'), | |||
| completed: true, | |||
| }, | |||
| { | |||
| id: 5, | |||
| date: '2024-Q2', | |||
| amount: '10,000,000', | |||
| description: t('rewards.tokenBurn.milestones.fifth'), | |||
| completed: false, | |||
| } | |||
| ]; | |||
| // 用于展示目的,我们在控制台输出这些变量 | |||
| onMounted(() => { | |||
| console.log('Burn data and milestones prepared for future usage:', burnData, burnMilestones); | |||
| }); | |||
| </script> | |||
| <template> | |||
| <section class="py-16 px-6 md:px-12 lg:px-24 bg-background-light"> | |||
| <div class="container mx-auto"> | |||
| <div class="text-center mb-12"> | |||
| <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast"> | |||
| {{ t('rewards.title') }} | |||
| </h2> | |||
| <p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs"> | |||
| {{ t('rewards.subtitle') }} | |||
| </p> | |||
| </div> | |||
| <!-- 奖励卡片 --> | |||
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |||
| <!-- 注册空投 --> | |||
| <div class="bg-background rounded-xl overflow-hidden shadow-card wow animate__animated animate__fadeInLeft"> | |||
| <div class="p-6 border-b border-background-dark"> | |||
| <div class="flex items-center mb-4"> | |||
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3 btn-hover-pulse"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary-light" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| </div> | |||
| <h3 class="text-xl font-bold text-text">{{ t('rewards.airdrop.title') }}</h3> | |||
| </div> | |||
| <p class="text-text-secondary mb-6">{{ t('rewards.airdrop.description') }}</p> | |||
| <div class="grid grid-cols-2 gap-4 mb-6"> | |||
| <div class="bg-background-dark p-4 rounded-lg text-center"> | |||
| <p class="text-text-secondary text-sm mb-1">{{ t('rewards.airdrop.total_addresses') }}</p> | |||
| <p class="text-text text-2xl font-bold">{{ totalAddresses.toLocaleString('zh-CN') }}</p> | |||
| </div> | |||
| <div class="bg-background-dark p-4 rounded-lg text-center"> | |||
| <p class="text-text-secondary text-sm mb-1">{{ t('rewards.airdrop.eligible_addresses') }}</p> | |||
| <p class="text-text text-2xl font-bold">{{ airdropAddresses.toLocaleString('zh-CN') }}</p> | |||
| </div> | |||
| </div> | |||
| <div class="bg-background-dark p-4 rounded-lg text-center"> | |||
| <p class="text-text-secondary text-sm mb-1">{{ t('rewards.airdrop.amount_per_address') }}</p> | |||
| <p class="text-primary-light text-2xl font-bold">{{ airdropAmount }} MOSE</p> | |||
| </div> | |||
| </div> | |||
| <div class="bg-background-dark p-6"> | |||
| <h4 class="text-lg font-bold text-text mb-4">{{ t('rewards.airdrop.rules.title') }}</h4> | |||
| <ul class="space-y-3"> | |||
| <li class="flex items-start"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-light mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t('rewards.airdrop.rules.daily_release') }}</span> | |||
| </li> | |||
| <li class="flex items-start"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-light mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t('rewards.airdrop.rules.min_holding') }}</span> | |||
| </li> | |||
| <li class="flex items-start"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary-light mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t('rewards.airdrop.rules.flash_swap') }}</span> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| <!-- 燃烧机制 --> | |||
| <div class="bg-background rounded-xl overflow-hidden shadow-card wow animate__animated animate__fadeInRight"> | |||
| <div class="p-6 border-b border-background-dark"> | |||
| <div class="flex items-center mb-4"> | |||
| <div class="w-12 h-12 rounded-full bg-accent bg-opacity-20 flex items-center justify-center mr-3 btn-hover-pulse"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" /> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" /> | |||
| </svg> | |||
| </div> | |||
| <h3 class="text-xl font-bold text-text">{{ t('rewards.burn.title') }}</h3> | |||
| </div> | |||
| <p class="text-text-secondary mb-6">{{ t('rewards.burn.description') }}</p> | |||
| <div class="relative pt-2 pb-8"> | |||
| <!-- 进度条 --> | |||
| <div class="h-6 bg-background-dark rounded-full overflow-hidden"> | |||
| <div class="h-full bg-gradient-to-r from-accent to-accent-light rounded-full" style="width: 96.7%;"></div> | |||
| </div> | |||
| <!-- 标签 --> | |||
| <div class="flex justify-between text-xs mt-2"> | |||
| <span class="text-text-secondary">0</span> | |||
| <span class="text-text-secondary">300,000,000</span> | |||
| </div> | |||
| <!-- 已燃烧指示器 --> | |||
| <div class="absolute bottom-0 left-0 right-0 flex justify-between items-center"> | |||
| <div class="flex flex-col items-start"> | |||
| <span class="text-text-secondary text-xs">{{ t('rewards.burn.current') }}</span> | |||
| <span class="text-accent font-bold">29,000,000 MOSE</span> | |||
| </div> | |||
| <div class="flex flex-col items-end"> | |||
| <span class="text-text-secondary text-xs">{{ t('rewards.burn.target') }}</span> | |||
| <span class="text-text font-bold">290,000,000 MOSE</span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="grid grid-cols-2 gap-4 mt-6"> | |||
| <div class="bg-background-dark p-4 rounded-lg text-center"> | |||
| <p class="text-text-secondary text-sm mb-1">{{ t('rewards.burn.percentage') }}</p> | |||
| <p class="text-accent text-2xl font-bold">100%</p> | |||
| </div> | |||
| <div class="bg-background-dark p-4 rounded-lg text-center"> | |||
| <p class="text-text-secondary text-sm mb-1">{{ t('rewards.burn.stop_threshold') }}</p> | |||
| <p class="text-text text-2xl font-bold">10,000,000</p> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="bg-background-dark p-6"> | |||
| <h4 class="text-lg font-bold text-text mb-4">{{ t('rewards.burn.mechanism.title') }}</h4> | |||
| <ul class="space-y-3"> | |||
| <li class="flex items-start"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t('rewards.burn.mechanism.fee_burn') }}</span> | |||
| </li> | |||
| <li class="flex items-start"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t('rewards.burn.mechanism.stop_condition') }}</span> | |||
| </li> | |||
| <li class="flex items-start"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-accent mr-2 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |||
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |||
| </svg> | |||
| <span class="text-text-secondary">{{ t('rewards.burn.mechanism.compound_growth') }}</span> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </section> | |||
| </template> | |||
| @ -0,0 +1,446 @@ | |||
| # MOSE Web网站结构文档 | |||
| ## 网站整体结构 | |||
| 网站由以下主要页面组成: | |||
| 1. 首页 (Home.vue) | |||
| 2. 生态系统页面 (Ecosystem.vue) | |||
| 3. 关于页面 (About.vue) | |||
| 4. 社区页面 (Community.vue) | |||
| 5. 资源页面 (Resources.vue) | |||
| 6. FAQ页面 (FAQ.vue) | |||
| 7. 联系页面 (Contact.vue) | |||
| 8. 404页面 (NotFound.vue) | |||
| 每个页面都有共享的布局组件: | |||
| - 导航栏 (NavBar.vue) | |||
| - 页脚 (Footer.vue) | |||
| ## 国际化支持 | |||
| 网站支持三种语言: | |||
| - 英文 (en.json) | |||
| - 中文 (zh.json) | |||
| - 日文 (ja.json) | |||
| ## 详细页面结构与数据需求 | |||
| ### 1. 首页 (Home.vue) | |||
| 首页包含以下主要模块: | |||
| #### 1.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题文本 (i18n: home.hero.title) | |||
| - 副标题文本 (i18n: home.hero.subtitle) | |||
| - 按钮文本 (i18n: home.cta.explore, home.cta.docs) | |||
| #### 1.2 视频播放器 | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 视频标题 (i18n: home.video.title) | |||
| - 视频文件路径 (/public/MOSEVideo.mp4) | |||
| - 视频封面图片 (/public/images.png) | |||
| #### 1.3 里程碑模块 (MilestoneModule.vue) | |||
| - **位置**: 视频区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: milestones.title) | |||
| - 副标题 (i18n: milestones.subtitle) | |||
| - 里程碑列表数据: | |||
| - 日期 | |||
| - 标题 | |||
| - 描述 | |||
| - 是否已完成 | |||
| #### 1.4 活动计划模块 (EventsModule.vue) | |||
| - **位置**: 里程碑模块下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: events.title) | |||
| - 副标题 (i18n: events.subtitle) | |||
| - 活动列表数据: | |||
| - 日期 | |||
| - 标题 | |||
| - 描述 | |||
| - 地点 | |||
| - 链接 | |||
| #### 1.5 奖励机制模块 (RewardModule.vue) | |||
| - **位置**: 活动计划模块下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: rewards.title) | |||
| - 副标题 (i18n: rewards.subtitle) | |||
| - 空投数据: | |||
| - 总地址数量 | |||
| - 符合条件地址数量 | |||
| - 每地址空投数量 | |||
| - 规则说明 (i18n: rewards.airdrop.rules.*) | |||
| - 代币销毁数据: | |||
| - 当前销毁量 | |||
| - 目标销毁量 | |||
| - 销毁百分比 | |||
| - 停止阈值 | |||
| - 销毁机制说明 (i18n: rewards.burn.mechanism.*) | |||
| - 销毁里程碑数据 | |||
| #### 1.6 收益制度模块 (IncentiveModule.vue) | |||
| - **位置**: 奖励机制模块下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: incentives.title) | |||
| - 副标题 (i18n: incentives.subtitle) | |||
| - 激励模型数据: | |||
| - 模型ID | |||
| - 模型名称 | |||
| - 奖励金额 | |||
| - 特性列表 (i18n: incentives.models.*.feature*) | |||
| - 市场数据: | |||
| - 交易规模 (transactionVolume) | |||
| - 增长率 (growthRate) | |||
| - 安全事件 (securityIncidents) | |||
| #### 1.7 市场数据模块 (MarketDataModule.vue) | |||
| - **位置**: 收益制度模块下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: incentives.market_data.title) | |||
| - 副标题 (i18n: incentives.subtitle) | |||
| - 市场统计数据: | |||
| - 交易量数据 | |||
| - 增长率数据 | |||
| - 安全事件数据 | |||
| #### 1.8 行动召唤区域 | |||
| - **位置**: 页面底部,页脚之前 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.join.title) | |||
| - 副标题 (i18n: ecosystem.join.subtitle) | |||
| - 按钮文本 (i18n: ecosystem.join.cta) | |||
| ### 2. 生态系统页面 (Ecosystem.vue) | |||
| 生态系统页面包含以下主要模块: | |||
| #### 2.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.title) | |||
| - 副标题 (i18n: ecosystem.subtitle) | |||
| #### 2.2 十大生态卡片 (EcosystemCard.vue) | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.ten_ecosystems.title) | |||
| - 副标题 (i18n: ecosystem.ten_ecosystems.subtitle) | |||
| - 生态系统列表数据: | |||
| - ID | |||
| - 标题 | |||
| - 描述 | |||
| - 图标 | |||
| - 链接 | |||
| #### 2.3 全球公司布局 (CompanyCard.vue) | |||
| - **位置**: 十大生态卡片下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.companies.title) | |||
| - 副标题 (i18n: ecosystem.companies.subtitle) | |||
| - 公司列表数据: | |||
| - ID | |||
| - 名称 (i18n: ecosystem.companies.*.name) | |||
| - 描述 (i18n: ecosystem.companies.*.description) | |||
| - 业务重点 (i18n: ecosystem.companies.*.focus) | |||
| - 团队规模 (i18n: ecosystem.companies.*.team) | |||
| #### 2.4 特色项目区域 | |||
| - **位置**: 全球公司布局下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.projects.featured) | |||
| - 查看全部文本 (i18n: ecosystem.projects.viewAll) | |||
| - 特色项目列表数据: | |||
| - ID | |||
| - 名称 | |||
| - 描述 (i18n: projects.*) | |||
| - 分类 | |||
| - 图片 | |||
| - URL | |||
| - 是否特色项目 | |||
| #### 2.5 项目展示区域 | |||
| - **位置**: 特色项目区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.projects.all) | |||
| - 分类列表数据 (i18n: ecosystem.categories.*) | |||
| - 项目列表数据 (与特色项目相同) | |||
| #### 2.6 合作伙伴区域 | |||
| - **位置**: 项目展示区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: ecosystem.partners.title) | |||
| - 副标题 (i18n: ecosystem.partners.subtitle) | |||
| - 合作伙伴列表数据: | |||
| - ID | |||
| - 名称 | |||
| - 标志图片 | |||
| - URL | |||
| ### 3. 关于页面 (About.vue) | |||
| 关于页面包含以下主要模块: | |||
| #### 3.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题 (i18n: about.title) | |||
| - 副标题 (i18n: about.subtitle) | |||
| #### 3.2 团队介绍区域 | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: about.team.title) | |||
| - 副标题 (i18n: about.team.subtitle) | |||
| - 团队成员列表数据: | |||
| - ID | |||
| - 姓名 | |||
| - 职位 | |||
| - 简介 | |||
| - 照片 | |||
| - 社交媒体链接 | |||
| #### 3.3 项目发展历程/路线图 | |||
| - **位置**: 团队介绍区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: about.roadmap.title) | |||
| - 副标题 (i18n: about.roadmap.subtitle) | |||
| - 里程碑列表数据: | |||
| - 日期 | |||
| - 标题 | |||
| - 描述 | |||
| - 是否已完成 | |||
| #### 3.4 合作伙伴与生态 | |||
| - **位置**: 项目发展历程下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: about.partners.title) | |||
| - 副标题 (i18n: about.partners.subtitle) | |||
| - 合作伙伴列表数据: | |||
| - ID | |||
| - 名称 | |||
| - 标志图片 | |||
| - 描述 | |||
| - URL | |||
| ### 4. 社区页面 (Community.vue) | |||
| 社区页面包含以下主要模块: | |||
| #### 4.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题 (i18n: community.title) | |||
| - 副标题 (i18n: community.subtitle) | |||
| #### 4.2 社交媒体链接墙 | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: community.social.title) | |||
| - 副标题 (i18n: community.social.subtitle) | |||
| - 社交媒体列表数据: | |||
| - 平台名称 | |||
| - 图标 | |||
| - 链接 | |||
| - 关注人数 | |||
| #### 4.3 论坛/讨论区链接 | |||
| - **位置**: 社交媒体链接墙下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: community.forums.title) | |||
| - 副标题 (i18n: community.forums.subtitle) | |||
| - 论坛列表数据: | |||
| - 名称 | |||
| - 描述 | |||
| - 链接 | |||
| - 用户数量 | |||
| #### 4.4 信息公示区域 | |||
| - **位置**: 论坛/讨论区链接下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: community.announcements.title) | |||
| - 公告列表数据: | |||
| - 日期 | |||
| - 标题 | |||
| - 摘要 | |||
| - 链接 | |||
| ### 5. 资源页面 (Resources.vue) | |||
| 资源页面包含以下主要模块: | |||
| #### 5.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题 (i18n: resources.title) | |||
| - 副标题 (i18n: resources.subtitle) | |||
| #### 5.2 文档资源区域 | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: resources.docs.title) | |||
| - 副标题 (i18n: resources.docs.subtitle) | |||
| - 文档列表数据: | |||
| - 标题 | |||
| - 描述 | |||
| - 链接 | |||
| - 类别 | |||
| #### 5.3 开发者工具区域 | |||
| - **位置**: 文档资源区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: resources.tools.title) | |||
| - 副标题 (i18n: resources.tools.subtitle) | |||
| - 工具列表数据: | |||
| - 名称 | |||
| - 描述 | |||
| - 链接 | |||
| - 图标 | |||
| #### 5.4 教程与指南区域 | |||
| - **位置**: 开发者工具区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: resources.tutorials.title) | |||
| - 副标题 (i18n: resources.tutorials.subtitle) | |||
| - 教程列表数据: | |||
| - 标题 | |||
| - 描述 | |||
| - 难度级别 | |||
| - 链接 | |||
| - 封面图片 | |||
| ### 6. FAQ页面 (FAQ.vue) | |||
| FAQ页面包含以下主要模块: | |||
| #### 6.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题 (i18n: faq.title) | |||
| - 副标题 (i18n: faq.subtitle) | |||
| #### 6.2 问题分类区域 | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 分类列表数据 (i18n: faq.categories.*) | |||
| #### 6.3 问答列表区域 | |||
| - **位置**: 问题分类区域下方 | |||
| - **数据需求**: | |||
| - 问答列表数据: | |||
| - 问题 (i18n: faq.questions.*.question) | |||
| - 回答 (i18n: faq.questions.*.answer) | |||
| - 分类 | |||
| ### 7. 联系页面 (Contact.vue) | |||
| 联系页面包含以下主要模块: | |||
| #### 7.1 Hero区域 | |||
| - **位置**: 页面顶部 | |||
| - **数据需求**: | |||
| - 标题 (i18n: contact.title) | |||
| - 副标题 (i18n: contact.subtitle) | |||
| #### 7.2 联系表单 | |||
| - **位置**: Hero区域下方 | |||
| - **数据需求**: | |||
| - 表单字段标签 (i18n: contact.form.*) | |||
| - 表单提交按钮文本 (i18n: contact.form.submit) | |||
| - 表单成功/错误消息 (i18n: contact.form.success, contact.form.error) | |||
| #### 7.3 联系信息区域 | |||
| - **位置**: 联系表单旁边 | |||
| - **数据需求**: | |||
| - 标题 (i18n: contact.info.title) | |||
| - 联系方式列表数据: | |||
| - 类型 (电子邮件、电话等) | |||
| - 值 | |||
| - 图标 | |||
| #### 7.4 办公地点区域 | |||
| - **位置**: 联系信息区域下方 | |||
| - **数据需求**: | |||
| - 标题 (i18n: contact.locations.title) | |||
| - 地点列表数据: | |||
| - 城市 | |||
| - 地址 | |||
| - 电话 | |||
| - 邮箱 | |||
| ### 8. 404页面 (NotFound.vue) | |||
| 404页面包含以下主要元素: | |||
| #### 8.1 错误信息区域 | |||
| - **位置**: 页面中央 | |||
| - **数据需求**: | |||
| - 标题 (i18n: notFound.title) | |||
| - 描述 (i18n: notFound.description) | |||
| - 返回首页按钮文本 (i18n: notFound.backHome) | |||
| ## 共享组件 | |||
| ### 1. 导航栏 (NavBar.vue) | |||
| - **位置**: 所有页面顶部 | |||
| - **数据需求**: | |||
| - 网站标志 | |||
| - 菜单项列表数据: | |||
| - 名称 (i18n: nav.*) | |||
| - 链接 | |||
| - 语言切换选项: | |||
| - 语言名称 | |||
| - 语言代码 | |||
| - 移动端菜单按钮文本 | |||
| ### 2. 页脚 (Footer.vue) | |||
| - **位置**: 所有页面底部 | |||
| - **数据需求**: | |||
| - 网站标志 | |||
| - 版权信息 (i18n: footer.copyright) | |||
| - 菜单项列表数据: | |||
| - 名称 (i18n: footer.nav.*) | |||
| - 链接 | |||
| - 社交媒体链接列表数据: | |||
| - 平台名称 | |||
| - 图标 | |||
| - 链接 | |||
| - 订阅通讯表单: | |||
| - 标题 (i18n: footer.newsletter.title) | |||
| - 描述 (i18n: footer.newsletter.description) | |||
| - 输入框占位文本 (i18n: footer.newsletter.placeholder) | |||
| - 提交按钮文本 (i18n: footer.newsletter.submit) | |||
| ## 数据结构与格式 | |||
| ### 1. 国际化文本 | |||
| 所有文本内容应通过i18n系统提供,存储在以下文件中: | |||
| - src/i18n/locales/en.json (英文) | |||
| - src/i18n/locales/zh.json (中文) | |||
| - src/i18n/locales/ja.json (日文) | |||
| ### 2. 静态资源 | |||
| - 图片: public/目录 | |||
| - 视频: public/目录 | |||
| - 图标: 通过SVG内联或图标库提供 | |||
| ### 3. 动态数据 | |||
| 对于可能需要从API获取的数据,应考虑以下格式: | |||
| - JSON格式 | |||
| - 遵循上述各模块的数据需求结构 | |||
| - 包含适当的分页、过滤和排序参数 | |||
| ## 数据匹配要求 | |||
| 为了将外部数据正确匹配到网站结构中,请确保: | |||
| 1. **数据格式一致性**:外部数据应与各组件期望的数据结构保持一致 | |||
| 2. **ID匹配**:使用唯一标识符(ID)确保数据正确关联 | |||
| 3. **国际化支持**:对于多语言内容,确保每种语言都有对应的翻译 | |||
| 4. **图片/媒体资源路径**:确保外部数据中的媒体资源路径与网站的资源路径结构匹配 | |||
| 5. **日期格式**:统一日期格式,建议使用ISO标准格式(YYYY-MM-DD) | |||
| 6. **数值格式**:确保数值类型数据(如金额、百分比等)格式一致 | |||
| ## 特别注意事项 | |||
| 1. **生态系统公司数据**:CompanyCard.vue组件使用ID(数字)作为公司标识符,而不是名称。确保i18n文件中的公司数据使用相同的ID结构(ecosystem.companies.1.focus而不是ecosystem.companies.singapore.focus) | |||
| 2. **市场数据重复**:MarketDataModule.vue和IncentiveModule.vue都包含市场数据展示,但数据结构略有不同。确保外部数据能同时满足这两种结构的需求。 | |||
| 3. **代币销毁数据**:RewardModule.vue现在包含了原TokenBurnModule.vue的功能,确保代币销毁相关数据能正确映射到RewardModule组件中。 | |||