feat(新活动): 新年活动
This commit is contained in:
hzj
parent
5a73024ca0
commit
d11798266d
@ -33,3 +33,189 @@ export const withdrawApply = async (data) => {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取排行榜
|
||||
export const ranklist = async (activityId) => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/recharge-rank?activityId=${activityId}`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get rank list:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取有效活动
|
||||
export const validActivity = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/valid-activity`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get valid activity:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取活动详情
|
||||
export const activityDetail = async (activityCode) => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/detail/${activityCode}`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get activity detail:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取充值记录
|
||||
export const myRecharge = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/my-recharge`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get my recharge:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取活动奖励配置列表.
|
||||
export const activityRewardConfigs = async (activityType) => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/reward-configs?activityType=${activityType}`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get activity reward:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取剩余中奖券
|
||||
export const myTickets = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/my-ticket-count`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get my tickets:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取我的总抽奖次数
|
||||
export const myTotalDrawCount = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/my-total-draw-count`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get my total draw count:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 执行单次抽奖
|
||||
export const onceDraw = async (data) => {
|
||||
try {
|
||||
const response = await post('/activity/lottery/draw', data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch once draw:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 执行连抽
|
||||
export const multiDraw = async (data) => {
|
||||
try {
|
||||
const response = await post('/activity/lottery/multi-draw', data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch multiply draw:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取我的中奖记录(默认最新100条)
|
||||
export const drawRecords = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/my-records?pageSize=100`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get draw records:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取历史中奖用户
|
||||
export const winnerHistory = async () => {
|
||||
try {
|
||||
const response = await get(`/activity/lottery/winner-history`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get winners:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 获取任务列表
|
||||
export const ActTaskList = async () => {
|
||||
try {
|
||||
const response = await get(`/spins/task/list`)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch get tickets:', error)
|
||||
console.error('error:' + error.response.errorMsg)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 领取任务奖励
|
||||
export const receiveTickets = async (data) => {
|
||||
try {
|
||||
const response = await post('/spins/task/receive/reward', data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch receive tickets:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 领取充值奖励
|
||||
export const receiveRechargeReward = async (data) => {
|
||||
try {
|
||||
const response = await post('/activity/lottery/claim-reward', data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch receive rewards:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 可提现金额转账给指定用户
|
||||
export const transferActivityDollar = async (data) => {
|
||||
try {
|
||||
const response = await post('/activity/lottery/transfer', data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch transfer activity dollar:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 可提现金额兑换金币
|
||||
export const exchangeCoin = async (data) => {
|
||||
try {
|
||||
const response = await post('/activity/lottery/exchange', data)
|
||||
return response
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch exchange coin:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,3 +8,7 @@ export const OSS_BASE_URL =
|
||||
export const getPngUrl = (imagePath, filename) => {
|
||||
return `${OSS_BASE_URL}${imagePath}${filename}.png`
|
||||
}
|
||||
|
||||
export const getWebpUrl = (imagePath, filename) => {
|
||||
return `${OSS_BASE_URL}${imagePath}${filename}.webp`
|
||||
}
|
||||
|
||||
@ -242,15 +242,13 @@
|
||||
"approved": "موافق عليه",
|
||||
|
||||
"lucky_dollar": "دولار محظوظ",
|
||||
"ranking": "الترتيب",
|
||||
"lottery": "سحب القرعة",
|
||||
"history": "التاريخ",
|
||||
"current_earnings": "الأرباح الحالية: {amount}",
|
||||
"transfer_to_recharge_agent": "تحويل الأموال إلى وكيل الشحن",
|
||||
"select": "اختيار",
|
||||
"go_to_withdraw": "اذهب للسحب",
|
||||
"ticket": "تذكرة اليانصيب",
|
||||
"current_raffle_tickets": "تذاكر اليانصيب الحالية: {count}",
|
||||
"current_tickets": "تذاكر الطيران الحالية: {count}",
|
||||
"task_for_tickets": "احصل على تذاكر اليانصيب من خلال المهام",
|
||||
"minutes_short": "دقيقة",
|
||||
"hours_short": "ساعة",
|
||||
@ -417,5 +415,10 @@
|
||||
"vip": "VIP",
|
||||
|
||||
"bd_policy": "سياسة BD",
|
||||
"bd_leader_policy": "سياسة قائد BD"
|
||||
"bd_leader_policy": "سياسة قائد BD",
|
||||
|
||||
"recharge_reward": "مكافأة إعادة الشحن",
|
||||
"ranking": "الترتيب",
|
||||
"lottery": "القرعة",
|
||||
"withdraw": "سحب"
|
||||
}
|
||||
|
||||
@ -242,15 +242,13 @@
|
||||
"approved": "Approved",
|
||||
|
||||
"lucky_dollar": "Lucky Dollar",
|
||||
"ranking": "Ranking",
|
||||
"lottery": "Lottery",
|
||||
"history": "history",
|
||||
"current_earnings": "Current earnings: {amount}",
|
||||
"transfer_to_recharge_agent": "Transfer to recharge agent",
|
||||
"select": "Select",
|
||||
"go_to_withdraw": "Go to withdraw",
|
||||
"ticket": "Ticket",
|
||||
"current_raffle_tickets": "Current raffle tickets: {count}",
|
||||
"current_tickets": "Current ticket: {count}",
|
||||
"task_for_tickets": "Task for tickets",
|
||||
"minutes_short": "mins",
|
||||
"hours_short": "hours",
|
||||
@ -417,5 +415,10 @@
|
||||
"vip": "VIP",
|
||||
|
||||
"bd_policy": "BD Policy",
|
||||
"bd_leader_policy": "BD Leader Policy"
|
||||
"bd_leader_policy": "BD Leader Policy",
|
||||
|
||||
"recharge_reward": "Recharge Reward",
|
||||
"ranking": "Ranking",
|
||||
"lottery": "Lottery",
|
||||
"withdraw": "Withdraw"
|
||||
}
|
||||
|
||||
@ -242,15 +242,13 @@
|
||||
"approved": "已批准",
|
||||
|
||||
"lucky_dollar": "幸运美元",
|
||||
"ranking": "排行",
|
||||
"lottery": "抽奖",
|
||||
"history": "历史",
|
||||
"current_earnings": "当前收益：{amount}",
|
||||
"transfer_to_recharge_agent": "转账至充值代理",
|
||||
"select": "选择",
|
||||
"go_to_withdraw": "去提现",
|
||||
"ticket": "抽奖券",
|
||||
"current_raffle_tickets": "当前抽奖券：{count}",
|
||||
"current_tickets": "当前抽奖券：{count}",
|
||||
"task_for_tickets": "通过任务获取抽奖券",
|
||||
"minutes_short": "分钟",
|
||||
"hours_short": "小时",
|
||||
@ -417,5 +415,10 @@
|
||||
"vip": "VIP",
|
||||
|
||||
"bd_policy": "BD政策",
|
||||
"bd_leader_policy": "BD主管政策"
|
||||
"bd_leader_policy": "BD主管政策",
|
||||
|
||||
"recharge_reward": "充值奖励",
|
||||
"ranking": "排行榜",
|
||||
"lottery": "抽奖",
|
||||
"withdraw": "提现"
|
||||
}
|
||||
|
||||
@ -365,6 +365,12 @@ const router = createRouter({
|
||||
},
|
||||
|
||||
// 限时活动
|
||||
{
|
||||
path: '/new-year',
|
||||
name: 'new-year',
|
||||
component: () => import('../views/Activities/NewYear/index.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
}, //2026年1月16日上午5点结束
|
||||
{
|
||||
path: '/jack-pot',
|
||||
name: 'jack-pot',
|
||||
|
||||
@ -55,10 +55,11 @@ const RANKING_PAGES = [
|
||||
// 活动页面
|
||||
const ACTIVITIES = [
|
||||
INVITATION_PAGES.INVITE_USER, //邀请新用户（邀请码）
|
||||
'/recharge-reward', //充值奖励页面
|
||||
'/recharge-reward', //充值奖励
|
||||
|
||||
'/new-year', //新年抽奖
|
||||
'/jack-pot', //水果游戏打榜
|
||||
'/merry-christmas', //圣诞节
|
||||
'/jack-pot', //水果游戏打榜页面
|
||||
'/lucky-champion', //幸运赢家
|
||||
]
|
||||
|
||||
|
||||
@ -406,10 +406,11 @@ class RouteGuard {
|
||||
// 活动页面
|
||||
const ACTIVITIES = [
|
||||
'/invitation-to-register', //邀请新用户注册页面
|
||||
'/recharge-reward', //充值奖励页面
|
||||
'/recharge-reward', //充值奖励
|
||||
|
||||
'/new-year', //新年抽奖
|
||||
'/jack-pot', //水果游戏打榜
|
||||
'/merry-christmas', //圣诞节
|
||||
'/jack-pot', //水果游戏打榜页面
|
||||
'/lucky-champion', //幸运赢家
|
||||
]
|
||||
|
||||
|
||||
291
src/views/Activities/NewYear/components/Barrage.vue
Normal file
291
src/views/Activities/NewYear/components/Barrage.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<!-- 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: 48px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
:style="getBarrageStyle(item)"
|
||||
@animationend="handleAnimationEnd(item.id)"
|
||||
>
|
||||
<img
|
||||
:src="item.avatar"
|
||||
alt=""
|
||||
@error="defaultAvatarUrl"
|
||||
style="
|
||||
width: 10vw;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
font-weight: 700;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
item.type != ''
|
||||
? '-webkit-linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
|
||||
: '-webkit-linear-gradient(180deg, #A9FFA9 26.92%, #0AED47 52.08%, #B5FFC5 73.08%)',
|
||||
}"
|
||||
>
|
||||
{{ barrageText(item) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { locale } = useI18n()
|
||||
|
||||
const props = defineProps({
|
||||
barrageList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 80, // 基础速度系数
|
||||
},
|
||||
|
||||
maxItems: {
|
||||
type: Number,
|
||||
default: 6, // 每行最大弹幕数
|
||||
},
|
||||
|
||||
loopInterval: {
|
||||
type: Number,
|
||||
default: 2000, // 弹幕生成间隔(ms)
|
||||
},
|
||||
})
|
||||
|
||||
// 弹幕轨道数据
|
||||
const tracks = ref([[], []])
|
||||
// 弹幕ID计数器
|
||||
const idCounter = ref(0)
|
||||
// 当前播放索引（用于循环）
|
||||
const currentIndex = ref(0)
|
||||
|
||||
// 计算实际显示的轨道（过滤空轨道）
|
||||
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
|
||||
|
||||
// 显示的文本
|
||||
const barrageText = (item) => {
|
||||
return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
|
||||
? `${item.nickname} won ${item.prizeName}`
|
||||
: `${item.nickname} won the ${item.prizeName}`
|
||||
}
|
||||
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.onerror = null //防止循环
|
||||
e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
|
||||
}
|
||||
|
||||
// 获取弹幕样式
|
||||
const getBarrageStyle = (item) => {
|
||||
const isRTL = locale.value === 'ar'
|
||||
|
||||
return {
|
||||
animationDuration: `${item.duration}s`,
|
||||
animationDelay: `${item.delay}s`,
|
||||
'--start-pos': `${item.startPos}px`,
|
||||
border: item.type != '' ? '0.667px solid #FFF677' : '0.667px solid #77FF87',
|
||||
background:
|
||||
item.type != ''
|
||||
? '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, 60, 0.60) -16.85%, rgba(0, 124, 54, 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),
|
||||
startPos: Math.floor(Math.random() * 21) - 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
|
||||
|
||||
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
|
||||
|
||||
// 如果列表为空，停止生成新弹幕
|
||||
if (newList.length === 0) {
|
||||
clearInterval(barrageInterval)
|
||||
} else {
|
||||
// 重启弹幕循环
|
||||
clearInterval(barrageInterval)
|
||||
startBarrage()
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
font-family: 'SF Pro Text';
|
||||
}
|
||||
|
||||
/* 样式保持不变（同之前版本） */
|
||||
.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: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
293
src/views/Activities/NewYear/components/topUser.vue
Normal file
293
src/views/Activities/NewYear/components/topUser.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<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: 2px;
|
||||
"
|
||||
: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="
|
||||
padding: 1px 2px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
:style="{
|
||||
width: distributionValueWidth,
|
||||
height: distributionValueHeight,
|
||||
}"
|
||||
>
|
||||
<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 '70%'
|
||||
case '2':
|
||||
return '60%'
|
||||
case '3':
|
||||
return '60%'
|
||||
default:
|
||||
return '60%'
|
||||
}
|
||||
})
|
||||
|
||||
// 头像宽度
|
||||
const avatarWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '43%'
|
||||
case '2':
|
||||
return '77%'
|
||||
case '3':
|
||||
return '77%'
|
||||
default:
|
||||
return '77%'
|
||||
}
|
||||
})
|
||||
|
||||
// 底部信息区域高度
|
||||
const bottomSectionHeight = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '35%'
|
||||
case '2':
|
||||
return '39%'
|
||||
case '3':
|
||||
return '40%'
|
||||
default:
|
||||
return '39%'
|
||||
}
|
||||
})
|
||||
|
||||
// 名称宽度
|
||||
const nameValueWidth = computed(() => {
|
||||
switch (props.ranking) {
|
||||
case '1':
|
||||
return '30%'
|
||||
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 '25%'
|
||||
case '2':
|
||||
return '40%'
|
||||
case '3':
|
||||
return '40%'
|
||||
default:
|
||||
return '40%'
|
||||
}
|
||||
})
|
||||
|
||||
// 贡献值宽度
|
||||
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>
|
||||
* {
|
||||
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>
|
||||
2695
src/views/Activities/NewYear/index.vue
Normal file
2695
src/views/Activities/NewYear/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user