Browse Source

'UI修改'

main
hflllll 3 months ago
parent
commit
d5b094fcae
15 changed files with 2459 additions and 331 deletions
  1. +143
    -0
      need.txt
  2. +59
    -0
      need2.md
  3. +206
    -0
      src/components/ecosystem/CompanyCard.vue
  4. +113
    -0
      src/components/ecosystem/EcosystemCard.vue
  5. +111
    -0
      src/components/home/EventsModule.vue
  6. +72
    -0
      src/components/home/MilestoneModule.vue
  7. +168
    -0
      src/components/rewards/IncentiveModule.vue
  8. +101
    -0
      src/components/rewards/MarketDataModule.vue
  9. +216
    -0
      src/components/rewards/RewardModule.vue
  10. +261
    -7
      src/i18n/locales/en.json
  11. +249
    -225
      src/i18n/locales/ja.json
  12. +254
    -0
      src/i18n/locales/zh.json
  13. +32
    -95
      src/views/Ecosystem.vue
  14. +28
    -4
      src/views/Home.vue
  15. +446
    -0
      website_structure.txt

+ 143
- 0
need.txt View File

@ -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

+ 59
- 0
need2.md View File

@ -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 文件。

+ 206
- 0
src/components/ecosystem/CompanyCard.vue View File

@ -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>

+ 113
- 0
src/components/ecosystem/EcosystemCard.vue View File

@ -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>

+ 111
- 0
src/components/home/EventsModule.vue View File

@ -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>

+ 72
- 0
src/components/home/MilestoneModule.vue View File

@ -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>

+ 168
- 0
src/components/rewards/IncentiveModule.vue View File

@ -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>

+ 101
- 0
src/components/rewards/MarketDataModule.vue View File

@ -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>

+ 216
- 0
src/components/rewards/RewardModule.vue View File

@ -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>

+ 261
- 7
src/i18n/locales/en.json View File

@ -2,11 +2,11 @@
"nav": {
"home": "Home",
"ecosystem": "Ecosystem",
"about": "About",
"about": "About Us",
"resources": "Resources",
"community": "Community",
"faq": "FAQ",
"contact": "Contact"
"contact": "Contact Us"
},
"ecosystem": {
"title": "Ecosystem",
@ -40,6 +40,158 @@
"github": "GitHub",
"grants": "Grants Program",
"community": "Developer Community"
},
"ten_ecosystems": {
"title": "MOSE Ten Ecosystems",
"subtitle": "We've built a complete ecosystem to support various blockchain application scenarios",
"coming_soon": "Coming Soon",
"mose_layer1": {
"name": "MOSE Layer1",
"description": "High-performance, scalable base layer blockchain"
},
"flashbox": {
"name": "FlashBox",
"description": "Lightning-fast transactions and instant confirmations payment solution"
},
"xrouter": {
"name": "XRouter",
"description": "Cross-chain routing protocol connecting different blockchains"
},
"musd": {
"name": "MUSD",
"description": "Decentralized stablecoin pegged 1:1 to USD"
},
"dex": {
"name": "MOSE DEX",
"description": "Decentralized exchange with low slippage and fees"
},
"bank": {
"name": "MOSE Bank",
"description": "DeFi lending platform supporting multiple assets"
},
"wallet": {
"name": "MOSE Wallet",
"description": "Secure and user-friendly digital asset wallet"
},
"privacy_tools": {
"name": "Privacy Tools",
"description": "Zero-knowledge proof tools for transaction privacy"
},
"dao": {
"name": "DAO Governance",
"description": "Decentralized autonomous organization governance framework"
},
"defi": {
"name": "DeFi Ecosystem",
"description": "Complete decentralized finance ecosystem"
}
},
"companies": {
"title": "Global Presence",
"subtitle": "MOSE has established multiple offices worldwide to serve users globally",
"list_title": "Global Offices",
"focus": "Business Focus",
"team": "Team Size",
"1": {
"focus": "Strategic decisions and management",
"team": "100+",
"name": "Singapore HQ",
"description": "MOSE global headquarters, responsible for global strategy and business development"
},
"2": {
"focus": "Financial compliance and governance",
"team": "50+",
"name": "Switzerland Office",
"description": "European headquarters, focusing on compliance and legal affairs"
},
"3": {
"focus": "Blockchain technology innovation",
"team": "80+",
"name": "Japan Office",
"description": "Asia-Pacific technology center, focusing on R&D"
},
"4": {
"focus": "Institutional client relationships",
"team": "30+",
"name": "UK Office",
"description": "European financial center, responsible for enterprise cooperation"
},
"5": {
"focus": "Marketing and community",
"team": "60+",
"name": "USA Office",
"description": "North American headquarters, focusing on marketing and community building"
},
"6": {
"focus": "Middle East regional business",
"team": "25+",
"name": "UAE Office",
"description": "Middle East regional center, expanding the Middle East market"
},
"7": {
"focus": "Gaming and NFT ecosystem",
"team": "40+",
"name": "Korea Office",
"description": "East Asian regional center, focusing on gaming and NFT applications"
},
"8": {
"focus": "Oceania market development",
"team": "20+",
"name": "Australia Office",
"description": "Oceania headquarters, responsible for regional market expansion"
},
"9": {
"focus": "Technical research and development",
"team": "35+",
"name": "Canada Office",
"description": "North American R&D center, focusing on core protocol development"
},
"10": {
"focus": "Security and privacy technologies",
"team": "45+",
"name": "Germany Office",
"description": "European technology center, responsible for security and privacy technology R&D"
},
"singapore": {
"name": "Singapore HQ",
"description": "MOSE global headquarters, responsible for global strategy and business development"
},
"switzerland": {
"name": "Switzerland Office",
"description": "European headquarters, focusing on compliance and legal affairs"
},
"japan": {
"name": "Japan Office",
"description": "Asia-Pacific technology center, focusing on R&D"
},
"uk": {
"name": "UK Office",
"description": "European financial center, responsible for enterprise cooperation"
},
"usa": {
"name": "USA Office",
"description": "North American headquarters, focusing on marketing and community building"
},
"uae": {
"name": "UAE Office",
"description": "Middle East regional center, expanding the Middle East market"
},
"korea": {
"name": "Korea Office",
"description": "East Asian regional center, focusing on gaming and NFT applications"
},
"australia": {
"name": "Australia Office",
"description": "Oceania headquarters, responsible for regional market expansion"
},
"canada": {
"name": "Canada Office",
"description": "North American R&D center, focusing on core protocol development"
},
"germany": {
"name": "Germany Office",
"description": "European technology center, responsible for security and privacy technology R&D"
}
}
},
"footer": {
@ -63,6 +215,108 @@
"cta": {
"explore": "Explore Ecosystem",
"docs": "Documentation"
},
"milestone": {
"title": "Development Milestones",
"july_2026": {
"title": "Platform Expansion July 2026",
"description": "We plan to achieve a major expansion of the platform in July 2026, enhancing network performance and user experience."
},
"achievements": {
"one": {
"title": "Technical Breakthrough",
"description": "Achieve performance breakthrough of 10,000+ transactions per second"
},
"two": {
"title": "Ecosystem Growth",
"description": "Ecosystem project count growing to 500+"
},
"three": {
"title": "Global Coverage",
"description": "Users across 100+ countries and regions"
}
}
},
"events": {
"title": "Events Calendar",
"subtitle": "Learn about our upcoming events and conferences",
"learn_more": "Learn More",
"view_all": "View All Events",
"consensus_conference": {
"title": "MOSE Consensus Conference",
"description": "Bringing together industry leaders and developers to discuss the future of blockchain technology",
"location": "Singapore"
},
"swiss_meeting": {
"title": "Swiss Tech Summit",
"description": "An in-depth technical conference on technological innovations in the MOSE ecosystem",
"location": "Zurich, Switzerland"
},
"privacy_summit": {
"title": "Privacy Technology Summit",
"description": "Exploring cutting-edge developments and applications in blockchain privacy technology",
"location": "Shanghai, China"
}
}
},
"rewards": {
"title": "Reward Mechanism",
"subtitle": "Learn about MOSE's reward mechanisms and token distribution plans",
"airdrop": {
"title": "Airdrop Rewards",
"description": "Participate in our community activities and earn MOSE token rewards",
"total_addresses": "Total Addresses",
"eligible_addresses": "Eligible Addresses",
"amount_per_address": "Amount Per Address",
"rules": {
"title": "Participation Rules",
"daily_release": "Rewards will be released daily over 30 days to ensure long-term participation",
"min_holding": "Must hold a minimum amount of MOSE tokens to claim rewards",
"flash_swap": "Flash swapping is prohibited to prevent abuse"
}
},
"burn": {
"title": "Token Burning Mechanism",
"description": "Our deflationary mechanism is designed to increase MOSE token value over time",
"current": "Current Burned Amount",
"target": "Target Burn Amount",
"percentage": "Burn Percentage",
"stop_threshold": "Stop Threshold",
"mechanism": {
"title": "Burning Mechanism",
"fee_burn": "20% of all transaction fees will be used for token burning",
"stop_condition": "Burning stops when circulating supply reaches 10 million MOSE",
"compound_growth": "Burning rate increases as the number of burned tokens grows"
}
}
},
"incentives": {
"title": "Incentive Models",
"subtitle": "Choose the MOSE incentive program that works best for you",
"models": {
"v4": {
"title": "Standard Participation Program",
"feature1": "Suitable for short-term participation (30 days)",
"feature2": "No token locking required",
"feature3": "Complete simple tasks to earn rewards"
},
"v5": {
"title": "Advanced Contribution Program",
"feature1": "Designed for long-term participation (90 days)",
"feature2": "Requires locking some MOSE tokens",
"feature3": "Complete advanced tasks for additional rewards"
}
},
"reward_amount": "Reward Amount",
"select_model": "Select This Plan",
"market_data": {
"title": "Market Data",
"transaction_volume": "Transaction Volume",
"transaction_subtitle": "Total transaction volume on MOSE network in 2023",
"growth_rate": "Year-over-Year Growth",
"growth_subtitle": "Transaction volume growth compared to last year",
"security_incidents": "Security Loss Avoided",
"security_subtitle": "Total loss avoided through our security mechanisms"
}
},
"resources": {
@ -287,13 +541,13 @@
},
"common": {
"loading": "Loading...",
"error": "An error occurred",
"error": "Error occurred",
"success": "Success!",
"linkedin": "LinkedIn",
"readMore": "Read More",
"viewAll": "View All",
"learnMore": "Learn More",
"comingSoon": "Coming Soon",
"readMore": "Read more",
"viewAll": "View all",
"learnMore": "Learn more",
"comingSoon": "Coming soon",
"submit": "Submit",
"cancel": "Cancel",
"back": "Back",


+ 249
- 225
src/i18n/locales/ja.json View File

@ -10,19 +10,19 @@
},
"ecosystem": {
"title": "エコシステム",
"subtitle": "MOSEエコシステムを探索し、プラットフォーム上に構築されたさまざまなプロジェクトとアプリケーションを発見しましょう",
"subtitle": "MOSEエコシステムを探索し、プラットフォーム上に構築されたさまざまなプロジェクトとアプリケーションを発見する",
"categories": {
"all": "すべて",
"defi": "DeFi",
"nft": "NFT",
"dao": "DAO",
"gaming": "ゲーム",
"infrastructure": "インフラストラクチャ",
"infrastructure": "インフラストラクチャ",
"social": "ソーシャル"
},
"projects": {
"featured": "注目のプロジェクト",
"viewAll": "すべて表示",
"viewAll": "すべて見る",
"learnMore": "詳細を見る"
},
"partners": {
@ -40,259 +40,283 @@
"github": "GitHub",
"grants": "助成金プログラム",
"community": "開発者コミュニティ"
},
"ten_ecosystems": {
"title": "MOSE 10大エコシステム",
"subtitle": "様々なブロックチェーンアプリケーションシナリオをサポートする完全なエコシステムを構築しました",
"coming_soon": "近日公開",
"mose_layer1": {
"name": "MOSE Layer1",
"description": "高性能でスケーラブルなベースレイヤーブロックチェーン"
},
"flashbox": {
"name": "FlashBox",
"description": "高速な取引と即時確認の決済ソリューション"
},
"xrouter": {
"name": "XRouter",
"description": "異なるブロックチェーンを接続するクロスチェーンルーティングプロトコル"
},
"musd": {
"name": "MUSD",
"description": "米ドルに1:1でペッグされた分散型ステーブルコイン"
},
"dex": {
"name": "MOSE DEX",
"description": "低スリッページと低手数料の分散型取引所"
},
"bank": {
"name": "MOSE Bank",
"description": "複数の資産をサポートするDeFiレンディングプラットフォーム"
},
"wallet": {
"name": "MOSE Wallet",
"description": "安全で使いやすいデジタル資産ウォレット"
},
"privacy_tools": {
"name": "プライバシーツール",
"description": "取引プライバシーのためのゼロ知識証明ツール"
},
"dao": {
"name": "DAOガバナンス",
"description": "分散型自律組織のガバナンスフレームワーク"
},
"defi": {
"name": "DeFiエコシステム",
"description": "完全な分散型金融エコシステム"
}
},
"companies": {
"title": "グローバルプレゼンス",
"subtitle": "MOSEは世界中にオフィスを設立し、グローバルユーザーにサービスを提供しています",
"list_title": "グローバルオフィス",
"focus": "事業フォーカス",
"team": "チーム規模",
"1": {
"focus": "戦略的意思決定と経営",
"team": "100+",
"name": "シンガポール本社",
"description": "MOSEのグローバル本社、世界戦略とビジネス開発を担当"
},
"2": {
"focus": "金融コンプライアンスとガバナンス",
"team": "50+",
"name": "スイスオフィス",
"description": "欧州本部、コンプライアンスと法務に注力"
},
"3": {
"focus": "ブロックチェーン技術革新",
"team": "80+",
"name": "日本オフィス",
"description": "アジア太平洋技術センター、研究開発に注力"
},
"4": {
"focus": "機関投資家向け関係構築",
"team": "30+",
"name": "イギリスオフィス",
"description": "欧州金融センター、企業連携を担当"
},
"5": {
"focus": "マーケティングとコミュニティ",
"team": "60+",
"name": "アメリカオフィス",
"description": "北米本部、マーケティングとコミュニティ構築に注力"
},
"6": {
"focus": "中東地域ビジネス",
"team": "25+",
"name": "UAEオフィス",
"description": "中東地域センター、中東市場を開拓"
},
"7": {
"focus": "ゲームとNFTエコシステム",
"team": "40+",
"name": "韓国オフィス",
"description": "東アジア地域センター、ゲームとNFTアプリケーションに注力"
},
"8": {
"focus": "オセアニア市場開発",
"team": "20+",
"name": "オーストラリアオフィス",
"description": "オセアニア本部、地域市場拡大を担当"
},
"9": {
"focus": "技術研究開発",
"team": "35+",
"name": "カナダオフィス",
"description": "北米研究開発センター、コアプロトコル開発に注力"
},
"10": {
"focus": "セキュリティとプライバシー技術",
"team": "45+",
"name": "ドイツオフィス",
"description": "欧州技術センター、セキュリティとプライバシー技術の研究開発を担当"
},
"singapore": {
"name": "シンガポール本社",
"description": "MOSEのグローバル本社、世界戦略とビジネス開発を担当"
},
"switzerland": {
"name": "スイスオフィス",
"description": "欧州本部、コンプライアンスと法務に注力"
},
"japan": {
"name": "日本オフィス",
"description": "アジア太平洋技術センター、研究開発に注力"
},
"uk": {
"name": "イギリスオフィス",
"description": "欧州金融センター、企業連携を担当"
},
"usa": {
"name": "アメリカオフィス",
"description": "北米本部、マーケティングとコミュニティ構築に注力"
},
"uae": {
"name": "UAEオフィス",
"description": "中東地域センター、中東市場を開拓"
},
"korea": {
"name": "韓国オフィス",
"description": "東アジア地域センター、ゲームとNFTアプリケーションに注力"
},
"australia": {
"name": "オーストラリアオフィス",
"description": "オセアニア本部、地域市場拡大を担当"
},
"canada": {
"name": "カナダオフィス",
"description": "北米研究開発センター、コアプロトコル開発に注力"
},
"germany": {
"name": "ドイツオフィス",
"description": "欧州技術センター、セキュリティとプライバシー技術の研究開発を担当"
}
}
},
"footer": {
"rights": "全著作権所有",
"privacy": "プライバシーポリシー",
"terms": "利用規約"
},
"language": {
"en": "English",
"zh": "中文",
"ja": "日本語"
},
"home": {
"hero": {
"title": "MOSEブロックチェーン",
"subtitle": "高性能、セキュリティ、スケーラビリティを備えた次世代ブロックチェーンプラットフォーム"
},
"video": {
"title": "動画を見る"
"title": "ビデオを見る"
},
"cta": {
"explore": "エコシステムを探索",
"docs": "ドキュメント"
}
},
"resources": {
"hero": {
"title": "リソース",
"subtitle": "MOSEでの開発に役立つドキュメント、チュートリアル、SDK、その他のリソースにアクセスする"
},
"categories": {
"all": "すべてのリソース",
"docs": "ドキュメント",
"tutorials": "チュートリアル",
"sdks": "SDKとAPI",
"tools": "ツール",
"community": "コミュニティ"
},
"items": {
"docs_title": "開発者ドキュメント",
"docs_description": "MOSEでの開発のための包括的なガイドとリファレンスドキュメント",
"api_title": "APIリファレンス",
"api_description": "MOSEブロックチェーンと統合するための詳細なAPIドキュメント",
"tutorial_beginner_title": "入門ガイド",
"tutorial_beginner_description": "初心者がMOSEでの開発を始めるためのステップバイステップのチュートリアル",
"tutorial_advanced_title": "高度なチュートリアル",
"tutorial_advanced_description": "経験豊富な開発者が複雑なアプリケーションを構築するための詳細なガイド",
"sdk_js_title": "JavaScript SDK",
"sdk_js_description": "MOSEブロックチェーンと対話するための公式JavaScript SDK",
"sdk_python_title": "Python SDK",
"sdk_python_description": "MOSEでアプリケーションを構築するための公式Python SDK",
"explorer_title": "ブロックエクスプローラー",
"explorer_description": "MOSEブロックチェーン上のトランザクション、ブロック、アカウントを探索する",
"wallet_title": "MOSEウォレット",
"wallet_description": "MOSEの資産を管理し、分散型アプリケーションと対話するための安全なウォレット",
"forum_title": "開発者フォーラム",
"forum_description": "他の開発者と繋がり、MOSEコミュニティからサポートを受ける",
"github_title": "GitHubリポジトリ",
"github_description": "オープンソースコードにアクセスし、貢献し、問題を報告する"
},
"explore": "探索する",
"newsletter": {
"title": "最新情報を入手",
"subtitle": "ニュースレターを購読して、最新の更新情報、チュートリアル、リソースを受け取る",
"placeholder": "メールアドレスを入力",
"button": "購読する"
}
},
"about": {
"hero": {
"title": "私たちについて",
"subtitle": "MOSEのビジョン、ミッション、チームについて知る"
},
"story": {
"title": "私たちの物語",
"paragraph1": "MOSEは、高性能、セキュア、スケーラブルなブロックチェーンプラットフォームの構築に取り組むプロジェクトです。私たちのミッションは、分散型アプリケーションのための強力なインフラストラクチャを提供し、開発者が次世代のブロックチェーンアプリケーションを構築できるようにすることです。",
"paragraph2": "私たちのチームは、ブロックチェーン技術の専門家、経験豊富な開発者、業界のリーダーで構成されており、ブロックチェーン技術の発展と応用を推進するために協力しています。",
"paragraph3": "MOSEの核となる価値観には、分散化、セキュリティ、スケーラビリティ、コミュニティ主導の開発が含まれます。これらの価値観に導かれることで、より開かれた、公平で効率的なブロックチェーンエコシステムを構築できると信じています。"
},
"team": {
"title": "私たちのチーム",
"positions": {
"ceo": "CEO&創設者",
"cto": "CTO",
"lead_dev": "リード開発者",
"marketing": "マーケティングディレクター"
"milestone": {
"title": "開発マイルストーン",
"july_2026": {
"title": "2026年7月プラットフォーム拡張",
"description": "2026年7月にプラットフォームの大規模な拡張を実現し、ネットワークパフォーマンスとユーザーエクスペリエンスを向上させる予定です。"
},
"achievements": {
"one": {
"title": "技術的ブレークスルー",
"description": "毎秒10,000以上のトランザクション処理能力を実現"
},
"two": {
"title": "エコシステム成長",
"description": "エコシステムプロジェクト数が500以上に成長"
},
"three": {
"title": "グローバルカバレッジ",
"description": "100以上の国と地域のユーザーをカバー"
}
}
},
"milestones": {
"title": "マイルストーン",
"founded": "MOSE設立",
"founded_desc": "MOSEは高性能なブロックチェーンプラットフォームを作るというビジョンを持って設立されました。",
"testnet": "テストネット立ち上げ",
"testnet_desc": "主要な機能を備えたテストネットを成功裏に立ち上げました。",
"mainnet": "メインネットベータ",
"mainnet_desc": "性能とセキュリティが向上したメインネットのベータ版をリリースしました。",
"growth": "エコシステムの成長",
"growth_desc": "様々なプロジェクトとパートナーシップによりエコシステムを拡大しました。"
}
},
"projects": {
"mose_swap": "低手数料と高流動性を備えた分散型取引所",
"mose_nft": "MOSEブロックチェーン上でユニークなデジタル資産を取引",
"mose_dao": "MOSEエコシステムの分散型ガバナンス",
"mose_gaming": "MOSE上に構築されたPlay-to-Earnゲーム",
"mose_bridge": "MOSE資産のためのクロスチェーンブリッジ",
"mose_social": "分散型ソーシャルネットワーク",
"mose_lending": "分散型貸付プロトコル",
"mose_staking": "MOSEトークンをステーキングして報酬を獲得"
},
"contact": {
"email": {
"info": "info@mose.io",
"support": "support@mose.io"
},
"hero": {
"title": "お問い合わせ",
"subtitle": "ご質問やご提案がありますか?お気軽にお問い合わせください"
},
"form": {
"name": "お名前",
"email": "メールアドレス",
"subject": "件名",
"message": "メッセージ",
"submit": "送信する",
"success": "メッセージが送信されました。近日中にご連絡いたします。",
"error": "メッセージの送信中にエラーが発生しました。後ほど再試行してください。"
},
"info": {
"title": "連絡先情報",
"address": "住所",
"address_value": "中国上海市浦東新区世紀大道1号",
"phone": "電話番号",
"phone_value": "+86 123 4567 8910",
"hours": "営業時間",
"hours_value": "月曜日〜金曜日:9:00 - 18:00"
},
"social": {
"title": "ソーシャルメディア",
"follow": "フォローする"
"events": {
"title": "イベントカレンダー",
"subtitle": "今後のイベントやカンファレンスについて学ぶ",
"learn_more": "詳細を見る",
"view_all": "すべてのイベントを見る",
"consensus_conference": {
"title": "MOSEコンセンサスカンファレンス",
"description": "ブロックチェーン技術の未来について議論するために業界のリーダーと開発者が集まります",
"location": "シンガポール"
},
"swiss_meeting": {
"title": "スイステクノロジーサミット",
"description": "MOSEエコシステムにおける技術革新に関する詳細な技術会議",
"location": "スイス、チューリッヒ"
},
"privacy_summit": {
"title": "プライバシーテクノロジーサミット",
"description": "ブロックチェーンプライバシー技術の最先端の開発と応用を探索",
"location": "中国、上海"
}
}
},
"community": {
"hero": {
"title": "MOSEコミュニティ",
"subtitle": "活気あるコミュニティに参加して、ブロックチェーンの未来を一緒に構築しましょう"
},
"join": {
"title": "コミュニティに参加する",
"subtitle": "世界中の開発者、ユーザー、愛好家とつながり、学びましょう"
},
"channels": {
"title": "コミュニティチャネル",
"discord": {
"title": "Discord",
"description": "開発者やコミュニティメンバーとリアルタイムでディスカッションするためにDiscordサーバーに参加しましょう",
"button": "Discordに参加"
},
"telegram": {
"title": "Telegram",
"description": "Telegramチャンネルを通じて最新ニュースとお知らせを入手しましょう",
"button": "Telegramに参加"
},
"twitter": {
"title": "Twitter",
"description": "最新情報や業界の洞察を得るためにTwitterをフォローしましょう",
"button": "Twitterでフォロー"
},
"forum": {
"title": "フォーラム",
"description": "深い議論に参加し、アイデアを共有し、提案を行いましょう",
"button": "フォーラムを訪問"
"rewards": {
"title": "報酬メカニズム",
"subtitle": "MOSEの報酬メカニズムとトークン配布計画について学ぶ",
"airdrop": {
"title": "エアドロップ報酬",
"description": "コミュニティ活動に参加してMOSEトークン報酬を獲得",
"total_addresses": "総アドレス数",
"eligible_addresses": "対象アドレス",
"amount_per_address": "アドレスあたりの量",
"rules": {
"title": "参加ルール",
"daily_release": "報酬は長期参加を確保するため30日間毎日リリースされます",
"min_holding": "報酬を請求するには最小量のMOSEトークンを保持する必要があります",
"flash_swap": "乱用を防ぐためフラッシュスワップは禁止されています"
}
},
"events": {
"title": "コミュニティイベント",
"upcoming": "今後のイベント",
"past": "過去のイベント",
"virtual": "オンライン",
"inperson": "対面",
"register": "登録",
"watch": "録画を見る"
},
"contributors": {
"title": "コミュニティ貢献者",
"description": "MOSEエコシステムに貢献してくださったすべてのコミュニティメンバーに感謝します",
"become": "貢献者になる"
"burn": {
"title": "トークン焼却メカニズム",
"description": "デフレーションメカニズムは時間の経過とともにMOSEトークンの価値を高めるよう設計されています",
"current": "現在の焼却量",
"target": "目標焼却量",
"percentage": "焼却割合",
"stop_threshold": "停止しきい値",
"mechanism": {
"title": "焼却メカニズム",
"fee_burn": "すべての取引手数料の20%がトークン焼却に使用されます",
"stop_condition": "流通量が1000万MOSEに達すると焼却は停止します",
"compound_growth": "焼却されたトークン数が増えるにつれて焼却率が上昇します"
}
}
},
"faq": {
"hero": {
"title": "よくある質問",
"subtitle": "MOSEプラットフォームに関するよくある質問への回答を見つけましょう"
},
"search": {
"placeholder": "質問を検索...",
"button": "検索",
"noresults": "結果が見つかりません。別のキーワードをお試しください。"
},
"categories": {
"all": "すべて",
"general": "一般",
"technical": "技術",
"ecosystem": "エコシステム",
"token": "トークン",
"development": "開発"
},
"questions": {
"general": {
"what_is_mose": {
"question": "MOSEとは何ですか?",
"answer": "MOSEは、分散型アプリケーションのための強力なインフラストラクチャを提供するために設計された、高性能、セキュア、スケーラブルなブロックチェーンプラットフォームです。高いスループット、低レイテンシー、強力なセキュリティを特徴とし、開発者が次世代のブロックチェーンアプリケーションを構築できるようにします。"
},
"how_started": {
"question": "MOSEプロジェクトはどのように始まりましたか?",
"answer": "MOSEプロジェクトは、既存のブロックチェーン技術の限界を見て、より効率的で安全なソリューションを作りたいと考えたブロックチェーン技術の専門家と業界リーダーのグループによって2021年に設立されました。"
}
"incentives": {
"title": "インセンティブモデル",
"subtitle": "あなたに最適なMOSEインセンティブプログラムを選択してください",
"models": {
"v4": {
"title": "標準参加プログラム",
"feature1": "短期参加(30日間)に適しています",
"feature2": "トークンロックは不要",
"feature3": "簡単なタスクを完了して報酬を獲得"
},
"technical": {
"consensus": {
"question": "MOSEはどのようなコンセンサスメカニズムを使用していますか?",
"answer": "MOSEは、高いスループットと高速な確定性を提供するために、プルーフオブステーク(PoS)と実用的ビザンチン障害耐性(PBFT)の利点を組み合わせた革新的なハイブリッドコンセンサスメカニズムを使用しています。"
},
"tps": {
"question": "MOSEのトランザクション処理能力はどのくらいですか?",
"answer": "MOSEは低レイテンシーと高いセキュリティを維持しながら、毎秒数千のトランザクション(TPS)を処理することができ、高性能なブロックチェーンアプリケーションに最適です。"
}
},
"ecosystem": {
"projects": {
"question": "現在MOSEで構築されているプロジェクトは何ですか?",
"answer": "MOSEエコシステムには、DeFiプロトコル、NFTプラットフォーム、ゲームアプリケーション、ソーシャルネットワークなど、さまざまなプロジェクトが含まれています。エコシステムページですべてのプロジェクトを見ることができます。"
},
"partners": {
"question": "MOSEのパートナーは誰ですか?",
"answer": "MOSEは、ブロックチェーン技術の開発と応用を促進するために、主要なブロックチェーン企業、研究機関、企業と戦略的パートナーシップを確立しています。"
}
"v5": {
"title": "高度貢献プログラム",
"feature1": "長期参加(90日間)向けに設計",
"feature2": "一部のMOSEトークンをロックする必要があります",
"feature3": "高度なタスクを完了して追加報酬を獲得"
}
},
"more": {
"title": "まだ質問がありますか?",
"contact": "お問い合わせ",
"community": "コミュニティに参加"
"reward_amount": "報酬額",
"select_model": "このプランを選択",
"market_data": {
"title": "市場データ",
"transaction_volume": "取引量",
"transaction_subtitle": "2023年のMOSEネットワークでの総取引量",
"growth_rate": "前年比成長率",
"growth_subtitle": "昨年と比較した取引量の成長",
"security_incidents": "回避されたセキュリティ損失",
"security_subtitle": "当社のセキュリティメカニズムにより回避された総損失"
}
},
"common": {
"loading": "読み込み中...",
"error": "エラーが発生しました",
"success": "成功!",
"success": "成功しました!",
"linkedin": "LinkedIn",
"readMore": "もっと読む",
"readMore": "詳細を見る",
"viewAll": "すべて表示",
"learnMore": "詳細を見る",
"learnMore": "もっと学ぶ",
"comingSoon": "近日公開",
"submit": "送信",
"cancel": "キャンセル",


+ 254
- 0
src/i18n/locales/zh.json View File

@ -40,6 +40,158 @@
"github": "GitHub",
"grants": "资助计划",
"community": "开发者社区"
},
"ten_ecosystems": {
"title": "MOSE十大生态系统",
"subtitle": "我们构建了完整的生态系统,支持各种区块链应用场景",
"coming_soon": "即将上线",
"mose_layer1": {
"name": "MOSE Layer1",
"description": "高性能、可扩展的基础链层"
},
"flashbox": {
"name": "FlashBox",
"description": "闪电交易和即时确认的支付解决方案"
},
"xrouter": {
"name": "XRouter",
"description": "跨链路由协议,连接不同区块链"
},
"musd": {
"name": "MUSD",
"description": "去中心化稳定币,与美元1:1锚定"
},
"dex": {
"name": "MOSE DEX",
"description": "去中心化交易所,低滑点、低手续费"
},
"bank": {
"name": "MOSE Bank",
"description": "DeFi借贷平台,支持多种资产"
},
"wallet": {
"name": "MOSE Wallet",
"description": "安全、易用的数字资产钱包"
},
"privacy_tools": {
"name": "隐私工具",
"description": "保护交易隐私的零知识证明工具"
},
"dao": {
"name": "DAO治理",
"description": "去中心化自治组织治理框架"
},
"defi": {
"name": "DeFi生态",
"description": "完整的去中心化金融生态系统"
}
},
"companies": {
"title": "全球布局",
"subtitle": "MOSE在全球设立了多个办公室,为全球用户提供服务",
"list_title": "全球办公室",
"focus": "业务重点",
"team": "团队规模",
"1": {
"focus": "战略决策和管理",
"team": "100+",
"name": "新加坡总部",
"description": "MOSE的全球总部,负责全球战略和业务发展"
},
"2": {
"focus": "金融合规和治理",
"team": "50+",
"name": "瑞士办公室",
"description": "欧洲总部,专注于合规和法律事务"
},
"3": {
"focus": "区块链技术创新",
"team": "80+",
"name": "日本办公室",
"description": "亚太地区技术中心,专注于技术研发"
},
"4": {
"focus": "机构客户关系",
"team": "30+",
"name": "英国办公室",
"description": "欧洲金融中心,负责企业合作"
},
"5": {
"focus": "市场营销与社区",
"team": "60+",
"name": "美国办公室",
"description": "北美总部,专注于市场推广和社区建设"
},
"6": {
"focus": "中东区域业务",
"team": "25+",
"name": "阿联酋办公室",
"description": "中东区域中心,拓展中东市场"
},
"7": {
"focus": "游戏与NFT生态",
"team": "40+",
"name": "韩国办公室",
"description": "东亚区域中心,专注于游戏和NFT应用"
},
"8": {
"focus": "大洋洲市场发展",
"team": "20+",
"name": "澳大利亚办公室",
"description": "大洋洲总部,负责区域市场拓展"
},
"9": {
"focus": "技术研发",
"team": "35+",
"name": "加拿大办公室",
"description": "北美研发中心,专注于底层协议开发"
},
"10": {
"focus": "安全与隐私技术",
"team": "45+",
"name": "德国办公室",
"description": "欧洲技术中心,负责安全和隐私技术研发"
},
"singapore": {
"name": "新加坡总部",
"description": "MOSE的全球总部,负责全球战略和业务发展"
},
"switzerland": {
"name": "瑞士办公室",
"description": "欧洲总部,专注于合规和法律事务"
},
"japan": {
"name": "日本办公室",
"description": "亚太地区技术中心,专注于技术研发"
},
"uk": {
"name": "英国办公室",
"description": "欧洲金融中心,负责企业合作"
},
"usa": {
"name": "美国办公室",
"description": "北美总部,专注于市场推广和社区建设"
},
"uae": {
"name": "阿联酋办公室",
"description": "中东区域中心,拓展中东市场"
},
"korea": {
"name": "韩国办公室",
"description": "东亚区域中心,专注于游戏和NFT应用"
},
"australia": {
"name": "澳大利亚办公室",
"description": "大洋洲总部,负责区域市场拓展"
},
"canada": {
"name": "加拿大办公室",
"description": "北美研发中心,专注于底层协议开发"
},
"germany": {
"name": "德国办公室",
"description": "欧洲技术中心,负责安全和隐私技术研发"
}
}
},
"footer": {
@ -63,6 +215,108 @@
"cta": {
"explore": "探索生态系统",
"docs": "文档"
},
"milestone": {
"title": "发展里程碑",
"july_2026": {
"title": "2026年7月平台扩展",
"description": "我们计划在2026年7月实现平台的重大扩展,提升网络性能和用户体验。"
},
"achievements": {
"one": {
"title": "技术突破",
"description": "实现每秒处理10,000+交易的性能突破"
},
"two": {
"title": "生态扩展",
"description": "生态系统项目数量增长至500+"
},
"three": {
"title": "全球覆盖",
"description": "覆盖100+国家/地区的用户"
}
}
},
"events": {
"title": "活动计划",
"subtitle": "了解我们的即将举行的活动和会议",
"learn_more": "了解更多",
"view_all": "查看全部活动",
"consensus_conference": {
"title": "MOSE共识大会",
"description": "汇集行业领袖和开发者,共同探讨区块链技术的未来",
"location": "新加坡"
},
"swiss_meeting": {
"title": "瑞士技术峰会",
"description": "关于MOSE生态系统技术创新的深度技术会议",
"location": "瑞士苏黎世"
},
"privacy_summit": {
"title": "隐私技术峰会",
"description": "探讨区块链隐私技术的前沿发展和应用",
"location": "中国上海"
}
}
},
"rewards": {
"title": "奖励机制",
"subtitle": "了解MOSE的奖励机制和代币分配计划",
"airdrop": {
"title": "空投奖励",
"description": "参与我们的社区活动并获得MOSE代币奖励",
"total_addresses": "总地址数量",
"eligible_addresses": "符合条件地址",
"amount_per_address": "每地址奖励",
"rules": {
"title": "参与规则",
"daily_release": "奖励将在30天内每日释放,确保长期参与",
"min_holding": "必须持有最低数量的MOSE代币才能领取奖励",
"flash_swap": "禁止快速交换(闪电交换)以防止滥用"
}
},
"burn": {
"title": "代币销毁机制",
"description": "我们的通缩机制设计旨在随时间增加MOSE代币价值",
"current": "已销毁数量",
"target": "目标销毁数量",
"percentage": "销毁比例",
"stop_threshold": "停止阈值",
"mechanism": {
"title": "销毁机制",
"fee_burn": "所有交易费用的20%将用于代币销毁",
"stop_condition": "当流通供应量达到1000万MOSE时停止销毁",
"compound_growth": "随着销毁代币数量增加,销毁速度将提高"
}
}
},
"incentives": {
"title": "激励模型",
"subtitle": "选择最适合您的MOSE激励计划",
"models": {
"v4": {
"title": "标准参与计划",
"feature1": "适合短期参与(30天)",
"feature2": "无需锁定代币",
"feature3": "完成简单任务即可获得奖励"
},
"v5": {
"title": "高级贡献计划",
"feature1": "适合长期参与(90天)",
"feature2": "需要锁定部分MOSE代币",
"feature3": "完成更高级任务获得额外奖励"
}
},
"reward_amount": "奖励金额",
"select_model": "选择此计划",
"market_data": {
"title": "市场数据",
"transaction_volume": "交易量",
"transaction_subtitle": "2023年MOSE网络上的交易总量",
"growth_rate": "同比增长",
"growth_subtitle": "与去年相比的交易量增长",
"security_incidents": "避免安全损失",
"security_subtitle": "通过我们的安全机制避免的损失总额"
}
},
"resources": {


+ 32
- 95
src/views/Ecosystem.vue View File

@ -1,6 +1,11 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import EcosystemCard from '@/components/ecosystem/EcosystemCard.vue';
import CompanyCard from '@/components/ecosystem/CompanyCard.vue';
//
// import MarketDataModule from '@/components/rewards/MarketDataModule.vue';
// import TokenBurnModule from '@/components/rewards/TokenBurnModule.vue';
const { t } = useI18n();
@ -177,6 +182,12 @@ const selectCategory = (category: string) => {
</div>
</section>
<!-- 十大生态卡片 -->
<EcosystemCard />
<!-- 十大分公司布局 -->
<CompanyCard />
<!-- Featured Projects Section -->
<section class="py-16 px-6 md:px-12 lg:px-24">
<div class="container mx-auto">
@ -247,28 +258,23 @@ const selectCategory = (category: string) => {
<!-- Projects Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div
v-for="(project, index) in filteredProjects"
:key="project.id"
class="bg-background rounded-xl overflow-hidden shadow-card hover:shadow-lg transition-all duration-300 wow animate__animated animate__fadeIn animate__duration-fast"
:class="{
'animate__delay-xs': index % 4 === 1,
'animate__delay-sm': index % 4 === 2,
'animate__delay-md': index % 4 === 3
}"
v-for="project in filteredProjects"
:key="`project-${project.id}`"
class="bg-background rounded-xl overflow-hidden shadow-card hover:shadow-lg hover:transform hover:scale-105 transition-all duration-300"
>
<img :src="project.image" :alt="project.name" class="w-full h-40 object-cover" />
<div class="p-5">
<div class="p-4">
<h3 class="text-lg font-bold text-text mb-2">{{ project.name }}</h3>
<p class="text-text-secondary text-sm mb-4">{{ project.description }}</p>
<p class="text-text-secondary text-sm mb-4 line-clamp-2">{{ project.description }}</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-background-dark text-primary-light text-xs rounded-full">
<span class="px-2 py-0.5 bg-background-light text-primary-light text-xs rounded-full">
{{ t(`ecosystem.categories.${project.category}`) }}
</span>
<a
:href="project.url"
target="_blank"
rel="noopener noreferrer"
class="text-primary-light hover:text-primary-dark transition-colors duration-200 text-sm"
class="text-primary-light hover:text-primary-dark text-sm transition-colors duration-200"
>
{{ t('ecosystem.projects.learnMore') }}
</a>
@ -279,6 +285,9 @@ const selectCategory = (category: string) => {
</div>
</section>
<!-- 市场数据展示 -->
<!-- 移除重复的TokenBurnModule和MarketDataModule组件引用 -->
<!-- Partners Section -->
<section class="py-16 px-6 md:px-12 lg:px-24">
<div class="container mx-auto">
@ -286,25 +295,19 @@ const selectCategory = (category: string) => {
<h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast">
{{ t('ecosystem.partners.title') }}
</h2>
<p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeInUp animate__delay-xs animate__duration-fast">
<p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeIn animate__delay-xs">
{{ t('ecosystem.partners.subtitle') }}
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 wow animate__animated animate__fadeIn animate__delay-sm">
<a
v-for="(partner, index) in partners"
v-for="partner in partners"
:key="partner.id"
:href="partner.url"
target="_blank"
rel="noopener noreferrer"
class="flex items-center justify-center p-6 bg-background-light rounded-lg hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__fadeIn animate__duration-fast"
:class="{
'animate__delay-xs': index % 6 === 1,
'animate__delay-sm': index % 6 === 2,
'animate__delay-md': index % 6 === 3,
'animate__delay-lg': index % 6 === 4
}"
class="bg-background-light rounded-xl p-6 flex items-center justify-center hover:shadow-lg transition-all duration-300"
>
<img :src="partner.logo" :alt="partner.name" class="max-h-12 max-w-full" />
</a>
@ -312,92 +315,26 @@ const selectCategory = (category: string) => {
</div>
</section>
<!-- Join Ecosystem CTA -->
<!-- Call to Action Section -->
<section class="py-20 px-6 md:px-12 lg:px-24 bg-primary bg-opacity-10 relative overflow-hidden">
<div class="container mx-auto relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp animate__duration-fast">
{{ t('ecosystem.join.title') }}
</h2>
<p class="text-text-secondary mb-8 wow animate__animated animate__fadeInUp animate__delay-xs animate__duration-fast">
<p class="text-text-secondary mb-8 wow animate__animated animate__fadeInUp animate__delay-xs">
{{ t('ecosystem.join.subtitle') }}
</p>
<a
href="#"
class="inline-block px-8 py-3 bg-primary text-text rounded-lg hover:bg-primary-dark transition-colors duration-300 shadow-button wow animate__animated animate__fadeInUp animate__delay-sm animate__duration-fast"
>
<button class="inline-block px-8 py-3 bg-primary text-text rounded-lg shadow-button btn-hover-float wow animate__animated animate__fadeInUp animate__delay-sm">
{{ t('ecosystem.join.cta') }}
</a>
</button>
</div>
</div>
<!-- Background Decoration -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30">
<div class="absolute top-0 right-0 w-64 h-64 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
<div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-sm"></div>
</div>
</section>
<!-- Developer Resources -->
<section class="py-16 px-6 md:px-12 lg:px-24">
<div class="container mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp animate__duration-fast">
{{ t('ecosystem.resources.title') }}
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<a
href="#"
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__duration-fast"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.docs') }}</h3>
<p class="text-text-secondary text-sm">
{{ t('ecosystem.resources.docs') }}
</p>
</a>
<a
href="#"
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-xs animate__duration-fast"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.github') }}</h3>
<p class="text-text-secondary text-sm">
{{ t('ecosystem.resources.github') }}
</p>
</a>
<a
href="#"
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-sm animate__duration-fast"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" 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>
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.grants') }}</h3>
<p class="text-text-secondary text-sm">
{{ t('ecosystem.resources.grants') }}
</p>
</a>
<a
href="#"
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-md animate__duration-fast"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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" />
</svg>
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.community') }}</h3>
<p class="text-text-secondary text-sm">
{{ t('ecosystem.resources.community') }}
</p>
</a>
</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-primary-light blur-3xl"></div>
</div>
</section>
</div>


+ 28
- 4
src/views/Home.vue View File

@ -2,6 +2,14 @@
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import MilestoneModule from '@/components/home/MilestoneModule.vue';
import EventsModule from '@/components/home/EventsModule.vue';
import RewardModule from '@/components/rewards/RewardModule.vue';
import IncentiveModule from '@/components/rewards/IncentiveModule.vue';
// MarketDataModule
import MarketDataModule from '@/components/rewards/MarketDataModule.vue';
// TokenBurnModuleRewardModule
// import TokenBurnModule from '@/components/rewards/TokenBurnModule.vue';
const { t } = useI18n();
const router = useRouter();
@ -234,6 +242,21 @@ const formatTime = (timeInSeconds: number) => {
</div>
</section>
<!-- 里程碑模块 -->
<MilestoneModule />
<!-- 活动计划模块 -->
<EventsModule />
<!-- 奖励机制模块 -->
<RewardModule />
<!-- 收益制度模块 -->
<IncentiveModule />
<!-- 恢复市场数据模块 -->
<MarketDataModule />
<!-- Call to Action -->
<section class="py-20 px-6 md:px-12 lg:px-24 bg-primary bg-opacity-10 relative overflow-hidden">
<div class="container mx-auto relative z-10">
@ -248,15 +271,16 @@ const formatTime = (timeInSeconds: number) => {
@click="goToEcosystem"
class="inline-block px-8 py-3 bg-primary text-text rounded-lg transition-colors duration-300 shadow-button wow animate__animated animate__fadeInUp animate__delay-sm animate__duration-fast btn-hover-float"
>
{{ t('ecosystem.title') }}
{{ t('ecosystem.join.cta') }}
</button>
</div>
</div>
<!-- Background Decoration -->
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30">
<div class="absolute top-0 right-0 w-64 h-64 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
<div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-sm"></div>
<div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-5">
<div class="absolute -top-24 -left-24 w-64 h-64 rounded-full bg-primary-light blur-3xl"></div>
<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-primary-light blur-3xl"></div>
</div>
</section>
</div>


+ 446
- 0
website_structure.txt View File

@ -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组件中。

Loading…
Cancel
Save