feat(新活动页面): 斋月打榜活动
This commit is contained in:
hzj
parent
0bd94e9353
commit
6cd2eaf7a0
@ -467,5 +467,9 @@
|
|||||||
"confirm_item_exchange": "هل أنت متأكد أنك تريد تبديل العنصر الحالي؟",
|
"confirm_item_exchange": "هل أنت متأكد أنك تريد تبديل العنصر الحالي؟",
|
||||||
"heartbeat_value_points_4_percent": "{amount} (4% من نقاط قيمة نبض القلب) × 2",
|
"heartbeat_value_points_4_percent": "{amount} (4% من نقاط قيمة نبض القلب) × 2",
|
||||||
"heartbeat_value_points_3_percent": "{amount} (3% من نقاط قيمة نبض القلب) × 2",
|
"heartbeat_value_points_3_percent": "{amount} (3% من نقاط قيمة نبض القلب) × 2",
|
||||||
"heartbeat_value_points_2_percent": "{amount} (2% من نقاط قيمة نبض القلب) × 2"
|
"heartbeat_value_points_2_percent": "{amount} (2% من نقاط قيمة نبض القلب) × 2",
|
||||||
|
|
||||||
|
"task_go": "اذهب >",
|
||||||
|
"task_receive": "استلام",
|
||||||
|
"task_received": "تم الاستلام"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -467,5 +467,9 @@
|
|||||||
"confirm_item_exchange": "Are you sure you want to exchange the current item?",
|
"confirm_item_exchange": "Are you sure you want to exchange the current item?",
|
||||||
"heartbeat_value_points_4_percent": "{amount} (4% of Heartbeat Value points) * 2",
|
"heartbeat_value_points_4_percent": "{amount} (4% of Heartbeat Value points) * 2",
|
||||||
"heartbeat_value_points_3_percent": "{amount} (3% of Heartbeat Value points) * 2",
|
"heartbeat_value_points_3_percent": "{amount} (3% of Heartbeat Value points) * 2",
|
||||||
"heartbeat_value_points_2_percent": "{amount} (2% of Heartbeat Value points) * 2"
|
"heartbeat_value_points_2_percent": "{amount} (2% of Heartbeat Value points) * 2",
|
||||||
|
|
||||||
|
"task_go": "Go >",
|
||||||
|
"task_receive": "Receive",
|
||||||
|
"task_received": "Received"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -467,5 +467,9 @@
|
|||||||
"confirm_item_exchange": "您确定要兑换当前物品吗？",
|
"confirm_item_exchange": "您确定要兑换当前物品吗？",
|
||||||
"heartbeat_value_points_4_percent": "{amount} (心跳值点数的4%) * 2;",
|
"heartbeat_value_points_4_percent": "{amount} (心跳值点数的4%) * 2;",
|
||||||
"heartbeat_value_points_3_percent": "{amount} (心跳值点数的3%) * 2;",
|
"heartbeat_value_points_3_percent": "{amount} (心跳值点数的3%) * 2;",
|
||||||
"heartbeat_value_points_2_percent": "{amount} (心跳值点数的2%) * 2;"
|
"heartbeat_value_points_2_percent": "{amount} (心跳值点数的2%) * 2;",
|
||||||
|
|
||||||
|
"task_go": "前往 >",
|
||||||
|
"task_receive": "接收",
|
||||||
|
"task_received": "已接收"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -372,17 +372,23 @@ const router = createRouter({
|
|||||||
|
|
||||||
// 限时活动
|
// 限时活动
|
||||||
{
|
{
|
||||||
path: '/new-year',
|
path: '/lucky-dollars-season3',
|
||||||
name: 'new-year',
|
name: 'lucky-dollars-season3',
|
||||||
component: () => import('../views/Activities/NewYear/index.vue'),
|
component: () => import('../views/Activities/LuckyDollars/Season3/index.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
}, //2026年1月16日上午5点结束
|
}, //2026年2月16日上午5点结束
|
||||||
{
|
{
|
||||||
path: '/jack-pot',
|
path: '/jack-pot',
|
||||||
name: 'jack-pot',
|
name: 'jack-pot',
|
||||||
component: () => import('../views/Activities/JackPot/index.vue'),
|
component: () => import('../views/Activities/JackPot/index.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
}, //2026年1月3日上午5点结束
|
}, //2026年2月16日上午5点结束
|
||||||
|
{
|
||||||
|
path: '/new-year',
|
||||||
|
name: 'new-year',
|
||||||
|
component: () => import('../views/Activities/NewYear/index.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
}, //2026年1月16日上午5点结束
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -58,8 +58,9 @@ const ACTIVITIES = [
|
|||||||
INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
|
INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
|
||||||
'/recharge-reward', //充值奖励
|
'/recharge-reward', //充值奖励
|
||||||
|
|
||||||
'/new-year', //新年抽奖
|
'/lucky-dollars-season3', //水果游戏打榜
|
||||||
'/jack-pot', //水果游戏打榜
|
'/jack-pot', //水果游戏打榜
|
||||||
|
'/new-year', //新年抽奖
|
||||||
]
|
]
|
||||||
|
|
||||||
// 🎯 核心改变：基于身份的权限配置
|
// 🎯 核心改变：基于身份的权限配置
|
||||||
|
|||||||
@ -409,8 +409,9 @@ class RouteGuard {
|
|||||||
'/invitation-to-register', //邀请新用户注册页面
|
'/invitation-to-register', //邀请新用户注册页面
|
||||||
'/recharge-reward', //充值奖励
|
'/recharge-reward', //充值奖励
|
||||||
|
|
||||||
'/new-year', //新年抽奖
|
'/lucky-dollars-season3', //水果游戏打榜
|
||||||
'/jack-pot', //水果游戏打榜
|
'/jack-pot', //水果游戏打榜
|
||||||
|
'/new-year', //新年抽奖
|
||||||
]
|
]
|
||||||
|
|
||||||
const publicPages = [
|
const publicPages = [
|
||||||
|
|||||||
286
src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
Normal file
286
src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
Normal file
@ -0,0 +1,286 @@
|
|||||||
|
<!-- Barrage.vue 优化版 -->
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
|
||||||
|
>
|
||||||
|
<!-- 双行弹幕轨道 -->
|
||||||
|
<div
|
||||||
|
v-for="(track, index) in visibleTracks"
|
||||||
|
:key="index"
|
||||||
|
style="position: absolute; width: 100%; height: 50px"
|
||||||
|
:style="{ top: `calc(${index} * 16vw)` }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="item in track"
|
||||||
|
:key="item.id"
|
||||||
|
class="barrage-item"
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 26px;
|
||||||
|
padding: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
backdrop-filter: blur(1px);
|
||||||
|
"
|
||||||
|
:style="getBarrageStyle(item)"
|
||||||
|
@animationend="handleAnimationEnd(item.id)"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
:src="item.avatar || ''"
|
||||||
|
alt=""
|
||||||
|
style="
|
||||||
|
width: 10vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: block;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
object-fit: cover;
|
||||||
|
"
|
||||||
|
@error="handleAvatarImageError"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
font-weight: 700;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
"
|
||||||
|
:style="{
|
||||||
|
backgroundImage:
|
||||||
|
item.prizeType == 'MONEY'
|
||||||
|
? 'linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
|
||||||
|
: 'linear-gradient(180deg, #A9FFE2 26.92%, #0AEDA1 52.08%, #B5FFE8 73.08%)',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ barrageText(item) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
||||||
|
|
||||||
|
const { locale, t } = useI18n()
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
barrageList: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
|
||||||
|
speed: {
|
||||||
|
type: Number,
|
||||||
|
default: 80, // 基础速度系数
|
||||||
|
},
|
||||||
|
|
||||||
|
maxItems: {
|
||||||
|
type: Number,
|
||||||
|
default: 4, // 每行最大弹幕数
|
||||||
|
},
|
||||||
|
|
||||||
|
loopInterval: {
|
||||||
|
type: Number,
|
||||||
|
default: 2000, // 弹幕生成间隔(ms)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const tracks = ref([[], []]) // 弹幕轨道数据
|
||||||
|
const idCounter = ref(0) // 弹幕ID计数器
|
||||||
|
const currentIndex = ref(0) // 用于取下一项弹幕的索引
|
||||||
|
|
||||||
|
// 计算实际显示的轨道（过滤空轨道）
|
||||||
|
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
|
||||||
|
|
||||||
|
// 显示的文本
|
||||||
|
const barrageText = (item) => {
|
||||||
|
const params = { nickname: item.nickname, prizeName: item.prizeName }
|
||||||
|
return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
|
||||||
|
? t('barrage_won_prize', params)
|
||||||
|
: t('barrage_won_the_prize', params)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取弹幕样式
|
||||||
|
const getBarrageStyle = (item) => {
|
||||||
|
const isRTL = locale.value === 'ar'
|
||||||
|
|
||||||
|
return {
|
||||||
|
animationDuration: `${item.duration}s`,
|
||||||
|
animationDelay: `${item.delay}s`,
|
||||||
|
'--start-pos': `${item.startPos}px`,
|
||||||
|
border: item.prizeType == 'MONEY' ? '0.667px solid #77FFCF' : '0.667px solid #FFF677',
|
||||||
|
background:
|
||||||
|
item.prizeType == 'MONEY'
|
||||||
|
? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)'
|
||||||
|
: 'linear-gradient(270deg, rgba(2, 218, 164, 0.60) -16.85%, rgba(0, 124, 83, 0.60) 82.7%)',
|
||||||
|
// RTL布局支持
|
||||||
|
...(isRTL
|
||||||
|
? {
|
||||||
|
right: '0',
|
||||||
|
left: 'auto',
|
||||||
|
transform: 'translateX(-100vw)',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
left: '0',
|
||||||
|
right: 'auto',
|
||||||
|
transform: 'translateX(100vw)',
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成随机弹幕属性
|
||||||
|
const generateBarrageProps = (item) => {
|
||||||
|
const textLength = barrageText(item).length
|
||||||
|
return {
|
||||||
|
duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间（每字符减少0.2秒，持续时间不低于5秒）
|
||||||
|
startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置（得到-10到10之间的随机整数，避免所有弹幕都从完全相同的起点开始移动）
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加弹幕到轨道
|
||||||
|
const addToTrack = (item) => {
|
||||||
|
// 寻找最短的轨道的下标值
|
||||||
|
const trackIndex = tracks.value.reduce(
|
||||||
|
(minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
|
||||||
|
0,
|
||||||
|
)
|
||||||
|
|
||||||
|
if (tracks.value[trackIndex].length < props.maxItems) {
|
||||||
|
tracks.value[trackIndex].push({
|
||||||
|
...item,
|
||||||
|
id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
|
||||||
|
delay: Math.random() * 4, // 随机延迟（0-4秒）
|
||||||
|
...generateBarrageProps(item),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清理完成动画的弹幕（根据动画结束状态遍历）
|
||||||
|
const cleanCompleted = () => {
|
||||||
|
tracks.value.forEach((track) => {
|
||||||
|
for (let i = track.length - 1; i >= 0; i--) {
|
||||||
|
if (track[i].completed) {
|
||||||
|
track.splice(i, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置弹幕动画结束状态
|
||||||
|
const handleAnimationEnd = (id) => {
|
||||||
|
tracks.value.forEach((track) => {
|
||||||
|
const item = track.find((item) => item.id === id)
|
||||||
|
if (item) item.completed = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取下一项弹幕（循环逻辑）
|
||||||
|
const getNextBarrage = () => {
|
||||||
|
if (props.barrageList.length === 0) return null
|
||||||
|
|
||||||
|
const item = props.barrageList[currentIndex.value] // 取得下一项弹幕项
|
||||||
|
currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //索引达到最大时则重置为0
|
||||||
|
|
||||||
|
return { ...item } // 返回副本避免污染原始数据
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹幕循环逻辑
|
||||||
|
let barrageInterval = null
|
||||||
|
|
||||||
|
// 根据设置的时间间隔自动获取下一项弹幕
|
||||||
|
const startBarrage = () => {
|
||||||
|
barrageInterval = setInterval(() => {
|
||||||
|
cleanCompleted() // 清理完成动画的弹幕
|
||||||
|
|
||||||
|
const nextBarrage = getNextBarrage() // 获取下一项弹幕
|
||||||
|
if (nextBarrage) {
|
||||||
|
addToTrack(nextBarrage) // 添加弹幕到轨道
|
||||||
|
}
|
||||||
|
}, props.loopInterval)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
startBarrage() // 开启弹幕循环
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearInterval(barrageInterval) // 清空弹幕
|
||||||
|
})
|
||||||
|
|
||||||
|
// 监听数据源变化
|
||||||
|
watch(
|
||||||
|
() => props.barrageList,
|
||||||
|
(newList) => {
|
||||||
|
currentIndex.value = 0 // 重置索引，确保重新开始循环
|
||||||
|
clearInterval(barrageInterval) // 清空弹幕
|
||||||
|
|
||||||
|
// 如果列表为空，停止生成新弹幕
|
||||||
|
if (newList.length !== 0) {
|
||||||
|
startBarrage() // 重启弹幕循环
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 样式保持不变（同之前版本） */
|
||||||
|
.barrage-item {
|
||||||
|
will-change: transform;
|
||||||
|
animation: moveLeft linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes moveLeft {
|
||||||
|
0% {
|
||||||
|
transform: translateX(100vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* RTL支持 - 镜像弹幕动画 */
|
||||||
|
[dir='rtl'] .barrage-item {
|
||||||
|
animation: moveRight linear forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes moveRight {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 360px) {
|
||||||
|
* {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
* {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
* {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
300
src/views/Activities/LuckyDollars/Season3/components/topUser.vue
Normal file
300
src/views/Activities/LuckyDollars/Season3/components/topUser.vue
Normal file
@ -0,0 +1,300 @@
|
|||||||
|
<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: avatarContainerHeight }"
|
||||||
|
>
|
||||||
|
<div :style="{ width: avatarWidth }">
|
||||||
|
<img
|
||||||
|
v-smart-img
|
||||||
|
:src="avatarUrl || ''"
|
||||||
|
alt=""
|
||||||
|
width="100%"
|
||||||
|
style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||||
|
@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;
|
||||||
|
gap: 1vw;
|
||||||
|
"
|
||||||
|
:style="{ height: bottomSectionHeight }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="display: flex; justify-content: center; align-items: center"
|
||||||
|
:style="{
|
||||||
|
width: nameValueWidth,
|
||||||
|
height: nameValueHeight,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<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: distributionValueWidth,
|
||||||
|
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: coinWidth }"
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
import { handleAvatarImageError } from '@/utils/imageHandler.js'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
ranking: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
avatarUrl: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
BorderImgUrl: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
distributionValue: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 是否为第一名
|
||||||
|
const isTopOne = computed(() => {
|
||||||
|
return props.ranking === '1'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 头像容器高度
|
||||||
|
const avatarContainerHeight = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '65%'
|
||||||
|
case '2':
|
||||||
|
return '65%'
|
||||||
|
case '3':
|
||||||
|
return '65%'
|
||||||
|
default:
|
||||||
|
return '65%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 头像宽度
|
||||||
|
const avatarWidth = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '50%'
|
||||||
|
case '2':
|
||||||
|
return '50%'
|
||||||
|
case '3':
|
||||||
|
return '50%'
|
||||||
|
default:
|
||||||
|
return '50%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 底部信息区域高度
|
||||||
|
const bottomSectionHeight = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '37%'
|
||||||
|
case '2':
|
||||||
|
return '36%'
|
||||||
|
case '3':
|
||||||
|
return '39%'
|
||||||
|
default:
|
||||||
|
return '37%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 名称宽度
|
||||||
|
const nameValueWidth = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '60%'
|
||||||
|
case '2':
|
||||||
|
return '60%'
|
||||||
|
case '3':
|
||||||
|
return '60%'
|
||||||
|
default:
|
||||||
|
return '60%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 名称高度
|
||||||
|
const nameValueHeight = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '25%'
|
||||||
|
case '2':
|
||||||
|
return '25%'
|
||||||
|
case '3':
|
||||||
|
return '25%'
|
||||||
|
default:
|
||||||
|
return '25%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 贡献值宽度
|
||||||
|
const distributionValueWidth = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '50%'
|
||||||
|
case '2':
|
||||||
|
return '50%'
|
||||||
|
case '3':
|
||||||
|
return '50%'
|
||||||
|
default:
|
||||||
|
return '50%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 贡献值宽度
|
||||||
|
const distributionValueHeight = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '35%'
|
||||||
|
case '2':
|
||||||
|
return '20%'
|
||||||
|
case '3':
|
||||||
|
return '20%'
|
||||||
|
default:
|
||||||
|
return '20%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 金币图标宽度
|
||||||
|
const coinWidth = computed(() => {
|
||||||
|
switch (props.ranking) {
|
||||||
|
case '1':
|
||||||
|
return '1em'
|
||||||
|
case '2':
|
||||||
|
return '0.9em'
|
||||||
|
case '3':
|
||||||
|
return '0.9em'
|
||||||
|
default:
|
||||||
|
return '0.9em'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</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.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>
|
||||||
2781
src/views/Activities/LuckyDollars/Season3/index.vue
Normal file
2781
src/views/Activities/LuckyDollars/Season3/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user