diff --git a/public/award1.png b/public/award1.png index 08914be..ee613a6 100644 Binary files a/public/award1.png and b/public/award1.png differ diff --git a/public/award2.png b/public/award2.png index ee613a6..08914be 100644 Binary files a/public/award2.png and b/public/award2.png differ diff --git a/public/award3.png b/public/award3.png index 7a9dd1f..7958574 100644 Binary files a/public/award3.png and b/public/award3.png differ diff --git a/src/views/BattleRanking.vue b/src/views/BattleRanking.vue index 6756189..101a998 100644 --- a/src/views/BattleRanking.vue +++ b/src/views/BattleRanking.vue @@ -113,7 +113,6 @@
-
英雄榜
英雄榜
@@ -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; diff --git a/ui/手表.png b/ui/手表.png new file mode 100644 index 0000000..7958574 Binary files /dev/null and b/ui/手表.png differ