topfans/frontend/pages/dashboard/components/UpcomingUpgrades.vue

<template>
  <view class="upcoming-upgrades">
    <view class="header-row">
      <text class="card-title">即将升级藏品</text>
      <!-- 右上角图例：标识两条进度条 -->
      <view class="legend">
        <view class="legend-item" style="margin-bottom: 14rpx">
          <image
            class="legend-tube-img"
            src="/static/icon/like-after.png"
            mode="heightFix"
          />
          <view class="legend-dot legend-dot-cyan">
            <text class="legend-text">获赞数</text>
          </view>
        </view>
        <view class="legend-item">
          <image
            class="legend-tube-img"
            src="/static/assetDetail/time.png"
            mode="heightFix"
          />
          <view class="legend-dot legend-dot-pink">
            <text class="legend-text">展出时长</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!items || items.length === 0" class="empty-row">
      <text class="empty-text">暂无数据</text>
    </view>
    <view v-else class="upgrades-list">
      <view v-for="item in items" :key="item.asset_id" class="upgrade-row">
        <view class="upgrade-thumb">
          <image
            v-if="item.asset_thumb"
            class="upgrade-thumb-img"
            :src="item.asset_thumb"
            mode="aspectFill"
          />
        </view>
        <view class="upgrade-progress">
          <view class="progress-bar progress-cyan">
            <view
              class="progress-fill"
              :style="{ width: item.like_progress + '%' }"
            ></view>
            <text class="progress-text">{{ item.like_progress }}%</text>
          </view>
          <view class="progress-bar progress-pink">
            <view
              class="progress-fill"
              :style="{ width: item.duration_progress + '%' }"
            ></view>
            <text class="progress-text">{{ item.duration_progress }}%</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  items: { type: Array, default: () => [] }, // UpcomingLevelUpItem[]
});
</script>

<style lang="scss" scoped>
.upcoming-upgrades {
  background: linear-gradient(
    106.77deg,
    rgba(255, 223, 119, 0.52) -9.76%,
    rgba(185, 132, 255, 0.52) 44.65%,
    rgba(255, 129, 131, 0.52) 117.82%
  );

  border-radius: 14px;
  padding: 16rpx;
  box-shadow: 0px 4px 4px 0px rgba(189, 50, 50, 0.25);
}

.card-title {
  display: block;
  font-size: 22rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16rpx;
}

// 标题行：标题在左，图例在右（右上角）
.header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

// 进度条图例
.legend {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.legend-item {
  display: flex;
  align-items: center;
  position: relative;
}

.legend-tube-img {
  width: 22rpx;
  height: 22rpx;
  position: absolute;
  top: -4rpx;
  left: -16rpx;
}

.legend-dot {
  width: 64rpx;
  height: 14rpx;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-dot-cyan {
  background: #5edfff;
  box-shadow: 0 0 4rpx rgba(94, 223, 255, 0.6);
}

.legend-dot-pink {
  background: #ff6b84;
  box-shadow: 0 0 4rpx rgba(255, 107, 132, 0.6);
}

.legend-text {
  font-size: 32rpx;
  white-space: nowrap;
  transform: scale(0.3);
  color: rgba(255, 241, 163, 1);
  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
}

.upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.upgrade-row {
  display: flex;
  align-items: center;
  margin-top: 24rpx;
}

.upgrade-thumb {
  width: 56rpx;
  height: 67rpx;
  flex-shrink: 0;
  border-radius: 12rpx;
  // overflow: hidden; // 裁切 image 贴合圆角
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; // 作为 .upgrade-thumb-badge 的定位上下文
  left: 8rpx;
  z-index: 2;
  transform: rotate(-10deg);
  box-shadow: 0px 4px 4px 0px rgba(214, 53, 53, 0.43);
}

// 藏品缩略图：填满 .upgrade-thumb 容器
.upgrade-thumb-img {
  width: 100%;
  height: 100%;
  display: block;
}

// 无图时的 emoji 兜底
.thumb-emoji {
  font-size: 28rpx;
  font-weight: 700;
  color: #ffffff;
}

.upgrade-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  position: relative;
}

.progress-bar {
  position: relative;
  height: 16rpx;
  border-radius: 6rpx;
  background: rgba(217, 217, 217, 0.2);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}

.progress-cyan .progress-fill {
  background: linear-gradient(90deg, #5edfff 0%, #ffc8c8 100%);
}

.progress-pink .progress-fill {
  background: linear-gradient(90deg, #fff375 0%, #ff6b84 100%);
}

.progress-text {
  position: absolute;
  // right: 6rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18rpx;
  font-weight: 400;
  color: rgba(255, 241, 163, 1);
  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
}

.empty-row {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24rpx;
}
</style>