official-website-sj/src/App.less

@import '~antd/dist/antd.less';

.container {
  height: 100vh;
}

.home_container {
  position: relative;
  width: 100vw;
  height: 470px;

  .home_background {
    width: 100vw;
    height: 470px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }

  .image_text {
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    z-index: 10;

    h1 {
      color: rgba(255, 255, 255, 1);
      font-weight: 700;
      font-size: 32px;
      margin-bottom: 0;
    }

    p {
      font-size: 18px;
      font-weight: 500;
      font-family: SourceHanSansSC-regular;
      margin-bottom: 0;
    }

    .free_try {
      margin-top: 20px;
    }
  }
}

.home_advantage {
  padding: 20px 0;
  background-color: #fff;

  h2 {
    font-family: 'PMZDBiaoTi-regular';
    color: #58BE70;
    font-size: 36px;
  }

  p {
    font-size: 18px;
    color: #333333;
    font-family: Arial;
    font-weight: 400;
  }
}

.core_advantage {
  background-color: rgb(248, 248, 248);
  padding-bottom: 68px;

  .core_title {
    font-size: 48px;
    font-weight: 800;
    padding: 25px 0;
    font-family: SourceHanSansSC-regular;
  }

  .advantage_detail {
    width: 445px;
    line-height: 18px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    flex-direction: column;

    .advantage_detail_1 {
      font-size: 100px;
      margin: 36px auto;
      color: rgba(88, 190, 112, 1);
    }

    .advantage_detail_2 {
      color: rgba(51, 51, 51, 1);
      font-size: 24px;
      font-family: Arial;
      font-weight: 700;
      text-align: center;
    }

    .advantage_detail_3 {
      margin: auto;

      >p {
        display: flex;
        height: 50px;
        align-items: center;
      }

      span:first-child {
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      span {
        font-size: 17px;
        color: rgb(51, 51, 51);
        font-family: SourceHanSansSC-regular;
      }
    }
  }
}

.core_more {
  text-align: center;
  margin-top: 46px;

  button {
    width: 179px;
    height: 72px;
    border-radius: 9px;
    font-size: 18px;
    font-family: Microsoft Yahei;
  }

  button:first-child {
    margin-right: 33px;
  }
}

.requirement_title {
  width: 376px;
  color: rgb(51, 51, 51);
  font-size: 36px;
  font-family: SourceHanSansSC;
  font-weight: bold;
  margin: auto;
  height: 100px;
  line-height: 100px;
}

.core_requirement {
  width: 100vw;
  height: 550px;
  background-color: #fff;
  text-align: center;

  .card-container {
    width: 82vw;
    margin: 0 auto;

    .requirement_title_name {
      color: rgba(51, 51, 51, 1);
      font-size: 31px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      font-weight: 700;
      margin: 20px 0;
    }

    .requirement_more {
      text-align: left;
      margin-top: 46px;

      button {
        border-radius: 9px;
        width: 120px;
        height: 40px;
        font-size: 18px;
        font-family: Microsoft Yahei;
      }

      button:first-child {
        margin-right: 33px;
      }
    }
  }

  .card-container p {
    margin: 0;
    padding: 30px 0;
    color: rgb(51, 51, 51);
    font-size: 18px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
  }

  .card-container>.ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -16px;
  }

  .ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap {
    width: 100%;
    justify-content: center;
    height: 60px;
    line-height: 20px;
    border-radius: 50px;
    background-color: rgba(248, 248, 248, 1);
    text-align: center;
  }

  .ant-tabs-card.ant-tabs-top>.ant-tabs-nav .ant-tabs-tab {
    border-radius: 40px;
    font-size: 28px;
    padding: 8px 25px;
    color: rgb(16, 16, 16);
  }

  .card-container>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
    padding: 16px;
    background: #fff;
  }

  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: rgb(16, 16, 16);
    font-family: SourceHanSansSC-regular;
  }

  .card-container>.ant-tabs-card>.ant-tabs-nav::before {
    display: none;
  }

  .card-container>.ant-tabs-card .ant-tabs-tab,
  [data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }

  .card-container>.ant-tabs-card .ant-tabs-tab-active,
  [data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-tab-active {
    background: #fff;
    border-color: #fff;
  }

  #components-tabs-demo-card-top .code-box-demo {
    padding: 24px;
    overflow: hidden;
    background: #f5f5f5;
  }

  [data-theme='compact'] .card-container>.ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -8px;
  }

  [data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }

  [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
    background: #000;
  }

  [data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
    background: #141414;
  }

  [data-theme='dark'] .card-container>.ant-tabs-card .ant-tabs-tab-active {
    background: #141414;
    border-color: #141414;
  }
}

.solution {
  width: 100%;
  height: 690px;
  background: url('static/web/home/house.jpg') no-repeat;
  background-size: 100% 100%;
  padding-top: 36px;

  >p {
    color: rgba(255, 255, 255, 1);
    font-size: 36px;
    font-family: SourceHanSansSC;
    font-weight: bold;
    text-align: center;
  }

  .solution_contain {
    width: 80%;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
  }

  .ant-tabs-card.ant-tabs-left>.ant-tabs-nav .ant-tabs-tab,
  .ant-tabs-card.ant-tabs-left>div>.ant-tabs-nav .ant-tabs-tab {
    border-radius: 16px;
    justify-content: center;
    font-size: 18px;
    font-family: Microsoft Yahei;
  }

  .ant-tabs-left {
    height: 90%;
    padding-top: 5%;

    .ant-tabs-nav {
      width: 200px;
      padding-right: 20px;

    }

    .ant-tabs-nav-list {
      justify-content: space-around;
    }
  }

  .solution_contain>.ant-tabs-card .ant-tabs-content {
    height: 100%;
    width: 90%;

    .industry_detail {

      p:nth-child(1),
      p:last-child {
        color: rgba(13, 13, 13, 1);
        font-size: 31px;
        text-align: left;
        font-family: Arial-regular;
        font-weight: 500;
      }

      p:nth-child(2) {
        color: rgba(40, 40, 40, 1);
        font-size: 19px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
        font-weight: 400;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .industry_more {
        text-align: left;
        padding: 20px 0;

        button {
          border-radius: 9px;
          width: 120px;
          height: 40px;
          font-size: 18px;
          font-family: Microsoft Yahei;
        }

        button:first-child {
          margin-right: 33px;
        }
      }
    }
  }

  .ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap {
    width: 100%;
    justify-content: center;
    height: 60px;
    line-height: 20px;
    background-color: #fff;
    text-align: center;
  }

  .ant-tabs-card.ant-tabs-top>.ant-tabs-nav .ant-tabs-tab {
    font-size: 28px;
    padding: 8px 25px;
    color: rgb(16, 16, 16);
  }

  .solution_contain>.ant-tabs-card .ant-tabs-content>.ant-tabs-tabpane {
    padding: 25px;
    background: #fff;
  }

  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #fff;
    font-family: SourceHanSansSC-regular;
  }

  .solution_contain>.ant-tabs-card>.ant-tabs-nav::before {
    display: none;
  }

  .solution_contain>.ant-tabs-card .ant-tabs-tab,
  [data-theme='compact'] .solution_contain>.ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }

  .solution_contain>.ant-tabs-card .ant-tabs-tab-active,
  [data-theme='compact'] .solution_contain>.ant-tabs-card .ant-tabs-tab-active {
    background: #58BE70;
    border-color: #fff;
  }
}

.choice_us {
  margin-top: 20px;

  .ant-col {
    margin: 10px 0;

    .choice_radius {
      background-color: #fff;

      .mdsrc {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        border: 1px solid rgb(215, 215, 215);
        margin: -50px auto 0 auto;
        position: relative;
        background-color: #fff;
        padding: 25px;
      }
    }

    .choice_us_detail {
      padding: 10px;
      background-color: #fff;

      p:first-child {
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
        font-family: SourceHanSansSC;
        font-weight: bold;
      }

      p:nth-child(2) {
        line-height: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.choice_container {
  background-color: rgb(241, 241, 241);
  padding-top: 36px;

  .choice_img {
    padding-top: 46px;

    .choice_img_item {
      background-color: #fff;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .new_title {
    font-size: 35px;
    text-align: center;
    font-family: SourceHanSansSC;
    font-weight: bold;
    margin: 36px 0;
  }

  .news_container {
    width: 80%;
    margin: 20px auto 0 auto;

    .news_left_title,
    .news_right_title>span:first-child {
      font-size: 22px;
      font-family: Arial;
      font-weight: 700;
    }

    .ant-image {
      margin: 22px auto;
      width: 100%;

      .news_left_img {
        height: 308px;
      }
    }

    .new_right_content {
      margin: 9px 0;

      .new_right_content span {
        font-size: 17px;
      }

      span:first-child {
        font-family: Arial-regular;
      }

      span:last-child {
        font-family: Arial;
        font-weight: 400;
      }
    }

    .news_right_title,
    .new_right_content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .news_right_title span:last-child {
        font-size: 19px;
        font-family: Arial-regular;
        cursor: pointer;
      }
    }
  }

}

.foot_img {
  margin-top: 60px;
  position: relative;


  .ant-image-img {
    height: 340px;
    width: 100vw;
  }

  .foot_background {
    position: absolute;
    display: flex;
    justify-content: space-around;
    align-items: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 340px;
    background-color: rgba(164, 164, 164, .5);

    .foot_text>p {
      font-size: 32px;
      color: #fff;
      font-family: SourceHanSansSC;
      font-weight: bold;

      span {
        color: #58BE70;
      }
    }

    .ant-btn {
      width: 166px;
      height: 67px;
      border-radius: 9px;

      span {
        font-size: 22px;
      }
    }
  }
}

.ant-carousel .slick-prev,
.ant-carousel .slick-prev:hover,
.ant-carousel .slick-prev:focus {
  font-size: 35px;
  left: -45px;
  z-index: 2;
  color: #58BE70;
}

.ant-carousel .slick-prev:before,
.ant-carousel .slick-next:before {
  content: '';
}

.ant-carousel .slick-next,
.ant-carousel .slick-next:hover,
.ant-carousel .slick-next:focus {
  font-size: 35px;
  right: -45px;
  z-index: 2;
  color: #58BE70;
}