206 lines
6.2 KiB
Vue
206 lines
6.2 KiB
Vue
<template>
|
||
<view class="scattered-ranks">
|
||
<!-- 椭圆轨道装饰（虚线） -->
|
||
<!-- <svg class="orbit-svg" viewBox="0 0 375 170" preserveAspectRatio="none">
|
||
<defs>
|
||
<linearGradient id="sg-orbit-grad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" stop-color="rgba(255,255,255,0.15)" />
|
||
<stop offset="50%" stop-color="rgba(255,255,255,0.4)" />
|
||
<stop offset="100%" stop-color="rgba(255,250,189,0.85)" />
|
||
</linearGradient>
|
||
<radialGradient id="sg-center-glow" cx="50%" cy="50%" r="50%">
|
||
<stop offset="0%" stop-color="rgba(255,250,189,0.5)" />
|
||
<stop offset="100%" stop-color="transparent" />
|
||
</radialGradient>
|
||
</defs>
|
||
<ellipse cx="187" cy="55" rx="80" ry="35" fill="url(#sg-center-glow)" />
|
||
<ellipse cx="187" cy="55" rx="130" ry="55" fill="none" stroke="url(#sg-orbit-grad)" stroke-width="1.5" stroke-dasharray="3,3" />
|
||
<path d="M 57,55 A 130,55 0 0,0 317,55" stroke="rgba(255,250,189,0.85)" stroke-width="2.5" fill="none" />
|
||
</svg> -->
|
||
|
||
<!-- 9 个散落 item -->
|
||
<view
|
||
v-for="(p, i) in positions"
|
||
:key="p.rank"
|
||
class="ring-item"
|
||
:class="'r' + (p.rank - 4)"
|
||
:style="ringItemStyle(p)"
|
||
@click="handleClick(items[i])"
|
||
>
|
||
<!-- 相框（最底层） -->
|
||
<image
|
||
class="ring-frame"
|
||
:src="ringFrameSrc(p.rank)"
|
||
mode="aspectFit"
|
||
/>
|
||
<view class="top-label">{{ formatLabel(p.rank) }}</view>
|
||
<image
|
||
class="cover-image"
|
||
:src="(items[i]?.cover_url) || (items[i]?.cover_image) || ''"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
// Note: @keyframes orbit is inlined below (not imported from config.js ORBIT_KEYFRAMES)
|
||
// because Vue <style> blocks cannot interpolate JS string constants.
|
||
// config.js ORBIT_KEYFRAMES is kept as documentation/source-of-truth.
|
||
import { RING_DELAYS } from './config.js'
|
||
|
||
const props = defineProps({
|
||
items: { type: Array, required: true }, // length 9
|
||
positions: { type: Array, required: true }, // from generateRingPositions()
|
||
})
|
||
|
||
const emit = defineEmits(['cardClick'])
|
||
|
||
// 静态 base 位置：slot 0 中心 (187, 565)，item 46×72，top-left = (164, 530)
|
||
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: SLOT_TRANSFORMS[p.rank - 4],
|
||
animationDelay: RING_DELAYS[p.rank - 4] + 's',
|
||
}
|
||
}
|
||
|
||
function formatLabel(rank) {
|
||
return 'TOP ' + rank
|
||
}
|
||
|
||
function ringFrameSrc(rank) {
|
||
// rank 4 → LV4 (TOP 4), rank 5 → LV5 (TOP 5), ..., rank 12 → LV12 (TOP 12)
|
||
// ScatteredRanks rank == display rank (no offset, unlike PodiumCard which uses rank - 3)
|
||
return `/static/square/galaxy/LV${rank}.png`
|
||
}
|
||
|
||
function handleClick(item) {
|
||
if (item) emit('cardClick', item)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.scattered-ranks {
|
||
position: relative;
|
||
width: 750rpx;
|
||
height: 720rpx;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.orbit-svg {
|
||
position: absolute;
|
||
top: 390rpx;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 340rpx;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
.ring-item {
|
||
position: absolute;
|
||
width: 46rpx;
|
||
height: 72rpx; /* 14 label + 2 gap + 56 cover */
|
||
transform-origin: center;
|
||
pointer-events: auto;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
animation: orbit 36s linear infinite;
|
||
}
|
||
|
||
.ring-frame {
|
||
position: absolute;
|
||
inset: -2rpx; /* extend slightly outside the item bounds */
|
||
width: calc(100% + 4rpx);
|
||
height: calc(100% + 4rpx);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.top-label {
|
||
width: 46rpx;
|
||
height: 14rpx;
|
||
background: radial-gradient(ellipse, #C8E6FF, #fff 50%, #4D9AF8);
|
||
border-radius: 7rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 7rpx;
|
||
font-weight: 900;
|
||
color: #FFFABD;
|
||
text-shadow: -1rpx 1rpx 2rpx rgba(206, 9, 9, 0.84);
|
||
z-index: 2; /* above frame */
|
||
}
|
||
|
||
/* TOP 4 label 是金渐变（最显眼） */
|
||
.r0 .top-label {
|
||
background: radial-gradient(ellipse, #FFFFFF, #FFFABD 30%, #4D9AF8 100%);
|
||
box-shadow: 0 4rpx 12rpx rgba(255, 250, 189, 0.55);
|
||
font-size: 8rpx;
|
||
}
|
||
|
||
.cover-image {
|
||
margin-top: 2rpx;
|
||
width: 46rpx;
|
||
height: 56rpx;
|
||
border-radius: 5rpx;
|
||
box-shadow: 3rpx 3rpx 6rpx rgba(198, 13, 13, 0.45);
|
||
z-index: 1; /* between frame and label */
|
||
}
|
||
|
||
.r0 .cover-image {
|
||
box-shadow: 0 12rpx 28rpx rgba(255, 32, 36, 0.5), 0 0 24rpx rgba(255, 250, 189, 0.55);
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
/* 关键帧：放在非 scoped 块中，让所有 ring-item 共享 */
|
||
@keyframes orbit {
|
||
0% { transform: translate(0,0) scale(1.15); }
|
||
11.11% { transform: translate(84px,-13px) scale(1.05); }
|
||
22.22% { transform: translate(157px,-43px) scale(0.95); }
|
||
33.33% { transform: translate(113px,-83px) scale(0.85); }
|
||
44.44% { transform: translate(45px,-107px) scale(0.75); }
|
||
55.55% { transform: translate(-45px,-107px) scale(0.75); }
|
||
66.66% { transform: translate(-113px,-83px) scale(0.85); }
|
||
77.77% { transform: translate(-156px,-43px) scale(0.95); }
|
||
88.88% { transform: translate(-84px,-13px) scale(1.05); }
|
||
100% { transform: translate(0,0) scale(1.15); }
|
||
}
|
||
|
||
@keyframes crownPulse {
|
||
0%, 100% { transform: translateX(-50%) scale(1); }
|
||
50% { transform: translateX(-50%) scale(1.15); }
|
||
}
|
||
|
||
/* 可访问性：减少动画 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.ring-item,
|
||
.crown {
|
||
animation: none !important;
|
||
}
|
||
}
|
||
</style>
|