<template>
  <div style="background: url('/images/Entertainment-bg.png'); background-size: cover; background-position: center;">
    <div class="entertainment-list">
      <lotteryList :type="type" />

      <pcFooter :notBg="true" />
    </div>
  </div>
</template>

<script setup>
import lotteryList from './components/lotteryList/index.vue';
import pcFooter from '@/businessComponents/pcFooter/index.vue'

const type = ref(2)

const route = useRoute()
if(route.query && route.query.type) {
  type.value = route.query.type
}
</script>

<style lang="scss" scoped>
$main-color: #f8b932;
$card-bg: #1e1e1e;
$border-color: #333;

.entertainment-list {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid transparent; // 替换为你原本的 border: 1px solid;
  box-sizing: border-box;
  padding: 20px 0;
}

/* ==================================
   核心网格布局 (CSS Grid 响应式)
   ================================== */
.game-grid {
  display: grid;
  /* 默认：大于 992px 时一行 3 个 */
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  /* 平板/小屏笔记本：一行 2 个 */
  @media screen and (max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* 手机端：一行 1 个 */
  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==================================
   卡片 UI 与悬浮交互
   ================================== */
.game-card {
  background-color: $card-bg;
  border-radius: 12px;
  border: 1px solid $border-color;
  overflow: hidden;
  cursor: pointer;
  transition: .2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  &:hover {
    transform: translateY(-6px);
    border-color: $main-color;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);

    .image-wrapper .game-cover {
      transform: scale(1.05); /* 图片轻微放大 */
    }

    .image-wrapper .hover-overlay {
      opacity: 1; /* 遮罩层与按钮渐显 */
    }
    
    .game-info .game-name {
      color: $main-color;
    }
  }

  .image-wrapper {
    position: relative;
    width: 100%;
    /* 控制图片的宽高比，这里以 16:9 为例，你可以根据实际图片比例调整 */
    aspect-ratio: 2 / 1; 
    overflow: hidden;

    .game-cover {
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease;
      display: block;
    }

    .hover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6); /* 黑色半透明遮罩 */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;

      .play-btn {
        font-weight: bold;
        font-size: 15px;
        padding: 12px 24px;
        background-color: $main-color;
        border-color: $main-color;
        color: #000;
        
        &:hover {
          opacity: 0.9;
        }
      }
    }
  }

  .game-info {
    padding: 16px;
    text-align: center;
    border-top: 1px solid $border-color;
    background: #141414;

    .game-name {
      font-size: 16px;
      font-weight: bold;
      color: #e5e5e5;
      letter-spacing: 1px;
      transition: color 0.3s ease;
    }
  }
}

.mr-1 {
  margin-right: 4px;
}
</style>