vs100/src/App.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>&copy; 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创建凸起感 */
  text-shadow: 
    -1px -1px 0 rgba(255, 255, 255, 0.3),  /* 高光 - 左上 */
    1px 1px 0 rgba(0, 0, 0, 0.5),           /* 阴影 - 右下 */
    0 0 5px rgba(17, 17, 17, 0.5);         /* 光晕 */
  /* 背景和内边距 */
  padding: 8px 16px;
  border-radius: 4px;
  
  /* 添加轻微的3D效果 */
  transform: perspective(1000px) rotateX(0deg);
  transition: all 0.3s ease;
}

/* 鼠标悬停时增强3D效果 */
.footer-content:hover {
  transform: perspective(1000px) rotateX(2deg) translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 
    -1px -1px 0 rgba(255, 255, 255, 0.4),
    1px 1px 0 rgba(0, 0, 0, 0.6),
    0 0 8px rgba(15, 15, 15, 0.7);
}

/* 针对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 */
  }
  
  /* 移动设备上的页脚雕刻效果适配 */
  .footer-content {
    font-size: 12px;
    padding: 6px 12px;
    text-shadow: 
      -1px -1px 0 rgba(255, 255, 255, 0.2),
      1px 1px 0 rgba(0, 0, 0, 0.4),
      0 0 3px rgba(255, 215, 0, 0.4);
  }
  
  .footer-content:hover {
    transform: none; /* 移动设备上禁用悬停效果 */
    box-shadow: none;
  }
}
</style>