tmp-upload #4
1
.gitignore
vendored
@@ -22,3 +22,4 @@ dist-ssr
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
vs100.zip
|
||||||
285
data/config.json
@@ -1,15 +1,15 @@
|
|||||||
{
|
{
|
||||||
"individualRankings": [
|
"individualRankings": [
|
||||||
{
|
{
|
||||||
"id": 1763703508858,
|
"id": 8,
|
||||||
"name": "毕艺超",
|
"name": "杨鑫鹏",
|
||||||
"score": 208600,
|
"score": 208600,
|
||||||
"level": "SSS",
|
"level": "SSS",
|
||||||
"avatar": "🎯",
|
"avatar": "/uploads/1763972044872.jpg",
|
||||||
"department": "销售部",
|
"department": "销售部",
|
||||||
"completedTasks": 0,
|
"completedTasks": 32,
|
||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "七战区"
|
"team": "一战区"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1763600399414,
|
"id": 1763600399414,
|
||||||
@@ -44,6 +44,50 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "七战区"
|
"team": "七战区"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": 1763606483656,
|
||||||
|
"name": "陈梦蝶",
|
||||||
|
"score": 149000,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "🥈",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 0,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "三战区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "刘贵博",
|
||||||
|
"score": 149000,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "👑",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 48,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "一战区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "赵政行",
|
||||||
|
"score": 149000,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "👑",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 42,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "一战区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1763703454998,
|
||||||
|
"name": "汪思柔",
|
||||||
|
"score": 119200,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "🎯",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 0,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "七战区"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": 1763703551860,
|
"id": 1763703551860,
|
||||||
"name": "刘正艺",
|
"name": "刘正艺",
|
||||||
@@ -67,15 +111,48 @@
|
|||||||
"team": "七战区"
|
"team": "七战区"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1763703454998,
|
"id": 2,
|
||||||
"name": "汪思柔",
|
"name": "张政",
|
||||||
"score": 89400,
|
"score": 89400,
|
||||||
"level": "SSS",
|
"level": "SSS",
|
||||||
"avatar": "🎯",
|
"avatar": "👑",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 45,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "一战区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1763702288912,
|
||||||
|
"name": "仝维茜",
|
||||||
|
"score": 89400,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "🥉",
|
||||||
"department": "销售部",
|
"department": "销售部",
|
||||||
"completedTasks": 0,
|
"completedTasks": 0,
|
||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "七战区"
|
"team": "四战区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1763702407090,
|
||||||
|
"name": "李明娣",
|
||||||
|
"score": 89400,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "⭐",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 0,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "五战区"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1763702548562,
|
||||||
|
"name": "高博祎",
|
||||||
|
"score": 89400,
|
||||||
|
"level": "SSS",
|
||||||
|
"avatar": "🔥",
|
||||||
|
"department": "销售部",
|
||||||
|
"completedTasks": 0,
|
||||||
|
"bonus": 0,
|
||||||
|
"team": "六战区"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1763606463583,
|
"id": 1763606463583,
|
||||||
@@ -121,17 +198,6 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "三战区"
|
"team": "三战区"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 1763606483656,
|
|
||||||
"name": "陈梦蝶",
|
|
||||||
"score": 59600,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "🥈",
|
|
||||||
"department": "销售部",
|
|
||||||
"completedTasks": 0,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "三战区"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 1763702177212,
|
"id": 1763702177212,
|
||||||
"name": "东知",
|
"name": "东知",
|
||||||
@@ -177,37 +243,26 @@
|
|||||||
"team": "四战区"
|
"team": "四战区"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 12,
|
||||||
"name": "刘贵博",
|
"name": "孙珊珊",
|
||||||
"score": 0,
|
"score": 26820,
|
||||||
"level": "SSS",
|
"level": "SSS",
|
||||||
"avatar": "👑",
|
"avatar": "🥇",
|
||||||
"department": "销售部",
|
"department": "刘奔腾",
|
||||||
"completedTasks": 48,
|
"completedTasks": 24,
|
||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "一战区"
|
"team": "二战区"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 2,
|
"id": 1763703508858,
|
||||||
"name": "张政",
|
"name": "毕艺超",
|
||||||
"score": 0,
|
"score": 0,
|
||||||
"level": "SSS",
|
"level": "SSS",
|
||||||
"avatar": "👑",
|
"avatar": "/uploads/1763860106271.jpg",
|
||||||
"department": "销售部",
|
"department": "销售部",
|
||||||
"completedTasks": 45,
|
"completedTasks": 0,
|
||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "一战区"
|
"team": "七战区"
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": 3,
|
|
||||||
"name": "赵政行",
|
|
||||||
"score": 0,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "👑",
|
|
||||||
"department": "销售部",
|
|
||||||
"completedTasks": 42,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "一战区"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 5,
|
"id": 5,
|
||||||
@@ -231,17 +286,6 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "一战区"
|
"team": "一战区"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 8,
|
|
||||||
"name": "杨鑫鹏",
|
|
||||||
"score": 0,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "👑",
|
|
||||||
"department": "销售部",
|
|
||||||
"completedTasks": 32,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "一战区"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 9,
|
"id": 9,
|
||||||
"name": "曾焱平",
|
"name": "曾焱平",
|
||||||
@@ -275,17 +319,6 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "二战区"
|
"team": "二战区"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 12,
|
|
||||||
"name": "孙珊珊",
|
|
||||||
"score": 0,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "🥇",
|
|
||||||
"department": "刘奔腾",
|
|
||||||
"completedTasks": 24,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "二战区"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 13,
|
"id": 13,
|
||||||
"name": "刘奔腾",
|
"name": "刘奔腾",
|
||||||
@@ -473,17 +506,6 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "四战区"
|
"team": "四战区"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 1763702288912,
|
|
||||||
"name": "仝维茜",
|
|
||||||
"score": 0,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "🥉",
|
|
||||||
"department": "销售部",
|
|
||||||
"completedTasks": 0,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "四战区"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 1763702306246,
|
"id": 1763702306246,
|
||||||
"name": "吴玉洁",
|
"name": "吴玉洁",
|
||||||
@@ -528,17 +550,6 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "五战区"
|
"team": "五战区"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 1763702407090,
|
|
||||||
"name": "李明娣",
|
|
||||||
"score": 0,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "⭐",
|
|
||||||
"department": "销售部",
|
|
||||||
"completedTasks": 0,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "五战区"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 1763702423195,
|
"id": 1763702423195,
|
||||||
"name": "陈亚军",
|
"name": "陈亚军",
|
||||||
@@ -638,17 +649,6 @@
|
|||||||
"bonus": 0,
|
"bonus": 0,
|
||||||
"team": "六战区"
|
"team": "六战区"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 1763702548562,
|
|
||||||
"name": "高博祎",
|
|
||||||
"score": 0,
|
|
||||||
"level": "SSS",
|
|
||||||
"avatar": "🔥",
|
|
||||||
"department": "销售部",
|
|
||||||
"completedTasks": 0,
|
|
||||||
"bonus": 0,
|
|
||||||
"team": "六战区"
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 1763702585045,
|
"id": 1763702585045,
|
||||||
"name": "孙丽霞",
|
"name": "孙丽霞",
|
||||||
@@ -762,74 +762,74 @@
|
|||||||
],
|
],
|
||||||
"teamRankings": [
|
"teamRankings": [
|
||||||
{
|
{
|
||||||
"id": 7,
|
"id": 1,
|
||||||
"name": "七战区",
|
"name": "一战区",
|
||||||
"totalScore": 417200,
|
"totalScore": 844400,
|
||||||
"memberCount": 8,
|
"memberCount": 11,
|
||||||
"level": "A",
|
"level": "SSS",
|
||||||
"leader": "曹恒",
|
"leader": "王将军",
|
||||||
"completedTasks": 148,
|
"completedTasks": 210,
|
||||||
"bonus": 0
|
"bonus": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 1,
|
"id": 7,
|
||||||
"name": "一战区",
|
"name": "七战区",
|
||||||
"totalScore": 248400,
|
"totalScore": 447000,
|
||||||
"memberCount": 11,
|
"memberCount": 8,
|
||||||
"level": "SSS",
|
"level": "A",
|
||||||
"leader": "王松根",
|
"leader": "曹将军",
|
||||||
"completedTasks": 210,
|
"completedTasks": 148,
|
||||||
"bonus": 0
|
"bonus": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 4,
|
"id": 4,
|
||||||
"name": "四战区",
|
"name": "四战区",
|
||||||
"totalScore": 238400,
|
"totalScore": 327800,
|
||||||
"memberCount": 10,
|
"memberCount": 10,
|
||||||
"level": "S",
|
"level": "S",
|
||||||
"leader": "熊春杰",
|
"leader": "熊将军",
|
||||||
"completedTasks": 172,
|
"completedTasks": 172,
|
||||||
"bonus": 0
|
"bonus": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 3,
|
"id": 3,
|
||||||
"name": "三战区",
|
"name": "三战区",
|
||||||
"totalScore": 188800,
|
"totalScore": 278200,
|
||||||
"memberCount": 9,
|
"memberCount": 9,
|
||||||
"level": "SS",
|
"level": "SS",
|
||||||
"leader": "李杰",
|
"leader": "李将军",
|
||||||
"completedTasks": 185,
|
"completedTasks": 185,
|
||||||
"bonus": 0
|
"bonus": 0
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": 2,
|
|
||||||
"name": "二战区",
|
|
||||||
"totalScore": 59600,
|
|
||||||
"memberCount": 12,
|
|
||||||
"level": "SS",
|
|
||||||
"leader": "贺鸿飞",
|
|
||||||
"completedTasks": 198,
|
|
||||||
"bonus": 0
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"id": 6,
|
"id": 6,
|
||||||
"name": "六战区",
|
"name": "六战区",
|
||||||
"totalScore": 59600,
|
"totalScore": 149000,
|
||||||
"memberCount": 10,
|
"memberCount": 10,
|
||||||
"level": "A",
|
"level": "A",
|
||||||
"leader": "刘家秀",
|
"leader": "刘将军",
|
||||||
"completedTasks": 155,
|
"completedTasks": 155,
|
||||||
"bonus": 0
|
"bonus": 0
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": 5,
|
"id": 5,
|
||||||
"name": "五战区",
|
"name": "五战区",
|
||||||
"totalScore": 0,
|
"totalScore": 89400,
|
||||||
"memberCount": 9,
|
"memberCount": 9,
|
||||||
"level": "S",
|
"level": "S",
|
||||||
"leader": "周顺凡",
|
"leader": "周将军",
|
||||||
"completedTasks": 165,
|
"completedTasks": 165,
|
||||||
"bonus": 0
|
"bonus": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "二战区",
|
||||||
|
"totalScore": 86420,
|
||||||
|
"memberCount": 12,
|
||||||
|
"level": "SS",
|
||||||
|
"leader": "贺将军",
|
||||||
|
"completedTasks": 198,
|
||||||
|
"bonus": 0
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"bonusRules": [
|
"bonusRules": [
|
||||||
@@ -892,13 +892,19 @@
|
|||||||
"department": "left",
|
"department": "left",
|
||||||
"bonus": "left"
|
"bonus": "left"
|
||||||
},
|
},
|
||||||
"defaultDisplayRows": 7,
|
"defaultDisplayRows": 0,
|
||||||
"filterZeroScore": true
|
"filterZeroScore": true
|
||||||
},
|
},
|
||||||
"crown": {
|
"crown": {
|
||||||
"size": null,
|
"size": 72,
|
||||||
"animationEnabled": true
|
"animationEnabled": true
|
||||||
},
|
},
|
||||||
|
"crownPosition": {
|
||||||
|
"top": -80,
|
||||||
|
"left": null,
|
||||||
|
"right": null,
|
||||||
|
"bottom": null
|
||||||
|
},
|
||||||
"team": {
|
"team": {
|
||||||
"showMemberCount": false,
|
"showMemberCount": false,
|
||||||
"showLeader": true,
|
"showLeader": true,
|
||||||
@@ -926,10 +932,19 @@
|
|||||||
"filterZeroScore": false
|
"filterZeroScore": false
|
||||||
},
|
},
|
||||||
"championLogos": {
|
"championLogos": {
|
||||||
"teamChampion": "",
|
"teamChampion": "/uploads/1763979489455.png",
|
||||||
"individualChampion": "",
|
"individualChampion": "",
|
||||||
"teamChampionSize": 120,
|
"teamChampionSize": 121,
|
||||||
"individualChampionSize": 120
|
"individualChampionSize": 120,
|
||||||
|
"teamChampionType": "photo",
|
||||||
|
"teamChampionPhotoWidth": 400,
|
||||||
|
"teamChampionPhotoHeight": 242
|
||||||
|
},
|
||||||
|
"subtitleImage": {
|
||||||
|
"src": "/completed_performance.png",
|
||||||
|
"width": 200,
|
||||||
|
"height": 60,
|
||||||
|
"alt": "总战绩"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"battleEndTime": {
|
"battleEndTime": {
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 508 KiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 508 KiB |
|
Before Width: | Height: | Size: 625 KiB After Width: | Height: | Size: 430 KiB |
BIN
public/completed_performance.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
public/individual-propagation.png
Normal file
|
After Width: | Height: | Size: 88 KiB |
BIN
public/team-propagation.png
Normal file
|
After Width: | Height: | Size: 111 KiB |
55
src/App.vue
@@ -19,7 +19,16 @@
|
|||||||
<img src="/banner2.png" alt="右侧标题语" class="banner-image" />
|
<img src="/banner2.png" alt="右侧标题语" class="banner-image" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<router-view />
|
<div class="main-content">
|
||||||
|
<router-view />
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="game-footer">
|
||||||
|
<div class="footer-content">
|
||||||
|
<p>© 2025-2026 聚上集团 | 云上企. 所有权利保留.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -69,6 +78,39 @@
|
|||||||
/* 不设置固定宽度,让logo保持原始尺寸 */
|
/* 不设置固定宽度,让logo保持原始尺寸 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 主容器 */
|
||||||
|
.main-content {
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景覆盖层,确保文本可读性 */
|
||||||
|
.main-content::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: transparent;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-footer {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--dark-bg);
|
||||||
|
color: var(--gold-secondary);
|
||||||
|
padding: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
font-size: 14px;
|
||||||
|
text-shadow: 1px 1px 10px black;
|
||||||
|
}
|
||||||
|
|
||||||
/* 针对1920x1080分辨率的banner精确定位 */
|
/* 针对1920x1080分辨率的banner精确定位 */
|
||||||
@media (width: 1920px) and (height: 1080px) {
|
@media (width: 1920px) and (height: 1080px) {
|
||||||
.banner-left {
|
.banner-left {
|
||||||
@@ -86,6 +128,17 @@
|
|||||||
|
|
||||||
/* 移动设备响应式设计 */
|
/* 移动设备响应式设计 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
/* 1. 背景图片全屏显示并固定 */
|
||||||
|
.main-content {
|
||||||
|
padding: 0 !important;
|
||||||
|
margin-top: 50px;
|
||||||
|
background-image: url('/battle-background.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */
|
/* 移动设备上隐藏左右标题语,避免遮挡主要内容 */
|
||||||
.banner-left,
|
.banner-left,
|
||||||
.banner-right {
|
.banner-right {
|
||||||
|
|||||||
@@ -716,4 +716,4 @@ table {
|
|||||||
.text-gold:hover {
|
.text-gold:hover {
|
||||||
color: var(--gold-secondary);
|
color: var(--gold-secondary);
|
||||||
text-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
|
text-shadow: 0 0 10px rgba(255, 193, 7, 0.7);
|
||||||
}
|
}
|
||||||
@@ -554,6 +554,51 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 总战绩标题图像配置 -->
|
||||||
|
<div class="config-section">
|
||||||
|
<h3 class="text-gold">📊 总战绩标题图像配置</h3>
|
||||||
|
<div class="subtitle-image-section">
|
||||||
|
<div class="logo-preview">
|
||||||
|
<div v-if="localDisplayConfig.subtitleImage?.src" class="logo-image-container">
|
||||||
|
<img :src="localDisplayConfig.subtitleImage.src" alt="总战绩标题图像" class="logo-preview-image">
|
||||||
|
</div>
|
||||||
|
<div v-else class="logo-placeholder">
|
||||||
|
<span>未上传图像</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upload-controls">
|
||||||
|
<input type="file" accept="image/*" @change="(e) => handleSubtitleImageUpload(e)"
|
||||||
|
class="logo-input">
|
||||||
|
<button v-if="localDisplayConfig.subtitleImage.src" @click="clearSubtitleImage()"
|
||||||
|
class="btn-clear">
|
||||||
|
清除图像
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="size-controls">
|
||||||
|
<div class="size-control">
|
||||||
|
<label class="text-gold">图像宽度:</label>
|
||||||
|
<input type="number" v-model.number="localDisplayConfig.subtitleImage.width" min="1" max="1000"
|
||||||
|
class="width-input" placeholder="输入宽度(像素)">
|
||||||
|
<span class="size-unit">px</span>
|
||||||
|
</div>
|
||||||
|
<div class="size-control">
|
||||||
|
<label class="text-gold">图像高度:</label>
|
||||||
|
<input type="number" v-model.number="localDisplayConfig.subtitleImage.height" min="1" max="1000"
|
||||||
|
class="width-input" placeholder="输入高度(像素)">
|
||||||
|
<span class="size-unit">px</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="config-item">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<span class="text-gold">替代文本:</span>
|
||||||
|
<input type="text" v-model="localDisplayConfig.subtitleImage.alt"
|
||||||
|
class="text-input" placeholder="输入图像替代文本">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p class="upload-hint">支持JPG、PNG、GIF格式,建议尺寸200x60像素,文件大小不超过2MB</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 皇冠配置 -->
|
<!-- 皇冠配置 -->
|
||||||
<div class="config-section">
|
<div class="config-section">
|
||||||
<h3 class="text-gold">👑 英雄冠军皇冠配置</h3>
|
<h3 class="text-gold">👑 英雄冠军皇冠配置</h3>
|
||||||
@@ -566,6 +611,38 @@
|
|||||||
<span class="size-unit">px</span>
|
<span class="size-unit">px</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="config-item">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<span>皇冠位置 - 上(px):</span>
|
||||||
|
<input type="number" v-model.number="localDisplayConfig.crownPosition.top"
|
||||||
|
class="width-input" placeholder="默认-100">
|
||||||
|
<span class="size-unit">px</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="config-item">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<span>皇冠位置 - 下(px):</span>
|
||||||
|
<input type="number" v-model.number="localDisplayConfig.crownPosition.bottom"
|
||||||
|
class="width-input" placeholder="默认不设置">
|
||||||
|
<span class="size-unit">px</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="config-item">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<span>皇冠位置 - 左(px):</span>
|
||||||
|
<input type="number" v-model.number="localDisplayConfig.crownPosition.left"
|
||||||
|
class="width-input" placeholder="默认居中">
|
||||||
|
<span class="size-unit">px</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="config-item">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<span>皇冠位置 - 右(px):</span>
|
||||||
|
<input type="number" v-model.number="localDisplayConfig.crownPosition.right"
|
||||||
|
class="width-input" placeholder="默认不设置">
|
||||||
|
<span class="size-unit">px</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<div class="config-item">
|
<div class="config-item">
|
||||||
<label class="checkbox-label">
|
<label class="checkbox-label">
|
||||||
<input type="checkbox" v-model="localDisplayConfig.crown.animationEnabled">
|
<input type="checkbox" v-model="localDisplayConfig.crown.animationEnabled">
|
||||||
@@ -573,6 +650,7 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<p class="upload-hint">皇冠大小默认为英雄冠军头像的1.2倍,建议设置为合适的大小以确保美观</p>
|
<p class="upload-hint">皇冠大小默认为英雄冠军头像的1.2倍,建议设置为合适的大小以确保美观</p>
|
||||||
|
<p class="upload-hint">皇冠位置默认值为顶部-100px且水平居中;负值向上/左偏移,正值向下/右偏移</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -926,6 +1004,12 @@ onMounted(async () => {
|
|||||||
localTeamRankings.value = [...teamRankings];
|
localTeamRankings.value = [...teamRankings];
|
||||||
localBonusRules.value = [...bonusRules];
|
localBonusRules.value = [...bonusRules];
|
||||||
localDisplayConfig.value = { ...displayConfig };
|
localDisplayConfig.value = { ...displayConfig };
|
||||||
|
// 确保皇冠位置配置存在
|
||||||
|
if (!localDisplayConfig.value.crownPosition) {
|
||||||
|
localDisplayConfig.value.crownPosition = { top: '-100px' };
|
||||||
|
} else if (!localDisplayConfig.value.crownPosition.top) {
|
||||||
|
localDisplayConfig.value.crownPosition.top = '-100px';
|
||||||
|
}
|
||||||
localBattleEndTime.value = { ...battleEndTime };
|
localBattleEndTime.value = { ...battleEndTime };
|
||||||
localDrumConfig.value = { ...drumConfig };
|
localDrumConfig.value = { ...drumConfig };
|
||||||
|
|
||||||
@@ -996,6 +1080,54 @@ const clearChampionLogo = (type) => {
|
|||||||
championLogos.value[type] = '';
|
championLogos.value[type] = '';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 处理总战绩标题图像上传
|
||||||
|
const handleSubtitleImageUpload = async (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('file', file);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/upload', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
// 确保subtitleImage对象存在
|
||||||
|
if (!localDisplayConfig.value.subtitleImage) {
|
||||||
|
localDisplayConfig.value.subtitleImage = {};
|
||||||
|
}
|
||||||
|
// 清除旧的文件(如果是上传的文件)
|
||||||
|
if (localDisplayConfig.value.subtitleImage.src && localDisplayConfig.value.subtitleImage.src.startsWith('/uploads/')) {
|
||||||
|
const oldFilename = localDisplayConfig.value.subtitleImage.src.split('/').pop();
|
||||||
|
fetch(`/api/upload/${oldFilename}`, { method: 'DELETE' })
|
||||||
|
.catch(error => console.error('删除旧文件失败:', error));
|
||||||
|
}
|
||||||
|
// 设置新的图像路径
|
||||||
|
localDisplayConfig.value.subtitleImage.src = data.filePath;
|
||||||
|
} else {
|
||||||
|
console.error('上传失败:', response.status);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('上传文件时出错:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 清除总战绩标题图像
|
||||||
|
const clearSubtitleImage = () => {
|
||||||
|
if (localDisplayConfig.value.subtitleImage?.src && localDisplayConfig.value.subtitleImage.src.startsWith('/uploads/')) {
|
||||||
|
const filename = localDisplayConfig.value.subtitleImage.src.split('/').pop();
|
||||||
|
fetch(`/api/upload/${filename}`, { method: 'DELETE' })
|
||||||
|
.catch(error => console.error('删除文件失败:', error));
|
||||||
|
}
|
||||||
|
// 重置为默认图像
|
||||||
|
localDisplayConfig.value.subtitleImage = localDisplayConfig.value.subtitleImage || {};
|
||||||
|
localDisplayConfig.value.subtitleImage.src = '/completed_performance.png';
|
||||||
|
};
|
||||||
|
|
||||||
// 刷新数据
|
// 刷新数据
|
||||||
const handleRefreshData = () => {
|
const handleRefreshData = () => {
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="battle-ranking">
|
<div>
|
||||||
<!-- 第一部分:百日大战主题 - 使用banner0.png图片 -->
|
<!-- 第一部分:百日大战主题 - 使用banner0.png图片 -->
|
||||||
<section class="theme-section card-game">
|
<section class="theme-section card-game">
|
||||||
<div class="theme-container">
|
<div class="theme-container">
|
||||||
@@ -44,10 +44,12 @@
|
|||||||
<!-- 第四部分:总战绩 -->
|
<!-- 第四部分:总战绩 -->
|
||||||
<section class="total-score-section card-game">
|
<section class="total-score-section card-game">
|
||||||
<div class="total-score-container">
|
<div class="total-score-container">
|
||||||
<h2 class="game-subtitle">总战绩</h2>
|
<div class="game-subtitle total-score-total-title">
|
||||||
|
<img src="/completed_performance.png" alt="总战绩" class="total-score-total-image">
|
||||||
|
</div>
|
||||||
<div class="total-score-content">
|
<div class="total-score-content">
|
||||||
<div class="total-score-item">
|
<div class="total-score-item">
|
||||||
<span class="score-value">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }}</span>
|
<span class="score-value total-score-total-value">{{ localDisplayConfig.team?.totalScoreColumn?.displayStyle === 'amount' ? '¥' : '' }}{{ totalTeamScore }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -59,6 +61,10 @@
|
|||||||
|
|
||||||
<!-- 战区排名 -->
|
<!-- 战区排名 -->
|
||||||
<div class="team-rankings">
|
<div class="team-rankings">
|
||||||
|
<!-- 战区排名宣传语 -->
|
||||||
|
<div class="team-rankings-propagation">
|
||||||
|
<img src="/team-propagation.png" alt="虎狼之师" class="team-rankings-propagation-image">
|
||||||
|
</div>
|
||||||
<!-- 战区冠军 -->
|
<!-- 战区冠军 -->
|
||||||
<div class="team-champion">
|
<div class="team-champion">
|
||||||
<div class="team-logo" :class="{ 'photo-container': localDisplayConfig.championLogos?.teamChampionType === 'photo' }">
|
<div class="team-logo" :class="{ 'photo-container': localDisplayConfig.championLogos?.teamChampionType === 'photo' }">
|
||||||
@@ -111,9 +117,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="individual-rankings">
|
<div class="individual-rankings">
|
||||||
|
<!-- 英雄排名宣传语 -->
|
||||||
|
<div class="individual-rankings-propagation">
|
||||||
|
<img src="/individual-propagation.png" alt="虎狼之师" class="individual-rankings-propagation-image">
|
||||||
|
</div>
|
||||||
<!-- 英雄冠军 -->
|
<!-- 英雄冠军 -->
|
||||||
<div class="individual-champion">
|
<div class="individual-champion">
|
||||||
<div class="hero-ranking-text left-hero-ranking-text">英雄榜</div>
|
|
||||||
<div class="champion-content">
|
<div class="champion-content">
|
||||||
<div class="individual-avatar champion-container">
|
<div class="individual-avatar champion-container">
|
||||||
<div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
|
<div class="crown-animation" :class="{'crown-animation-run': localDisplayConfig.crown?.animationEnabled}" v-if="filteredIndividualRankings.length > 0" :style="{
|
||||||
@@ -138,7 +147,6 @@
|
|||||||
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
|
{{ filteredIndividualRankings[0]?.name || '暂无冠军' }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-ranking-text right-hero-ranking-text">英雄榜</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 英雄排名 -->
|
<!-- 英雄排名 -->
|
||||||
<div class="individual-rankings-container">
|
<div class="individual-rankings-container">
|
||||||
@@ -226,6 +234,18 @@ function createDefaultDisplayConfig() {
|
|||||||
individualChampion: '',
|
individualChampion: '',
|
||||||
individualChampionSize: 60
|
individualChampionSize: 60
|
||||||
},
|
},
|
||||||
|
crownPosition: {
|
||||||
|
top: -100, // 皇冠位置的top值,默认-100px
|
||||||
|
left: null, // 皇冠位置的left值,默认null(使用居中)
|
||||||
|
right: null, // 皇冠位置的right值,默认null
|
||||||
|
bottom: null // 皇冠位置的bottom值,默认null
|
||||||
|
},
|
||||||
|
subtitleImage: {
|
||||||
|
src: '/completed_performance.png',
|
||||||
|
width: 200,
|
||||||
|
height: 60,
|
||||||
|
alt: '总战绩'
|
||||||
|
},
|
||||||
individual: {
|
individual: {
|
||||||
scoreColumn: {
|
scoreColumn: {
|
||||||
displayName: '业绩',
|
displayName: '业绩',
|
||||||
@@ -239,7 +259,7 @@ function createDefaultDisplayConfig() {
|
|||||||
showBonus: false,
|
showBonus: false,
|
||||||
showTeam: true, // 默认显示战区列
|
showTeam: true, // 默认显示战区列
|
||||||
showAvatar: false, // 默认不显示头像列
|
showAvatar: false, // 默认不显示头像列
|
||||||
defaultDisplayRows: 10, // 默认显示10行
|
defaultDisplayRows: 0, // 默认显示所有行
|
||||||
filterZeroScore: false, // 默认不过滤业绩为0的记录
|
filterZeroScore: false, // 默认不过滤业绩为0的记录
|
||||||
columnWidths: {
|
columnWidths: {
|
||||||
team: 120 // 默认战区列宽
|
team: 120 // 默认战区列宽
|
||||||
@@ -421,30 +441,73 @@ onBeforeMount(async () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 定义每行默认高度
|
// 定义英雄排名表中每行默认高度
|
||||||
const tableRowHeight = 50;
|
const tableIndividualTopThreeHeight = 3 * 47.5; // 前三名高度px
|
||||||
|
const tableIndividualRowHeight = 34.5; // 其他行高度px
|
||||||
|
const tableIndividualReserveHeight = 10; // 保留空间高度px
|
||||||
|
|
||||||
// 更新CSS变量,将默认显示行数传递给样式
|
// 更新CSS变量,将默认显示行数传递给样式
|
||||||
watch(
|
watch(
|
||||||
() => localDisplayConfig.value?.individual?.defaultDisplayRows,
|
() => localDisplayConfig.value?.individual?.defaultDisplayRows,
|
||||||
(newRows) => {
|
(newValue) => {
|
||||||
document.documentElement.style.setProperty('--default-display-rows', newRows);
|
if (newValue && newValue > 0) {
|
||||||
|
const otherRowsHeight = (newValue - 3) * tableIndividualRowHeight;
|
||||||
|
const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
|
||||||
|
document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
|
||||||
|
document.documentElement.style.setProperty('--individual-overflow-y', 'auto');
|
||||||
|
document.documentElement.style.setProperty('--individual-overflow-x', 'auto');
|
||||||
|
document.documentElement.style.setProperty('--individual-scroll-lock', '');
|
||||||
|
} else {
|
||||||
|
// 根据实际数据条数计算高度
|
||||||
|
const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
|
||||||
|
const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
|
||||||
|
document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
|
||||||
|
document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
|
||||||
|
document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
|
||||||
|
document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 当英雄排名数据变化时,重新计算高度(如果当前是显示所有行模式)
|
||||||
|
watch(
|
||||||
|
() => filteredIndividualRankings.value.length,
|
||||||
|
() => {
|
||||||
|
console.log('filteredIndividualRankings.value.length', filteredIndividualRankings.value.length);
|
||||||
|
const displayRows = localDisplayConfig.value?.individual?.defaultDisplayRows;
|
||||||
|
if (!displayRows || displayRows === 0) {
|
||||||
|
// 根据实际数据条数计算高度
|
||||||
|
const otherRowsHeight = (filteredIndividualRankings.value.length - 3) * tableIndividualRowHeight;
|
||||||
|
const actualHeight = tableIndividualTopThreeHeight + otherRowsHeight + tableIndividualReserveHeight;
|
||||||
|
document.documentElement.style.setProperty('--individual-default-height', `${actualHeight}px`);
|
||||||
|
document.documentElement.style.setProperty('--individual-overflow-y', 'hidden');
|
||||||
|
document.documentElement.style.setProperty('--individual-overflow-x', 'hidden');
|
||||||
|
document.documentElement.style.setProperty('--individual-scroll-lock', 'lock');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 定义战区排名表中每行默认高度
|
||||||
|
const tableTeamTopThreeHeight = 3 * 48; // 前三名高度px
|
||||||
|
const tableTeamRowHeight = 48; // 其他行高度px
|
||||||
|
const tableTeamReserveHeight = 20; // 保留空间高度px
|
||||||
|
|
||||||
// 添加监听以同步战区排名默认显示行数配置到CSS变量
|
// 添加监听以同步战区排名默认显示行数配置到CSS变量
|
||||||
watch(
|
watch(
|
||||||
() => localDisplayConfig.value?.team?.defaultDisplayRows,
|
() => localDisplayConfig.value?.team?.defaultDisplayRows,
|
||||||
(newValue) => {
|
(newValue) => {
|
||||||
if (newValue && newValue > 0) {
|
if (newValue && newValue > 0) {
|
||||||
document.documentElement.style.setProperty('--team-default-height', `calc(${tableRowHeight}px * ${newValue})`);
|
const otherRowsHeight = (newValue - 3) * tableTeamRowHeight;
|
||||||
|
const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
|
||||||
|
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
|
||||||
document.documentElement.style.setProperty('--team-overflow-y', 'auto');
|
document.documentElement.style.setProperty('--team-overflow-y', 'auto');
|
||||||
document.documentElement.style.setProperty('--team-overflow-x', 'auto');
|
document.documentElement.style.setProperty('--team-overflow-x', 'auto');
|
||||||
document.documentElement.style.setProperty('--team-scroll-lock', '');
|
document.documentElement.style.setProperty('--team-scroll-lock', '');
|
||||||
} else {
|
} else {
|
||||||
// 根据实际数据条数计算高度,每行tableRowHeight,加上一些额外空间(20px)
|
// 根据实际数据条数计算高度
|
||||||
const actualHeight = teamRankings.value.length * tableRowHeight + 20;
|
const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
|
||||||
|
const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
|
||||||
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
|
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
|
||||||
document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
|
document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
|
||||||
document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
|
document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
|
||||||
@@ -460,8 +523,9 @@ watch(
|
|||||||
() => {
|
() => {
|
||||||
const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
|
const displayRows = localDisplayConfig.value?.team?.defaultDisplayRows;
|
||||||
if (!displayRows || displayRows === 0) {
|
if (!displayRows || displayRows === 0) {
|
||||||
// 根据实际数据条数计算高度,每行tableRowHeight,加上一些额外空间(20px)
|
// 根据实际数据条数计算高度
|
||||||
const actualHeight = teamRankings.value.length * tableRowHeight + 20;
|
const otherRowsHeight = (teamRankings.value.length - 3) * tableTeamRowHeight;
|
||||||
|
const actualHeight = tableTeamTopThreeHeight + otherRowsHeight + tableTeamReserveHeight;
|
||||||
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
|
document.documentElement.style.setProperty('--team-default-height', `${actualHeight}px`);
|
||||||
document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
|
document.documentElement.style.setProperty('--team-overflow-y', 'hidden');
|
||||||
document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
|
document.documentElement.style.setProperty('--team-overflow-x', 'hidden');
|
||||||
@@ -470,6 +534,61 @@ watch(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 监听冠军字体大小配置变化,更新CSS变量
|
||||||
|
watch(
|
||||||
|
() => localDisplayConfig.value?.championLogos,
|
||||||
|
(newConfig) => {
|
||||||
|
if (newConfig) {
|
||||||
|
// 设置战区冠军字体大小
|
||||||
|
if (newConfig.teamChampionFontSize) {
|
||||||
|
document.documentElement.style.setProperty('--team-champion-font-size', newConfig.teamChampionFontSize + 'rem');
|
||||||
|
}
|
||||||
|
// 设置英雄冠军字体大小
|
||||||
|
if (newConfig.individualChampionFontSize) {
|
||||||
|
document.documentElement.style.setProperty('--individual-champion-font-size', newConfig.individualChampionFontSize + 'rem');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听皇冠位置配置变化,更新皇冠位置
|
||||||
|
watch(
|
||||||
|
() => localDisplayConfig.value?.crownPosition,
|
||||||
|
(newConfig) => {
|
||||||
|
if (newConfig) {
|
||||||
|
// 更新top值
|
||||||
|
if (newConfig.top !== null && newConfig.top !== undefined) {
|
||||||
|
document.documentElement.style.setProperty('--crown-top', newConfig.top + 'px');
|
||||||
|
} else {
|
||||||
|
document.documentElement.style.removeProperty('--crown-top');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新left值
|
||||||
|
if (newConfig.left !== null && newConfig.left !== undefined) {
|
||||||
|
document.documentElement.style.setProperty('--crown-left', newConfig.left + 'px');
|
||||||
|
} else {
|
||||||
|
document.documentElement.style.removeProperty('--crown-left');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新right值
|
||||||
|
if (newConfig.right !== null && newConfig.right !== undefined) {
|
||||||
|
document.documentElement.style.setProperty('--crown-right', newConfig.right + 'px');
|
||||||
|
} else {
|
||||||
|
document.documentElement.style.removeProperty('--crown-right');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新bottom值
|
||||||
|
if (newConfig.bottom !== null && newConfig.bottom !== undefined) {
|
||||||
|
document.documentElement.style.setProperty('--crown-bottom', newConfig.bottom + 'px');
|
||||||
|
} else {
|
||||||
|
document.documentElement.style.removeProperty('--crown-bottom');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
// 确保奖金规则有默认值
|
// 确保奖金规则有默认值
|
||||||
const displayBonusRules = computed(() => {
|
const displayBonusRules = computed(() => {
|
||||||
return Array.isArray(bonusRules) && bonusRules.length > 0
|
return Array.isArray(bonusRules) && bonusRules.length > 0
|
||||||
@@ -1063,15 +1182,13 @@ onUnmounted(() => {
|
|||||||
/* 皇冠动画效果 */
|
/* 皇冠动画效果 */
|
||||||
.crown-animation {
|
.crown-animation {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: var(--crown-left, 50%);
|
||||||
transform: translateX(-50%);
|
right: var(--crown-right, auto);
|
||||||
|
top: var(--crown-top, -100px);
|
||||||
|
bottom: var(--crown-bottom, auto);
|
||||||
|
transform: var(--crown-left, translateX(-50%));
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
|
text-shadow: 0 0 10px var(--gold-primary), 0 0 20px var(--gold-secondary);
|
||||||
<<<<<<< HEAD
|
|
||||||
font-size: 3rem; /* 改大:从2rem改为3rem */
|
|
||||||
=======
|
|
||||||
|
|
||||||
>>>>>>> 5a48653be089c47d923681c42164b2d4fb60c341
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.crown-animation-run {
|
.crown-animation-run {
|
||||||
@@ -1138,11 +1255,16 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.champion-name {
|
.champion-name {
|
||||||
font-size: 1.1rem;
|
font-size: var(--individual-champion-font-size, 1.8rem);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: gold;
|
color: gold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 战区冠军名称特殊样式 */
|
||||||
|
.team-champion .champion-name {
|
||||||
|
font-size: var(--team-champion-font-size, 1.8rem);
|
||||||
|
}
|
||||||
|
|
||||||
/* 基础样式 */
|
/* 基础样式 */
|
||||||
:root {
|
:root {
|
||||||
--gold-primary: #ffd700;
|
--gold-primary: #ffd700;
|
||||||
@@ -1180,7 +1302,7 @@ onUnmounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
gap: 5px;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1201,41 +1323,19 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
<<<<<<< HEAD
|
|
||||||
/** 皇冠动画(还原原始大小) */
|
|
||||||
.crown-animation {
|
|
||||||
top: -60px !important; /* 移动端向上偏移,避免遮挡 */
|
|
||||||
font-size: 6rem !important; /* 保持与桌面端一致的大小 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 核心修改:移动端统一冠军区高度 */
|
.total-score-total-image {
|
||||||
.team-champion,
|
width: 320px;
|
||||||
.individual-champion {
|
|
||||||
height: 120px !important;
|
|
||||||
padding: 10px 10px 5px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端名字样式优化 */
|
.team-rankings-propagation-image {
|
||||||
.champion-name {
|
width: 320px;
|
||||||
font-size: 1.1rem !important;
|
|
||||||
margin-top: 3px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端奖杯还原原始大小 */
|
.individual-rankings-propagation-image {
|
||||||
.trophy {
|
width: 320px;
|
||||||
font-size: 2.5rem !important; /* 确保移动端也是原始大小 */
|
|
||||||
filter: drop-shadow(0 0 10px var(--gold-primary)) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 其他原有移动端样式保持不变... */
|
|
||||||
}
|
|
||||||
=======
|
|
||||||
/** 皇冠动画 */
|
|
||||||
.crown-animation {
|
|
||||||
top: -120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
>>>>>>> 5a48653be089c47d923681c42164b2d4fb60c341
|
|
||||||
/* 隐藏倒计时模块 */
|
/* 隐藏倒计时模块 */
|
||||||
.timer-float {
|
.timer-float {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
@@ -1268,6 +1368,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
.bonus-awards-container {
|
.bonus-awards-container {
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
scale: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timer-float {
|
.timer-float {
|
||||||
@@ -1340,23 +1441,7 @@ onUnmounted(() => {
|
|||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 主容器 */
|
|
||||||
.battle-ranking {
|
|
||||||
min-height: 100vh;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 背景覆盖层,确保文本可读性 */
|
|
||||||
.battle-ranking::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: transparent;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主题部分 */
|
/* 主题部分 */
|
||||||
.theme-section {
|
.theme-section {
|
||||||
@@ -1690,8 +1775,6 @@ onUnmounted(() => {
|
|||||||
.rank-table {
|
.rank-table {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 480px;
|
|
||||||
max-height: 480px;
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 0.8rem;
|
margin-top: 0.8rem;
|
||||||
@@ -1852,15 +1935,32 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.score-value {
|
.score-value {
|
||||||
font-size: 1.5rem;
|
font-size: calc(var(--individual-champion-font-size, 2.4rem) * 2);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--gold-primary);
|
color: #fff2c4;
|
||||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
|
text-shadow:
|
||||||
|
0 0 10px rgba(255, 215, 0, 0.5),
|
||||||
|
0 0 20px rgba(255, 215, 0, 0.3),
|
||||||
|
1px 1px 2px rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-score-total-value {
|
||||||
|
margin-top: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 战区冠军分数特殊样式 */
|
||||||
|
.team-champion .score-value {
|
||||||
|
font-size: calc(var(--team-champion-font-size, 1.8rem) * 2);
|
||||||
|
text-shadow:
|
||||||
|
0 0 15px rgba(255, 215, 0, 0.7),
|
||||||
|
0 0 30px rgba(255, 215, 0, 0.4),
|
||||||
|
2px 2px 3px rgba(0, 0, 0, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 照片容器样式 */
|
/* 照片容器样式 */
|
||||||
.team-logo.photo-container {
|
.team-logo.photo-container {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
margin-top: -40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.individual-champion {
|
.individual-champion {
|
||||||
@@ -1872,95 +1972,25 @@ onUnmounted(() => {
|
|||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-ranking-text {
|
.team-rankings-propagation {
|
||||||
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;
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.individual-rankings-propagation {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
||||||
|
.total-score-total-title {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
/* 战区排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
.team-rankings-container .rank-table {
|
.team-rankings-container .rank-table {
|
||||||
@@ -1989,23 +2019,47 @@ onUnmounted(() => {
|
|||||||
overflow-x: visible !important;
|
overflow-x: visible !important;
|
||||||
white-space: normal !important;
|
white-space: normal !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.individual-rankings-propagation {
|
||||||
|
margin-top: -40px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
.individual-rankings {
|
.individual-rankings {
|
||||||
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
margin-top: 60px; /* 增加排名列表的顶部间距 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 英雄排名容器设置 - 允许垂直滚动,设置默认高度显示多行 */
|
/* 英雄排名容器设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
.individual-rankings-container .rank-table {
|
.individual-rankings-container .rank-table {
|
||||||
overflow-y: auto;
|
|
||||||
overflow-x: auto; /* 允许水平滚动 */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
/* 基于默认显示行数计算合适的高度 */
|
min-height: auto;
|
||||||
height: calc(60px * var(--default-display-rows, 10));
|
/* 如果配置了具体了默认显示行数,则设置高度和滚动,否则显示所有行 */
|
||||||
/* 隐藏滚动条但保留滚动功能 */
|
height: var(--individual-default-height, auto) !important;
|
||||||
|
overflow-y: var(--individual-overflow-y, hidden);
|
||||||
|
overflow-x: var(--individual-overflow-x, auto);
|
||||||
|
/* 隐藏滚动条 */
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 当设置了滚动锁定时,禁止所有滚动 */
|
||||||
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
height: var(--individual-default-height, auto) !important;
|
||||||
|
min-width: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保表格内容在锁定模式下正确显示 */
|
||||||
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-header,
|
||||||
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table .table-row {
|
||||||
|
min-width: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
overflow-x: visible !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 移动端非前三名字体放大 */
|
/* 移动端非前三名字体放大 */
|
||||||
.team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
|
.team-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
|
||||||
.individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
|
.individual-rankings-container .table-row:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
|
||||||
@@ -2069,17 +2123,6 @@ onUnmounted(() => {
|
|||||||
height: 0; /* 隐藏水平滚动条 */
|
height: 0; /* 隐藏水平滚动条 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1. 背景图片全屏显示并固定 */
|
|
||||||
.battle-ranking {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin-top: 50px;
|
|
||||||
background-image: url('/battle-background.jpg');
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
background-attachment: fixed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 移除原有卡片背景,让内容在背景图上显示 */
|
/* 移除原有卡片背景,让内容在背景图上显示 */
|
||||||
.card-game {
|
.card-game {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -2225,18 +2268,30 @@ onUnmounted(() => {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 移动端英雄排名列表滚动设置 */
|
/* 英雄排名列表设置 - 根据配置决定显示行数和滚动行为 */
|
||||||
.individual-rankings-container .rank-table {
|
.individual-rankings-container .rank-table {
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
/* 禁止横向滚动 */
|
/* 禁止横向滚动 */
|
||||||
overflow-y: auto !important;
|
height: var(--individual-default-height, auto) !important;
|
||||||
/* 允许纵向滚动 */
|
overflow-y: var(--individual-overflow-y, auto) !important;
|
||||||
/* 确保英雄排名列表隐藏滚动条 */
|
/* 确保英雄排名列表隐藏滚动条 */
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 当设置了滚动锁定时,禁止所有滚动 */
|
||||||
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container {
|
||||||
|
overflow: visible !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[style*="--individual-scroll-lock: lock"] .individual-rankings-container .rank-table {
|
||||||
|
overflow: hidden !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.individual-rankings-container .rank-table::-webkit-scrollbar {
|
.individual-rankings-container .rank-table::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
BIN
uploads/1763860106271.jpg
Normal file
|
After Width: | Height: | Size: 115 KiB |
BIN
uploads/1763956859312.jpg
Normal file
|
After Width: | Height: | Size: 135 KiB |
BIN
uploads/1763972044872.jpg
Normal file
|
After Width: | Height: | Size: 208 KiB |
BIN
uploads/1763979489455.png
Normal file
|
After Width: | Height: | Size: 128 KiB |