proginn-frontend/assets/css/kaifain/detail.scss

@import "../scssCommon";

.kaifainDetail {
  -webkit-overflow-scrolling: auto;
  .topArea {
    position: relative;
    margin: -85px 0 0 !important;
    width: 100vw;
    min-height: 500px;
    background: rgba(48, 89, 220, 1);
    background-repeat: no-repeat;
    background-size: cover;

    .topContent {
      width: 1000px;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 0 auto;
      flex-direction: column;
      .title {
        margin-top: 160px;
        height:75px;
        font-size:42px;
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:75px;
      }
      .desc {
        width:744px;
        height:48px;
        font-size:17px;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:24px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }

      .btn {
        margin-top: 40px;
        width:191px;
        height:44px;
        border-radius:3px;
        border:1px solid rgba(255,255,255,1);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        p {
          height: 25px;
          font-size: 18px;
          font-weight: 600;
          color: rgba(255, 255, 255, 1);
          line-height: 25px;
        }
      }
      .companyInfo {
        cursor: pointer;
        margin-top: 50px;
        width:342px;
        height:51px;
        background:rgba(0,0,0,0.15);
        border-radius:4px;
        box-sizing: border-box;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          img {
            width:30px;
            height:30px;
            border-radius:15px;
          }
          .cname {
            height:17px;
            font-size:12px;
            font-weight:600;
            color:rgba(255,255,255,1);
            line-height:17px;
            margin-left: 8px;
          }
          .status {
            width: 38px;
            height: 17px;
            margin-left: 8px;
            background: url("~@/assets/img/kaifain/detail/confirmCompany@2x.png") no-repeat;
            background-size: cover;
          }
        }
        .right {
          flex-shrink: 0;
          .icon {
            width: 7px;
            height: 10px;
            background: url("~@/assets/img/kaifain/detail/rightIcon.png") no-repeat;
            background-size: cover;
          }
        }
      }
    }

    .bgChange {
      width: 40px;
      height: 40px;
      position: absolute;
      right: 0;
      top: 84px;
      cursor: pointer;
      background: url("~@/assets/img/kaifain/detail/bg_change@2x.png") no-repeat;
      background-size: cover;
    }
  }

  .contentArea {
    width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;

    .bannerSelect {
      width:1000px;
      height:60px;
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 0px 0px rgba(243,243,243,1);
      display: flex;
      justify-content: center;
      align-items: center;

      .cell {
        height:60px;
        font-size:16px;
        line-height:60px;
        font-weight:400;
        color:rgba(34,34,34,1);
        position: relative;
        cursor: pointer;

        &:nth-child(n+2) {
          margin-left: 100px;
        }
        &.selected {
          font-weight:600;
          color:rgba(34,34,34,1);

          &:after {
            content: " ";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            width:40px;
            height:3px;
            background:rgba(48,142,255,1);
            border-radius:2px;
          }
        }
      }
    }

    .introArea {
      background-color: #fff;
      padding: 27px 36px;

      .title {
        height:27px;
        font-size:20px;
        font-weight:600;
        color:rgba(51,51,51,1);
        line-height:27px;
        text-align: left;
      }
      .introContent {

      }
    }
    .caseListArea {
      margin-top: 10px;
      padding: 40px 80px;
      background-color: #fff;

      .title {
        text-align: center;
        .word {
          height: 48px;
          font-size: 34px;
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          line-height: 48px;
          letter-spacing: 1px;
        }
        .line {
          margin: 10px auto 0;
          width: 40px;
          height: 4px;
          background: rgba(32, 148, 243, 1);
          border-radius: 4px;
        }
      }

      .list {
        margin-top: 62px;
        display: flex;
        width: 100%;
        .cell {
          width: 1038px;
          height: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #EDEDED;

          .left {
            flex-shrink: 0;
            font-size: 0;
            width: 160px;
            height: 160px;
            img {
              width: 160px;
              height: 160px;
            }
          }
          .right {
            flex-grow: 1;
            margin-left: 13px;
            height: 124px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .top {
              flex-grow: 1;
              .bTitle {
                font-size: 17px;
                font-weight: 600;
                color: rgba(34, 34, 34, 1);
                line-height: 24px;
              }
              .bStitle {
                margin-top: 9px;
                height: 40px;
                font-size: 14px;
                font-weight: 400;
                color: rgba(34, 34, 34, 1);
                line-height: 20px;
              }
            }
            .bottom {
              flex-shrink: 0;
              height: 26px;
              display: flex;
              align-items: center;
              cursor: pointer;
              .icon {
                width: 25px;
                height: 25px;
                background: url('~@/assets/img/kaifain/detail/icon_pdf@2x.png') no-repeat;
                background-size: cover;
              }
              .word {
                margin-left: 7px;
                height: 17px;
                font-size: 12px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 17px;
              }

            }
          }
        }
      }
    }

  }

}

* {
  box-sizing: border-box;
}

.kaifainDetailMobile {
  margin: 0 !important;
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;


  .topArea {
    position: relative;
    margin: 0 0 0 !important;
    width: 100vw;
    background: rgba(48, 89, 220, 1);
    height: pxtovw(290);

    .bannerBg {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100vw;
      img {
        width: 100vw;
        height: auto;
        vertical-align: middle;
      }
    }

    .topContent {
      width: 100vw;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 0 auto;
      flex-direction: column;

      &.noneMobileAPP {
        margin-top: pxtovw(-85);
      }
      .title {
        margin-top: pxtovw(128);
        height:pxtovw(36);
        font-size:pxtovw(25);
        font-weight:600;
        color:rgba(255,255,255,1);
        line-height:pxtovw(36);
      }
      .desc {
        margin-top: pxtovw(15);
        width: pxtovw(335);
        height:pxtovw(32);
        font-size:pxtovw(12);
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: pxtovw(16);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .companyInfo {
        cursor: pointer;
        margin-top: pxtovw(15);
        width:pxtovw(237);
        height:pxtovw(41);
        background:rgba(0,0,0,0.15);
        border-radius:pxtovw(4);
        box-sizing: border-box;
        padding: pxtovw(10) pxtovw(12);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
          display: flex;
          align-items: center;
          img {
            width:pxtovw(20);
            height:pxtovw(20);
            border-radius: 50%;
          }
          .cname {
            font-size: pxtovw(14);
            font-weight:600;
            color:rgba(255,255,255,1);
            margin-left: 8px;
            transform-origin: left center;
            transform: scale(0.714);
          }
          .status {
            width: pxtovw(38);
            height: pxtovw(17);
            margin-left: pxtovw(8);
            background: url("~@/assets/img/kaifain/detail/confirmCompany@2x.png") no-repeat;
            background-size: cover;
          }
        }
        .right {
          flex-shrink: 0;
          .icon {
            width: 7px;
            height: 10px;
            background: url("~@/assets/img/kaifain/detail/rightIcon.png") no-repeat;
            background-size: cover;
          }
        }
      }
    }
  }

  .contentArea {
    width: 100vw;
    margin: 0 auto;
    box-sizing: border-box;


    .bannerSelect {
      width:100vw;
      height:pxtovw(45);
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 0px 0px rgba(243,243,243,1);
      display: flex;
      justify-content: center;
      align-items: center;

      .cell {
        height:pxtovw(45);
        font-size:pxtovw(15);
        font-weight:500;
        color:#888888;
        line-height:pxtovw(45);
        position: relative;
        cursor: pointer;

        &:nth-child(n+2) {
          margin-left: pxtovw(47);
        }
        &.selected {
          font-weight:600;
          color:rgba(34,34,34,1);

          &:after {
            content: " ";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            width:pxtovw(15);
            height:pxtovw(3);
            background:rgba(48,142,255,1);
            border-radius:pxtovw(2);
          }
        }
      }
    }

    .introArea {
      padding: pxtovw(10) pxtovw(14) pxtovw(10) pxtovw(14);
      background-color: #fff;

      .title {
        text-align: center;
        .word {
          font-size: pxtovw(24);
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          letter-spacing: pxtovw(1);
        }
        .line {
          margin: pxtovw(8) auto;
          width: pxtovw(29);
          height: pxtovw(3);
          background: rgba(32, 148, 243, 1);
          border-radius: pxtovw(3);;
        }
      }
      .introContent {
        width: pxtovw(347);
        p {
          word-break: break-all;
        }
      }
    }
    .caseListArea {
      margin-top: 0;
      padding: 0;
      padding-top: pxtovw(30);
      background-color: #fff;
      padding-bottom: pxtovw(100);

      .title {
        text-align: center;
        .word {
          height: pxtovw(33);
          font-size: pxtovw(24);
          font-weight: 500;
          color: rgba(34, 34, 34, 1);
          line-height: pxtovw(33);
          letter-spacing: pxtovw(1);
        }
        .line {
          margin: pxtovw(8) auto;
          width: pxtovw(29);
          height: pxtovw(3);
          background: rgba(32, 148, 243, 1);
          border-radius: pxtovw(3);
        }
      }

      .list {
        margin-top: pxtovw(10);
        display: flex;
        width: 100%;
        padding: 0 pxtovw(10);
        .cell {
          width: 100vw;
          height: pxtovw(96);
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: pxtovw(1) solid #EDEDED;

          .left {
            flex-shrink: 0;
            font-size: 0;
            width: pxtovw(72);
            height: pxtovw(72);
            img {
              width: pxtovw(72);
              height: pxtovw(72);
            }
          }
          .right {
            width: pxtovw(268);
            flex-grow: 1;
            margin-left: pxtovw(10);
            height: pxtovw(72);
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            .top {
              display: flex;
              justify-content: center;
              flex-direction: column;

              .bStitle {
                height: auto;
                width: pxtovw(268);
                margin-top: 0;
                max-height: pxtovw(40);
                font-size: pxtovw(14);
                font-weight: 400;
                color: rgba(34, 34, 34, 1);
                line-height: pxtovw(20);
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }
            }
          }
        }
      }
    }

  }

  .mobileBottomArea {
    width: 100vw;
    height: pxtovw(50);
    background:rgba(255,255,255,1);
    box-shadow:0px pxtovw(6) pxtovw(23) 0px rgba(13,24,36,0.07);
    position: fixed;
    bottom: 0;
    left: 0;

    .mobileBottomBtn {
      margin: pxtovw(5) auto auto;
      width:pxtovw(355);
      height:pxtovw(40);
      background:rgba(48,142,255,1);
      box-shadow:0px 2px 6px 0px rgba(48,142,255,0.3);
      border-radius:2px;
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        height:pxtovw(20);
        font-size:pxtovw(14);
        font-weight:500;
        color:rgba(255,255,255,1);
        line-height:pxtovw(20);
      }
    }
  }
}

.main {
  margin-top: 0 !important;
}

@media screen and (max-width: 960px) {
  .main {
    min-width: auto !important;
  }
}

@supports(bottom: env(safe-area-inset-bottom)) {
  .mobileBottomArea {
    height: calc(pxtovw(50) + env(safe-area-inset-bottom) );
  }
}