chore: 根据新的需求,加入虎狼之师,英雄榜条幅
This commit is contained in:
55
src/App.vue
55
src/App.vue
@@ -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>© 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 {
|
||||
|
||||
Reference in New Issue
Block a user