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

chore: PC 端基本页面完成

Browse Source
This commit is contained in:
ZF Sun
2025-11-13 08:21:46 +08:00
parent d6ee43e48b
commit e5010b6ea3
4 changed files with 92 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
data/config.json
View File

@@ -341,7 +341,7 @@
"showLevel": false,
"showDepartment": false,
"scoreColumn": {
"displayName": "签单金额",
"displayName": "业绩",
"displayStyle": "amount"
},
"columnWidths": {
@@ -358,7 +358,7 @@
"showMemberCount": false,
"showLeader": false,
"totalScoreColumn": {
"displayName": "签单金额",
"displayName": "业绩",
"displayStyle": "amount"
},
"columnWidths": {

2
src/router/index.js
View File

@@ -7,7 +7,7 @@ const routes = [
path: '/',
name: 'BattleRanking',
component: BattleRanking,
meta: { title: '百人大战排行榜' }
meta: { title: '百日大战排行榜' }
},
{
path: '/admin',

20
src/views/AdminPanel.vue
View File

@@ -33,7 +33,7 @@
<!-- 管理界面 --><div v-else class="management-container">
<!-- 顶部导航 -->
<div class="top-nav">
<h1 class="game-title">📊 百人大战管理系统</h1>
<h1 class="game-title">📊 百日大战管理系统</h1>
<div class="nav-actions">
<span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
<button @click="handleRefreshData" class="btn-game" style="margin-right: 10px;">刷新数据</button>
@@ -53,7 +53,7 @@
<!-- 内容区域 --><div class="tab-content" style="max-height: calc(100vh - 200px); overflow-y: auto;">
<!-- 结束时间设置 --><div v-if="currentTab === 'endTime'" class="end-time-content">
<h2 class="game-subtitle">⏰ 百人大战结束时间设置</h2>
<h2 class="game-subtitle">⏰ 百日大战结束时间设置</h2>
<div class="time-setting-section">
<div class="config-item">
<label class="checkbox-label text-gold">
@@ -109,14 +109,14 @@
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">签单金额列显示名称：</span>
<span class="text-gold">业绩列显示名称：</span>
<input type="text" v-model="localDisplayConfig.individual.scoreColumn.displayName"
placeholder="输入显示名称" class="text-input">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">签单金额显示样式：</span>
<span class="text-gold">业绩显示样式：</span>
<select v-model="localDisplayConfig.individual.scoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option>
@@ -145,7 +145,7 @@
</select>
</div>
<div class="column-width-item">
<label class="text-gold">签单金额列：</label>
<label class="text-gold">业绩列：</label>
<input type="number" v-model.number="localDisplayConfig.individual.columnWidths.score" min="60" max="200" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.individual.showLevel">
@@ -193,14 +193,14 @@
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">签单金额列显示名称：</span>
<span class="text-gold">业绩列显示名称：</span>
<input type="text" v-model="localDisplayConfig.team.totalScoreColumn.displayName"
placeholder="输入显示名称" class="text-input">
</label>
</div>
<div class="config-item">
<label class="checkbox-label">
<span class="text-gold">签单金额显示样式：</span>
<span class="text-gold">业绩显示样式：</span>
<select v-model="localDisplayConfig.team.totalScoreColumn.displayStyle" class="select-input">
<option value="amount">金额（带¥符号）</option>
<option value="number">普通数字</option>
@@ -225,7 +225,7 @@
</select>
</div>
<div class="column-width-item">
<label class="text-gold">签单金额列：</label>
<label class="text-gold">业绩列：</label>
<input type="number" v-model.number="localDisplayConfig.team.columnWidths.score" min="60" max="200" class="width-input">
</div>
<div class="column-width-item" v-if="localDisplayConfig.team.showMemberCount">
@@ -627,7 +627,7 @@
<input v-model="individualForm.name" type="text" required class="form-input">
</div>
<div class="form-group">
<label>签单金额:</label>
<label>业绩:</label>
<input v-model.number="individualForm.score" type="number" required class="form-input">
</div>
<div class="form-group">
@@ -665,7 +665,7 @@
<input v-model="teamForm.name" type="text" required class="form-input">
</div>
<div class="form-group">
<label>签单金额:</label>
<label>业绩:</label>
<input v-model.number="teamForm.totalScore" type="number" required class="form-input">
</div>
<div class="form-group">

87
src/views/BattleRanking.vue
View File

@@ -50,37 +50,22 @@
</section>
<!-- 冠军模块 -->
<section class="champion-section card-game">
<!-- 左侧：战区冠军 -->
<div class="team-champion">
<div class="team-logo">
🏅
</div>
<div class="champion-title">战区冠军</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<!-- 右侧：个人冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
{{ individualRankings[0]?.avatar || '👤' }}
</div>
<div class="champion-title">个人冠军</div>
<div class="champion-name">
{{ individualRankings[0]?.name || '暂无冠军' }}
</div>
</div>
</section>
<!-- 第四部分：排名明细 -->
<section class="rankings-section card-game">
<div class="rankings-container">
<!-- 战区排名 -->
<div class="team-rankings">
<!-- 战区冠军 -->
<div class="team-champion">
<div class="team-logo">
🏅
</div>
<div class="champion-name">
{{ teamRankings[0]?.name || '暂无冠军' }}
</div>
</div>
<div class="team-rankings-container">
<h2 class="game-subtitle">👥 战区排名</h2>
<div class="rank-table">
<div class="table-header" :style="{ 'grid-template-columns': teamGridTemplate }">
@@ -108,12 +93,23 @@
<span v-if="localDisplayConfig.team?.showLeader" class="leader-col">{{ item.leader }}</span>
<span v-if="localDisplayConfig.team?.showBonus" class="bonus-col">¥{{ item.bonus }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="individual-rankings">
<!-- 英雄冠军 -->
<div class="individual-champion">
<div class="individual-avatar">
{{ individualRankings[0]?.avatar || '👤' }}
</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 }">
@@ -148,6 +144,7 @@
</div>
</div>
</div>
</div>
</section>
<!-- 浮动倒计时组件 -->
@@ -831,32 +828,36 @@ onUnmounted(() => {
.team-champion,
.individual-champion {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px;
margin-bottom: 10px;
}
.team-logo {
font-size: 2.5rem;
margin-bottom: 10px;
font-size: 2rem;
margin-bottom: 5px;
display: inline-block;
color: gold;
}
.individual-avatar {
font-size: 2.5rem;
margin-bottom: 10px;
font-size: 2rem;
margin-bottom: 5px;
display: inline-block;
}
.champion-title {
font-size: 1rem;
font-size: 0.9rem;
color: #999;
margin-bottom: 5px;
margin-bottom: 3px;
}
.champion-name {
font-size: 1.3rem;
font-size: 1.1rem;
font-weight: bold;
color: gold;
}
@@ -1313,18 +1314,28 @@ onUnmounted(() => {
gap: 15px;
flex-wrap: wrap;
justify-content: center;
background: none;
border: none;
}
.individual-rankings,
.team-rankings {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 20px;
flex: 1;
min-width: 350px;
max-width: 550px;
}
/* 为指定的容器添加背景和边框 */
.team-rankings-container,
.individual-rankings-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.5);
padding: 15px;
}
.section-title {
color: #d63031;
text-align: center;