tmp-upload #4
Binary file not shown.
|
Before Width: | Height: | Size: 508 KiB After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 508 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 625 KiB After Width: | Height: | Size: 430 KiB |
@@ -113,7 +113,6 @@
|
|||||||
<div class="individual-rankings">
|
<div class="individual-rankings">
|
||||||
<!-- 英雄冠军 -->
|
<!-- 英雄冠军 -->
|
||||||
<div class="individual-champion">
|
<div class="individual-champion">
|
||||||
<div class="hero-ranking-text left-hero-ranking-text">英雄榜</div>
|
|
||||||
<div class="champion-content">
|
<div class="champion-content">
|
||||||
<div class="individual-avatar champion-container">
|
<div class="individual-avatar champion-container">
|
||||||
<div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
|
<div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
|
||||||
@@ -138,7 +137,6 @@
|
|||||||
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
|
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-ranking-text right-hero-ranking-text">英雄榜</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 英雄排名 -->
|
<!-- 英雄排名 -->
|
||||||
<div class="individual-rankings-container">
|
<div class="individual-rankings-container">
|
||||||
@@ -1134,7 +1132,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.champion-name {
|
.champion-name {
|
||||||
font-size: 1.1rem;
|
font-size: 1.8rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: gold;
|
color: gold;
|
||||||
}
|
}
|
||||||
@@ -1176,7 +1174,7 @@ onUnmounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
gap: 5px;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1234,6 +1232,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.bonus-awards-container {
|
.bonus-awards-container {
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
scale: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timer-float {
|
.timer-float {
|
||||||
@@ -1818,7 +1817,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.score-value {
|
.score-value {
|
||||||
font-size: 1.5rem;
|
font-size: 3.6rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--gold-primary);
|
color: var(--gold-primary);
|
||||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||||
@@ -1838,94 +1837,6 @@ onUnmounted(() => {
|
|||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-ranking-text {
|
|
||||||
font-size: 2.8rem;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #ffd700;
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
text-orientation: mixed;
|
|
||||||
letter-spacing: 10px;
|
|
||||||
position: relative;
|
|
||||||
text-shadow:
|
|
||||||
0 0 5px rgba(255, 215, 0, 0.8),
|
|
||||||
0 0 10px rgba(255, 215, 0, 0.6),
|
|
||||||
0 0 15px rgba(255, 215, 0, 0.4),
|
|
||||||
2px 2px 2px rgba(0, 0, 0, 0.8);
|
|
||||||
|
|
||||||
/* 3D立体效果 */
|
|
||||||
text-stroke: 1px rgba(255, 255, 255, 0.2);
|
|
||||||
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
|
|
||||||
|
|
||||||
/* 金色渐变背景 */
|
|
||||||
background: linear-gradient(135deg, #ffd700, #ffc107, #ffd700);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
|
|
||||||
/* 发光效果动画 */
|
|
||||||
animation: glow-hero 2s infinite alternate ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 发光效果动画 */
|
|
||||||
@keyframes glow-hero {
|
|
||||||
0% {
|
|
||||||
text-shadow:
|
|
||||||
0 0 5px rgba(255, 215, 0, 0.8),
|
|
||||||
0 0 10px rgba(255, 215, 0, 0.6),
|
|
||||||
0 0 15px rgba(255, 215, 0, 0.4),
|
|
||||||
2px 2px 2px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
text-shadow:
|
|
||||||
0 0 10px rgba(255, 215, 0, 1),
|
|
||||||
0 0 20px rgba(255, 215, 0, 0.8),
|
|
||||||
0 0 30px rgba(255, 215, 0, 0.6),
|
|
||||||
3px 3px 3px rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 为容器添加旋转光环效果 */
|
|
||||||
.hero-ranking-decoration::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 180%;
|
|
||||||
height: 180%;
|
|
||||||
top: -40%;
|
|
||||||
left: -40%;
|
|
||||||
background: radial-gradient(circle, transparent 50%, rgba(255, 215, 0, 0.4) 70%, transparent 90%);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: rotate-hero-ranking-decoration 8s linear infinite;
|
|
||||||
z-index: -1;
|
|
||||||
filter: blur(3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加第二层光环效果 */
|
|
||||||
.hero-ranking-decoration::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 140%;
|
|
||||||
height: 140%;
|
|
||||||
top: -20%;
|
|
||||||
left: -20%;
|
|
||||||
background: radial-gradient(circle, transparent 60%, rgba(255, 140, 0, 0.3) 80%, transparent 100%);
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: rotate-hero-ranking-decoration 12s linear infinite reverse;
|
|
||||||
z-index: -2;
|
|
||||||
filter: blur(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate-hero-ranking-decoration {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.champion-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
@@ -1960,14 +1871,13 @@ onUnmounted(() => {
|
|||||||
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 英雄排名容器设置 - 允许垂直滚动,设置默认高度显示多行 */
|
/* 英雄排名容器设置 - 显示所有行,与战区排名保持一致 */
|
||||||
.individual-rankings-container .rank-table {
|
.individual-rankings-container .rank-table {
|
||||||
overflow-y: auto;
|
overflow-y: hidden;
|
||||||
overflow-x: auto; /* 允许水平滚动 */
|
overflow-x: auto; /* 允许水平滚动 */
|
||||||
position: relative;
|
position: relative;
|
||||||
/* 基于默认显示行数计算合适的高度 */
|
height: auto !important; /* 自动高度,显示所有行 */
|
||||||
height: calc(60px * var(--default-display-rows, 10));
|
/* 隐藏滚动条 */
|
||||||
/* 隐藏滚动条但保留滚动功能 */
|
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
@@ -2191,12 +2101,13 @@ onUnmounted(() => {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端英雄排名列表滚动设置 */
|
/* 英雄排名列表设置 - 显示所有行 */
|
||||||
.individual-rankings-container .rank-table {
|
.individual-rankings-container .rank-table {
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
/* 禁止横向滚动 */
|
/* 禁止横向滚动 */
|
||||||
overflow-y: auto !important;
|
overflow-y: hidden !important;
|
||||||
/* 允许纵向滚动 */
|
/* 不允许纵向滚动,显示所有行 */
|
||||||
|
height: auto !important;
|
||||||
/* 确保英雄排名列表隐藏滚动条 */
|
/* 确保英雄排名列表隐藏滚动条 */
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user