余白:手机端文章去卡片 + 信息流元信息下移 + 标签统一为纯文本 #标签
信息流(首页) - 元信息(类型 / 日期 / 时长 / 字数)从标题上方挪到摘要之后,和标签同一块: 卡片开头只留标题摘要,读完再看「什么时候、多长」 - 标签去掉 chip 样式,改为纯文本 #标签(# 走 ::before,链接的可读名仍是标签本身); 原来那排药丸看着能点,其实是卡片链接里的 span,点哪儿都进文章 - .card .tags / .note .tags 间距 6px -> 14px,配合纯文本 文章详情页 - 手机上不再套卡片:.article-layout 28px + .paper 22px + 卡片边框三层一共 吃掉约 84px,390 屏上正文只剩 275px;平铺后 330px。同时关掉卡片右上角 那团强调色渐晕(::before,卡片没了就只剩一块脏)。桌面 / 平板仍是卡片 - 底部标签跟信息流统一成纯文本 #标签,并去掉「标签」二字的小标 (有 # 就是标签,再来两个字是重复) - 详情页的标签是链接,补 padding:6px 0 —— 12.5px 裸文字按下去只有 ~18px 高, 手机上不好点;不画背景不画边框,观感不变 标签样式只有 home.css 一处 .tg,信息流与详情页共用。 验证:headless Chromium 从站上量取计算样式 + 截图(390 / 1280) - 详情页手机:paper bg=透明 border=0 radius=0 shadow=none padding=0,::before=none, 正文 330px;桌面:bg=#fffefb border=1px radius=20px padding=48px,::before=block - .end 子元素只剩 [A.tg, A.tg];.tg 12.5px / padding 0 / ::before "#";gap 14px - 公网 138.2.17.73:8080 产物 md5 与磁盘一致;npm run build 无警告
This commit is contained in:
@@ -168,7 +168,6 @@ function onTocClick(e) {
|
||||
<div class="prose" v-html="sanitizeHtml(props.contentHtml)" />
|
||||
|
||||
<div class="end">
|
||||
<span class="lbl">标签</span>
|
||||
<RouterLink v-for="t in props.post.tags || []" :key="t" class="tg" to="/tags">{{ t }}</RouterLink>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
Reference in New Issue
Block a user