aslan-h5/src/views/Ranking/Overall/components/topUser.vue

<!-- src/views/Ranking/Overall/components/topUser.vue -->
<template>
  <div style="width: 100%">
    <div style="position: relative" :style="{ minHeight: minHeight }">
      <img
        v-smart-img
        :src="BorderImgUrl"
        :key="BorderImgUrl"
        alt=""
        width="100%"
        style="display: block; position: relative; z-index: 2"
      />
      <!-- 头像 -->
      <div
        style="
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        :style="avatarBoxHeight"
      >
        <div style="width: 70%">
          <img
            :src="avatarUrl || ''"
            alt=""
            width="100%"
            style="display: block; aspect-ratio: 1/1; object-fit: cover"
            :style="{ borderRadius: Type == 'Room' ? '0' : '50%' }"
            @error="handleAvatarImageError"
          />
        </div>
      </div>

      <!-- 用户名和贡献值 -->
      <div
        style="
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 3;

          display: flex;
          flex-direction: column;
          align-items: center;
        "
        :style="InfoBoxHeight"
      >
        <div
          style="
            height: 28%;
            width: 60%;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
            {{ name }}
          </div>
        </div>
        <div style="width: 60%; position: relative">
          <img v-smart-img :src="coinNumBgUrl" alt="" width="100%" style="display: block" />
          <div
            v-if="distributionValue"
            style="
              position: absolute;
              inset: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 3% 5%;
            "
          >
            <img
              v-smart-img
              src="/src/assets/icon/Azizi/coin.png"
              alt=""
              style="display: block; width: 1.3em"
            />
            <div
              style="
                font-weight: 700;
                background: linear-gradient(180deg, #ffe656 0%, #fff 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              "
              class="showText"
              :class="isTopOne ? 'top1Text' : 'text'"
            >
              {{ distributionValue }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { getPngUrl } from '@/config/imagePaths.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'

// 获取OSS图片URL的函数
const coinNumBgUrl = getPngUrl('Ranking/Overall/', 'coinNumBg')

const props = defineProps({
  Type: {
    type: Boolean,
    default: '',
  },

  isTopOne: {
    type: Boolean,
    default: false,
  },

  avatarUrl: {
    type: String,
    default: '/src/assets/icon/Azizi/defaultAvatar.png',
  },

  BorderImgUrl: {
    type: String,
    required: true,
  },

  name: {
    type: String,
    default: '',
  },

  distributionValue: {
    type: String,
    default: '',
  },
})

watch(
  () => props.Type,
  (newVal, oldVal) => {
    console.log('Type 变化 =>', '新值:', newVal, '旧值:', oldVal)
  },
)

// 盒子最小高度
const minHeight = computed(() => {
  if (props.Type == 'Wealth') {
    if (props.isTopOne) {
      return `64.11vw`
    } else {
      return `50.20vw`
    }
  } else if (props.Type == 'Charm') {
    if (props.isTopOne) {
      return `64.11vw`
    } else {
      return `50.20vw`
    }
  } else if (props.Type == 'Room') {
    if (props.isTopOne) {
      return `67.19vw`
    } else {
      return `49.68vw`
    }
  }
})

// 头像盒子高度
const avatarBoxHeight = computed(() => {
  if (props.Type == 'Wealth') {
    if (props.isTopOne) {
      return `height:60%`
    } else {
      return `height:60%`
    }
  } else if (props.Type == 'Charm') {
    if (props.isTopOne) {
      return `height:55%`
    } else {
      return `height:60%`
    }
  } else if (props.Type == 'Room') {
    if (props.isTopOne) {
      return `height:50%`
    } else {
      return `height:55%`
    }
  }
})

// 信息盒子高度
const InfoBoxHeight = computed(() => {
  if (props.Type == 'Wealth') {
    if (props.isTopOne) {
      return `height:40%`
    } else {
      return `height:40%`
    }
  } else if (props.Type == 'Charm') {
    if (props.isTopOne) {
      return `height:42%`
    } else {
      return `height:41%`
    }
  } else if (props.Type == 'Room') {
    if (props.isTopOne) {
      return `height:45%`
    } else {
      return `height:42%`
    }
  }
})
</script>

<style lang="scss" scoped>
* {
  color: black;
}

.showText {
  color: #fff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top1Text {
  font-size: 0.9em;
}

.text {
  font-size: 0.8em;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>