chore: 奖品替换及字体放大
This commit is contained in:
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-champion">
|
||||
<div class="hero-ranking-text left-hero-ranking-text">英雄榜</div>
|
||||
<div class="champion-content">
|
||||
<div class="individual-avatar champion-container">
|
||||
<div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
|
||||
@@ -138,7 +137,6 @@
|
||||
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-ranking-text right-hero-ranking-text">英雄榜</div>
|
||||
</div>
|
||||
<!-- 英雄排名 -->
|
||||
<div class="individual-rankings-container">
|
||||
@@ -1134,7 +1132,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.champion-name {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: gold;
|
||||
}
|
||||
@@ -1176,7 +1174,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
gap: 5px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@@ -1234,6 +1232,7 @@ onUnmounted(() => {
|
||||
|
||||
.bonus-awards-container {
|
||||
gap: 10px;
|
||||
scale: 0.8;
|
||||
}
|
||||
|
||||
.timer-float {
|
||||
@@ -1818,7 +1817,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-size: 1.5rem;
|
||||
font-size: 3.6rem;
|
||||
font-weight: bold;
|
||||
color: var(--gold-primary);
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
||||
@@ -1838,94 +1837,6 @@ onUnmounted(() => {
|
||||
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) {
|
||||
|
||||
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||
@@ -1960,14 +1871,13 @@ onUnmounted(() => {
|
||||
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
||||
}
|
||||
|
||||
/* 英雄排名容器设置 - 允许垂直滚动,设置默认高度显示多行 */
|
||||
/* 英雄排名容器设置 - 显示所有行,与战区排名保持一致 */
|
||||
.individual-rankings-container .rank-table {
|
||||
overflow-y: auto;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto; /* 允许水平滚动 */
|
||||
position: relative;
|
||||
/* 基于默认显示行数计算合适的高度 */
|
||||
height: calc(60px * var(--default-display-rows, 10));
|
||||
/* 隐藏滚动条但保留滚动功能 */
|
||||
height: auto !important; /* 自动高度,显示所有行 */
|
||||
/* 隐藏滚动条 */
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
@@ -2191,12 +2101,13 @@ onUnmounted(() => {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 移动端英雄排名列表滚动设置 */
|
||||
/* 英雄排名列表设置 - 显示所有行 */
|
||||
.individual-rankings-container .rank-table {
|
||||
overflow-x: hidden !important;
|
||||
/* 禁止横向滚动 */
|
||||
overflow-y: auto !important;
|
||||
/* 允许纵向滚动 */
|
||||
overflow-y: hidden !important;
|
||||
/* 不允许纵向滚动,显示所有行 */
|
||||
height: auto !important;
|
||||
/* 确保英雄排名列表隐藏滚动条 */
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
Reference in New Issue
Block a user