热点数据 tab 恢复信息图标版(hover提示近7日数据);首页数据预览统计项「热门账号」改「关注账号」
This commit is contained in:
1 parent
75e1846847
commit
8719ae5edc
5 files changed
+20
-19
No files matched your search
@@ -168,3 +168,10 @@
|
||||
- CSS:.page-toolbar .rank-tabs 行内化(border-bottom none、margin 0、center)
|
||||
- index.html 静态引用加 ?v=20260903 版本参数(防缓存旧 js/css;今后改动记得 bump)
|
||||
- 服务无需重启(静态),curl 资源全 200
|
||||
|
||||
## R24 三榜 tab 悬停气泡「近7日数据」(09-03 追加)
|
||||
- 用户要求:视频热榜/点赞榜 tab「后面加个信息图标 hover 提示近7日数据」→ 澄清后改为**不加图标,纯悬停提示**
|
||||
- **最终方案(用户定)**:tab 上直接 hover 停留约 2 秒浮现「近7日数据」气泡。实现=纯 CSS:button 加 `data-tip="近7日数据"`,`:hover::after { content: attr(data-tip); opacity:1; transition-delay:2s; }`,基础态 transition 无 delay → **进入延迟 2s、移开立即淡出**(关键:delay 只写在 hover 规则里)
|
||||
- 覆盖两处同构 tabs:data-pages.js renderRanking RANK_TABS(第三字段 tip,动态拼 data-tip)+ app.js 首页 rank-preview(静态 button 直写)
|
||||
- 回滚了先做的 info 图标版(ICON_PATHS 'info'、.rank-tab-info span)——用户不要图标,避免死代码已删净
|
||||
- index.html 版本参数 bump 至 ?v=20260903c;git 75e1846(连同 acb4c3e 一起 push,052550e..75e1846)
|
||||
@@ -164,6 +164,7 @@ const ICON_PATHS = {
|
||||
'table': '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
|
||||
'file': '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
|
||||
'image': '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
|
||||
'info': '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
|
||||
'arrow-left': '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
|
||||
'x': '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
|
||||
'arrow-up': '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
|
||||
@@ -307,7 +308,7 @@ function renderHome() {
|
||||
return `
|
||||
<div class="home">
|
||||
<div class="home-stats" id="homeStats" aria-label="数据预览">
|
||||
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">热门账号</span></div>
|
||||
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">关注账号</span></div>
|
||||
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">视频解析</span></div>
|
||||
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">AI写脚本</span></div>
|
||||
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">AI脚本诊断</span></div>
|
||||
@@ -324,8 +325,8 @@ function renderHome() {
|
||||
<div class="recent-head">
|
||||
<div class="rank-tabs" role="tablist">
|
||||
<button class="rank-tab active" data-rank-tab="week" role="tab">账号周榜</button>
|
||||
<button class="rank-tab" data-rank-tab="hot" data-tip="近7日数据" role="tab">视频热榜</button>
|
||||
<button class="rank-tab" data-rank-tab="likes" data-tip="近7日数据" role="tab">点赞榜</button>
|
||||
<button class="rank-tab" data-rank-tab="hot" role="tab">视频热榜<span class="rank-tab-info" title="近7日数据">${svgIcon('info', 13)}</span></button>
|
||||
<button class="rank-tab" data-rank-tab="likes" role="tab">点赞榜<span class="rank-tab-info" title="近7日数据">${svgIcon('info', 13)}</span></button>
|
||||
</div>
|
||||
<div class="rank-tools" id="rankTools">
|
||||
<select id="rankCat" class="input-select rank-filter" title="赛道筛选"></select>
|
||||
@@ -353,7 +354,7 @@ async function loadHomeStats() {
|
||||
const d = await api('/api/dsh/stats');
|
||||
const s = d.stats || {};
|
||||
const items = [
|
||||
['热门账号', s.accounts],
|
||||
['关注账号', s.accounts],
|
||||
['视频解析', s.analyses],
|
||||
['AI写脚本', s.rewrites],
|
||||
['AI脚本诊断', s.reviews],
|
||||
|
||||
@@ -521,7 +521,7 @@ async function renderRanking(view) {
|
||||
${toolbarBack()}
|
||||
<span class="page-title">热点数据</span>
|
||||
<div class="rank-tabs" role="tablist">
|
||||
${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` data-tip="${tip}"` : ''} role="tab">${label}</button>`).join('')}
|
||||
${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}" role="tab">${label}${tip ? `<span class="rank-tab-info" title="${tip}">${svgIcon('info', 13)}</span>` : ''}</button>`).join('')}
|
||||
</div>
|
||||
${withFilters ? `<div class="toolbar-right">
|
||||
<select id="rankCat" class="input-select" title="赛道筛选">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MCN工作台</title>
|
||||
<link rel="stylesheet" href="style.css?v=20260903c">
|
||||
<link rel="stylesheet" href="style.css?v=20260903d">
|
||||
<script src="vendor/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js?v=20260903c"></script>
|
||||
<script src="data-pages.js?v=20260903c"></script>
|
||||
<script src="app.js?v=20260903d"></script>
|
||||
<script src="data-pages.js?v=20260903d"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -588,17 +588,10 @@ td.td-title { max-width: 240px; }
|
||||
/* 热点数据页:tab 并入 page-toolbar 同一行(与赛道/时间筛选同行),去整行分隔条 */
|
||||
.page-toolbar .rank-tabs { border-bottom: none; margin-bottom: 0; align-self: center; }
|
||||
.page-toolbar .rank-tab { padding: 4px 10px 3px; font-size: 13px; }
|
||||
/* tab 悬停提示气泡:停留约 2s 后浮现,移开立即淡出(transition-delay 仅作用于 hover 态) */
|
||||
.rank-tab[data-tip] { position: relative; }
|
||||
.rank-tab[data-tip]::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
|
||||
background: #2b2f36; color: #f2f4f7; font-size: 12px; line-height: 1;
|
||||
padding: 5px 9px; border-radius: 6px; white-space: nowrap;
|
||||
pointer-events: none; z-index: 40; opacity: 0;
|
||||
transition: opacity .15s ease;
|
||||
}
|
||||
.rank-tab[data-tip]:hover::after { opacity: 1; transition-delay: 2s; }
|
||||
/* tab 内信息图标(视频热榜/点赞榜 · 近7日数据):弱化跟随文字色,hover 原生 title 提示 */
|
||||
.rank-tab .rank-tab-info { display: inline-flex; align-items: center; margin-left: 3px; opacity: .5; cursor: help; vertical-align: -1px; }
|
||||
.rank-tab:hover .rank-tab-info { opacity: .9; }
|
||||
.rank-tab.active .rank-tab-info { opacity: .7; }
|
||||
.rank-placeholder { border: 1px dashed var(--border); border-radius: 10px; padding: 36px 12px; text-align: center; color: var(--dim); background: var(--panel); font-size: 14px; }
|
||||
.rank-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
|
||||
.rank-filter { padding: 3px 6px; font-size: 14px; max-width: 110px; }
|
||||
|
||||
Reference in new issue
Block a user