yz-enamel-exhibition/packages/pc/src/views/Chapter2/index.scss

.chapter2 {
  &__head,
  &__foot {
    width: 100%;
    display: block;
  }
  &-main {
    position: relative;
    height: calc(160px + 300px + 1130px);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 951px;
      height: 52px;
      background: #c8cfd4;
    }
  }
  &__img1 {
    position: absolute;
    top: 125px;
    left: 179px;
    width: 728px;
    height: 319px;
  }
  &__content1 {
    position: absolute;
    top: 146px;
    left: 965px;
    width: 326px;
  }
  &-card {
    position: absolute;
    top: 121px;
    right: 139px;
    width: 400px;
    cursor: pointer;

    img {
      display: block;
      width: 326px;
      height: 594px;
    }
    &__title {
      position: relative;
      margin-top: 20px;
      text-indent: 0;

      span {
        font-size: 34px;
      }
      &::before {
        content: "";
        position: absolute;
        top: 10px;
        left: -42px;
        width: 33px;
        height: 33px;
        background: url("@/assets/images/14-min.png") no-repeat center / contain;
      }
    }
    &__content {
      margin-top: 10px;
      font-size: 20px;
      color: #7d7d7d;
      line-height: 34px;
    }
  }
  &-card2 {
    position: absolute;
    top: 577px;
    left: 207px;
    display: flex;
    align-items: flex-end;
    gap: 90px;
    text-indent: 0;
    cursor: pointer;

    img {
      width: 456px;
      height: 372px;
    }
    &__title {
      position: relative;

      span {
        font-size: 34px;
      }
      &::before {
        content: "";
        position: absolute;
        top: 10px;
        left: -42px;
        width: 33px;
        height: 33px;
        background: url("@/assets/images/14-min.png") no-repeat center / contain;
      }
    }
    &__content {
      font-size: 20px;
      color: #7d7d7d;
      line-height: 34px;
    }
  }
  &-list {
    position: absolute;
    top: 1134px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 40px;
    transform: translateX(-50%);

    > div {
      width: 331px;
      height: 229px;
      background: url("@/assets/images/20-min.png") no-repeat center / contain;
    }
  }
}