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

refactor(stargalaxy): remove unused diamond-frame/cover-highlight/diamond-border/crown from PodiumCard

Browse Source
This commit is contained in:
zheng020 2026-06-10 17:09:50 +08:00
parent 308cf33a14
commit 32bc65aa1b
1 changed files with 33 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,12 @@
<template>
<view class="podium-card" :class="['podium-' + rank]" :style="cardStyle" @click="handleClick">
<view
class="podium-card"
:class="['podium-' + rank]"
:style="cardStyle"
@click="handleClick"
>
<!-- 相框（最底层） -->
<image
class="podium-frame"
:src="frameSrc"
mode="aspectFit"
/>
<!-- 钻石渐变外框 -->
<view class="diamond-frame" :style="frameStyle"></view>
<image class="podium-frame" :src="frameSrc" mode="aspectFit" />
<!-- 藏品主图（不规则圆角） -->
<view class="cover-wrap">
@ -17,79 +15,71 @@
:src="item.cover_url || item.cover_image || ''"
mode="aspectFill"
/>
<!-- 青绿色高光 overlay -->
<view class="cover-highlight"></view>
</view>
<!-- 钻石渐变边框层 -->
<view class="diamond-border"></view>
<!-- 皇冠（仅 TOP 1） -->
<!-- <view v-if="rank === 4" class="crown">👑</view> -->
<!-- TOP N 标签（cover 下方居中） -->
<view class="top-label" :style="labelStyle">TOP {{ displayRank }}</view>
</view>
</template>
<script setup>
import { computed } from 'vue'
import { computed } from "vue";
const props = defineProps({
item: { type: Object, required: true },
rank: { type: Number, required: true, validator: v => v >= 4 && v <= 6 },
rank: { type: Number, required: true, validator: (v) => v >= 4 && v <= 6 },
size: { type: Object, default: () => ({ width: 120, height: 130 }) },
})
});
const emit = defineEmits(['cardClick'])
const emit = defineEmits(["cardClick"]);
// 内部 rank 4/5/6 对外显示 1/2/3（颁奖台：TOP 1/2/3）
const displayRank = computed(() => props.rank - 3)
const displayRank = computed(() => props.rank - 3);
// 相框图片源：rank 4 → LV1, rank 5 → LV2, rank 6 → LV3
const frameSrc = computed(() => {
const lvNumber = props.rank - 3
return `/static/square/galaxy/LV${lvNumber}.png`
})
const lvNumber = props.rank - 3;
return `/static/square/galaxy/LV${lvNumber}.png`;
});
// 不同 rank 的标签渐变
const labelGradients = {
4: 'radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)', // 金
5: 'radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)', // 银
6: 'radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)', // 铜
}
4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
5: "radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)", // 银
6: "radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)", // 铜
};
const labelSizes = {
4: { w: 96, h: 22, font: 13 },
5: { w: 78, h: 18, font: 11 },
6: { w: 78, h: 18, font: 11 },
}
};
// 外框颜色（金/银/铜）
const frameGradients = {
4: 'radial-gradient(ellipse at -10% 5%, #FFD700 0%, #FF3939 32%, #FFEDA5 59%, #FF6B6B 100%)',
5: 'radial-gradient(ellipse at -10% 5%, #C0C0C0 0%, #FF6B6B 32%, #E8E8E8 59%, #9A9A9A 100%)',
6: 'radial-gradient(ellipse at -10% 5%, #CD7F32 0%, #FF3939 32%, #E8A45C 59%, #A0522D 100%)',
}
4: "radial-gradient(ellipse at -10% 5%, #FFD700 0%, #FF3939 32%, #FFEDA5 59%, #FF6B6B 100%)",
5: "radial-gradient(ellipse at -10% 5%, #C0C0C0 0%, #FF6B6B 32%, #E8E8E8 59%, #9A9A9A 100%)",
6: "radial-gradient(ellipse at -10% 5%, #CD7F32 0%, #FF3939 32%, #E8A45C 59%, #A0522D 100%)",
};
const cardStyle = {
width: props.size.width + 'rpx',
height: props.size.height + 'rpx',
}
width: props.size.width + "rpx",
height: props.size.height + "rpx",
};
const frameStyle = {
background: frameGradients[props.rank],
}
};
const labelStyle = {
width: labelSizes[props.rank].w + 'rpx',
height: labelSizes[props.rank].h + 'rpx',
fontSize: labelSizes[props.rank].font + 'rpx',
width: labelSizes[props.rank].w + "rpx",
height: labelSizes[props.rank].h + "rpx",
fontSize: labelSizes[props.rank].font + "rpx",
background: labelGradients[props.rank],
}
};
function handleClick() {
emit('cardClick', props.item)
emit("cardClick", props.item);
}
</script>
@ -110,22 +100,10 @@ function handleClick() {
pointer-events: none;
}
.diamond-frame {
position: absolute;
inset: 0;
border-radius: 8rpx 44rpx 8rpx 38rpx;
filter: blur(6rpx);
opacity: 0.7;
z-index: 1;
}
.cover-wrap {
position: absolute;
inset: 10rpx;
border-radius: 6rpx 40rpx 6rpx 34rpx;
overflow: hidden;
background: #fff;
box-shadow: 4rpx 4rpx 28rpx rgba(127, 7, 7, 0.5);
z-index: 2;
}
@ -136,39 +114,6 @@ function handleClick() {
inset: 0;
}
.cover-highlight {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 42%;
background: linear-gradient(180deg, rgba(83, 244, 211, 0.4) 1%, transparent 70%);
pointer-events: none;
}
.diamond-border {
position: absolute;
inset: 8rpx;
border: 4rpx solid transparent;
border-radius: 8rpx 42rpx 8rpx 36rpx;
background: linear-gradient(135deg, #86BEFF, #FF3939, #88FFCE, #4D9AF8) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 3;
}
.crown {
position: absolute;
top: -44rpx;
left: 50%;
transform: translateX(-50%);
font-size: 44rpx;
animation: crownPulse 2s ease-in-out infinite;
z-index: 6;
}
.top-label {
position: absolute;
bottom: -4rpx;