地图与正文同宽 / 详情页封面改列表行样式 / 封面拖拽上传(批 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:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user