chore: 根据新的需求,加入虎狼之师,英雄榜条幅

This commit is contained in:
2025-11-25 10:30:18 +08:00
parent ede3e0d850
commit a8ff32f77d
8 changed files with 188 additions and 42 deletions

View File

@@ -19,7 +19,16 @@
<img src="/banner2.png" alt="右侧标题语" class="banner-image" />
</div>
<router-view />
<div class="main-content">
<router-view />
<!-- 页脚 -->
<footer class="game-footer">
<div class="footer-content">
<p>&copy; 2025-2026 聚上集团 | 云上企. 所有权利保留.</p>
</div>
</footer>
</div>
</div>
</template>
@@ -69,6 +78,39 @@
/* 不设置固定宽度让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精确定位 */
@media (width: 1920px) and (height: 1080px) {
.banner-left {
@@ -86,6 +128,17 @@
/* 移动设备响应式设计 */
@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-right {