WeWork/vs100
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: 调整到符合游戏风格

Browse Source
This commit is contained in:
ZF Sun
2025-11-12 09:37:10 +08:00
parent 58ad47d124
commit 1e221550cf
3 changed files with 600 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/BattleRanking.vue
View File

@@ -1,17 +1,17 @@
<template>
<div class="battle-ranking">
<!-- 第一部分：百日大战主题 -->
<section class="theme-section">
<section class="theme-section card-game">
<div class="theme-container">
<h1 class="main-title">🔥 百人大战排行榜 🔥</h1>
<p class="subtitle">2025年度精英挑战赛 | 百日冲刺 · 争创佳绩</p>
<div class="timer">
<h1 class="game-title">🔥 百人大战排行榜 🔥</h1>
<p class="subtitle text-gold">2025年度精英挑战赛 | 百日冲刺 · 争创佳绩</p>
<div class="timer glow-border">
<span class="label">距离结束还有：</span>
<div class="countdown">
<span class="time-item">{{ days }}天</span>
<span class="time-item">{{ hours }}时</span>
<span class="time-item">{{ minutes }}分</span>
<span class="time-item">{{ seconds }}秒</span>
<div class="countdown" style="display: flex; gap: 15px;">
<span class="time-item timer-number">{{ days }}天</span>
<span class="time-item timer-number">{{ hours }}时</span>
<span class="time-item timer-number">{{ minutes }}分</span>
<span class="time-item timer-number">{{ seconds }}秒</span>
<span class="time-item milliseconds">{{ milliseconds }}毫秒</span>
</div>
</div>
@@ -20,7 +20,7 @@
<!-- 第二部分：战鼓动画（浮动并支持拖放） -->
<section
class="drums-section"
class="drums-section card-game"
@mousedown="startDrag"
@click="handleDrumClick"
:style="{ left: drumsPosition.x + 'px', top: drumsPosition.y + 'px' }"
@@ -28,9 +28,9 @@
<div class="drums-container">
<!-- 战鼓动画在上面 -->
<div class="drums-animation">
<div class="drum glow-border" :class="{ beating: isBeating }">🥁</div>
<div class="drum" :class="{ beating: isBeating }">🥁</div>
<div class="drum" :class="{ beating: isBeating }">🥁</div>
<div class="trophy">🏆</div>
<div class="trophy" style="font-size: 2.5rem; filter: drop-shadow(0 0 10px var(--gold-primary));">🏆</div>
<div class="drum" :class="{ beating: isBeating }">🥁</div>
<div class="drum" :class="{ beating: isBeating }">🥁</div>
</div>
@@ -38,13 +38,13 @@
</section>
<!-- 第三部分：奖金设置（行布局） -->
<section class="bonus-section">
<h2>🎯 奖金设置</h2>
<section class="bonus-section card-game">
<h2 class="game-subtitle">🎯 奖金设置</h2>
<div class="bonus-rules-row">
<div
v-for="(rule, index) in displayBonusRules"
:key="index"
class="bonus-rule-item"
class="bonus-rule-item glow-border"
>
<div class="rule-header">
<span class="rank-range">名次: {{ rule.rank }}</span>
@@ -59,11 +59,11 @@
</section>
<!-- 第四部分：排名明细 -->
<section class="rankings-section">
<section class="rankings-section card-game">
<div class="rankings-container">
<!-- 个人排名 -->
<div class="individual-rankings">
<h2 class="section-title">👤 个人排名</h2>
<h2 class="game-subtitle">👤 个人排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': individualGridTemplate }">
<span class="rank-col">排名</span>
@@ -97,7 +97,7 @@
<!-- 战队排名 -->
<div class="team-rankings">
<h2 class="section-title">👥 战队排名</h2>
<h2 class="game-subtitle">👥 战队排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
<span class="rank-col">排名</span>
@@ -131,7 +131,7 @@
<!-- 浮动管理员入口 -->
<div class="admin-entry-float">
<button @click="goToAdmin" class="admin-btn-float">
<button @click="goToAdmin" class="btn-game-secondary">
🔐 管理员入口
</button>
</div>
@@ -819,6 +819,7 @@ onUnmounted(() => {
background-color: #fff3cd;
font-size: 1.1rem;
font-weight: bold;
color: #000;
transform: scale(1.02);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
@@ -847,7 +848,6 @@ onUnmounted(() => {
.table-row.highlight {
background: linear-gradient(135deg, #ffd32a, #ff7979);
color: white;
}
.level-SSS {