yz-enamel-exhibition/packages/pc/src/views/Home/components/Chapter1/index.scss

.chapter1 {
  position: relative;
  height: 1851px;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1741px;
    height: 180px;
    transform: translateX(-50%);
    background: url("@/assets/images/line-min.png") no-repeat center / contain;
  }
  .chapter {
    position: absolute;
    top: 213px;
    left: 50%;
    width: 147px;
    height: 167px;
    transform: translateX(-50%);
  }
  &__title {
    position: absolute;
    top: 553px;
    left: 162px;
    width: 299px;
    height: 324px;
  }
  &__bg1 {
    position: absolute;
    top: 501px;
    right: 0;
    width: 1268px;
    height: 670px;
  }
  &__bg2 {
    position: absolute;
    top: 1035px;
    left: 0;
    width: 326px;
    height: 1199px;
  }
  &__context {
    position: absolute;
    top: 584px;
    left: 510px;
    width: 559px;
    line-height: 51px;
    z-index: 1;
  }
  &-list {
    position: absolute;
    top: 1335px;
    right: 135px;
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(4, 303px);
    grid-template-rows: repeat(2, 192px);
    grid-template-areas:
      "a . . ."
      "a . . .";
    z-index: 1;

    > div {
      position: relative;

      img {
        cursor: pointer;
      }
      &:first-child {
        grid-area: a;
        background: url("./images/11-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: -15px;
          left: -100px;
          width: 377px;
          height: 467px;
        }
      }
      &:nth-child(2) {
        background: url("./images/12-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: -15px;
          left: 27px;
          width: 224px;
          height: 191px;
        }
      }
      &:nth-child(3) {
        background: url("./images/13-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: -30px;
          left: 30px;
          width: 228px;
          height: 211px;
        }
      }
      &:nth-child(4) {
        background: url("./images/14-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: -45px;
          left: 51px;
          width: 201px;
          height: 229px;
        }
      }
      &:nth-child(5) {
        background: url("./images/15-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: -17px;
          left: 50%;
          width: 76px;
          height: 217px;
          transform: translateX(-50%);
        }
      }
      &:nth-child(6) {
        background: url("./images/16-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: 11px;
          left: 50%;
          width: 166px;
          height: 171px;
          transform: translateX(-50%);
        }
      }
      &:nth-child(7) {
        background: url("./images/17-min.png") no-repeat center / contain;

        img {
          position: absolute;
          top: 41px;
          left: 50%;
          width: 199px;
          height: 130px;
          transform: translateX(-50%);
        }
      }
    }
  }

  .more-btn {
    position: absolute;
    right: 140px;
    bottom: 19px;
  }
}