@@ -64,25 +64,25 @@
< h2 class = "game-subtitle" > 👥 战区排名 < / h2 >
< div class = "rank-table" >
< div class = "table-header" : style = "{ 'grid-template-columns': teamGridTemplate }" >
< span class = "rank-col" > 排名 < / span >
< span class = "name-col" > 战区名称 < / span >
< span class = "score-col" > { { localDisplayConfig . team ? . totalScoreColumn ? . displayName || '业绩' } } < / span >
< span v-if = "localDisplayConfig.team?.showMemberCount" class="member-col" > 人数 < / span >
< span v-if = "localDisplayConfig.team?.showLeader" class="leader-col" > 队长 < / span >
< span v-if = "localDisplayConfig.team?.showBonus" class="bonus-col" > 奖金 < / span >
< span class = "rank-col" : style = "{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }" > 排名 < / span >
< span class = "name-col" : style = "{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }" > 战区名称 < / span >
< span class = "score-col" : style = "{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }" > { { localDisplayConfig . team ? . totalScoreColumn ? . displayName || '业绩' } } < / span >
< span v-if = "localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }" > 人数 < / span >
< span v-if = "localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }" > 队长 < / span >
< span v-if = "localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }" > 奖金 < / span >
< / div >
< div v-for = "(item, index) in teamRankings" :key="item.id" class="table-row"
: style = "{ 'grid-template-columns': teamGridTemplate }" : class = "{
'top-three': index < 3,
'highlight': index === 0
}" >
< span class = "rank-col" > { { index + 1 } } < / span >
< span class = "name-col" > { { item . name } } < / span >
< span class = "score-col" > { { localDisplayConfig . team ? . totalScoreColumn ? . displayStyle === 'amount' ? '¥' +
< span class = "rank-col" : style = "{ textAlign: localDisplayConfig.team?.columnAlignments?.rank || 'left' }" > { { index + 1 } } < / span >
< span class = "name-col" : style = "{ textAlign: localDisplayConfig.team?.columnAlignments?.name || 'left' }" > { { item . name } } < / span >
< span class = "score-col" : style = "{ textAlign: localDisplayConfig.team?.columnAlignments?.score || 'left' }" > { { localDisplayConfig . team ? . totalScoreColumn ? . displayStyle === 'amount' ? '¥' +
item . totalScore : item . totalScore } } < / span >
< span v-if = "localDisplayConfig.team?.showMemberCount" class="member-col" > {{ item.memberCount }} 人 < / span >
< span v-if = "localDisplayConfig.team?.showLeader" class="leader-col" > {{ item.leader }} < / span >
< span v-if = "localDisplayConfig.team?.showBonus" class="bonus-col" > ¥ {{ item.bonus }} < / span >
< span v-if = "localDisplayConfig.team?.showMemberCount" class="member-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.memberCount || 'left' }" > {{ item.memberCount }} 人 < / span >
< span v-if = "localDisplayConfig.team?.showLeader" class="leader-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.leader || 'left' }" > {{ item.leader }} < / span >
< span v-if = "localDisplayConfig.team?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.team?.columnAlignments?.bonus || 'left' }" > ¥ {{ item.bonus }} < / span >
< / div >
< / div >
@@ -92,56 +92,59 @@
< div class = "individual-rankings" >
<!-- 英雄冠军 -- >
< div class = "individual-champion" >
< div class = "individual-avatar" >
< img v-if = "individualRankings[0]?.avatar && individualRankings[0].avatar.startsWith('/') "
:src = "individualRankings[0].avatar" alt = "冠军头像" class = "avatar-image avatar-image-champion"
: style = "{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }" >
< img v-else- if = "localDisplayConfig.championLogos?.individualChampion "
:src = "localDisplayConfig.championLogos.individualChampion " alt = "英雄 冠军" class = "champion-logo "
: style = "{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }" >
< span v-else
: style = "{ fontSize: localDisplayConfig.championLogos? .individualChampionSize ? (localDisplayConfig. championL ogos.individualChampionSize * 0.8) + 'px' : '2rem' }" >
{ { individualRankings [ 0 ] ? . avatar || '👤' } }
</ span >
< div class = "individual-avatar champion-container " >
< div class = "crown-animation" v-if = "individualRankings.length > 0 ">
👑
< / div >
< img v-if = "individualRankings[0]?.avatar && individualRankings[0].avatar.startsWith('/') "
:src = "individualRankings[0].avatar " alt = "冠军头像 " class = "avatar-image avatar-image- champion"
: style = "{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }" >
< img v-else-if = "localDisplayConfig.championLogos?.individualChampion"
:src = " localDisplayConfig.championLogos.individualChampion" alt = "英雄冠军" class = " champion-l ogo"
: style = "{ width: localDisplayConfig.championLogos?.individualChampionSize + 'px', height: localDisplayConfig.championLogos?.individualChampionSize + 'px' }" >
< span v-else
: style = "{ fontSize: localDisplayConfig.championLogos?.individualChampionSize ? (localDisplayConfig.championLogos.individualChampionSize * 0.8) + 'px' : '2rem' }" >
{ { individualRankings [ 0 ] ? . avatar || '👤' } }
< / span >
< / div >
< div class = "champion-name" >
{ { individualRankings [ 0 ] ? . name || '暂无冠军' } }
< / div >
< / div >
< div class = "champion-name" >
{ { individualRankings [ 0 ] ? . name || '暂无冠军' } }
< / div >
< / div >
<!-- 英雄排名 -- >
< div class = "individual-rankings-container" >
< h2 class = "game-subtitle" > 👤 英雄排名 < / h2 >
< div class = "rank-table" >
< div class = "table-header" : style = "{ 'grid-template-columns': individualGridTemplate }" >
< span class = "rank-col" > 排名 < / span >
< span class = "rank-col" : style = "{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }" > 排名 < / span >
< span v-if = "localDisplayConfig.individual?.showAvatar" class="avatar-col" > 头像 < / span >
< span class = "name-col" > 姓名 < / span >
< span v-if = "localDisplayConfig.individual?.showTeam" class="team-col" > {{
< span class = "name-col" : style = "{ textAlign: localDisplayConfig.individual?.columnAlignments?.name || 'left' }" > 姓名 < / span >
< span v-if = "localDisplayConfig.individual?.showTeam" class="team-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.team || 'left' }" > {{
localDisplayConfig.individual ? .teamColumn ? .displayName | | ' 战区 ' }} < / span >
< span class = "score-col" > { { localDisplayConfig . individual ? . scoreColumn ? . displayName || '业绩' } } < / span >
< span v-if = "localDisplayConfig.individual?.showLevel" class="level-col" > 等级 < / span >
< span v-if = "localDisplayConfig.individual?.showDepartment" class="dept-col" > 部门 < / span >
< span v-if = "localDisplayConfig.individual?.showBonus" class="bonus-col" > 奖金 < / span >
< span class = "score-col" : style = "{ textAlign: localDisplayConfig.individual?.columnAlignments?.score || 'left' }" > { { localDisplayConfig . individual ? . scoreColumn ? . displayName || '业绩' } } < / span >
< span v-if = "localDisplayConfig.individual?.showLevel" class="level-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.level || 'left' }" > 等级 < / span >
< span v-if = "localDisplayConfig.individual?.showDepartment" class="dept-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.department || 'left' }" > 部门 < / span >
< span v-if = "localDisplayConfig.individual?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.bonus || 'left' }" > 奖金 < / span >
< / div >
< div v-for = "(item, index) in individualRankings.slice(0, localDisplayConfig.individual.maxDisplayRows) " :key="item.id" class="table-row"
< div v-for = "(item, index) in individualRankings" :key="item.id" class="table-row"
: style = "{ 'grid-template-columns': individualGridTemplate }" : class = "{
'top-three': index < 3,
'highlight': index === 0
}" >
< span class = "rank-col" > { { index + 1 } } < / span >
< span class = "rank-col" : style = "{ textAlign: localDisplayConfig.individual?.columnAlignments?.rank || 'left' }" > { { index + 1 } } < / span >
< span v-if = "localDisplayConfig.individual?.showAvatar" class="avatar-col" >
< img v-if = "item.avatar && item.avatar.startsWith('/')" :src="item.avatar" alt="头像"
class = "avatar-image" >
< span v-else > {{ item.avatar | | ' 👤 ' }} < / span >
< / span >
< span class = "name-col" > { { item . name } } < / span >
< span v-if = "localDisplayConfig.individual?.showTeam" class="team-col" > {{ item.team | | ' - ' }} < / span >
< span class = "score-col" > { { localDisplayConfig . individual ? . scoreColumn ? . displayStyle === 'amount' ? '¥' +
< span class = "name-col" : style = "{ textAlign: localDisplayConfig.individual?.columnAlignments?.name || 'left' }" > { { item . name || '-' } } < / span >
< span v-if = "localDisplayConfig.individual?.showTeam" class="team-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.team || 'left' }" > {{ item.team | | ' - ' }} < / span >
< span class = "score-col" : style = "{ textAlign: localDisplayConfig.individual?.columnAlignments?.score || 'left' }" > { { localDisplayConfig . individual ? . scoreColumn ? . displayStyle === 'amount' ? '¥' +
item . score : item . score } } < / span >
< span v-if = "localDisplayConfig.individual?.showLevel" class="level-col"
< span v-if = "localDisplayConfig.individual?.showLevel" class="level-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.level || 'left' }"
:class = "`level-${item.level}`" > { { item . level } } < / span >
< span v-if = "localDisplayConfig.individual?.showDepartment" class="dept-col" > {{ item.department }} < / span >
< span v-if = "localDisplayConfig.individual?.showBonus" class="bonus-col" > ¥ {{ item.bonus }} < / span >
< span v-if = "localDisplayConfig.individual?.showDepartment" class="dept-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.department || 'left' }" > {{ item.department }} < / span >
< span v-if = "localDisplayConfig.individual?.showBonus" class="bonus-col" :style="{ textAlign: localDisplayConfig.individual?.columnAlignments?.bonus || 'left' }" > ¥ {{ item.bonus }} < / span >
< / div >
< / div >
< / div >
@@ -170,7 +173,7 @@
< / template >
< script setup >
import { ref , onMounted , onUnmounted , watch , computed , reactive } from 'vue' ;
import { ref , onBeforeMount , onMounted , onUnmounted , watch , computed , reactive } from 'vue' ;
import { useRouter } from 'vue-router' ;
import {
individualRankings as importedIndividualRankings ,
@@ -194,21 +197,29 @@ function createDefaultDisplayConfig() {
} ,
individual : {
scoreColumn : {
displayName : '战 绩' ,
displayName : '业 绩' ,
displayStyle : 'number'
} ,
teamColumn : {
displayName : '战区' ,
displayStyle : 'text'
displayName : '战区'
} ,
showLevel : true ,
showDepartment : true ,
showBonus : false ,
showTeam : true , // 默认显示战区列
showAvatar : false , // 默认不显示头像列
max DisplayRows: 10 , // 默认最多 显示10行
default DisplayRows: 10 , // 默认显示10行
columnWidths : {
team : 120 // 默认战区列宽
} ,
columnAlignments : {
rank : 'left' ,
name : 'left' ,
score : 'left' ,
level : 'left' ,
department : 'left' ,
team : 'left' ,
bonus : 'left'
}
} ,
team : {
@@ -219,7 +230,16 @@ function createDefaultDisplayConfig() {
showMemberCount : true ,
showLeader : true ,
showBonus : false ,
columnWidths : { }
defaultDisplayRows : 0 , // 默认显示所有行
columnWidths : { } ,
columnAlignments : {
rank : 'left' ,
name : 'left' ,
score : 'left' ,
memberCount : 'left' ,
leader : 'left' ,
bonus : 'left'
}
}
} ;
}
@@ -257,17 +277,42 @@ function mergeConfig(config1, config2) {
const individualRankings = ref ( importedIndividualRankings || [ ] ) ;
const teamRankings = ref ( importedTeamRankings || [ ] ) ;
// 确保即使displayConfig存在， ，
const localDisplayConfig = ref ( displayConfig
? mergeConfig ( defaultDisplayConfig , JSON . parse ( JSON . stringify ( displayConfig ) ) )
: defaultD isplayConfig
) ;
const localDisplayConfig = ref ( ( ) => {
if ( displayConfig ) {
const configCopy = JSON . parse ( JSON . stringify ( d isplayConfig ) ) ;
const merged = mergeConfig ( defaultDisplayConfig , configCopy ) ;
// 确保所有必要属性都存在
if ( ! merged . individual ) merged . individual = { ... defaultDisplayConfig . individual } ;
if ( ! merged . team ) merged . team = { ... defaultDisplayConfig . team } ;
// 确保columnAlignments属性存在
if ( ! merged . individual . columnAlignments ) {
merged . individual . columnAlignments = { ... defaultDisplayConfig . individual . columnAlignments } ;
}
if ( ! merged . team . columnAlignments ) {
merged . team . columnAlignments = { ... defaultDisplayConfig . team . columnAlignments } ;
}
// 确保defaultDisplayRows属性存在
if ( merged . individual . defaultDisplayRows === undefined ) {
merged . individual . defaultDisplayRows = defaultDisplayConfig . individual . defaultDisplayRows ;
}
if ( merged . team . defaultDisplayRows === undefined ) {
merged . team . defaultDisplayRows = defaultDisplayConfig . team . defaultDisplayRows ;
}
return merged ;
}
return defaultDisplayConfig ;
} ) ;
const taskSettings = ref ( {
mainTitle : '3000万' ,
subtitle : '时间: 2025-11-12 - 2026-02-08'
} ) ;
// 加载任务设置和初始化所有数据
onMounted ( async ( ) => {
onBefore Mount ( async ( ) => {
try {
// 首先初始化所有数据，确保从服务器获取最新配置
await initializeData ( ) ;
@@ -291,7 +336,10 @@ onMounted(async () => {
// 更新显示配置
if ( config . displayConfig ) {
localDisplayConfig . value = mergeConfig ( defaultDisplayConfig , JSON . parse ( JSON . stringify ( config . displayConfig ) ) )
const configCopy = JSON . parse ( JSON . stringify ( config . displayConfig ) ) ;
localDisplayConfig . value = mergeConfig ( defaultDisplayConfig , configCopy ) ;
console . log ( 'localDisplayConfig.value =' , localDisplayConfig . value ) ;
}
console . log ( '成功从服务器加载最新数据' ) ;
@@ -303,6 +351,52 @@ onMounted(async () => {
// 确保原有onMounted逻辑不被覆盖
// 更新CSS变量，
watch (
( ) => localDisplayConfig . value . individual . defaultDisplayRows ,
( newRows ) => {
document . documentElement . style . setProperty ( '--default-display-rows' , newRows ) ;
} ,
{ immediate : true }
) ;
// 添加监听以同步战区排名默认显示行数配置到CSS变量
watch (
( ) => localDisplayConfig . value . team . defaultDisplayRows ,
( newValue ) => {
if ( newValue && newValue > 0 ) {
document . documentElement . style . setProperty ( '--team-default-height' , ` calc(60px * ${ newValue } ) ` ) ;
document . documentElement . style . setProperty ( '--team-overflow-y' , 'auto' ) ;
document . documentElement . style . setProperty ( '--team-overflow-x' , 'auto' ) ;
document . documentElement . style . setProperty ( '--team-scroll-lock' , '' ) ;
} else {
// 根据实际数据条数计算高度， ， （ ）
const actualHeight = teamRankings . value . length * 60 + 20 ;
document . documentElement . style . setProperty ( '--team-default-height' , ` ${ actualHeight } px ` ) ;
document . documentElement . style . setProperty ( '--team-overflow-y' , 'hidden' ) ;
document . documentElement . style . setProperty ( '--team-overflow-x' , 'hidden' ) ;
document . documentElement . style . setProperty ( '--team-scroll-lock' , 'lock' ) ;
}
} ,
{ immediate : true }
) ;
// 当战区数据变化时，重新计算高度（如果当前是显示所有行模式）
watch (
( ) => teamRankings . value . length ,
( ) => {
const displayRows = localDisplayConfig . value . team . defaultDisplayRows ;
if ( ! displayRows || displayRows === 0 ) {
// 根据实际数据条数计算高度， ， （ ）
const actualHeight = teamRankings . value . length * 60 + 20 ;
document . documentElement . style . setProperty ( '--team-default-height' , ` ${ actualHeight } px ` ) ;
document . documentElement . style . setProperty ( '--team-overflow-y' , 'hidden' ) ;
document . documentElement . style . setProperty ( '--team-overflow-x' , 'hidden' ) ;
document . documentElement . style . setProperty ( '--team-scroll-lock' , 'lock' ) ;
}
}
) ;
// 确保奖金规则有默认值
const displayBonusRules = computed ( ( ) => {
return Array . isArray ( bonusRules ) && bonusRules . length > 0
@@ -770,8 +864,25 @@ onMounted(async () => {
try {
// 异步初始化数据
await initializeData ( ) ;
// 更新本地显示配置
localDisplayConfig . value = displayConfig ? JSON . parse ( JSON . stringify ( displayConfig ) ) : createDefaultDisplayConfig ( ) ;
// 更新本地显示配置，
if ( displayConfig ) {
const configCopy = JSON . parse ( JSON . stringify ( displayConfig ) ) ;
const defaultConfig = createDefaultDisplayConfig ( ) ;
const merged = mergeConfig ( defaultConfig , configCopy ) ;
// 确保columnAlignments属性存在
if ( ! merged . individual . columnAlignments ) {
merged . individual . columnAlignments = { ... defaultConfig . individual . columnAlignments } ;
}
if ( ! merged . team . columnAlignments ) {
merged . team . columnAlignments = { ... defaultConfig . team . columnAlignments } ;
}
localDisplayConfig . value = merged ;
} else {
localDisplayConfig . value = createDefaultDisplayConfig ( ) ;
}
} catch ( error ) {
console . error ( '初始化数据失败:' , error ) ;
// 使用默认配置
@@ -858,6 +969,51 @@ onUnmounted(() => {
display : inline - block ;
}
/* 冠军头像容器 */
. champion - container {
position : relative ;
display : inline - block ;
}
/* 皇冠动画效果 */
. crown - animation {
position : absolute ;
top : - 25 px ;
left : 50 % ;
transform : translateX ( - 50 % ) ;
font - size : 1.5 rem ;
animation : crownFloat 2 s ease - in - out infinite ;
z - index : 10 ;
text - shadow : 0 0 10 px var ( -- gold - primary ) , 0 0 20 px var ( -- gold - secondary ) ;
}
/* 皇冠浮动动画 */
@ keyframes crownFloat {
0 % {
transform : translateX ( - 50 % ) translateY ( 0 ) rotate ( - 5 deg ) ;
}
50 % {
transform : translateX ( - 50 % ) translateY ( - 5 px ) rotate ( 5 deg ) ;
}
100 % {
transform : translateX ( - 50 % ) translateY ( 0 ) rotate ( - 5 deg ) ;
}
}
/* 皇冠发光效果动画 */
. crown - animation {
animation : crownFloat 2 s ease - in - out infinite , crownGlow 3 s ease - in - out infinite ;
}
@ keyframes crownGlow {
0 % , 100 % {
text - shadow : 0 0 10 px var ( -- gold - primary ) , 0 0 20 px var ( -- gold - secondary ) ;
}
50 % {
text - shadow : 0 0 15 px var ( -- gold - primary ) , 0 0 30 px var ( -- gold - secondary ) , 0 0 40 px rgba ( 255 , 215 , 0 , 0.5 ) ;
}
}
. champion - logo {
object - fit : contain ;
}
@@ -1524,53 +1680,113 @@ onUnmounted(() => {
}
/* 针对高度大于1080分辨率的精确优化 */
@ media ( min - height : 1080 px ) {
/* 优化表格布局 - 设置高度确保只显示5行 */
. rank - table {
min - height : 280 px ! important ;
max - height : 280 px ! important ;
margin : 0 auto ;
width : 100 % ;
}
/* 优化表格行高，
. table - row {
min - height : 38 px ;
padding : 10 px ;
}
/* 优化前三名特殊样式 */
. table - row : nth - child ( 1 ) ,
. table - row : nth - child ( 2 ) ,
. table - row : nth - child ( 3 ) {
font - size : 1.05 rem ;
}
}
/* 移动端背景图片设置 - 全局样式 */
@ media ( max - width : 768 px ) {
/* 战区排名容器设置 - 禁止滚动 */
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
. team - rankings - container . rank - table {
overflow : hidden ;
position : relative ;
min - height : auto ;
/* 如果配置了具体了默认显示行数，则设置高度和滚动，否则显示所有行 */
height : var ( -- team - default - height , auto ) ! important ;
overflow - y : var ( -- team - overflow - y , hidden ) ;
overflow - x : var ( -- team - overflow - x , auto ) ;
}
/* 当设置了滚动锁定时，禁止所有滚动 */
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . rank - table {
overflow - y : hidden ! important ;
overflow - x : hidden ! important ;
height : var ( -- team - default - height , auto ) ! important ;
min - width : auto ! important ;
width : 100 % ! important ;
}
/* 确保表格内容在锁定模式下正确显示 */
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . rank - table . table - header ,
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . rank - table . table - row {
min - width : auto ! important ;
width : 100 % ! important ;
overflow - x : visible ! important ;
white - space : normal ! important ;
}
/* 英雄排名容器设置 - 允许垂直滚动，设置默认高度显示多行 */
. individual - rankings - container . rank - table {
overflow - y : auto ;
overflow - x : auto ; /* 允许水平滚动 */
position : relative ;
/* 基于默认显示行数计算合适的高度 */
height : calc ( 60 px * var ( -- default - display - rows , 10 ) ) ;
/* 隐藏滚动条但保留滚动功能 */
- ms - overflow - style : none ;
scrollbar - width : none ;
}
/* 移动端非前三名字体放大 */
. team - rankings - container . table - row : not ( : nth - child ( 1 ) ) : not ( : nth - child ( 2 ) ) : not ( : nth - child ( 3 ) ) ,
. individual - rankings - container . table - row : not ( : nth - child ( 1 ) ) : not ( : nth - child ( 2 ) ) : not ( : nth - child ( 3 ) ) {
font - size : 1.1 rem ;
}
/* 移动端名次列水平垂直居中 */
. team - rankings - container . table - header > : first - child ,
. individual - rankings - container . table - header > : first - child ,
. team - rankings - container . table - row > : first - child ,
. individual - rankings - container . table - row > : first - child {
display : flex ;
align - items : center ;
justify - content : center ;
text - align : center ;
}
/* 确保前三名特殊样式在移动端正确显示 */
. team - rankings - container . table - row . top - three {
transform : scale ( 1 ) ;
box - shadow : none ;
position : static ;
}
. team - rankings - container . table - row : nth - child ( 1 ) ,
. team - rankings - container . table - row : nth - child ( 2 ) ,
. team - rankings - container . table - row : nth - child ( 3 ) {
box - shad ow : none ;
z - index : 1 ;
}
. team - rankings - container . table - row . top - three ,
. individual - rankings - container . table - row . top - three {
transform : scale ( 1 ) ;
box - shadow : none ;
position : static ;
}
. team - rankings - container . table - row : nth - child ( 1 ) ,
. team - rankings - container . table - row : nth - child ( 2 ) ,
. team - rankings - container . table - r ow: nth - child ( 3 ) ,
. individual - rankings - container . table - row : nth - child ( 1 ) ,
. individual - rankings - container . table - row : nth - child ( 2 ) ,
. individual - rankings - container . table - row : nth - child ( 3 ) {
box - shadow : none ;
z - index : 1 ;
}
/* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container {
overflow : visible ! important ;
height : auto ! important ;
}
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . rank - table {
overflow : hidden ! important ;
display : block ;
min - width : auto ! important ;
width : 100 % ! important ;
}
/* 确保表格头部和行在禁止滚动模式下能够完整显示内容 */
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . table - header ,
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . table - row {
min - width : auto ! important ;
width : 100 % ! important ;
overflow - x : visible ! important ;
white - space : normal ! important ;
}
/* 英雄排名列表隐藏水平滚动条 */
. individual - rankings - container . rank - table : : - webkit - scrollbar {
width : 6 px ; /* 保留垂直滚动条 */
height : 0 ; /* 隐藏水平滚动条 */
}
/* 1. 背景图片全屏显示并固定 */
. battle - ranking {
@@ -1695,6 +1911,18 @@ onUnmounted(() => {
border - radius : 10 px ;
background : rgba ( 255 , 255 , 255 , 0.95 ) ;
}
/* 当设置为禁止滚动时，确保战区排名容器不允许滚动 */
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container {
overflow : visible ! important ;
height : auto ! important ;
}
: root [ style *= "--team-scroll-lock: lock" ] . team - rankings - container . rank - table {
overflow : hidden ! important ;
white - space : nowrap ;
display : block ;
}
/* 表格调整 */
. rank - table {