R48: 账号详情属性内容统一宽度 140px——四列严格等宽 + 去横向间隔(gap 80px→0),抖音号超宽省略号+hover看全量;style af→ai、data ak
This commit is contained in:
1 parent
51b433309e
commit
12a5a03e92
3 files changed
+8
-5
No files matched your search
@@ -1005,7 +1005,7 @@ async function renderAccountDetail(view, id) {
|
||||
const dyUrl = acc.sec_uid ? 'https://www.douyin.com/user/' + encodeURIComponent(acc.sec_uid)
|
||||
: (acc.douyin_id ? 'https://www.douyin.com/search/' + encodeURIComponent(acc.douyin_id) + '?type=user' : '');
|
||||
const dyHtml = acc.douyin_id
|
||||
? (dyUrl ? `<a class="link" data-ext="${esc(dyUrl)}" title="打开抖音账号主页">${esc(acc.douyin_id)} ↗</a>` : esc(acc.douyin_id))
|
||||
? (dyUrl ? `<a class="link" data-ext="${esc(dyUrl)}" title="${esc(acc.douyin_id)} · 点击打开抖音主页">${esc(acc.douyin_id)} ↗</a>` : esc(acc.douyin_id))
|
||||
: '-';
|
||||
// 账号定位:默认最多 4 行,可点击展开/收起
|
||||
const contentHtml = `<span class="clamp-wrap"><span class="clamp-text" data-clamp>${esc(contentText) || '-'}</span>${contentText.length > 120 ? `<button class="clamp-btn" data-clamp-toggle>展开</button>` : ''}</span>`;
|
||||
|
||||
@@ -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=20260903af">
|
||||
<link rel="stylesheet" href="style.css?v=20260903ai">
|
||||
<script src="vendor/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -42,6 +42,6 @@
|
||||
</div>
|
||||
|
||||
<script src="app.js?v=20260903y"></script>
|
||||
<script src="data-pages.js?v=20260903aj"></script>
|
||||
<script src="data-pages.js?v=20260903ak"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -525,8 +525,11 @@ td.td-title { max-width: 240px; }
|
||||
/* R45 间隔回调(终版):横向 gap 保持 80px、与视频详情 .video-grid 完全一致;「宽」的真根因是账号定位整行留在网格内(原 h h h h 区)
|
||||
把 4 列轨道撑成等宽 232.5px、每格右侧大片留白——故将其移出共享网格(见 .account-info > .info-item),8→7 字段列轨贴内容收缩,
|
||||
值与值之间视觉距离恢复为「内容宽+80px」,与视频详情属性区观感一致 */
|
||||
.account-info .account-grid { display: grid; grid-template-columns: repeat(4, minmax(min-content, max-content)); grid-template-areas: 'a b c .' 'd e f g'; gap: 10px 80px; justify-content: start; }
|
||||
.account-info .account-grid .info-item { min-width: 0; }
|
||||
.account-info .account-grid { display: grid; grid-template-columns: repeat(4, minmax(min-content, max-content)); grid-template-areas: 'a b c .' 'd e f g'; gap: 10px 0; justify-content: start; }
|
||||
.account-info .account-grid .info-item { width: 140px; }
|
||||
/* 账号信息属性内容统一宽度(09-03 R48 终版):所有属性值固定 width 140px,四列严格等宽;超宽单行省略号 + hover 看全量;
|
||||
横向间隔 0(用户定:内容统一宽度即可,不要其他间隔) */
|
||||
.account-info .account-grid .info-item .info-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
/* 账号定位整行(R45):作为网格容器的直接子项平级输出,占满卡片宽度,与网格保持纵向间距 */
|
||||
.account-info > .info-item { margin-top: 12px; }
|
||||
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
|
||||
|
||||
Reference in new issue
Block a user