移动端有 7 张表要横滑 300+px 才看得全,滑着还对不上表头(地点库 8 列、统计 3 张、专题详情、 首页天气、后台数据集表与数据说明、专题管理、报告页 2 张)。给这些表加 tb-stack: 窄屏隐藏 thead、每行一屏一块、每格「字段名 + 值」竖排,值多行时用悬挂缩进。 - 字段名取自 td 的 data-label(首格是这行主角,故意不带标签;操作格给「操作」)—— 这样改列顺序也不会串标签,比把名字写进 CSS 的 nth-child 稳。 - 表格结构、链接、表单、按钮一律没动(只是隐藏 thead + 改 display),桌面与平板仍是原表。 - 断点只用 @media (max-width:620px):试过容器查询(能顺手治掉「宽屏里 g2 窄卡片也要横滑」), 但实测会把 /stats 三个卡片撑高 1300px,太臃肿,不划算。 实测:390/620 十张表需横滑全部为 0、每行每格都有标签;621/700/1440 的横滑量与改动前一致 (桌面零变化);128 个链接/按钮滚动到可见后逐个点测均可点中,无裁切;全站审计 390 站长/访客 + 320 + 1440 溢出全 0、0 JS 报错,小触控与小字数与改动前逐页一致(320 下露外元素 /places 277→2、 /stats 114→12、/admin 46→4,剩下的都是有意的横滑容器)。 新增回归 internal/web/tb_stack_test.go:渲染 7 个页面、逐行核对「每个非首格都有 data-label」 且「格子数 == 表头列数」(变异验证过:去掉一个标签立刻 FAIL)。
86 lines
3.9 KiB
HTML
86 lines
3.9 KiB
HTML
{{define "content"}}
|
|
<div class="wrap">
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>地点库</h1>
|
|
<div class="sub">
|
|
共 {{num .Total}} 个地点 · {{.RangeLabel}}{{if .City}} · 城市:{{.City}}{{end}}{{if .Keyword}} · 关键词:{{.Keyword}}{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{if not .HasData}}
|
|
{{template "emptystate" .}}
|
|
{{else}}
|
|
{{template "filters" .}}
|
|
|
|
<div class="card">
|
|
<div class="row" style="margin-bottom:12px">
|
|
<span class="muted" style="font-size:12.5px">排序</span>
|
|
<div class="chips">
|
|
<a class="chip {{if eq .Sort ""}}on{{end}}" href="{{.Link .FilterBase "sort" ""}}">到访次数</a>
|
|
<a class="chip {{if eq .Sort "dwell"}}on{{end}}" href="{{.Link .FilterBase "sort" "dwell"}}">停留时长</a>
|
|
<a class="chip {{if eq .Sort "recent"}}on{{end}}" href="{{.Link .FilterBase "sort" "recent"}}">最近到访</a>
|
|
<a class="chip {{if eq .Sort "first"}}on{{end}}" href="{{.Link .FilterBase "sort" "first"}}">首次到访</a>
|
|
<a class="chip {{if eq .Sort "name"}}on{{end}}" href="{{.Link .FilterBase "sort" "name"}}">名称</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{if or .IsAdmin .Settings.MarksPublic}}
|
|
<div class="row" style="margin-bottom:12px">
|
|
<span class="muted" style="font-size:12.5px">标记</span>
|
|
<div class="chips">
|
|
<a class="chip {{if eq .Verdict 0}}on{{end}}" href="{{.VerdictLink 0}}">全部</a>
|
|
<a class="chip {{if eq .Verdict 1}}on{{end}}" href="{{.VerdictLink 1}}">👍 推荐</a>
|
|
<a class="chip {{if eq .Verdict -1}}on{{end}}" href="{{.VerdictLink -1}}">👎 踩雷</a>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .Places}}
|
|
<div class="tw">
|
|
<table class="tb places-table tb-stack">
|
|
<thead>
|
|
<tr>
|
|
<th>地点</th><th>城市</th><th>主要类型</th><th>图片</th>
|
|
<th class="num">到访</th><th class="num">累计停留</th>
|
|
<th>首次</th><th>最近</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range .Places}}
|
|
<tr>
|
|
<td>
|
|
<a href="{{$.PlaceLink .ID}}">{{if .Name}}{{.Name}}{{else}}未命名地点{{end}}</a>
|
|
{{if .IsHome}}<span class="tag">家</span>{{end}}
|
|
{{if .IsWork}}<span class="tag">工作</span>{{end}}
|
|
{{if eq .Verdict 1}}<span class="tag vote-up">👍 推荐</span>{{else if eq .Verdict -1}}<span class="tag vote-down">👎 踩雷</span>{{end}}
|
|
{{if or .Up .Down}}<span class="muted" style="font-size:12px">👍{{.Up}} · 👎{{.Down}}</span>{{end}}
|
|
</td>
|
|
<td class="muted" data-label="城市">{{if .City}}{{.City}}{{else}}—{{end}}</td>
|
|
<td data-label="主要类型">
|
|
{{if .TopActivity}}<span class="chip" style="padding:1px 8px"><span class="dot" style="background:{{colorof .TopColor}}"></span>{{.TopActivity}}</span>{{else}}<span class="muted">—</span>{{end}}
|
|
</td>
|
|
<td data-label="图片">{{if .HasImage}}<span title="有图片">📷</span>{{else}}<span class="muted" title="还没有上传图片">—</span>{{end}}</td>
|
|
<td class="num" data-label="到访">{{num .VisitCount}}</td>
|
|
<td class="num" data-label="累计停留">{{dur .DwellMinutes}}</td>
|
|
<td class="muted" data-label="首次">{{if .FirstAt}}{{d .FirstAt}}{{else}}—{{end}}</td>
|
|
<td class="muted" data-label="最近">{{if .LastAt}}{{d .LastAt}}{{end}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{template "pager" .}}
|
|
{{else}}
|
|
<div class="empty">
|
|
<div class="big">🔍</div>
|
|
<div>没有符合条件的地点。</div>
|
|
<div style="margin-top:12px"><a class="btn" href="{{.FilterBase}}">清空筛选条件</a></div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|