地图与正文同宽 / 详情页封面改列表行样式 / 封面拖拽上传(批 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
+17 -34
View File
@@ -352,19 +352,8 @@ hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--accent); text-decoration: none; }
/* 封面是按 16:9 裁的(activities/form.php 里的 Cropper aspectRatio 就是 16/9),
展示端必须同比例 —— 不然辛苦裁好的构图在这里又被切掉一块。
⚠️ 别再加 max-height:容器比例一旦被改,object-fit: cover 就重新裁一次图。 */
.activity-cover {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
margin-bottom: 20px; background: var(--bg-soft);
aspect-ratio: 16 / 9;
}
.activity-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-cover .cover-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
/* 批 21:详情页顶部不再放整幅 16:9 大封面(原大图容器样式已删),
改用列表同款 .act-row(含 .act-row-cover,仍是 16:9)—— 见「活动列表」一节。 */
/* ── 8. 时间轴与节点卡片 ─────────────────────────────────────────────────── */
.timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@@ -923,7 +912,7 @@ video.video-thumb.video-thumb-mini {
⚠️ width / height / object-fit 必须写在 **img** 上,不能写在外层 div 上 ——
写错地方图片就完全不受约束,会按原始尺寸铺出来:头像 400×400、封面
1920×1080,直接把下面的表单盖住(这就是「头像非常大、整页错位」的根)。
对照写对了的 .card-cover img / .activity-cover img。 */
对照写对了的 .card-cover img / .act-row-cover img。 */
.avatar-preview {
position: relative; flex: none;
width: 84px; height: 84px; border-radius: 50%;
@@ -979,6 +968,8 @@ video.video-thumb.video-thumb-mini {
.avatar-preview, .cover-preview { transition: border-color .15s, background .15s; }
.avatar-upload:hover .avatar-preview,
.cover-upload:hover .cover-preview { border-color: var(--accent); background: var(--accent-soft); }
/* 批 21:把图片拖进上传区时给个高亮反馈(松手即走原有的裁剪流程) */
.cover-upload.dragover .cover-preview { border-color: var(--accent); background: var(--accent-soft); }
.avatar-upload-actions, .cover-upload-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 0;
@@ -1393,31 +1384,23 @@ video.video-thumb.video-thumb-mini {
.act-member-more { font-size: 12.5px; color: var(--text-mute); align-self: center; }
.act-row-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
/* 批 21:详情页顶部复用列表行样式展示「小封面 + 参与人/统计」。
它不是链接(详情页就在这儿),压掉 hover 反馈、留出与标题区的间距。 */
.act-row-static { margin-bottom: 20px; cursor: default; }
.act-row-static:hover { border-color: var(--border); box-shadow: none; }
@media (max-width: 560px) {
.act-row { grid-template-columns: 104px 1fr; gap: 12px; padding: 10px; }
}
/* ── 23. 地图铺满整屏(批 18)──────────────────────────────────────────── */
/* 行程路线 / 旅行地图:**突破正文版心,占满整个视口宽度**;
高度跟着视口高度走 —— 屏幕越大容器越大,地图显示的地理范围也越大
(AMap 填满容器,fitView 按当前视野重算,等于跟着分辨率自动缩放)。
⚠️ 左右出血的 margin **由 JS 给**:版心留白是 `max(gutter, (100% - 1080px)/2)`,
而这个 100% 在**使用它的元素**上解析 —— 直接写「负的版心留白」在地图元素上
算出来只有 -gutter(实测 156px vs 该有的 180px),铺不满。
所以改成读 container 实际渲染出来的 padding-left 再取负(见模板里的 bleed())。
⚠️ 更不能写 `width: 100vw`:它含滚动条宽度,会让整页横向溢出。
⚠️ 已经贴着视口边缘了,就不要左右边框和圆角了(看着才像一整屏)。 */
/* ── 23. 地图尺寸(批 21 调整)──────────────────────────────────────────── */
/* 行程路线 / 旅行地图:**与正文版心同宽**。
批 18 曾让它突破版心铺满整个视口(JS 负 margin 出血),用户反馈
「上面正文固定宽、下面地图铺满屏」看着奇怪,批 21 改回一致 ——
宽度跟随 .container 的内容区,模板里的 bleed() 已删,这里也不再有
border-radius/border 的去边框覆盖(恢复 .route-map 默认圆角与描边)。
高度仍跟着视口高度走 —— 屏幕越大容器越大,地图显示的地理范围也越大。 */
#home-panel-map .route-map,
#route-panel-map .route-map {
height: clamp(460px, calc(100vh - 190px), 1000px);
border-radius: 0;
border-left: 0;
border-right: 0;
}
/* 地图下面那句说明:跟着一起出血,只留一个 gutter
(不然会孤零零悬在离地图左边缘很远的地方) */
#home-panel-map .route-map-hint,
#route-panel-map .route-map-hint {
padding-left: var(--gutter);
padding-right: var(--gutter);
}