first commit

src/layouts/BlockchainLayout.vue

@@ -0,0 +1,41 @@
+<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 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>
+        </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
+          </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>
+
+    <!-- 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); }
+}
+</style>