feat(stargalaxy): add ScatteredRanks with 9 ring items + 36s orbit animation
This commit is contained in:
parent
2bd5733ca0
commit
04609adb5e
164
frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue
Normal file
164
frontend/pages/square/components/StarGalaxy/ScatteredRanks.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<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])"
|
||||
>
|
||||
<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>
|
||||
import { ORBIT_KEYFRAMES, 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
|
||||
|
||||
function ringItemStyle(p) {
|
||||
return {
|
||||
left: BASE_X + 'rpx',
|
||||
top: BASE_Y + 'rpx',
|
||||
zIndex: p.zIndex,
|
||||
transform: `scale(${p.scale})`,
|
||||
animationDelay: RING_DELAYS[p.rank - 4] + 's',
|
||||
}
|
||||
}
|
||||
|
||||
function formatLabel(rank) {
|
||||
return 'TOP ' + rank
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.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>
|
||||
Loading…
Reference in New Issue
Block a user