anian
363 lines
8.8 KiB
HTML
363 lines
8.8 KiB
HTML
<style>
|
|
/**
|
|
* 导航容器基础样式
|
|
*/
|
|
.nav-container {
|
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
color: #333;
|
|
}
|
|
|
|
/**
|
|
* Tab 导航栏
|
|
*/
|
|
.nav-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 25px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background-color: #f9fef7;
|
|
border: 1px solid #e6f7ef;
|
|
}
|
|
|
|
.nav-tab {
|
|
flex: 1;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #2d8659;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.nav-tab {
|
|
padding: 10px 0;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.nav-tab.active {
|
|
background-color: #4ade80;
|
|
/* 激活状态背景色 */
|
|
color: #ffffff;
|
|
}
|
|
|
|
.nav-tab:hover:not(.active) {
|
|
background-color: #e6f7ef;
|
|
}
|
|
|
|
/**
|
|
* 内容区标题样式
|
|
*/
|
|
.nav-section-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #2d8659;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #e6f7ef;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 标题前的装饰块 */
|
|
.nav-section-title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 24px;
|
|
background-color: #4ade80;
|
|
margin-right: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/**
|
|
* 卡片布局网格
|
|
*/
|
|
.nav-grid {
|
|
display: grid;
|
|
gap: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.nav-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.nav-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 导航卡片样式
|
|
*/
|
|
.nav-card {
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.1);
|
|
transition: all 0.3s ease;
|
|
border: 1px solid #e6f7ef;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
/* 隐藏的链接，用于覆盖整个卡片 */
|
|
.nav-card-link {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 悬停效果 */
|
|
.nav-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(74, 222, 128, 0.2);
|
|
border-color: #4ade80;
|
|
}
|
|
|
|
/* 图片容器和图片缩放效果 */
|
|
.nav-card-img-container {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 56.25%;
|
|
/* 16:9 比例 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-card-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav-card:hover .nav-card-img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 卡片内容 */
|
|
.nav-card-content {
|
|
padding: 20px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.nav-card-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #2d8659;
|
|
margin-bottom: 8px;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-card:hover .nav-card-title {
|
|
color: #4ade80;
|
|
}
|
|
|
|
.nav-card-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 标签区卡片特殊样式 (tag-section) */
|
|
.tag-section .nav-card {
|
|
background: #f9fef7;
|
|
}
|
|
|
|
.tag-section .nav-card-title {
|
|
color: #166534;
|
|
}
|
|
|
|
.tag-section .nav-card:hover .nav-card-title {
|
|
color: #4ade80;
|
|
}
|
|
|
|
.tag-section .nav-card-desc {
|
|
color: #555;
|
|
}
|
|
|
|
/**
|
|
* 内容切换和动画
|
|
*/
|
|
.nav-content {
|
|
display: none;
|
|
}
|
|
|
|
.nav-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="nav-container">
|
|
<div class="nav-tabs">
|
|
<div class="nav-tab active" data-target="category-content">文章分类</div>
|
|
<div class="nav-tab" data-target="tag-content">文章标签</div>
|
|
</div>
|
|
|
|
<div id="category-content" class="nav-content active">
|
|
<h2 class="nav-section-title">热门分类</h2>
|
|
<div class="nav-grid category-section">
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/categories/shi')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/shi.jpg" class="nav-card-img" alt="诗">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">诗</h3>
|
|
<p class="nav-card-desc">笔落山河凝气韵，字藏风月寄情长。一吟一咏皆风骨，半阙半章尽流芳。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/categories/ci')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/ci.jpg" class="nav-card-img" alt="词">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">词</h3>
|
|
<p class="nav-card-desc">锦字填成清浅调，柔肠织就婉约声。小令长调皆入画，浅唱低吟总关情。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/categories/qu')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/qu.jpg" class="nav-card-img" alt="曲">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">曲</h3>
|
|
<p class="nav-card-desc">俗韵唱尽人间味，清声漫染烟火色。嬉笑怒骂藏真意，浅白深醇总动人。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/categories/fu')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/fu.jpg" class="nav-card-img" alt="赋">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">赋</h3>
|
|
<p class="nav-card-desc">铺陈万象摛文彩，墨叙今古诉慨慷。骈俪藏锋含浩气，一赋千秋韵远长。</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tag-content" class="nav-content">
|
|
<h2 class="nav-section-title">热门标签</h2>
|
|
<div class="nav-grid tag-section">
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/tags/li-yu')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/liyu.jpg" class="nav-card-img" alt="李煜">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">李煜</h3>
|
|
<p class="nav-card-desc">雕栏玉砌成追忆，故国不堪月明中。小楼昨夜东风起，一江春水诉愁浓。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/tags/li-qing-zhao')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/liqingzhao.jpg" class="nav-card-img" alt="李清照">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">李清照</h3>
|
|
<p class="nav-card-desc">漱玉词中藏婉绪，半生烟雨半生愁。雁字回时寻旧梦，黄花瘦尽女儿柔。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-card" onclick="pjaxNavigate('/tags/su-shi')">
|
|
<div class="nav-card-img-container">
|
|
<img src="/upload/sushi.jpg" class="nav-card-img" alt="苏轼">
|
|
</div>
|
|
<div class="nav-card-content">
|
|
<h3 class="nav-card-title">苏轼</h3>
|
|
<p class="nav-card-desc">大江东去豪情溢，竹杖芒鞋任平生。明月几时有把酒，豁达胸襟照汗青。</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* PJAX 跳转核心函数
|
|
* 兼容 pjax.js 和 jquery-pjax，无 PJAX 时降级为原生跳转
|
|
*/
|
|
function pjaxNavigate(url) {
|
|
if (window.pjax) {
|
|
// 适配 pjax.js 原生库
|
|
pjax.loadUrl(url);
|
|
} else if (window.$ && $.pjax) {
|
|
// 适配 jquery-pjax 插件
|
|
$.pjax({ url: url, container: '#pjax-container' }); // 请替换为你的 PJAX 容器选择器
|
|
} else {
|
|
// 降级方案：无 PJAX 时使用原生跳转
|
|
window.location.href = url;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Tab 切换功能
|
|
*/
|
|
document.querySelectorAll('.nav-tab').forEach(tab => {
|
|
tab.addEventListener('click', function () {
|
|
// 移除所有 Tab 的 active 状态
|
|
document.querySelectorAll('.nav-tab').forEach(item => item.classList.remove('active'));
|
|
// 激活当前点击的 Tab
|
|
this.classList.add('active');
|
|
|
|
// 切换内容区
|
|
const target = this.getAttribute('data-target');
|
|
document.querySelectorAll('.nav-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
document.getElementById(target).classList.add('active');
|
|
});
|
|
});
|
|
|
|
/**
|
|
* 优化点击体验（防止300ms延迟，依赖 FastClick 库）
|
|
*/
|
|
if ('addEventListener' in document) {
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
if (typeof FastClick !== 'undefined') {
|
|
FastClick.attach(document.body);
|
|
}
|
|
}, false);
|
|
}
|
|
</script> |