fix(ui): 页脚改为"真正一行 + 布局预留",消除遮挡与裁切(第三次,纠正前两版)
实测故障(1280×720): .navi-footer-host y=598 h=123 fixed;.navi-footer 209×93 半透明 + overflow:hidden; 内容区底=701 → 与页脚重叠约 103px。那块半透明白块既是"灰色遮罩"又挡住底部点击。 与前两次的区别(前两次的错): - v63:只改字号/背景,页脚仍 113px 高(另有规则撑高),没解决遮挡 - v64:用 height:22px + overflow:hidden 硬压 → **把内容裁掉**(每日一言高 0 不可见) 本版: - 去掉胶囊(透明/无边框/无模糊/无圆角),内容自然排成一行 → 不靠裁切 - .navi-footer 用 inline-flex + width:max-content + max-width:calc(100vw-16px), 每日一言 min-width:0 + ellipsis(超长才省略,不会消失) - **在布局里预留 26px**(.item-group-container margin-bottom:26px), 内容框不再与固定页脚重叠;内框 padding-bottom 由 96px 降为 8px - 重新加入每日一言(按天缓存 + 3s 超时 + 内置兜底)
This commit is contained in:
51
web/navi.css
51
web/navi.css
@ -770,6 +770,57 @@ html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner
|
||||
内容少的页签下备案号位置就不对(用户反馈"都成这样了")。
|
||||
让它 fixed 贴底后,内容框自然吃满剩余高度、高度恒定,
|
||||
备案号位置与内容多少无关。 */
|
||||
/* ── 页脚:真正的一行 + 不遮挡内容(第三次,这次不裁切) ──
|
||||
实测故障:页脚 host 高 123px、内部胶囊 209×93 且 overflow:hidden,
|
||||
与内容区(底 701)重叠约 103px —— 那块半透明白块既像遮罩又挡住点击。
|
||||
做法:① 去掉胶囊(透明/无边框/无模糊);② 内容就自然排成一行,不设高度裁切;
|
||||
③ 用 margin-bottom 在布局里**预留**页脚高度,让内容框不与之重叠。 */
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host {
|
||||
position: fixed !important;
|
||||
left: 0 !important; right: 0 !important; bottom: 0 !important;
|
||||
height: 26px !important; max-height: 26px !important;
|
||||
display: flex !important; align-items: center !important; justify-content: center !important;
|
||||
padding: 0 !important; margin: 0 !important;
|
||||
background: transparent !important; border: 0 !important;
|
||||
box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
|
||||
pointer-events: none !important;
|
||||
z-index: 3 !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
html[data-theme] .navi-footer {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important; justify-content: center !important;
|
||||
gap: 6px !important; flex-wrap: nowrap !important;
|
||||
width: max-content !important; max-width: calc(100vw - 16px) !important;
|
||||
height: auto !important; max-height: 22px !important;
|
||||
padding: 0 8px !important; margin: 0 auto !important;
|
||||
background: transparent !important; border: 0 !important; border-radius: 0 !important;
|
||||
box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
|
||||
font-size: 11px !important; line-height: 1.45 !important;
|
||||
color: #94a3b8 !important; white-space: nowrap !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
html[data-theme] .navi-footer a,
|
||||
html[data-theme] .navi-footer .navi-footer-sep { font-size: 11px !important; color: inherit !important; }
|
||||
html.navi-dark[data-theme] .navi-footer,
|
||||
html.navi-dark[data-theme] .navi-footer a,
|
||||
html.navi-dark[data-theme] .navi-footer .navi-footer-sep { color: #7c8ea6 !important; }
|
||||
/* 每日一言:可省略但不裁切到不可见 */
|
||||
html[data-theme] .navi-footer .navi-quote {
|
||||
min-width: 0 !important; flex: 0 1 auto !important;
|
||||
overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
|
||||
color: #b6c2d2 !important; font-style: italic;
|
||||
max-width: 40vw !important;
|
||||
}
|
||||
html.navi-dark[data-theme] .navi-footer .navi-quote { color: #6b7d95 !important; }
|
||||
|
||||
/* 关键:在布局里为固定页脚预留 26px,内容框不再被盖住 */
|
||||
html[data-theme] .minimal-home > .item-group-container {
|
||||
margin-bottom: 26px !important;
|
||||
}
|
||||
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
html[data-theme] body:has(.minimal-home) .navi-footer-host {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
|
||||
22
web/navi.js
22
web/navi.js
@ -711,3 +711,25 @@ document.addEventListener('click', function (e) {
|
||||
}
|
||||
} catch (_) {}
|
||||
}, true);
|
||||
|
||||
(function installDailyQuote() {
|
||||
var FALLBACK = ['保持热爱,奔赴山海。','慢慢来,比较快。','今天也要好好吃饭。','把复杂的事做简单。','不着急,一切都会好起来的。','少即是多。','做难而正确的事。'];
|
||||
function k() { var d = new Date(); return 'navi-quote-' + d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); }
|
||||
function fb() { return FALLBACK[Math.floor(Math.random() * FALLBACK.length)]; }
|
||||
function render(t) {
|
||||
var f = document.querySelector('.navi-footer'); if (!f) return false;
|
||||
if (f.querySelector('.navi-quote')) return true;
|
||||
var sep = document.createElement('span'); sep.className = 'navi-footer-sep'; sep.textContent = '·';
|
||||
var q = document.createElement('span'); q.className = 'navi-quote'; q.textContent = t;
|
||||
f.appendChild(sep); f.appendChild(q); return true;
|
||||
}
|
||||
function wait(t) { var n = 0; var iv = setInterval(function () { n++; if (render(t) || n > 20) clearInterval(iv); }, 500); }
|
||||
var t = null; try { t = localStorage.getItem(k()); } catch (e) {}
|
||||
if (t) { if (!render(t)) wait(t); return; }
|
||||
var done = false, ctl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
|
||||
var tm = setTimeout(function () { if (!done && ctl) { try { ctl.abort(); } catch (e) {} } }, 3000);
|
||||
fetch('https://v1.hitokoto.cn/?encode=text&charset=utf-8', ctl ? { signal: ctl.signal } : {})
|
||||
.then(function (r) { return r.ok ? r.text() : ''; })
|
||||
.then(function (x) { done = true; clearTimeout(tm); var v = (x || '').trim().slice(0, 40) || fb(); try { localStorage.setItem(k(), v); } catch (e) {} if (!render(v)) wait(v); })
|
||||
.catch(function () { done = true; clearTimeout(tm); var v = fb(); if (!render(v)) wait(v); });
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user