style: 剧集正文靠左对齐并保留阅读间距
This commit is contained in:
+4
-2
@@ -710,9 +710,11 @@ body {
|
|||||||
outline-offset: -3px;
|
outline-offset: -3px;
|
||||||
}
|
}
|
||||||
.reader-content {
|
.reader-content {
|
||||||
|
/* 正文紧邻目录左对齐,保留阅读行宽,不在宽屏内容区居中。 */
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin-inline: auto;
|
margin-inline: 0;
|
||||||
padding: 32px clamp(24px, 5cqw, 64px);
|
padding: 32px;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
.reader-chapter + .reader-chapter {
|
.reader-chapter + .reader-chapter {
|
||||||
margin-top: 48px;
|
margin-top: 48px;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { mount, type VueWrapper } from '@vue/test-utils'
|
import { mount, type VueWrapper } from '@vue/test-utils'
|
||||||
import { nextTick } from 'vue'
|
import { nextTick } from 'vue'
|
||||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||||
|
import { readFileSync } from 'node:fs'
|
||||||
import EpisodeReader from './EpisodeReader.vue'
|
import EpisodeReader from './EpisodeReader.vue'
|
||||||
import type { Episode } from '../projects/types'
|
import type { Episode } from '../projects/types'
|
||||||
|
|
||||||
@@ -61,6 +62,18 @@ function currentEpisode() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
describe('连续剧本阅读器', () => {
|
describe('连续剧本阅读器', () => {
|
||||||
|
it('正文容器靠左并保留目录间距,宽屏不再使用自动外边距居中', () => {
|
||||||
|
// DOM 测试不计算布局;保护正文定位样式,目录联动仍由后续交互测试验证。
|
||||||
|
const css = readFileSync('src/admin.css', 'utf8')
|
||||||
|
const content = css.match(/\.reader-content\s*\{([^}]+)\}/)![1]!
|
||||||
|
expect(content).toContain('max-width: 900px')
|
||||||
|
expect(content).toContain('margin-inline: 0')
|
||||||
|
expect(content).toContain('padding: 32px')
|
||||||
|
expect(content).toContain('text-align: left')
|
||||||
|
expect(content).not.toContain('auto')
|
||||||
|
expect(css).toMatch(/@media \(max-width: 600px\)[\s\S]*?\.reader-content\s*\{\s*padding-inline:\s*18px/)
|
||||||
|
})
|
||||||
|
|
||||||
it('按编号连续渲染全部剧集、元数据和空正文,标题不截断,模型内容只按文本显示', () => {
|
it('按编号连续渲染全部剧集、元数据和空正文,标题不截断,模型内容只按文本显示', () => {
|
||||||
const reversed = episodes.toReversed()
|
const reversed = episodes.toReversed()
|
||||||
wrapper = mount(EpisodeReader, { props: { episodes: reversed } })
|
wrapper = mount(EpisodeReader, { props: { episodes: reversed } })
|
||||||
|
|||||||
Reference in New Issue
Block a user