<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"></div>
          <div class="grid-item-red"></div>
          <div class="grid-item-red"></div>
          <div class="grid-item-red"></div>
        </div>

        <div class="grid">
          <div class="grid-item-yellow"></div>
          <div class="grid-item-yellow"></div>
          <div class="grid-item-yellow"></div>
          <div class="grid-item-yellow"></div>
        </div>

        <div class="grid">
          <div class="grid-item-blue"></div>
          <div class="grid-item-blue"></div>
          <div class="grid-item-blue"></div>
          <div class="grid-item-blue"></div>
        </div>
      </div>
    </div>
    <div class="chip-itm-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>
let ma;
</script>

<style lang="scss" scoped>
.chip-container {
  position: relative;
  .chip-itm-bg {
    position: absolute;
    z-index: -1;
    left: 150px;
    top: 115px;
    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: 85%;
      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: 10px;
      width: 33.33%;
      margin-bottom: 20px;
    }
    .grid-item-red {
      background: url("@/assets/img/home/chip/red-bg.png") no-repeat;
      height: 200px;
    }
    .grid-item-yellow {
      background: url("@/assets/img/home/chip/yellow-bg.png") no-repeat;
      height: 200px;
    }
    .grid-item-blue {
      background: url("@/assets/img/home/chip/blue-bg.png") no-repeat;
      height: 200px;
    }
  }
}
</style>
