chore(总排行榜): 样式图源调整
This commit is contained in:
hzj
parent
ebe371de38
commit
4507fb25b1
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
<!-- src/views/Ranking/Overall/components/topUser.vue -->
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<div style="position: relative" :style="{ minHeight: minHeight }">
|
||||
<div style="position: relative" :style="{ minHeight: currentLayout.minHeight }">
|
||||
<img
|
||||
v-smart-img
|
||||
:src="BorderImgUrl"
|
||||
@ -10,11 +10,10 @@
|
||||
width="100%"
|
||||
style="display: block; position: relative; z-index: 2"
|
||||
/>
|
||||
<!-- 头像 -->
|
||||
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
@ -22,80 +21,93 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="avatarBoxHeight"
|
||||
:style="currentLayout.avatarBox"
|
||||
>
|
||||
<div style="width: 70%">
|
||||
<div :style="currentLayout.avatarImage">
|
||||
<img
|
||||
:src="avatarUrl || ''"
|
||||
alt=""
|
||||
width="100%"
|
||||
style="display: block; aspect-ratio: 1/1; object-fit: cover"
|
||||
:style="{ borderRadius: Type == 'Room' ? '0' : '50%' }"
|
||||
:style="{ borderRadius: avatarBorderRadius }"
|
||||
@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"
|
||||
>
|
||||
<template v-if="isFirst">
|
||||
<div
|
||||
style="
|
||||
height: 28%;
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translateX(-50%);
|
||||
"
|
||||
:style="currentLayout.name"
|
||||
>
|
||||
<div style="font-weight: 860" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
|
||||
<div style="font-weight: 860" class="showText top1Text">
|
||||
{{ 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
|
||||
v-if="displayValue"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.2em;
|
||||
transform: translateX(-50%);
|
||||
"
|
||||
:style="currentLayout.value"
|
||||
>
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/Azizi/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 1.1em; flex-shrink: 0"
|
||||
/>
|
||||
<div style="font-weight: 700; color: white" class="showText top1ValueText">
|
||||
{{ displayValue }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-else
|
||||
style="
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.35em;
|
||||
"
|
||||
:style="currentLayout.info"
|
||||
>
|
||||
<div style="display: flex; justify-content: center; align-items: center; min-width: 0">
|
||||
<div style="font-weight: 860" class="showText text">
|
||||
{{ name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
v-smart-img
|
||||
src="/src/assets/icon/Azizi/coin.png"
|
||||
alt=""
|
||||
style="display: block; width: 0.95em; flex-shrink: 0"
|
||||
/>
|
||||
<div style="font-weight: 700; color: white" class="showText valueText">
|
||||
{{ displayValue }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -104,119 +116,132 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue'
|
||||
import { getPngUrl } from '@/config/imagePaths.js'
|
||||
import { computed } from 'vue'
|
||||
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
|
||||
|
||||
// 获取OSS图片URL的函数
|
||||
const coinNumBgUrl = getPngUrl('Ranking/Overall/', 'coinNumBg')
|
||||
const TOP_USER_LAYOUTS = {
|
||||
Wealth: {
|
||||
1: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '36%' },
|
||||
name: { bottom: '16%', width: '38%', maxWidth: '38%', height: '7.2%' },
|
||||
value: { bottom: '2%', width: '34%', maxWidth: '34%', height: '10%' },
|
||||
},
|
||||
2: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '42%' },
|
||||
info: { bottom: '0', height: '17%', width: '60%' },
|
||||
},
|
||||
3: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '42%' },
|
||||
info: { bottom: '0', height: '17%', width: '60%' },
|
||||
},
|
||||
},
|
||||
Charm: {
|
||||
1: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '110%' },
|
||||
avatarImage: { width: '36%' },
|
||||
name: { bottom: '14%', width: '30%', height: '7.2%' },
|
||||
value: { bottom: '2%', width: '34%', height: '10%' },
|
||||
},
|
||||
2: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '42%' },
|
||||
info: { bottom: '0', height: '17%', width: '60%' },
|
||||
},
|
||||
3: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '42%' },
|
||||
info: { bottom: '0', height: '17%', width: '60%' },
|
||||
},
|
||||
},
|
||||
Room: {
|
||||
1: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '100%' },
|
||||
avatarImage: { width: '27%' },
|
||||
name: { bottom: '24%', width: '30%', height: '7.2%' },
|
||||
value: { bottom: '3%', width: '34%', height: '10%' },
|
||||
},
|
||||
2: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '42%' },
|
||||
info: { bottom: '0', height: '17%', width: '60%' },
|
||||
},
|
||||
3: {
|
||||
minHeight: '0vw',
|
||||
avatarBox: { top: '0', height: '90%' },
|
||||
avatarImage: { width: '42%' },
|
||||
info: { bottom: '0', height: '17%', width: '60%' },
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
Type: {
|
||||
type: Boolean,
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
rank: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
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 currentType = computed(() => {
|
||||
return TOP_USER_LAYOUTS[props.Type] ? props.Type : 'Wealth'
|
||||
})
|
||||
|
||||
// 头像盒子高度
|
||||
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 currentRank = computed(() => {
|
||||
if (props.isTopOne) {
|
||||
return 1
|
||||
}
|
||||
|
||||
return props.rank === 3 ? 3 : 2
|
||||
})
|
||||
|
||||
// 信息盒子高度
|
||||
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%`
|
||||
}
|
||||
}
|
||||
const isFirst = computed(() => {
|
||||
return currentRank.value === 1
|
||||
})
|
||||
|
||||
const currentLayout = computed(() => {
|
||||
return TOP_USER_LAYOUTS[currentType.value][currentRank.value]
|
||||
})
|
||||
|
||||
const avatarBorderRadius = computed(() => {
|
||||
return props.Type === 'Room' ? '0' : '50%'
|
||||
})
|
||||
|
||||
const displayValue = computed(() => {
|
||||
return props.distributionValue || '0'
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -234,11 +259,19 @@ const InfoBoxHeight = computed(() => {
|
||||
}
|
||||
|
||||
.top1Text {
|
||||
font-size: 0.9em;
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
.top1ValueText {
|
||||
font-size: 0.72em;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.74em;
|
||||
}
|
||||
|
||||
.valueText {
|
||||
font-size: 0.68em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user