197 lines
4.1 KiB
Vue
197 lines
4.1 KiB
Vue
<template>
|
|
<div style="width: 100%">
|
|
<div style="position: relative">
|
|
<img
|
|
v-smart-img
|
|
:src="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="{ height: isTopOne ? '57%' : '48%' }"
|
|
>
|
|
<div :style="{ width: isTopOne ? '40%' : '48%' }">
|
|
<img
|
|
v-smart-img
|
|
:src="avatarUrl || ''"
|
|
alt=""
|
|
width="100%"
|
|
style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
|
@error="defaultAvatarUrl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户名和贡献值 -->
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
"
|
|
:style="{ height: ranking == '1' ? '39%' : ranking == '2' ? '46%' : '46%' }"
|
|
>
|
|
<div
|
|
style="
|
|
height: 30%;
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
|
{{ name }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
border-radius: 40px;
|
|
box-shadow: 0 0 2.558px 0 rgba(0, 0, 0, 0.4) inset;
|
|
border: 0.64px solid #ffdf36;
|
|
padding: 1px 2px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
:style="{
|
|
width: ranking == '1' ? `55%` : ranking == '2' ? `55%` : `55%`,
|
|
background:
|
|
ranking == '1'
|
|
? `linear-gradient(270deg, #AD1300 0%, #FE280C 50%, #AD1300 100%)`
|
|
: ranking == '2'
|
|
? `linear-gradient(270deg, #A3FDF9 0%, #1D7BBD 50%, #A3FDF9 100%)`
|
|
: `linear-gradient(270deg, #F5EAE4 0%, #F9C29E 50%, #F5EAE4 100%)`,
|
|
}"
|
|
>
|
|
<img
|
|
v-smart-img
|
|
src="/src/assets/icon/coin.png"
|
|
alt=""
|
|
style="display: block"
|
|
:style="{ width: isTopOne ? '20%' : '20%' }"
|
|
/>
|
|
<div
|
|
style="font-weight: 590"
|
|
class="showText"
|
|
:class="isTopOne ? 'top1Text' : 'text'"
|
|
:style="{
|
|
color: ranking == '1' ? `#FFE601` : '#FFF',
|
|
}"
|
|
>
|
|
{{ distributionValue }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
isTopOne: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
|
|
avatarUrl: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
BorderImgUrl: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
name: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
distributionValue: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
ranking: {
|
|
type: String,
|
|
default: '1',
|
|
},
|
|
})
|
|
|
|
import defaultAvatar from '@/assets/images/WeeklyStar/defaultAvatar.png'
|
|
|
|
const defaultAvatarUrl = (e) => {
|
|
console.log('头像资源出错')
|
|
e.target.onerror = null //防止循环
|
|
e.target.src = defaultAvatar
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
font-family: 'SF Pro';
|
|
color: black;
|
|
}
|
|
|
|
.showText {
|
|
color: #fff;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.top1Text {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.text {
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
* {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|