177 lines
4.1 KiB
Vue
177 lines
4.1 KiB
Vue
<script setup>
|
||
// 主应用组件
|
||
</script>
|
||
|
||
<template>
|
||
<div class="content-container">
|
||
<!-- 左侧标题语图片 - 相对于content-container定位 -->
|
||
<div class="banner-left">
|
||
<img src="/banner1.png" alt="左侧标题语" class="banner-image" />
|
||
</div>
|
||
|
||
<!-- Logo图片，放置在左上角 - 相对于content-container定位 -->
|
||
<div class="logo-container">
|
||
<img src="/logo.png" alt="Logo" class="app-logo" />
|
||
</div>
|
||
|
||
<!-- 右侧标题语图片 - 相对于content-container定位 -->
|
||
<div class="banner-right">
|
||
<img src="/banner2.png" alt="右侧标题语" class="banner-image" />
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<router-view />
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="game-footer">
|
||
<div class="footer-content">
|
||
<p>© 2025-2026 聚上集团 | 云上企. 所有权利保留.</p>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 左侧标题语样式 - 相对于content-container定位 */
|
||
.banner-left {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 680px;
|
||
transform: translateY(-50%);
|
||
z-index: 900; /* 低于logo但高于其他内容 */
|
||
max-width: 200px; /* 设置最大宽度 */
|
||
}
|
||
|
||
/* 右侧标题语样式 - 相对于content-container定位 */
|
||
.banner-right {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 680px;
|
||
transform: translateY(-50%);
|
||
z-index: 900; /* 低于logo但高于其他内容 */
|
||
max-width: 200px; /* 设置最大宽度 */
|
||
}
|
||
|
||
/* 标题语图片样式 */
|
||
.banner-image {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 4px; /* 添加圆角效果 */
|
||
}
|
||
|
||
/* Logo容器样式 - 相对于content-container定位 */
|
||
.logo-container {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
z-index: 1000; /* 确保logo在最上层 */
|
||
max-width: calc(100% - 20px); /* 确保不超出容器边界 */
|
||
}
|
||
|
||
/* Logo图片样式 - 不设置固定宽度 */
|
||
.app-logo {
|
||
width: 360px; /* 设置固定宽度为360px */
|
||
height: auto; /* 保持宽高比 */
|
||
border-radius: 8px; /* 添加圆角效果 */
|
||
max-width: 100%; /* 确保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精确定位 */
|
||
@media (width: 1920px) and (height: 1080px) {
|
||
.banner-left {
|
||
left: 120px !important;
|
||
top: 240px !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
|
||
.banner-right {
|
||
right: 120px !important;
|
||
top: 200px !important;
|
||
transform: translateY(0) !important;
|
||
}
|
||
}
|
||
|
||
/* 移动设备响应式设计 */
|
||
@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 {
|
||
scale: 0.4;
|
||
}
|
||
|
||
.banner-left {
|
||
margin-left: -28px;
|
||
top: 60px;
|
||
}
|
||
|
||
.banner-right{
|
||
margin-right: -28px;
|
||
top: 36px;
|
||
}
|
||
|
||
/* 移动设备上的logo样式 - 保持相对于content-container定位 */
|
||
.logo-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: auto;
|
||
text-align: center;
|
||
background: transparent; /* 设置为透明背景 */
|
||
padding: 5px;
|
||
border-radius: 0 0 8px 8px;
|
||
}
|
||
|
||
/* 移动设备上设置logo尺寸 */
|
||
.app-logo {
|
||
width: 200px; /* 移动设备上设置固定宽度为200px */
|
||
}
|
||
}
|
||
</style>
|