<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>
    
    <router-view />
  </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保持原始尺寸 */
}

/* 针对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) {
  /* 移动设备上隐藏左右标题语，避免遮挡主要内容 */
  .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>
