<template>
  <div class="chip-container">
    <div class="chip-content">
      <div class="title">
        <img src="@/assets/img/home/chip/chip-title.png" alt="" />
      </div>
      <div class="container">
        <div class="grid">
          <div class="grid-item-red">
            <img src="@/assets/img/home/chip/red-chip-01.png" alt="" />
          </div>
          <div class="grid-item-red">
            <img src="@/assets/img/home/chip/red-chip-02.png" alt="" />
          </div>
          <div class="grid-item-red">
            <img src="@/assets/img/home/chip/red-chip-03.png" alt="" />
          </div>
          <div class="grid-item-red">
            <img src="@/assets/img/home/chip/red-chip-04.png" alt="" />
          </div>
        </div>

        <div class="grid">
          <div class="grid-item-yellow">
            <img src="@/assets/img/home/chip/yellow-chip-01.png" alt="" />
          </div>
          <div class="grid-item-yellow">
            <img src="@/assets/img/home/chip/yellow-chip-02.png" alt="" />
          </div>
          <div class="grid-item-yellow">
            <img src="@/assets/img/home/chip/yellow-chip-03.png" alt="" />
          </div>
          <div class="grid-item-yellow">
            <img src="@/assets/img/home/chip/yellow-chip-04.png" alt="" />
          </div>
        </div>

        <div class="grid">
          <div class="grid-item-blue">
            <img src="@/assets/img/home/chip/blue-chip-01.png" alt="" />
          </div>
          <div class="grid-item-blue">
            <img src="@/assets/img/home/chip/blue-chip-02.png" alt="" />
          </div>
          <div class="grid-item-blue">
            <img src="@/assets/img/home/chip/blue-chip-03.png" alt="" />
          </div>
          <div class="grid-item-blue">
            <img src="@/assets/img/home/chip/blue-chip-04.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="chip-item-bg">
      <img src="@/assets/img/home/chip/chip-bg.png" alt="" />
    </div>
    <div class="chip-left">
      <img src="@/assets/img/home/chip/chip-left.png" alt="" />
    </div>
    <div class="chip-right">
      <img src="@/assets/img/home/chip/chip-right.png" alt="" />
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.chip-container {
  position: relative;
  .chip-item-bg {
    position: absolute;
    z-index: -1;
    left: 150px;
    top: 100px;
    width: 1637px;
    height: 609px;
    img {
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  .chip-left {
    position: absolute;
    z-index: -1;
    left: 0px;
    top: 60px;
  }
  .chip-right {
    position: absolute;
    z-index: -1;
    right: 40px;
    top: -66px;
  }
  .chip-content {
    width: 1440px;
    margin: 0 auto;
    position: relative;
    // margin-top: 102px;

    .title {
      padding-top: 78px;
      display: flex;
      padding-bottom: 30px;
      justify-content: center;
    }
    .container {
      // position: ;
      width: 1240px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 298px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-gap: 40px;
      grid-row-gap: 40px;
      width: 370px;
    }
    .grid-item-red,
    .grid-item-yellow,
    .grid-item-blue {
      cursor: pointer;
      height: 200px;
      transition: transform 0.3s; // 添加过渡效果
      position: relative; // 使 z-index 生效
      z-index: 1; // 设置 z-index
    }

    .grid-item-red:hover,
    .grid-item-yellow:hover,
    .grid-item-blue:hover {
      transform: translateY(-12px) scale(1.05); // 鼠标悬停时上移 10px
    }
  }
}
</style>
