185f411495
- 引入 mp-html 替代 RichText，支持图文混排、表格等复杂内容 - 新建 RichArticle 组件封装 sanitizeHtml + mp-html - 通过 native-components 拷贝原生组件到 dist - 优化文章排版样式（字号、间距、分隔线、底栏安全区） - sanitize-html 扩展允许 style/data-w-e-type 属性
147 lines
2.6 KiB
SCSS
147 lines
2.6 KiB
SCSS
@import '../../../styles/variables.scss';
|
|
|
|
// 文章详情页 — 阅读优化排版
|
|
|
|
.article-detail-page {
|
|
padding-bottom: 100px;
|
|
background: $card;
|
|
}
|
|
|
|
.article-title {
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: var(--tk-font-h1);
|
|
font-weight: 700;
|
|
color: $tx;
|
|
display: block;
|
|
line-height: 1.35;
|
|
margin-bottom: var(--tk-gap-md);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.article-meta {
|
|
display: flex;
|
|
gap: var(--tk-gap-md);
|
|
font-size: var(--tk-font-cap);
|
|
color: $tx3;
|
|
margin-bottom: var(--tk-gap-lg);
|
|
align-items: center;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.meta-icon {
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.article-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, $bd-l, $bd, $bd-l);
|
|
margin-bottom: var(--tk-section-gap);
|
|
}
|
|
|
|
.article-body {
|
|
// RichText 内部样式由 formatArticleHtml 内联注入
|
|
// 这里只控制容器间距
|
|
font-size: var(--tk-font-body);
|
|
color: $tx2;
|
|
line-height: 1.8;
|
|
|
|
// 兜底：万一内联样式未生效的标签
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $tx;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.article-bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 64px;
|
|
background: $card;
|
|
border-top: 1px solid $bd-l;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 48px;
|
|
padding: 0 var(--tk-page-padding);
|
|
z-index: 10;
|
|
// 安全区适配
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-shadow: 0 -2px 12px rgba(45, 42, 38, 0.06);
|
|
}
|
|
|
|
.article-action-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: $touch-min;
|
|
min-height: $touch-min;
|
|
justify-content: center;
|
|
border-radius: $r-sm;
|
|
transition: background var(--tk-duration-fast);
|
|
|
|
&:active {
|
|
background: $surface-alt;
|
|
opacity: var(--tk-touch-feedback-opacity);
|
|
}
|
|
}
|
|
|
|
.article-action-icon {
|
|
font-size: 22px;
|
|
color: $tx2;
|
|
line-height: 1;
|
|
}
|
|
|
|
.article-action-text {
|
|
font-size: var(--tk-font-micro);
|
|
color: $tx3;
|
|
}
|
|
|
|
.loading-state,
|
|
.empty-state {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: var(--tk-gap-2xl) 0;
|
|
}
|
|
|
|
.loading-text,
|
|
.empty-text {
|
|
font-size: var(--tk-font-body);
|
|
color: $tx3;
|
|
}
|
|
|
|
// ─── 关怀模式覆盖 ───
|
|
.elder-mode {
|
|
.article-title {
|
|
font-size: var(--tk-font-h1);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.article-body {
|
|
font-size: var(--tk-font-body);
|
|
line-height: 2;
|
|
}
|
|
|
|
.article-bottom-bar {
|
|
height: 72px;
|
|
gap: 56px;
|
|
}
|
|
|
|
.article-action-icon {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.article-action-text {
|
|
font-size: var(--tk-font-body-sm);
|
|
}
|
|
}
|