78 lines
3.1 KiB
Vue
78 lines
3.1 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-[#0f172a] text-slate-300 font-mono">
|
|
<!-- Blockchain Header -->
|
|
<header class="h-16 border-b border-slate-800 bg-[#0f172a]/90 backdrop-blur fixed w-full z-50">
|
|
<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 区块链浏览器</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 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>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="pt-20 pb-12 px-4 max-w-7xl mx-auto">
|
|
<router-view></router-view>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
</script>
|
|
|
|
<style scoped>
|
|
.animate-spin-slow {
|
|
animation: spin 3s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.router-link-active .active-indicator {
|
|
transform: scaleX(1);
|
|
}
|
|
</style>
|