chore: init
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>vs100</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1311
package-lock.json
generated
Normal file
1311
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "vs100",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.24",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"vite": "^7.2.2"
|
||||
}
|
||||
}
|
||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
16
src/App.vue
Normal file
16
src/App.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup>
|
||||
// 主应用组件
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
43
src/components/HelloWorld.vue
Normal file
43
src/components/HelloWorld.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
206
src/data/mockData.js
Normal file
206
src/data/mockData.js
Normal file
@@ -0,0 +1,206 @@
|
||||
// 模拟数据 - 个人排名
|
||||
export const individualRankings = [
|
||||
{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
score: 985,
|
||||
level: 'SSS',
|
||||
avatar: '👑',
|
||||
department: '销售部',
|
||||
completedTasks: 48,
|
||||
bonus: 5000
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
score: 972,
|
||||
level: 'SSS',
|
||||
avatar: '🥇',
|
||||
department: '技术部',
|
||||
completedTasks: 45,
|
||||
bonus: 3000
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '王五',
|
||||
score: 958,
|
||||
level: 'SS',
|
||||
avatar: '🥈',
|
||||
department: '市场部',
|
||||
completedTasks: 42,
|
||||
bonus: 2000
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '赵六',
|
||||
score: 923,
|
||||
level: 'SS',
|
||||
avatar: '🥉',
|
||||
department: '财务部',
|
||||
completedTasks: 40,
|
||||
bonus: 1500
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '钱七',
|
||||
score: 897,
|
||||
level: 'S',
|
||||
avatar: '⭐',
|
||||
department: '人力资源部',
|
||||
completedTasks: 38,
|
||||
bonus: 1000
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '孙八',
|
||||
score: 876,
|
||||
level: 'S',
|
||||
avatar: '⭐',
|
||||
department: '销售部',
|
||||
completedTasks: 36,
|
||||
bonus: 1000
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '周九',
|
||||
score: 854,
|
||||
level: 'A',
|
||||
avatar: '🔥',
|
||||
department: '技术部',
|
||||
completedTasks: 34,
|
||||
bonus: 800
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '吴十',
|
||||
score: 832,
|
||||
level: 'A',
|
||||
avatar: '🔥',
|
||||
department: '市场部',
|
||||
completedTasks: 32,
|
||||
bonus: 800
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '郑十一',
|
||||
score: 810,
|
||||
level: 'B',
|
||||
avatar: '⚡',
|
||||
department: '财务部',
|
||||
completedTasks: 30,
|
||||
bonus: 500
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '王十二',
|
||||
score: 795,
|
||||
level: 'B',
|
||||
avatar: '⚡',
|
||||
department: '人力资源部',
|
||||
completedTasks: 28,
|
||||
bonus: 500
|
||||
}
|
||||
];
|
||||
|
||||
// 模拟数据 - 战队排名
|
||||
export const teamRankings = [
|
||||
{
|
||||
id: 1,
|
||||
name: '王者之师',
|
||||
totalScore: 4850,
|
||||
memberCount: 5,
|
||||
level: 'SSS',
|
||||
leader: '张三',
|
||||
completedTasks: 210,
|
||||
bonus: 15000
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '战无不胜',
|
||||
totalScore: 4680,
|
||||
memberCount: 5,
|
||||
level: 'SS',
|
||||
leader: '李四',
|
||||
completedTasks: 198,
|
||||
bonus: 10000
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '超越极限',
|
||||
totalScore: 4520,
|
||||
memberCount: 5,
|
||||
level: 'SS',
|
||||
leader: '王五',
|
||||
completedTasks: 185,
|
||||
bonus: 8000
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '精英战队',
|
||||
totalScore: 4280,
|
||||
memberCount: 5,
|
||||
level: 'S',
|
||||
leader: '赵六',
|
||||
completedTasks: 172,
|
||||
bonus: 6000
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '梦想之巅',
|
||||
totalScore: 4150,
|
||||
memberCount: 5,
|
||||
level: 'S',
|
||||
leader: '钱七',
|
||||
completedTasks: 165,
|
||||
bonus: 6000
|
||||
}
|
||||
];
|
||||
|
||||
// 奖金设置说明
|
||||
export const bonusRules = [
|
||||
{
|
||||
rank: '1-3',
|
||||
individualBonus: '5000元, 3000元, 2000元',
|
||||
teamBonus: '15000元, 10000元, 8000元',
|
||||
description: '顶尖表现，高额奖励'
|
||||
},
|
||||
{
|
||||
rank: '4-6',
|
||||
individualBonus: '1500元, 1000元, 1000元',
|
||||
teamBonus: '6000元, 6000元',
|
||||
description: '优秀表现，丰厚激励'
|
||||
},
|
||||
{
|
||||
rank: '7-10',
|
||||
individualBonus: '800元, 800元, 500元, 500元',
|
||||
teamBonus: '无',
|
||||
description: '良好表现，基础奖励'
|
||||
}
|
||||
];
|
||||
|
||||
// 系统用户（用于后台登录）
|
||||
export const systemUsers = [
|
||||
{
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
role: 'admin'
|
||||
},
|
||||
{
|
||||
username: 'manager',
|
||||
password: 'manager123',
|
||||
role: 'manager'
|
||||
}
|
||||
];
|
||||
|
||||
// 保存数据的方法（模拟本地存储）
|
||||
export const saveIndividualRankings = (data) => {
|
||||
// 这里只是模拟，实际项目中可以考虑使用localStorage或后端API
|
||||
console.log('保存个人排名数据:', data);
|
||||
// 在真实环境中，可以调用API保存数据
|
||||
};
|
||||
|
||||
export const saveTeamRankings = (data) => {
|
||||
// 这里只是模拟，实际项目中可以考虑使用localStorage或后端API
|
||||
console.log('保存战队排名数据:', data);
|
||||
// 在真实环境中，可以调用API保存数据
|
||||
};
|
||||
12
src/main.js
Normal file
12
src/main.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 使用路由
|
||||
app.use(router)
|
||||
|
||||
// 挂载应用
|
||||
app.mount('#app')
|
||||
39
src/router/index.js
Normal file
39
src/router/index.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import BattleRanking from '../views/BattleRanking.vue';
|
||||
import AdminPanel from '../views/AdminPanel.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'BattleRanking',
|
||||
component: BattleRanking,
|
||||
meta: { title: '百人大战排行榜' }
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'AdminPanel',
|
||||
component: AdminPanel,
|
||||
meta: { title: '管理员面板' }
|
||||
},
|
||||
{
|
||||
// 捕获所有未匹配的路由，重定向到首页
|
||||
path: '/:pathMatch(.*)*',
|
||||
redirect: '/'
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
});
|
||||
|
||||
// 全局前置守卫，设置页面标题
|
||||
router.beforeEach((to, from, next) => {
|
||||
// 设置文档标题
|
||||
if (to.meta.title) {
|
||||
document.title = to.meta.title;
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
150
src/style.css
Normal file
150
src/style.css
Normal file
@@ -0,0 +1,150 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 根元素样式 */
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
/* 自定义颜色变量 */
|
||||
--primary-color: #ff6b6b;
|
||||
--secondary-color: #ee5a24;
|
||||
--accent-color: #6c5ce7;
|
||||
--success-color: #28a745;
|
||||
--warning-color: #ffc107;
|
||||
--danger-color: #dc3545;
|
||||
--info-color: #17a2b8;
|
||||
--dark-color: #343a40;
|
||||
--light-color: #f8f9fa;
|
||||
--white-color: #ffffff;
|
||||
--text-color: #495057;
|
||||
--text-light: #6c757d;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 全局元素样式 */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--text-color);
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 按钮基础样式重置 */
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 输入框基础样式 */
|
||||
input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* 表格样式重置 */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a1a1a1;
|
||||
}
|
||||
|
||||
/* 工具类 */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mt-3 { margin-top: 1rem; }
|
||||
.mt-4 { margin-top: 1.5rem; }
|
||||
.mt-5 { margin-top: 3rem; }
|
||||
|
||||
.mb-1 { margin-bottom: 0.25rem; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.mb-3 { margin-bottom: 1rem; }
|
||||
.mb-4 { margin-bottom: 1.5rem; }
|
||||
.mb-5 { margin-bottom: 3rem; }
|
||||
|
||||
/* 响应式断点 */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
799
src/views/AdminPanel.vue
Normal file
799
src/views/AdminPanel.vue
Normal file
@@ -0,0 +1,799 @@
|
||||
<template>
|
||||
<div class="admin-panel">
|
||||
<!-- 登录界面 -->
|
||||
<div v-if="!isLoggedIn" class="login-container">
|
||||
<div class="login-form">
|
||||
<h2 class="login-title">🔐 管理员登录</h2>
|
||||
<div class="form-group">
|
||||
<label for="username">用户名:</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="loginForm.username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码:</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
<button @click="login" class="login-btn">登录</button>
|
||||
<div v-if="loginError" class="error-message">{{ loginError }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 管理界面 --><div v-else class="management-container">
|
||||
<!-- 顶部导航 --><div class="top-nav">
|
||||
<h1 class="nav-title">📊 百人大战管理系统</h1>
|
||||
<div class="nav-actions">
|
||||
<span class="welcome-text">欢迎您，{{ currentUser.username }}！</span>
|
||||
<button @click="logout" class="logout-btn">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能选项卡 --><div class="tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
@click="currentTab = tab.key"
|
||||
:class="['tab-btn', { active: currentTab === tab.key }]"
|
||||
>{{ tab.label }}</button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 --><div class="tab-content">
|
||||
<!-- 个人排名管理 --><div v-if="currentTab === 'individual'" class="rank-content">
|
||||
<div class="management-header">
|
||||
<h2>👤 个人排名管理</h2>
|
||||
<button @click="showAddIndividual = true" class="add-btn">➕ 添加人员</button>
|
||||
</div>
|
||||
<div class="rank-table">
|
||||
<div class="table-header">
|
||||
<span class="rank-col">排名</span>
|
||||
<span class="name-col">姓名</span>
|
||||
<span class="score-col">得分</span>
|
||||
<span class="level-col">等级</span>
|
||||
<span class="dept-col">部门</span>
|
||||
<span class="bonus-col">奖金</span>
|
||||
<span class="action-col">操作</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in localIndividualRankings"
|
||||
:key="item.id"
|
||||
class="table-row"
|
||||
:class="{ 'highlight': index === 0 }"
|
||||
>
|
||||
<span class="rank-col">{{ index + 1 }}</span>
|
||||
<span class="name-col">{{ item.name }}</span>
|
||||
<span class="score-col">{{ item.score }}</span>
|
||||
<span class="level-col" :class="`level-${item.level}`">{{ item.level }}</span>
|
||||
<span class="dept-col">{{ item.department }}</span>
|
||||
<span class="bonus-col">¥{{ item.bonus }}</span>
|
||||
<span class="action-col">
|
||||
<button @click="editIndividual(item)" class="edit-btn">✏️ 编辑</button>
|
||||
<button @click="deleteIndividual(item.id)" class="delete-btn">🗑️ 删除</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 战队排名管理 --><div v-if="currentTab === 'team'" class="rank-content">
|
||||
<div class="management-header">
|
||||
<h2>👥 战队排名管理</h2>
|
||||
<button @click="showAddTeam = true" class="add-btn">➕ 添加战队</button>
|
||||
</div>
|
||||
<div class="rank-table">
|
||||
<div class="table-header">
|
||||
<span class="rank-col">排名</span>
|
||||
<span class="name-col">战队名称</span>
|
||||
<span class="score-col">总分</span>
|
||||
<span class="member-col">人数</span>
|
||||
<span class="leader-col">队长</span>
|
||||
<span class="bonus-col">奖金</span>
|
||||
<span class="action-col">操作</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in localTeamRankings"
|
||||
:key="item.id"
|
||||
class="table-row"
|
||||
:class="{ 'highlight': index === 0 }"
|
||||
>
|
||||
<span class="rank-col">{{ index + 1 }}</span>
|
||||
<span class="name-col">{{ item.name }}</span>
|
||||
<span class="score-col">{{ item.totalScore }}</span>
|
||||
<span class="member-col">{{ item.memberCount }}人</span>
|
||||
<span class="leader-col">{{ item.leader }}</span>
|
||||
<span class="bonus-col">¥{{ item.bonus }}</span>
|
||||
<span class="action-col">
|
||||
<button @click="editTeam(item)" class="edit-btn">✏️ 编辑</button>
|
||||
<button @click="deleteTeam(item.id)" class="delete-btn">🗑️ 删除</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 --><div class="save-section">
|
||||
<button @click="saveData" class="save-btn">💾 保存所有数据</button>
|
||||
<button @click="goBack" class="back-btn">🏠 返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑个人对话框 --><div v-if="showAddIndividual || showEditIndividual" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<h3 class="modal-title">{{ editingIndividual ? '编辑人员' : '添加人员' }}</h3>
|
||||
<form @submit.prevent="saveIndividual">
|
||||
<div class="form-group">
|
||||
<label>姓名:</label>
|
||||
<input v-model="individualForm.name" type="text" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>得分:</label>
|
||||
<input v-model.number="individualForm.score" type="number" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>等级:</label>
|
||||
<select v-model="individualForm.level" class="form-input">
|
||||
<option value="SSS">SSS</option>
|
||||
<option value="SS">SS</option>
|
||||
<option value="S">S</option>
|
||||
<option value="A">A</option>
|
||||
<option value="B">B</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>部门:</label>
|
||||
<input v-model="individualForm.department" type="text" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>奖金:</label>
|
||||
<input v-model.number="individualForm.bonus" type="number" required class="form-input">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="confirm-btn">确定</button>
|
||||
<button type="button" @click="cancelEditIndividual" class="cancel-btn">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加/编辑战队对话框 --><div v-if="showAddTeam || showEditTeam" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<h3 class="modal-title">{{ editingTeam ? '编辑战队' : '添加战队' }}</h3>
|
||||
<form @submit.prevent="saveTeam">
|
||||
<div class="form-group">
|
||||
<label>战队名称:</label>
|
||||
<input v-model="teamForm.name" type="text" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>总分:</label>
|
||||
<input v-model.number="teamForm.totalScore" type="number" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>人数:</label>
|
||||
<input v-model.number="teamForm.memberCount" type="number" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>队长:</label>
|
||||
<input v-model="teamForm.leader" type="text" required class="form-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>奖金:</label>
|
||||
<input v-model.number="teamForm.bonus" type="number" required class="form-input">
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="confirm-btn">确定</button>
|
||||
<button type="button" @click="cancelEditTeam" class="cancel-btn">取消</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {
|
||||
individualRankings,
|
||||
teamRankings,
|
||||
systemUsers,
|
||||
saveIndividualRankings,
|
||||
saveTeamRankings
|
||||
} from '../data/mockData.js';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 登录相关
|
||||
const isLoggedIn = ref(false);
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
});
|
||||
const loginError = ref('');
|
||||
const currentUser = ref({});
|
||||
|
||||
// 标签页相关
|
||||
const tabs = [
|
||||
{ key: 'individual', label: '个人排名' },
|
||||
{ key: 'team', label: '战队排名' }
|
||||
];
|
||||
const currentTab = ref('individual');
|
||||
|
||||
// 本地数据副本
|
||||
const localIndividualRankings = ref([...individualRankings]);
|
||||
const localTeamRankings = ref([...teamRankings]);
|
||||
|
||||
// 对话框状态
|
||||
const showAddIndividual = ref(false);
|
||||
const showEditIndividual = ref(false);
|
||||
const editingIndividual = ref(null);
|
||||
const showAddTeam = ref(false);
|
||||
const showEditTeam = ref(false);
|
||||
const editingTeam = ref(null);
|
||||
|
||||
// 表单数据
|
||||
const individualForm = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
score: 0,
|
||||
level: 'A',
|
||||
avatar: '⭐',
|
||||
department: '',
|
||||
completedTasks: 0,
|
||||
bonus: 0
|
||||
});
|
||||
|
||||
const teamForm = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
totalScore: 0,
|
||||
memberCount: 5,
|
||||
level: 'A',
|
||||
leader: '',
|
||||
completedTasks: 0,
|
||||
bonus: 0
|
||||
});
|
||||
|
||||
// 登录
|
||||
const login = () => {
|
||||
const user = systemUsers.find(
|
||||
u => u.username === loginForm.username && u.password === loginForm.password
|
||||
);
|
||||
|
||||
if (user) {
|
||||
isLoggedIn.value = true;
|
||||
currentUser.value = user;
|
||||
loginError.value = '';
|
||||
} else {
|
||||
loginError.value = '用户名或密码错误';
|
||||
}
|
||||
};
|
||||
|
||||
// 登出
|
||||
const logout = () => {
|
||||
isLoggedIn.value = false;
|
||||
currentUser.value = {};
|
||||
loginForm.username = '';
|
||||
loginForm.password = '';
|
||||
};
|
||||
|
||||
// 返回首页
|
||||
const goBack = () => {
|
||||
router.push('/');
|
||||
};
|
||||
|
||||
// 保存数据
|
||||
const saveData = () => {
|
||||
// 按分数重新排序
|
||||
localIndividualRankings.value.sort((a, b) => b.score - a.score);
|
||||
localTeamRankings.value.sort((a, b) => b.totalScore - a.totalScore);
|
||||
|
||||
// 调用保存方法
|
||||
saveIndividualRankings(localIndividualRankings.value);
|
||||
saveTeamRankings(localTeamRankings.value);
|
||||
|
||||
alert('数据保存成功！');
|
||||
};
|
||||
|
||||
// 添加/编辑个人
|
||||
const editIndividual = (item) => {
|
||||
editingIndividual.value = item;
|
||||
Object.assign(individualForm, item);
|
||||
showEditIndividual.value = true;
|
||||
};
|
||||
|
||||
const saveIndividual = () => {
|
||||
if (editingIndividual.value) {
|
||||
// 编辑现有人员
|
||||
const index = localIndividualRankings.value.findIndex(
|
||||
i => i.id === individualForm.id
|
||||
);
|
||||
if (index !== -1) {
|
||||
localIndividualRankings.value[index] = { ...individualForm };
|
||||
}
|
||||
} else {
|
||||
// 添加新人员
|
||||
individualForm.id = Date.now();
|
||||
localIndividualRankings.value.push({ ...individualForm });
|
||||
}
|
||||
cancelEditIndividual();
|
||||
};
|
||||
|
||||
const cancelEditIndividual = () => {
|
||||
showAddIndividual.value = false;
|
||||
showEditIndividual.value = false;
|
||||
editingIndividual.value = null;
|
||||
resetIndividualForm();
|
||||
};
|
||||
|
||||
const resetIndividualForm = () => {
|
||||
individualForm.id = null;
|
||||
individualForm.name = '';
|
||||
individualForm.score = 0;
|
||||
individualForm.level = 'A';
|
||||
individualForm.avatar = '⭐';
|
||||
individualForm.department = '';
|
||||
individualForm.completedTasks = 0;
|
||||
individualForm.bonus = 0;
|
||||
};
|
||||
|
||||
// 删除个人
|
||||
const deleteIndividual = (id) => {
|
||||
if (confirm('确定要删除这个人员吗？')) {
|
||||
localIndividualRankings.value = localIndividualRankings.value.filter(
|
||||
item => item.id !== id
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加/编辑战队
|
||||
const editTeam = (item) => {
|
||||
editingTeam.value = item;
|
||||
Object.assign(teamForm, item);
|
||||
showEditTeam.value = true;
|
||||
};
|
||||
|
||||
const saveTeam = () => {
|
||||
if (editingTeam.value) {
|
||||
// 编辑现有战队
|
||||
const index = localTeamRankings.value.findIndex(
|
||||
i => i.id === teamForm.id
|
||||
);
|
||||
if (index !== -1) {
|
||||
localTeamRankings.value[index] = { ...teamForm };
|
||||
}
|
||||
} else {
|
||||
// 添加新战队
|
||||
teamForm.id = Date.now();
|
||||
localTeamRankings.value.push({ ...teamForm });
|
||||
}
|
||||
cancelEditTeam();
|
||||
};
|
||||
|
||||
const cancelEditTeam = () => {
|
||||
showAddTeam.value = false;
|
||||
showEditTeam.value = false;
|
||||
editingTeam.value = null;
|
||||
resetTeamForm();
|
||||
};
|
||||
|
||||
const resetTeamForm = () => {
|
||||
teamForm.id = null;
|
||||
teamForm.name = '';
|
||||
teamForm.totalScore = 0;
|
||||
teamForm.memberCount = 5;
|
||||
teamForm.level = 'A';
|
||||
teamForm.leader = '';
|
||||
teamForm.completedTasks = 0;
|
||||
teamForm.bonus = 0;
|
||||
};
|
||||
|
||||
// 删除战队
|
||||
const deleteTeam = (id) => {
|
||||
if (confirm('确定要删除这个战队吗？')) {
|
||||
localTeamRankings.value = localTeamRankings.value.filter(
|
||||
item => item.id !== id
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 登录界面 */
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: #667eea;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #e74c3c;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* 管理界面 */
|
||||
.management-container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
padding: 20px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 2px solid white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border-bottom: 3px solid #667eea;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
/* 管理内容 */
|
||||
.management-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.management-header h2 {
|
||||
color: #495057;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: linear-gradient(45deg, #28a745, #20c997);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.rank-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: linear-gradient(45deg, #6c757d, #adb5bd);
|
||||
color: white;
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 80px 80px 100px 80px 120px;
|
||||
padding: 15px 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.team-rankings .table-header {
|
||||
grid-template-columns: 60px 1fr 80px 60px 100px 80px 120px;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 80px 80px 100px 80px 120px;
|
||||
padding: 15px 10px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.team-rankings .table-row {
|
||||
grid-template-columns: 60px 1fr 80px 60px 100px 80px 120px;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.table-row.highlight {
|
||||
background: linear-gradient(135deg, #ffd32a, #ff7979);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 等级样式 */
|
||||
.level-SSS {
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-SS {
|
||||
color: #c0c0c0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-S {
|
||||
color: #cd7f32;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-A {
|
||||
color: #4caf50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-B {
|
||||
color: #2196f3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-col {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.edit-btn,
|
||||
.delete-btn {
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.edit-btn:hover,
|
||||
.delete-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 保存部分 */
|
||||
.save-section {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
background: #f8f9fa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.save-btn,
|
||||
.back-btn {
|
||||
padding: 12px 30px;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: linear-gradient(45deg, #17a2b8, #138496);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: linear-gradient(45deg, #6c757d, #5a6268);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.save-btn:hover,
|
||||
.back-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 模态框 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #667eea;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.confirm-btn,
|
||||
.cancel-btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: linear-gradient(45deg, #28a745, #20c997);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: linear-gradient(45deg, #6c757d, #5a6268);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.confirm-btn:hover,
|
||||
.cancel-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.top-nav {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.action-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal {
|
||||
min-width: auto;
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
495
src/views/BattleRanking.vue
Normal file
495
src/views/BattleRanking.vue
Normal file
@@ -0,0 +1,495 @@
|
||||
<template>
|
||||
<div class="battle-ranking">
|
||||
<!-- 第一部分：百日大战主题 -->
|
||||
<section class="theme-section">
|
||||
<div class="theme-container">
|
||||
<h1 class="main-title">🔥 百人大战排行榜 🔥</h1>
|
||||
<p class="subtitle">2025年度精英挑战赛 | 百日冲刺 · 争创佳绩</p>
|
||||
<div class="timer">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第二部分：战鼓动画 -->
|
||||
<section class="drums-section">
|
||||
<div class="drums-container">
|
||||
<!-- 战鼓动画在上面 -->
|
||||
<div class="drums-animation">
|
||||
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||
<div class="trophy">🏆</div>
|
||||
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||
<div class="drum" :class="{ beating: isBeating }">🥁</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第三部分：奖金设置（行布局） -->
|
||||
<section class="bonus-section">
|
||||
<h2>🎯 奖金设置</h2>
|
||||
<div class="bonus-rules-row">
|
||||
<div
|
||||
v-for="(rule, index) in bonusRules"
|
||||
:key="index"
|
||||
class="bonus-rule-item"
|
||||
>
|
||||
<div class="rule-header">
|
||||
<span class="rank-range">名次: {{ rule.rank }}</span>
|
||||
<span class="rule-desc">{{ rule.description }}</span>
|
||||
</div>
|
||||
<div class="rule-details">
|
||||
<p>🏅 个人奖励: {{ rule.individualBonus }}</p>
|
||||
<p>👥 团队奖励: {{ rule.teamBonus }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 第四部分：排名明细 -->
|
||||
<section class="rankings-section">
|
||||
<div class="rankings-container">
|
||||
<!-- 个人排名 -->
|
||||
<div class="individual-rankings">
|
||||
<h2 class="section-title">👤 个人排名</h2>
|
||||
<div class="rank-table">
|
||||
<div class="table-header">
|
||||
<span class="rank-col">排名</span>
|
||||
<span class="avatar-col">头像</span>
|
||||
<span class="name-col">姓名</span>
|
||||
<span class="score-col">得分</span>
|
||||
<span class="level-col">等级</span>
|
||||
<span class="dept-col">部门</span>
|
||||
<span class="bonus-col">奖金</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in individualRankings"
|
||||
:key="item.id"
|
||||
class="table-row"
|
||||
:class="{
|
||||
'top-three': index < 3,
|
||||
'highlight': index === 0
|
||||
}"
|
||||
>
|
||||
<span class="rank-col">{{ index + 1 }}</span>
|
||||
<span class="avatar-col">{{ item.avatar }}</span>
|
||||
<span class="name-col">{{ item.name }}</span>
|
||||
<span class="score-col">{{ item.score }}</span>
|
||||
<span class="level-col" :class="`level-${item.level}`">{{ item.level }}</span>
|
||||
<span class="dept-col">{{ item.department }}</span>
|
||||
<span class="bonus-col">¥{{ item.bonus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 战队排名 -->
|
||||
<div class="team-rankings">
|
||||
<h2 class="section-title">👥 战队排名</h2>
|
||||
<div class="rank-table">
|
||||
<div class="table-header">
|
||||
<span class="rank-col">排名</span>
|
||||
<span class="name-col">战队名称</span>
|
||||
<span class="score-col">总分</span>
|
||||
<span class="member-col">人数</span>
|
||||
<span class="leader-col">队长</span>
|
||||
<span class="bonus-col">奖金</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in teamRankings"
|
||||
:key="item.id"
|
||||
class="table-row"
|
||||
:class="{
|
||||
'top-three': index < 3,
|
||||
'highlight': index === 0
|
||||
}"
|
||||
>
|
||||
<span class="rank-col">{{ index + 1 }}</span>
|
||||
<span class="name-col">{{ item.name }}</span>
|
||||
<span class="score-col">{{ item.totalScore }}</span>
|
||||
<span class="member-col">{{ item.memberCount }}人</span>
|
||||
<span class="leader-col">{{ item.leader }}</span>
|
||||
<span class="bonus-col">¥{{ item.bonus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 浮动管理员入口 -->
|
||||
<div class="admin-entry-float">
|
||||
<button @click="goToAdmin" class="admin-btn-float">
|
||||
🔐 管理员入口
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {
|
||||
individualRankings,
|
||||
teamRankings,
|
||||
bonusRules
|
||||
} from '../data/mockData.js';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 倒计时状态
|
||||
const days = ref(0);
|
||||
const hours = ref(0);
|
||||
const minutes = ref(0);
|
||||
const seconds = ref(0);
|
||||
|
||||
// 战鼓动画状态
|
||||
const isBeating = ref(false);
|
||||
let beatInterval = null;
|
||||
let countdownInterval = null;
|
||||
|
||||
// 计算倒计时
|
||||
const calculateCountdown = () => {
|
||||
const endDate = new Date('2024-12-31T23:59:59').getTime();
|
||||
const now = new Date().getTime();
|
||||
const distance = endDate - now;
|
||||
|
||||
if (distance > 0) {
|
||||
days.value = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
hours.value = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
minutes.value = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
seconds.value = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
}
|
||||
};
|
||||
|
||||
// 战鼓动画效果
|
||||
const startDrumAnimation = () => {
|
||||
beatInterval = setInterval(() => {
|
||||
isBeating.value = !isBeating.value;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// 跳转到管理员页面
|
||||
const goToAdmin = () => {
|
||||
router.push('/admin');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
calculateCountdown();
|
||||
countdownInterval = setInterval(calculateCountdown, 1000);
|
||||
startDrumAnimation();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (countdownInterval) clearInterval(countdownInterval);
|
||||
if (beatInterval) clearInterval(beatInterval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.battle-ranking {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
/* 主题部分 */
|
||||
.theme-section {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 2.5rem;
|
||||
color: #d63031;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #636e72;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.timer {
|
||||
display: inline-block;
|
||||
background: linear-gradient(45deg, #6c5ce7, #a29bfe);
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
border-radius: 50px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.time-item {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* 战鼓部分 */
|
||||
.drums-section {
|
||||
margin: 20px 0 10px 0;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.drums-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.drums-animation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.drum {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.drum.beating {
|
||||
transform: scale(1.2) translateY(-10px);
|
||||
}
|
||||
|
||||
.trophy {
|
||||
animation: bounce 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from { transform: translateY(0); }
|
||||
to { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* 奖金设置部分（行布局） */
|
||||
.bonus-section {
|
||||
margin: 0 20px 15px 20px;
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #ffeaa7, #fab1a0);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.bonus-section h2 {
|
||||
color: #d63031;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.bonus-rules-row {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bonus-rule-item {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
border-left: 5px solid #e17055;
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
max-width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bonus-rule-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rule-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
color: #d63031;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.rule-details p {
|
||||
margin: 3px 0;
|
||||
font-size: 1rem;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 排名部分 */
|
||||
.rankings-section {
|
||||
margin: 0 20px 30px 20px;
|
||||
}
|
||||
|
||||
.rankings-container {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.individual-rankings,
|
||||
.team-rankings {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
min-width: 350px;
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #d63031;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.rank-table {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: linear-gradient(45deg, #6c5ce7, #a29bfe);
|
||||
color: white;
|
||||
display: grid;
|
||||
grid-template-columns: 60px 60px 1fr 80px 80px 1fr 80px;
|
||||
padding: 12px 10px;
|
||||
font-weight: bold;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.team-rankings .table-header {
|
||||
grid-template-columns: 60px 1fr 80px 60px 1fr 80px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 60px 1fr 80px 80px 1fr 80px;
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.team-rankings .table-row {
|
||||
grid-template-columns: 60px 1fr 80px 60px 1fr 80px;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.table-row.top-three {
|
||||
background-color: #fff3cd;
|
||||
}
|
||||
|
||||
.table-row.highlight {
|
||||
background: linear-gradient(135deg, #ffd32a, #ff7979);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.level-SSS {
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-SS {
|
||||
color: #c0c0c0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-S {
|
||||
color: #cd7f32;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-A {
|
||||
color: #4caf50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.level-B {
|
||||
color: #2196f3;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 浮动管理员入口 */
|
||||
.admin-entry-float {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.admin-btn-float {
|
||||
background: linear-gradient(45deg, #6c5ce7, #a29bfe);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
border-radius: 30px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.admin-btn-float:hover {
|
||||
transform: scale(1.1) translateY(-2px);
|
||||
box-shadow: 0 6px 30px rgba(108, 92, 231, 0.6);
|
||||
background: linear-gradient(45deg, #7f7fd5, #86a8e7);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.main-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.drums-container {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.rankings-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.individual-rankings,
|
||||
.team-rankings {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.table-header,
|
||||
.table-row {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
Reference in New Issue
Block a user