xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(stargalaxy): set slot-specific static transform to prevent 9-item overlap fallback

Browse Source
This commit is contained in:
zheng020 2026-06-10 16:01:29 +08:00
parent f7b76e3813
commit dd5f95d734
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue
View File

@ -54,12 +54,27 @@ const emit = defineEmits(['cardClick'])
const BASE_X = 164
const BASE_Y = 530
// Each item's static fallback position = position at its slot in the orbit keyframe cycle.
// When animation runs, the keyframe overrides these. When animation doesn't run (e.g. prefers-reduced-motion),
// items stay at their slot positions instead of stacking at (BASE_X, BASE_Y).
const SLOT_TRANSFORMS = [
'translate(0, 0) scale(1.15)', // slot 0: TOP 4 (front center)
'translate(84px, -13px) scale(1.05)', // slot 1: TOP 5
'translate(157px, -43px) scale(0.95)', // slot 2: TOP 6
'translate(113px, -83px) scale(0.85)', // slot 3: TOP 7
'translate(45px, -107px) scale(0.75)', // slot 4: TOP 8
'translate(-45px, -107px) scale(0.75)', // slot 5: TOP 9
'translate(-113px, -83px) scale(0.85)', // slot 6: TOP 10
'translate(-156px, -43px) scale(0.95)', // slot 7: TOP 11
'translate(-84px, -13px) scale(1.05)', // slot 8: TOP 12
]
function ringItemStyle(p) {
return {
left: BASE_X + 'rpx',
top: BASE_Y + 'rpx',
zIndex: p.zIndex,
transform: `scale(${p.scale})`,
transform: SLOT_TRANSFORMS[p.rank - 4],
animationDelay: RING_DELAYS[p.rank - 4] + 's',
}
}