feat(建页方案): 补充itemcenter组件的min-height计算规则
This commit is contained in:
parent
f35e753383
commit
4989915c54
@ -147,6 +147,7 @@ page.config.js 是 md 的结构化落地结果,不能脱离 md 自行新增业
|
||||
开发预览阶段,样式优先靠近结构:能直接用内联样式表达的固定不变、一次性布局尺寸、间距、定位,直接写在模板内联样式里,方便实时调整并减少不必要的 class 拆分;可复用样式、状态样式、伪类/媒体查询/RTL 规则、复杂模块样式仍使用 class。
|
||||
动态样式不要优先使用 `:style="{ ... }"` 对象写法;涉及状态切换、选中态、方向、显隐、尺寸变化等动态效果时优先切换 class。只有必须绑定运行时数值且不适合枚举成 class 时,才使用动态 style。
|
||||
内联样式和 class 在普通静态场景下性能差异通常很小;需要避免的是大量节点重复生成动态 style 对象、频繁变更大段内联样式。开发结束或模块稳定后,再按复用性和可维护性统一抽成 class。
|
||||
使用 `itemCenter` 承载图片背景时,必须给组件写入按图片比例计算出的 `min-height`,避免图片未加载时内部信息挤在一起。计算方式:先确认组件在页面中的展示宽度(单位 vw),再读取图片实际宽高,`min-height = Math.ceil(展示宽度vw * 图片高度 / 图片宽度) + 'vw'`。如果组件放在网格或固定宽度容器里,展示宽度按该容器实际占用的 vw 计算;如果同一背景有多语言图片,取对应语言图片中最高的计算结果。
|
||||
生成的 Vue 文件统一使用 `<style lang="scss" scoped>`;页面基础样式固定放在 style 块顶部,包括 `* { color: #fff; }`、`.fullPage {}`、响应式基础字号 media query。阿语等 RTL 规则也集中写在 style 块中,使用 `[dir='rtl'] xxx`,不要散在模板内联样式里。
|
||||
除基础 media query 中设置响应式字号外,页面内其它展示字号统一使用 `font-size: 1em`,不要再写 `vw`、`px` 或 `clamp()` 字号,方便所有文本跟随统一基准字号变化。
|
||||
模块配置中如果出现 `images.container` 或 `containerImages` 这类整块大背景图,生成 Vue 时统一使用 `itemCenter` 承载;容器宽度先写 `100vw`,父级用 flex 从上往下排列,`gap`、`padding`、`margin` 初始先写 `0`,不额外加边框虚线,后续由用户按预览继续调整。
|
||||
|
||||
@ -73,6 +73,7 @@ src/views/Activities/GulbenFestival/页面创建信息.md
|
||||
- 开发预览阶段,能直接用内联样式表达的固定不变、一次性布局、尺寸、间距、定位,就直接写内联样式,方便实时调位置并减少不必要的 class 拆分;稳定后再按复用性抽成 class。
|
||||
- 动态样式不要优先写 `:style="{ ... }"`,状态切换、选中态、方向、显隐、尺寸变化优先用 class。
|
||||
- 可复用样式、伪类、媒体查询和 RTL 规则仍建议写 class。
|
||||
- 使用 `itemCenter` 承载图片背景时,要按图片比例补 `min-height`,避免图片未加载时内部信息挤在一起。公式:`min-height = Math.ceil(展示宽度vw * 图片高度 / 图片宽度) + 'vw'`;展示宽度取组件在页面上的实际占用宽度,多语言图片取最高计算结果。
|
||||
- 生成的 Vue 文件统一使用 `<style lang="scss" scoped>`,顶部固定放 `* { color: #fff; }`、`.fullPage {}` 和响应式基础字号 media query;阿语样式用 `[dir='rtl']` 集中写在 style 里。
|
||||
- 除基础 media query 外,页面内展示字号统一写 `font-size: 1em`,跟随响应式基准字号变化。
|
||||
- `images.container` / `containerImages` 这类模块大背景图统一用 `itemCenter`,宽度先写 `100vw`,父级从上往下 flex 排列,`gap`、`padding`、`margin` 初始写 `0`,不额外加边框虚线。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user