地图与正文同宽 / 详情页封面改列表行样式 / 封面拖拽上传(批 21)

① 带地图的页面(首页旅行地图、详情页行程地图)原本铺满整个视口
  (批 18 的负 margin 出血),用户反馈「上面正文固定宽、下面地图铺满屏」
  看着奇怪 → 改回与正文版心同宽,bleed() 已删、CSS 去边框覆盖已删。

② 活动详情页顶部整幅 16:9 大封面太大 → 改用活动列表同款「封面行」
  (.act-row-static:小封面 + 参与人 + 统计),数据复用 collectStats
  同一聚合口径;.activity-cover 样式删除。

③ 创建/编辑活动封面支持直接把图片拖进上传区:drop→DataTransfer 塞给
  原有 file input 并触发 change,类型/大小校验与裁剪流程原样复用;
  拖入悬停给高亮反馈。

验证:本地全链(含 _map12/_map16 同宽与封面行断言、5 档视口)全绿;
部署哨兵同步改向(批 17/18 锚定旧实现的断言全部反向或改口径)。
This commit is contained in:
2026-09-24 22:13:29 +08:00
parent 08f491c7ab
commit 331fadfb48
5 changed files with 108 additions and 71 deletions
+4 -17
View File
@@ -161,20 +161,8 @@ foreach ($activities as $a) {
.replace(/>/g, '>').replace(/"/g, '"');
}
/* 地图铺满整个视口宽度:把正文版心的左右留白用负 margin 还回去。
⚠️ 不能用 CSS `calc(-1 * var(--shell-pad))`:自定义属性里的 `100%` 是在
**使用它的元素**上解析的,写在地图(它在版心内部,宽 1080)上算出来
只有 -gutter,实测只能铺到 1128/1440。这里按 container 实际渲染出的
padding 反推,才铺得满;也不用 100vw(含滚动条宽度会撑出横向滚动条)。 */
function bleed() {
var host = el.closest('.container');
if (!host) return;
var pad = parseFloat(window.getComputedStyle(host).paddingLeft) || 0;
if (pad <= 0) return;
el.style.marginLeft = (-pad) + 'px';
el.style.marginRight = (-pad) + 'px';
}
bleed();
/* 批 21:地图不再铺满整个视口 —— 用户反馈「上面正文固定宽、下面地图铺满屏」
看着奇怪,改回与正文版心同宽(批 18 的负 margin 出血逻辑 bleed() 已删)。 */
map = new AMap.Map(el, { viewMode: '2D', zoom: 5 });
window.__homeMap = map;
@@ -260,14 +248,13 @@ foreach ($activities as $a) {
relayout();
map.on('zoomend', relayout);
/* 改窗口大小 / 旋转屏幕 / 换分辨率:地图容器跟着变(宽度是铺满视口的),
视野和图标排布都得按新尺寸重算一次。防抖 200ms,别在拖动时反复重排。 */
/* 改窗口大小 / 旋转屏幕 / 换分辨率:地图容器跟着版心变,视野和图标排布
都得按新尺寸重算一次。防抖 200ms,别在拖动时反复重排。 */
var resizeTimer = null;
window.addEventListener('resize', function () {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (!map) return;
bleed(); // 版心留白变了,出血量跟着变
map.resize();
fitView();
relayout();