diff --git a/assets/style.css b/assets/style.css index cbbd7e6..b642414 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1338,6 +1338,8 @@ video.video-thumb.video-thumb-mini { .home-pin svg { position: absolute; left: 0; top: 0; overflow: visible; } .home-pin-line { stroke: #8aa0b8; stroke-width: 1.5; } .home-pin-dot { fill: #3b82f6; } +/* 引线末端的箭头(指向真实位置那个圆点)—— 活动多了也分得清哪张卡片归哪个点 */ +.home-arrow { fill: #8aa0b8; } .home-card { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; diff --git a/templates/activities/index.php b/templates/activities/index.php index 6298bde..700506f 100644 --- a/templates/activities/index.php +++ b/templates/activities/index.php @@ -159,6 +159,7 @@ foreach ($activities as $a) { var CARD_W = 186, CARD_H = 58; // 卡片名义尺寸(按中心距判碰用) var CLUSTER_DIST = 110; // 中心距小于它 → 归为同簇(要扇开) var CANVAS = 600, C = CANVAS / 2; // 每枚标记的 content 画布(真实位置在画布中心) + var DOT_R = 3; // 真实位置那个小圆点的半径(引线箭头要给它让位) function shortTitle(t) { return (t && t.length > 10) ? t.slice(0, 10) + '…' : (t || ''); @@ -181,8 +182,11 @@ foreach ($activities as $a) { if (s.memberCount > names.length) t += ' 等 ' + s.memberCount + ' 人'; return t; } - function cardHtml(s, dx, dy) { + function cardHtml(s, dx, dy, idx) { var moved = Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5; + /* 箭头 marker 的 id 必须逐枚唯一:每枚标记的 content 都自带一份 , + 同页里 id 重名会指向先出现的那份(虽然样子一样,但属于隐患)。 */ + var arrowId = 'home-arrow-' + (idx || 0); var inner = s.img ? '' : '📍'; @@ -194,9 +198,19 @@ foreach ($activities as $a) { var html = '
' + ''; if (moved) { - html += '' - + ''; + /* 引线**从卡片指向真实位置**:箭头画在真实位置那一端(marker-end), + 活动多了也能一眼看出这张卡片归哪个点;终点退开 DOT_R+2 px, + 免得箭头盖住圆心那个小圆点。 */ + var len = Math.hypot(dx, dy) || 1; + var gap = DOT_R + 2; + var ex = C + dx / len * gap, ey = C + dy / len * gap; + html += '' + + '' + + '' + + ''; } html += '' + '