si-meng-spec/SmartElderlyCare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(区块链浏览器): 实现区块详情弹窗和中文界面优化

Browse Source 
添加区块详情弹窗功能，支持点击区块查看详细信息
优化导航菜单样式，添加活动状态指示器
将界面文本全面中文化并优化交易类型显示
添加区块列表动画效果提升用户体验
This commit is contained in:
祀梦
2026-01-11 23:14:08 +08:00
parent 52f0ab6366
commit d22b65f6d3
7 changed files with 670 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/layouts/BlockchainLayout.vue
View File

@@ -5,17 +5,49 @@
<div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 border-2 border-blue-500 rounded animate-spin-slow"></div>
<span class="text-xl font-bold text-white">FISCO BCOS Explorer</span>
<span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-xs border border-blue-500/20">Testnet</span>
<span class="text-xl font-bold text-white">FISCO BCOS 区块链浏览器</span>
<span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-xs border border-blue-500/20">测试网</span>
</div>
<nav class="flex space-x-6 text-sm items-center">
<router-link to="/" class="text-slate-400 hover:text-white flex items-center px-3 py-1 rounded border border-slate-700 hover:border-slate-500 transition-colors">
<span class="mr-1">↩</span> Mainnet
<nav class="flex space-x-6 text-sm items-center h-full">
<router-link to="/" class="text-slate-400 hover:text-white flex items-center px-3 py-1 rounded border border-slate-700 hover:border-slate-500 transition-colors mr-2">
<span class="mr-1">↩</span> 返回首页
</router-link>
<router-link
to="/blockchain/explorer"
class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
active-class="text-white font-bold"
>
概览
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
</router-link>
<router-link
to="/blockchain/blocks"
class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
active-class="text-white font-bold"
>
区块
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
</router-link>
<router-link
to="/blockchain/transactions"
class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
active-class="text-white font-bold"
>
交易
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
</router-link>
<router-link
to="/blockchain/contracts"
class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
active-class="text-white font-bold"
>
合约
<div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
</router-link>
<router-link to="/blockchain/explorer" class="text-white border-b-2 border-blue-500 pb-5 pt-5">概览</router-link>
<a href="#" class="hover:text-white transition-colors">区块</a>
<a href="#" class="hover:text-white transition-colors">交易</a>
<a href="#" class="hover:text-white transition-colors">合约</a>
</nav>
</div>
</header>
@@ -38,4 +70,8 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.router-link-active .active-indicator {
transform: scaleX(1);
}
</style>