diff --git a/docs/活动页/建页执行流程.md b/docs/活动页/建页执行流程.md index ec6c927..d87503a 100644 --- a/docs/活动页/建页执行流程.md +++ b/docs/活动页/建页执行流程.md @@ -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 文件统一使用 `