优化页面布局

This commit is contained in:
2025-08-05 20:52:26 +08:00
parent 867bf67b16
commit 8097e9b769
4 changed files with 175 additions and 73 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据库查询比对工具 - 支持分表查询</title>
<title>Cassandra数据比对工具 - DataTools Pro</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@@ -255,6 +255,16 @@
border-color: #ffb3b3;
color: #d63384;
}
/* 面包屑导航样式 */
.breadcrumb {
background: none;
padding: 0;
}
.breadcrumb-item a {
color: #007bff;
text-decoration: none;
}
</style>
</head>
<body>
@@ -262,7 +272,7 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">
<i class="fas fa-tools"></i> 大数据工具集合
<i class="fas fa-database me-2"></i> DataTools Pro
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
@@ -270,10 +280,19 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/">首页</a>
<a class="nav-link" href="/">
<i class="fas fa-home"></i> 首页
</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/db-compare">单表查询</a>
<a class="nav-link active" href="/cassandra-compare">
<i class="fas fa-database"></i> Cassandra比对
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/redis-compare">
<i class="fab fa-redis"></i> Redis比对
</a>
</li>
</ul>
</div>
@@ -281,10 +300,18 @@
</nav>
<div class="container-fluid py-4">
<!-- 面包屑导航 -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">首页</a></li>
<li class="breadcrumb-item active" aria-current="page">Cassandra数据比对工具</li>
</ol>
</nav>
<div class="row">
<div class="col-12">
<h1 class="text-center mb-4">
<i class="fas fa-database"></i> 数据库查询比对工具
<i class="fas fa-database"></i> Cassandra数据比对工具
<small class="text-muted d-block fs-6 mt-2">支持单表查询和分表查询两种模式</small>
</h1>
</div>