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

style(stargalaxy): add topbj3.png background-image to .podium-card (shared, not rank-specific)

Browse Source
This commit is contained in:
zheng020 2026-06-10 18:01:39 +08:00
parent b130a51474
commit 021782d42f
1 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/pages/square/components/StarGalaxy/PodiumCard.vue
View File

@ -33,12 +33,18 @@ function handleClick() {
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.podium-card { .podium-card {
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// 公共背景图（不随 rank 变化，所有 podium 卡片都显示）
// 放在 .podium-N 之前以确保不被任何具体 rank 的样式覆盖
background-image: url("/static/square/galaxy/topbj3.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} }
/* TOP 1: 中央大卡（最大） */ /* TOP 1: 中央大卡（最大） */
@ -46,44 +52,28 @@ function handleClick() {
top: 400rpx; top: 400rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 240rpx; width: 96rpx;
height: 260rpx; height: 128rpx;
} }
/* TOP 2: 左上 */ /* TOP 2: 右上 */
.podium-2 { .podium-2 {
top: 120rpx;
left: 60rpx;
width: 200rpx;
height: 200rpx;
}
/* TOP 3: 右上 */
.podium-3 {
top: 150rpx; top: 150rpx;
right: 60rpx; right: 60rpx;
width: 192rpx; width: 96rpx;
height: 192rpx; height: 128rpx;
} }
/* TOP N 标签（按 rank 区分样式） */ /* TOP 3: 左上 */
.podium-1 .top-label { .podium-3 {
width: 96rpx; top: 152rpx;
height: 22rpx; left: 96rpx;
font-size: 13rpx; width: 160rpx;
background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%); height: 208rpx;
.podium-frame {
width: 160rpx;
height: 208rpx;
} }
.podium-2 .top-label,
.podium-3 .top-label {
width: 78rpx;
height: 18rpx;
font-size: 11rpx;
}
.podium-2 .top-label {
background: radial-gradient(ellipse, #c0c0c0, #e8e8e8 50%, #7a7a7a);
}
.podium-3 .top-label {
background: radial-gradient(ellipse, #cd7f32, #e8a45c 50%, #a0522d);
} }
.podium-frame { .podium-frame {
@ -91,14 +81,14 @@ function handleClick() {
inset: 0; inset: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; z-index: 2;
pointer-events: none; pointer-events: none;
transform: scale(1.5);
} }
.cover-wrap { .cover-wrap {
position: absolute; position: absolute;
inset: 10rpx; inset: 0;
overflow: hidden;
z-index: 2; z-index: 2;
} }
@ -110,19 +100,27 @@ function handleClick() {
} }
.top-label { .top-label {
width: 64rpx;
position: absolute; position: absolute;
bottom: -4rpx; bottom: -64rpx;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-radius: 11rpx; color: #fffabd;
font-size: 20rpx;
font-weight: 800;
border-radius: 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 900; text-shadow: -1px 1px 4px #ce0909d6;
color: #fff; background: linear-gradient(
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5); 93.1deg,
box-shadow: 0 6rpx 16rpx rgba(255, 140, 0, 0.5); rgba(224, 180, 247, 0.71) -12.06%,
rgba(178, 246, 204, 0.71) 52.09%,
rgba(98, 178, 244, 0.71) 163.5%
);
backdrop-filter: blur(11.699999809265137px);
z-index: 7; z-index: 7;
letter-spacing: 1rpx; padding: 0 16rpx;
} }
</style> </style>