fukunee/Hist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

发布：完整项目代码（三视图 + 词条数据 + 加载页等）

Browse Source
This commit is contained in:
fukunee
2026-09-19 16:53:18 +08:00
parent e3fd805de2
commit 906e53f1d5
16 changed files with 1758 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+28 -30
View File
@@ -99,39 +99,35 @@ html, body {
color: rgba(230,216,182,0.65); font-family: var(--serif);
}
/* 视图切换（位于底部导航栏内） */
.view-switch {
display: flex; align-items: center; gap: 8px;
}
/* 视图切换（单按钮，图标循环切换） */
.view-btn {
font-family: var(--serif); font-size: 14px; letter-spacing: 0.1em;
padding: 8px 16px; color: var(--paper); cursor: pointer;
background: rgba(20,14,10,0.55); border: 1px solid rgba(201,162,39,0.35);
border-radius: 3px; backdrop-filter: blur(4px);
transition: all 0.25s ease;
}
.view-btn:hover { border-color: var(--gold); color: #fff; }
.view-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.view-btn.active {
background: linear-gradient(180deg, rgba(201,162,39,0.85), rgba(150,115,20,0.85));
color: #1c1308; border-color: var(--gold); font-weight: 600;
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: var(--gold-soft); cursor: pointer;
background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,39,0.4);
border-radius: 50%;
transition: all 0.2s ease;
}
.view-btn:hover { background: rgba(201,162,39,0.25); color: #fff; }
.v-icon { display: none; width: 17px; height: 17px; }
.view-btn[data-view="binder"] .v-binder { display: block; }
.view-btn[data-view="timeline"] .v-timeline { display: block; }
.view-btn[data-view="globe"] .v-globe { display: block; }
/* 底部导航 */
.bottom-bar {
left: 50%; bottom: 22px; transform: translateX(-50%);
display: flex; align-items: center; gap: 16px;
padding: 10px 18px; border-radius: 4px;
left: 50%; bottom: 26px; transform: translateX(-50%);
display: flex; align-items: center; gap: 12px;
padding: 5px 14px; border-radius: 4px;
background: rgba(20,14,10,0.6); border: 1px solid rgba(201,162,39,0.25);
backdrop-filter: blur(6px);
}
.nav-btn {
font-family: var(--serif); font-size: 16px; line-height: 1;
width: 38px; height: 38px; border-radius: 50%;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 15px; line-height: 1;
width: 32px; height: 32px; border-radius: 50%;
color: var(--gold-soft); cursor: pointer;
background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,39,0.4);
transition: all 0.2s ease;
@@ -139,13 +135,13 @@ html, body {
.nav-btn:hover { background: rgba(201,162,39,0.25); color: #fff; transform: scale(1.06); }
.nav-btn:active { transform: scale(0.96); }
.flip-hint { width: auto; border-radius: 20px; padding: 0 18px; letter-spacing: 0.12em; font-size: 14px; }
.page-indicator { display: flex; align-items: baseline; gap: 6px; min-width: 200px; justify-content: center; }
#page-num { font-size: 24px; color: var(--gold-soft); font-family: var(--serif); }
.page-indicator { display: flex; align-items: center; gap: 6px; min-width: 0; justify-content: center; }
#page-num { font-size: 22px; color: var(--gold-soft); font-family: var(--serif); }
.sep { color: rgba(230,216,182,0.5); }
#page-total { color: rgba(230,216,182,0.6); font-family: var(--serif); }
.page-name {
font-size: 14px; color: var(--paper); letter-spacing: 0.05em; margin-left: 10px;
flex: 0 0 160px; /* 固定宽度，容纳多数词条名，避免翻页时布局抖动 */
flex: 0 0 160px; /* 固定宽度，导航条不随词条名长短变化 */
text-align: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@@ -161,7 +157,7 @@ html, body {
}
.detail-card.hidden { opacity: 0; pointer-events: none; transform: translateY(14px); }
.detail-head { display: flex; justify-content: space-between; align-items: center; }
.detail-no { font-family: var(--serif); font-size: 13px; letter-spacing: 0.14em; color: var(--ink-soft); }
.detail-no { font-family: Consolas, "Courier New", "Lucida Console", monospace; font-size: 13px; letter-spacing: 0.02em; color: var(--ink-soft); }
.detail-cat {
font-size: 12px; padding: 2px 10px; border-radius: 2px;
background: var(--leather); color: var(--gold-soft); letter-spacing: 0.2em;
@@ -182,10 +178,12 @@ html, body {
.detail-sketch { margin-top: 12px; border-top: 1px dashed rgba(90,61,43,0.4); padding-top: 10px; }
.detail-sketch canvas { width: 100%; height: 170px; object-fit: contain; border-radius: 2px; opacity: 0.94; }
/* 提示 */
/* 提示（导航条下方） */
.hint {
left: 26px; bottom: 26px; font-size: 12px; letter-spacing: 0.06em;
left: 50%; transform: translateX(-50%); bottom: 5px;
font-size: 12px; letter-spacing: 0.06em;
color: rgba(230,216,182,0.55);
white-space: nowrap;
}
@media (max-width: 760px) {