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

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

@ -33,12 +33,18 @@ function handleClick() {
}
</script>
<style scoped>
<style scoped lang="scss">
.podium-card {
position: absolute;
display: flex;
align-items: 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: 中央大卡（最大） */
@ -46,44 +52,28 @@ function handleClick() {
top: 400rpx;
left: 50%;
transform: translateX(-50%);
width: 240rpx;
height: 260rpx;
width: 96rpx;
height: 128rpx;
}
/* TOP 2: 左上 */
/* TOP 2: 右上 */
.podium-2 {
top: 120rpx;
left: 60rpx;
width: 200rpx;
height: 200rpx;
}
/* TOP 3: 右上 */
.podium-3 {
top: 150rpx;
right: 60rpx;
width: 192rpx;
height: 192rpx;
width: 96rpx;
height: 128rpx;
}
/* TOP N 标签（按 rank 区分样式） */
.podium-1 .top-label {
width: 96rpx;
height: 22rpx;
font-size: 13rpx;
background: radial-gradient(ellipse, #ffd700, #fff6a8 30%, #daa520 100%);
}
.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);
/* TOP 3: 左上 */
.podium-3 {
top: 152rpx;
left: 96rpx;
width: 160rpx;
height: 208rpx;
.podium-frame {
width: 160rpx;
height: 208rpx;
}
}
.podium-frame {
@ -91,14 +81,14 @@ function handleClick() {
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
z-index: 2;
pointer-events: none;
transform: scale(1.5);
}
.cover-wrap {
position: absolute;
inset: 10rpx;
overflow: hidden;
inset: 0;
z-index: 2;
}
@ -110,19 +100,27 @@ function handleClick() {
}
.top-label {
width: 64rpx;
position: absolute;
bottom: -4rpx;
bottom: -64rpx;
left: 50%;
transform: translateX(-50%);
border-radius: 11rpx;
color: #fffabd;
font-size: 20rpx;
font-weight: 800;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
color: #fff;
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.5);
box-shadow: 0 6rpx 16rpx rgba(255, 140, 0, 0.5);
text-shadow: -1px 1px 4px #ce0909d6;
background: linear-gradient(
93.1deg,
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;
letter-spacing: 1rpx;
padding: 0 16rpx;
}
</style>