topfans/frontend/pages/square/components/StarGalaxy/PodiumCard.vue

<template>
  <view class="podium-card" :class="['podium-' + rank]" @click="handleClick">
    <!-- 藏品主图（不规则圆角） -->
    <view class="cover-wrap">
      <!-- 相框（最底层） -->
      <image
        class="podium-frame"
        :src="`/static/square/galaxy/LV${rank}.png`"
        mode="aspectFit"
      />
      <image
        class="cover-image"
        :src="item.cover_url || item.cover_image || ''"
        mode="aspectFill"
      />
    </view>

    <!-- TOP N 标签（cover 下方居中） -->
    <view class="top-label">TOP {{ rank }}</view>
  </view>
</template>

<script setup>
const props = defineProps({
  item: { type: Object, required: true },
  rank: { type: Number, required: true, validator: (v) => v >= 1 && v <= 3 },
});

const emit = defineEmits(["cardClick"]);

function handleClick() {
  emit("cardClick", props.item);
}
</script>

<style scoped lang="scss">
.podium-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60vw;
  height: 320rpx;
}

/* TOP 1: 中央大卡（最大） */
.podium-1 {
  top: 360rpx;
  left: 50%;
  transform: translateX(-50%) ;
  animation: podium-float-center 3s ease-in-out infinite;
  z-index: 3;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/square/galaxy/topbj1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
    transform: scale(1.05);
  }
  .cover-wrap {
    width: 144rpx;
    height: 208rpx;
    bottom: 136rpx;
    left: 19.2rpx;
    .podium-frame {
      width: 100%;
      height: 100%;
      top: -24rpx;
    }
  }
  .top-label {
    left: 55%;
  }
}

/* TOP 2: 左上 */
.podium-2 {
  top: 128rpx;
  right: -120rpx;
  animation: podium-float 3.4s ease-in-out infinite;
  animation-delay: -1.2s;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/square/galaxy/topbj2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
    transform: rotate(-19deg) scale(0.75);
  }
  .cover-wrap {
    width: 121.6rpx;
    height: 160rpx;
    bottom: 88rpx;
    left: -8rpx;
    .podium-frame {
      width: 100%;
      height: 100%;
      transform: scale(1.6);
    }
  }
}

/* TOP 3: 右上 */
.podium-3 {
  top: 160rpx;
  left: -96rpx;
  animation: podium-float 3.2s ease-in-out infinite;
  animation-delay: -2s;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/static/square/galaxy/topbj3.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
    transform: scale(0.9) rotate(30deg);
  }
  .cover-wrap {
    width: 96rpx;
    height: 152rpx;
    bottom: 88rpx;
    .podium-frame {
      width: 100%;
      height: 100%;
      top: -16rpx;
    }
  }
}

.podium-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  transform: scale(1.5);
}

.cover-wrap {
  position: relative;
  z-index: 2;
}

.cover-image {
  width: 100%;
  height: 100%;
  position: absolute;
}

.top-label {
  width: 64rpx;
  position: absolute;
  bottom: 96rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #fffabd;
  font-size: 20rpx;
  font-weight: 800;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
  padding: 0 16rpx;
}

/* 上下浮动动画：podium-1 需保留 translateX(-50%) 居中，单独一组 keyframes */
@keyframes podium-float-center {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-12rpx);
  }
}

@keyframes podium-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10rpx);
  }
}
</style>