2023/9/2
部署CDN加快响应速度
2023/9/4
显示器大小导致的页面溢出问题
解决方法:
@media (max-width: 1500px){
}通过css样式判断屏幕分辨率大小并且调整显示布局。
2025/10/15
优化css设置使目录边框上移河狸
.dropdown-menu{ position: relative; }
.dropdown-menu::before{ z-index: 0; }
.dropdown-menu .dropdown-item{ position: relative; z-index: 1; }2025/10/24
目录栏追加当前阅读部分显示功能,绿色为已预读,黄色为正在阅读,红色为未阅读
/* === 目录整体样式 === */
.index-menu {
font-weight: 500;
font-size: 14px; /* ← 原15px → 14px,更细致 */
color: #212529;
line-height: 1.5; /* ← 稍微收紧行距 */
letter-spacing: 0.1px; /* ← 字距更自然 */
--dot-size: 10px;
--gutter: 18px;
}
/* 去掉原生 marker,用自定义圆点 */
.index-menu li {
list-style: none;
position: relative;
padding-left: var(--gutter);
}
/* 链接过渡 */
.index-menu-item a,
.index-menu li a {
display: inline-block;
text-decoration: none;
color: inherit;
vertical-align: middle;
transition: color 1.2s ease, text-shadow 1.2s ease;
font-size: 0.94em;
}
/* 默认圆点样式 */
.index-menu li::before {
content: "";
position: absolute;
left: 0;
top: 1.05em;
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
background: #f25f5c; /* 默认粉红 */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
transform: translateY(-50%);
transition: all 0.4s ease;
}
/* 禁用所有动画 */
.index-menu li::before,
.index-menu li::after {
animation: none !important;
}
.index-menu li::after {
content: none !important;
}
/* 子级尺寸调整 */
.index-menu li li { --dot-size: 8px; }
.index-menu li li li { --dot-size: 7px; }
/* === 红绿灯状态色 === */
/* 🟢 已过(past) */
.index-menu li.past::before {
background-color: #62c370;
box-shadow: 0 0 6px rgba(98,195,112,0.6);
}
/* 🟡 当前(current) */
@keyframes softPulseCurrent {
0% {
transform: translateY(-50%) scale(1);
box-shadow: 0 0 6px rgba(242,177,52,0.5);
}
50% {
transform: translateY(-50%) scale(1.3);
box-shadow: 0 0 14px rgba(242,177,52,0.8);
}
100% {
transform: translateY(-50%) scale(1);
box-shadow: 0 0 6px rgba(242,177,52,0.5);
}
}
.index-menu li.current::before {
background-color: #f2b134;
box-shadow: 0 0 8px rgba(242,177,52,0.6);
animation: softPulseCurrent 3s ease-in-out infinite !important;
}
/* 🔴 未到(future) */
.index-menu li.future::before {
background-color: #f25f5c;
box-shadow: 0 0 6px rgba(242,95,92,0.5);
}
/* === 文字颜色 === */
.index-menu li.past > a {
color: #62c370;
text-shadow: 0 0 6px rgba(98,195,112,0.4);
}
.index-menu li.current > a {
color: #f2b134;
text-shadow: 0 0 6px rgba(242,177,52,0.4);
}
.index-menu li.future > a {
color: #f25f5c;
text-shadow: 0 0 6px rgba(242,95,92,0.4);
}
/* 层级缩进微调 */
.index-menu li li {
--dot-size: 8px;
padding-left: calc(var(--gutter) - 8px);
}
.index-menu li li::before {
left: -4px;
}
.index-menu li li li {
--dot-size: 7px;
padding-left: calc(var(--gutter) - 10px);
}
.index-menu li li li::before {
left: -6px;
}
/* 优化菜单 */
/* */
/* */