refactor(stargalaxy): remove unused diamond-frame/cover-highlight/diamond-border/crown from PodiumCard
This commit is contained in:
parent
308cf33a14
commit
32bc65aa1b
@ -1,14 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="podium-card" :class="['podium-' + rank]" :style="cardStyle" @click="handleClick">
|
<view
|
||||||
|
class="podium-card"
|
||||||
|
:class="['podium-' + rank]"
|
||||||
|
:style="cardStyle"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
<!-- 相框(最底层) -->
|
<!-- 相框(最底层) -->
|
||||||
<image
|
<image class="podium-frame" :src="frameSrc" mode="aspectFit" />
|
||||||
class="podium-frame"
|
|
||||||
:src="frameSrc"
|
|
||||||
mode="aspectFit"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 钻石渐变外框 -->
|
|
||||||
<view class="diamond-frame" :style="frameStyle"></view>
|
|
||||||
|
|
||||||
<!-- 藏品主图(不规则圆角) -->
|
<!-- 藏品主图(不规则圆角) -->
|
||||||
<view class="cover-wrap">
|
<view class="cover-wrap">
|
||||||
@ -17,79 +15,71 @@
|
|||||||
:src="item.cover_url || item.cover_image || ''"
|
:src="item.cover_url || item.cover_image || ''"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
/>
|
/>
|
||||||
<!-- 青绿色高光 overlay -->
|
|
||||||
<view class="cover-highlight"></view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 钻石渐变边框层 -->
|
|
||||||
<view class="diamond-border"></view>
|
|
||||||
|
|
||||||
<!-- 皇冠(仅 TOP 1) -->
|
|
||||||
<!-- <view v-if="rank === 4" class="crown">👑</view> -->
|
|
||||||
|
|
||||||
<!-- TOP N 标签(cover 下方居中) -->
|
<!-- TOP N 标签(cover 下方居中) -->
|
||||||
<view class="top-label" :style="labelStyle">TOP {{ displayRank }}</view>
|
<view class="top-label" :style="labelStyle">TOP {{ displayRank }}</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue'
|
import { computed } from "vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: { type: Object, required: true },
|
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 }) },
|
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)
|
// 内部 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
|
// 相框图片源:rank 4 → LV1, rank 5 → LV2, rank 6 → LV3
|
||||||
const frameSrc = computed(() => {
|
const frameSrc = computed(() => {
|
||||||
const lvNumber = props.rank - 3
|
const lvNumber = props.rank - 3;
|
||||||
return `/static/square/galaxy/LV${lvNumber}.png`
|
return `/static/square/galaxy/LV${lvNumber}.png`;
|
||||||
})
|
});
|
||||||
|
|
||||||
// 不同 rank 的标签渐变
|
// 不同 rank 的标签渐变
|
||||||
const labelGradients = {
|
const labelGradients = {
|
||||||
4: 'radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)', // 金
|
4: "radial-gradient(ellipse, #FFD700, #FFF6A8 30%, #DAA520 100%)", // 金
|
||||||
5: 'radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)', // 银
|
5: "radial-gradient(ellipse, #C0C0C0, #E8E8E8 50%, #7A7A7A)", // 银
|
||||||
6: 'radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)', // 铜
|
6: "radial-gradient(ellipse, #CD7F32, #E8A45C 50%, #A0522D)", // 铜
|
||||||
}
|
};
|
||||||
|
|
||||||
const labelSizes = {
|
const labelSizes = {
|
||||||
4: { w: 96, h: 22, font: 13 },
|
4: { w: 96, h: 22, font: 13 },
|
||||||
5: { w: 78, h: 18, font: 11 },
|
5: { w: 78, h: 18, font: 11 },
|
||||||
6: { w: 78, h: 18, font: 11 },
|
6: { w: 78, h: 18, font: 11 },
|
||||||
}
|
};
|
||||||
|
|
||||||
// 外框颜色(金/银/铜)
|
// 外框颜色(金/银/铜)
|
||||||
const frameGradients = {
|
const frameGradients = {
|
||||||
4: 'radial-gradient(ellipse at -10% 5%, #FFD700 0%, #FF3939 32%, #FFEDA5 59%, #FF6B6B 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%)',
|
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%)',
|
6: "radial-gradient(ellipse at -10% 5%, #CD7F32 0%, #FF3939 32%, #E8A45C 59%, #A0522D 100%)",
|
||||||
}
|
};
|
||||||
|
|
||||||
const cardStyle = {
|
const cardStyle = {
|
||||||
width: props.size.width + 'rpx',
|
width: props.size.width + "rpx",
|
||||||
height: props.size.height + 'rpx',
|
height: props.size.height + "rpx",
|
||||||
}
|
};
|
||||||
|
|
||||||
const frameStyle = {
|
const frameStyle = {
|
||||||
background: frameGradients[props.rank],
|
background: frameGradients[props.rank],
|
||||||
}
|
};
|
||||||
|
|
||||||
const labelStyle = {
|
const labelStyle = {
|
||||||
width: labelSizes[props.rank].w + 'rpx',
|
width: labelSizes[props.rank].w + "rpx",
|
||||||
height: labelSizes[props.rank].h + 'rpx',
|
height: labelSizes[props.rank].h + "rpx",
|
||||||
fontSize: labelSizes[props.rank].font + 'rpx',
|
fontSize: labelSizes[props.rank].font + "rpx",
|
||||||
background: labelGradients[props.rank],
|
background: labelGradients[props.rank],
|
||||||
}
|
};
|
||||||
|
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
emit('cardClick', props.item)
|
emit("cardClick", props.item);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -110,22 +100,10 @@ function handleClick() {
|
|||||||
pointer-events: none;
|
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 {
|
.cover-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 10rpx;
|
inset: 10rpx;
|
||||||
border-radius: 6rpx 40rpx 6rpx 34rpx;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #fff;
|
|
||||||
box-shadow: 4rpx 4rpx 28rpx rgba(127, 7, 7, 0.5);
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -136,39 +114,6 @@ function handleClick() {
|
|||||||
inset: 0;
|
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 {
|
.top-label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -4rpx;
|
bottom: -4rpx;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user