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

@media screen and(min-width:768px) {
  .main {
    margin-top: -80px;
    .title {
      font-size: 24px;
      font-weight: bold;
    }

    .about {
      .cover {
        width: 614px;
        height: 412px;
        background-color: pink;
      }
      .container {
        position: relative;
      }
      .content {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 518px;
        .title {
          font-size: 34px;
          text-transform: uppercase;
        }
        .detail {
          font-size: 14px;
          line-height: 40px;
          text-align: justify;
        }
        .tags {
          margin-top: 36px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          .tag {
            padding: 8px 14px;
            font-size: 16px;
            color: #0688d2;
            background: #eff9ff;
          }
        }
        .line {
          margin: 32px 0;
          width: 32px;
          height: 2px;
          background: #d8d8d8;
        }
      }
    }

    .service {
      margin-top: 180px;
      margin-bottom: 80px;
      .cover {
        position: relative;
        width: 646px;
        height: 490px;
        background: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          display: block;
          width: 700px;
        }
      }
      .content {
        width: 416px;

        .title {
          padding-top: 24px;
        }
        .line {
          margin: 32px 0;
          width: 32px;
          height: 2px;
          background: #d8d8d8;
        }
        .detail {
          font-size: 14px;
          text-align: justify;

          .lh40 {
            line-height: 40px;
          }

          .lh28 {
            line-height: 28px;
          }

          .mt32 {
            margin-top: 32px;
          }

          .mt16 {
            margin-top: 16px;
          }

          li {
            .label {
              margin-bottom: 16px;
            }
            .text {
              color: #999999;
            }
          }

          .description {
            font-size: 16px;
          }
        }
      }
    }
  }
}

@media screen and(max-width:768px) {
  .main {
    .title {
      font-size: 0.48rem;
      font-weight: bold;
    }

    .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: flex-end;
      -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;
    }

    .about {
      position: relative;
      margin-top: 0.8rem;

      .cover {
        width: 6.14rem;
        height: 4.12rem;
        margin-top: 0.48rem;

        img {
          display: block;
          width: 6.14rem;
          height: 4.12rem;
        }
      }
      .container {
        position: relative;
      }
      .content {
        width: 6.08rem;
        margin: 0 auto;
        float: none !important;
        .title {
          font-size: 0.34rem;
          text-transform: uppercase;
          text-align: center;
        }
        .detail {
          font-size: 0.24rem;
          line-height: 0.4rem;
          text-align: justify;
        }
        .tags {
          margin-top: 0.32rem;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          .tag {
            padding: 0.07rem 0.29rem;
            font-size: 0.24rem;
            color: #0688d2;
            background: #eff9ff;
          }
        }
        .line {
          margin: 0.32rem auto;
          width: 0.4rem;
          height: 0.03rem;
          background: #d8d8d8;
        }
      }
    }

    .service {
      margin-top: 0.9rem;
      .cover {
        position: relative;
        width: 6.94rem;
        height: 4.66rem;
        background: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 0.32rem;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          display: block;
          width: 100%;
        }
      }
      .content {
        width: 6.08rem;
        margin: 0 auto;
        float: none !important;

        .title {
          padding-top: 24px;
          font-size: 0.34rem;
          text-align: center;
        }
        .line {
          margin: 0.32rem auto;
          width: 0.4rem;
          height: 0.03rem;
          background: #d8d8d8;
        }
        .detail {
          font-size: 0.26rem;
          text-align: center;

          .lh40 {
            line-height: 0.4rem;
          }

          .lh28 {
            line-height: 0.28rem;
          }

          .mt32 {
            margin-top: 0.32rem;
          }

          .mt16 {
            margin-top: 0.16rem;
          }

          li {
            .label {
              margin-bottom: 0.16rem;
              margin-top: 0.32rem;
            }
            .text {
              color: #999999;
              font-size: 0.26rem;
              line-height: 0.4rem;
            }
          }

          .description {
            font-size: 0.26rem;
            line-height: 0.4rem;
          }
        }
      }
    }
  }
}