From 4989915c54c797d740122f678028ac2a715cb53a Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 3 Jun 2026 18:01:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=BB=BA=E9=A1=B5=E6=96=B9=E6=A1=88):=20?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85itemcenter=E7=BB=84=E4=BB=B6=E7=9A=84min-heig?=
 =?UTF-8?q?ht=E8=AE=A1=E7=AE=97=E8=A7=84=E5=88=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/活动页/建页执行流程.md | 1 +
 docs/活动页/建页操作模板.md | 1 +
 2 files changed, 2 insertions(+)

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 文件统一使用 `<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`，不额外加边框虚线，后续由用户按预览继续调整。
diff --git a/docs/活动页/建页操作模板.md b/docs/活动页/建页操作模板.md
index 2bc1f94..2f68c1f 100644
--- a/docs/活动页/建页操作模板.md
+++ b/docs/活动页/建页操作模板.md
@@ -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`，不额外加边框虚线。