caimei-authentic-ross-static/css/product-rollaction.scss

@media screen and (min-width: 768px) {
  .main {
    .about {
      margin-top: 100px;
      .container {
        height: 592px;
        position: relative;
      }
      .item {
        position: absolute;
        width: 286px;
        height: 286px;
        background-color: pink;

        &:nth-child(3) {
          position: relative;
          width: 592px;
          height: 592px;
          margin: 0 auto;
        }

        &:nth-child(1),
        &:nth-child(2) {
          left: 0;
        }

        &:nth-child(1),
        &:nth-child(4) {
          top: 0;
        }

        &:nth-child(4),
        &:nth-child(5) {
          right: 0;
        }

        &:nth-child(2),
        &:nth-child(5) {
          bottom: 0;
        }

        .cover {
          width: 100%;
          height: 100%;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        &:hover {
          .active {
            opacity: 1;
          }
        }

        .active {
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          text-align: center;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          .title {
            font-size: 24px;
            color: #fff;
          }
          .line {
            width: 32px;
            height: 2px;
            background-color: #ffffff;
            margin: 40px auto;
          }
          .detail {
            font-size: 16px;
            color: #fff;
            line-height: 40px;
            padding: 0 70px;
          }
        }
      }
    }

    .service {
      margin-top: 140px;

      .cover {
        width: 568px;
        height: 568px;
        background: pink;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      &.one {
        .content {
          padding-top: 113px;
          background-image: url(/img/service-title-bg-one.png);
        }
      }

      &.two {
        background: #f7f7f7;
        margin-top: 319px;

        .container {
          position: relative;
          .cover {
            position: absolute;
            bottom: 76px;
            left: 0;
          }

          .content {
            padding-top: 173px;
            height: 456px;
            background-image: url(/img/service-title-bg-two.png);
            background-position: left 60px;
          }
        }
      }

      &.three {
        .content {
          padding-top: 113px;
          background-image: url(/img/service-title-bg-three.png);
        }
      }

      .content {
        width: 560px;
        text-align: justify;
        background-repeat: no-repeat;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        .title {
          font-size: 24px;
          font-weight: bold;
        }
        .line {
          width: 32px;
          height: 3px;
          background-color: #e8e8e8;
          margin: 32px 0;
        }

        .text {
          color: #999;
        }

        .lh40 {
          line-height: 40px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .about {
      margin-top: 1.2rem;
      .container {
        width: 6.84rem;
        margin: 0 auto;
        height: 3.36rem;
        position: relative;
      }
      .item {
        position: absolute;
        width: 1.64rem;
        height: 1.64rem;

        &:nth-child(3) {
          position: relative;
          width: 3.36rem;
          height: 3.36rem;
          margin: 0 auto;
        }

        &:nth-child(1),
        &:nth-child(2) {
          left: 0;
        }

        &:nth-child(1),
        &:nth-child(4) {
          top: 0;
        }

        &:nth-child(4),
        &:nth-child(5) {
          right: 0;
        }

        &:nth-child(2),
        &:nth-child(5) {
          bottom: 0;
        }

        .cover {
          width: 100%;
          height: 100%;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .active {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          text-align: center;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          .title {
            font-size: 0.26rem;
            color: #fff;
          }
          .line {
            width: 0.32rem;
            height: 0.02rem;
            background-color: #ffffff;
            margin: 0.32rem auto;
          }
          .detail {
            font-size: 0.2rem;
            color: #fff;
            line-height: 0.4rem;
            padding: 0 0.18rem;
          }
        }
      }
    }

    .service {
      margin-top: 1.2rem;

      .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
      }

      .cover {
        width: 5.68rem;
        height: 5.68rem;
        float: unset !important;
        margin-top: 0.4rem;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      &.one {
        .content {
          background-image: url(/img/service-title-bg-one.png);
        }
      }

      &.two {
        .content {
          background-image: url(/img/service-title-bg-two.png);
        }
      }

      &.three {
        .content {
          background-image: url(/img/service-title-bg-three.png);
        }
      }

      .content {
        width: 5.68rem;
        float: unset !important;
        text-align: justify;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: auto 1.33rem;
        padding-top: 1.1rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;

        .title {
          font-size: 0.34rem;
          font-weight: bold;
        }
        .line {
          width: 0.4rem;
          height: 0.03rem;
          background-color: #e8e8e8;
          margin: 0.32rem auto;
        }

        .text {
          color: #999;
          font-size: 0.26rem;
        }

        .lh40 {
          line-height: 0.4rem;
        }

        ul > li {
          font-size: 0.26rem;
        }
      }
    }
  }
}