nuxtProject/assets/scss/cus-client/cus-client-page.scss

@import "../base/utils";
@import "cus-client-common";

@mixin setClientPage() {
  /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
  .client-index-page{
     width: 100%;
    /* 网站banner */
    .client-index-banner{
      width: 100%;
      height: 395px;
      background-color:#031073;
      background-image: url("~static/images/client/index/index-banner-background.png");
      background-position-x: center;
      background-repeat: no-repeat;
    }
    /* banner-box */
    .client-banner-box{
        .el-carousel__container{height: 395px;}
        .el-carousel__item{
          img{margin: 0 auto;display: block;}
        }
    }

    /* 发展历程*/
    .client-company-history{
      background:#f8f8f8;
        li{
          width: 25%;display: inline-block;text-align: center;
          div{border-right:2px solid #e5e5e5;margin: 24px 0;}
          p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
          span{@include setFontStyle(6);}
          h4{@include setFontStyle(-4);color: #666;}
        }
        li:last-child div{border-right: 0;}
    }

    /* 产品和服务 */
    .client-products-services{
      .client-title{
        margin-bottom: 48px;
      }
    }


    /* 行业学习需求 */
    .client-demand-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      min-height: 720px;
      //tab
      .demand-box-tab{
        margin-top: 30px;
          .el-tabs__item{width:124px;height: 40px;line-height: 40px;border-radius: 4px;border: 1px solid #3e7ee7;@include setFontStyle(-4);color: #3e7ee7;padding: 0;text-align: center;margin: 0 12px 32px;}
          .el-tabs__item.is-active{background-color:#3e7ee7;color: #fff;position: relative}
          .el-tabs__item.is-active:after{ width: 0; height: 0; content: "";display: inline-block;border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #3e7ee7;
          position: absolute;bottom: -33px;left: 50%;margin-left: -8px;}
          // 免费试用按钮
          .client-default-Btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;}
      }
      //覆盖饿了么样式
      .el-tabs__header{margin: 0 0 48px;}
      .demand-box-tab.el-tabs--card>.el-tabs__header{border: 0}
      .demand-box-tab.el-tabs--card>.el-tabs__header .el-tabs__nav{margin: 0 auto;border-color: #ccc;border-bottom: 1px dotted #6c9ce1;border-right:0;border-left:0;border-top:0;border-radius: 0;}
      .demand-box-tab .el-tabs__nav-scroll{text-align: center;}
      .demand-box-tab .el-tabs__nav{float: none;}

      // 考试ul
      .demand-tab-list{
        margin: 0 -18px;
        li{
          width: 33.33%;display: inline-block;position: relative;margin-bottom: 24px;overflow: hidden;

          // 内容区域
          .demand-content-box{height: 300px;margin: 0 18px;background-color: #fff;background-repeat: no-repeat;background-position: 5px 5px;}
          //图片区域
          .demand-img-box{
            position: absolute;
            top: 90px;
            left: 50%;
            margin-left: -50px;
              i{width: 100px;height: 100px;display:block;margin-bottom: 24px;background-repeat: no-repeat;background-size: cover;}
              h4{@include setFontStyle(-2);color: #272727;text-align: center;}
          }
          // 蒙版
          .demand-mask-box{
            position: absolute;
            top: 300px;
            padding: 20px;
            background:rgba(66,66,66,0.65);
            transition: 0.5s;
            margin: 0 18px;
            color: #fff;
            h4{
              @include setFontStyle(0);margin-bottom: 24px;text-align: center;
              >a{float: right;display: none;}
            }
            p{@include setFontStyle(-6);line-height: 24px;margin-bottom: 16px;@include multi-line-ellipsis(4);text-align: justify; }
            span{@include setFontStyle(-6);color: #fff;}
            i{width: 15px;height: 15px;display: inline-block;vertical-align: middle;margin-left: 8px;background-image: url("~static/images/client/index/index-demand-icon.png");}
          }
          // 图标div
          .demand-icon-box{
            padding: 16px 0;
            border-top: 1px solid #fff;
            a{margin-right: 8px}
            a:last-child{margin-right: 0;}
            img{width: 77px;height: 77px;}
          }
        }
        li:nth-child(1){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img1.png");}
        }
        li:nth-child(2){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic2.png");}}
          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img2.png");}
        }
        li:nth-child(3){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img3.png");}
        }
        li:nth-child(4){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic4.png");}}
          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img4.png");}
        }
        li:nth-child(5){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic5.png");}}
          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img5.png");}
        }
        li:nth-child(6){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
          .demand-content-box{background-image: url("~static/images/client/index/index-demand-img6.png");}
        }
        li:hover{
          // 蒙版
          .demand-mask-box{
            top:0;
            h4{
              text-align: left;
              >a{display: inline-block;}
            }
          }
        }
      }
      .demand-peixun-list{
        li:nth-child(1){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic7.png");}}
        }
        li:nth-child(2){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
        }
        li:nth-child(3){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic8.png");}}
        }
        li:nth-child(4){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
        }
        li:nth-child(5){
          .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
        }
      }

    }

    /* 超过10万家客户的信任之选 */
    .client-customer-box{
      .customer-img-box{
        padding-bottom: 80px;
        li{
          width: 20%;
          display: inline-block;
        }
        img{margin: 48px 30px 0;transition: all 0.5s;}
        li:hover{
          img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
        }
      }
    }

    /* 我们始终专注教育系统研发更懂用户需求 */
    .client-cert-box{
      background: #005491;
      padding-bottom: 80px;
      .client-title{color: #fff}
      .cert-img-box{
        display: flex;
        justify-content: space-between;
        margin: 48px 0 0;
        align-items: center;
          span{display:block;height: max-content;background: #80aac8;padding: 8px 8px 3px;overflow: hidden;}
          span:nth-child(3){
            img{width: 320px;height:210px;}
          }
          img{width: 170px;height:240px;transition: all 0.5s;}
          img:hover{transform: scale(1.14);}
      }
      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;background: #005491;border: 1px solid #fff;box-sizing: border-box;}
    }

    /* 为什么选择我们 */
    .client-chose-box{
      padding-bottom: 80px;
      .chose-img-box{
        margin: 48px -14px 0;
        li{
          width: 25%;display: inline-block;vertical-align: top;
          div{height: 260px;background: #f8f8f8;position:relative;text-align: center;margin: 0 14px;}
          span{width: 100%;height: 200px;display: inline-block;}
          img{margin: 50px auto 0;}
          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);}
        }
      }
      .client-default-Btn {
        width: 238px;
        height: 40px;
        line-height: 40px;
        margin: 40px auto 0;
      }
    }

    /* 新闻资讯 */
    .client-news-information {
      background: #f9faff;
      padding-bottom: 80px;

      .industry-information-box {
        margin-top: 48px;
        h4{color: #333;}
        h4:hover {cursor: pointer;color: #3e7ce7;}
        // 左
        .industry-information-left {
          width: 520px;
          margin-right: 80px;
          display: inline-block;
          vertical-align: top;
          color: #333;
          div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
          img {width: 520px;height: 210px;margin-bottom: 42px;}
          h4 {@include setFontStyle(-2);margin-bottom: 16px;}
          i{width:25px;height:12px;float:right;background-image:url("~static/images/client/index/news-information-icon.png")}
          p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
          b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
          span {@include setFontStyle(-6);display: block;color: #666;}
        }

        // 右
        .industry-information-right {
          width: 590px;
          display: inline-block;
          vertical-align: top;

          li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
          li:last-child {border: 0;}
          h4 {@include setFontStyle(-4);@include single-line-ellipsis;margin-bottom: 12px;}
          p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;}
          span {margin: 0 30px 0 10px;}
        }
      }
    }
  }

  /********  describe: 平台页面（考试平台、培训平台） author: TX  date:2020-08-12  ********/
  .client-platform-page{
      /* 网站banner */
      .client-platform-banner{
        width: 100%;
        height: 396px;
        background-color:#042D85;
        position: relative;
        div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
        .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;}
      }
      /* 产品优势 */
      .platform-products-services{
          li:not(:last-child){border-bottom:1px solid #eee; }
      }

      /* 产品功能 */
      .platform-product-function{
        background: #f8f8f8;
        padding-bottom: 32px;
        // ul
        .product-function-box{
          margin-top: 48px;
          li{
            width: 50%;display: inline-block;transition: .3s all linear;
            div{padding: 12px 8px;margin: 0 32px 24px;background: #fff;}
            i{width: 120px;height: 80px;margin-right:24px;float:left;background-size: cover;background-repeat: no-repeat;}
            h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 56px;}
            p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);margin-left: 56px;@include multi-line-ellipsis(3);}
          }
          li:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon1.svg");}}
          li:nth-child(2){i{background-image:url("~static/images/client/exam/product-function-icon2.svg");}}
          li:nth-child(3){i{background-image:url("~static/images/client/exam/product-function-icon3.svg");}}
          li:nth-child(4){i{background-image:url("~static/images/client/exam/product-function-icon4.svg");}}
          li:nth-child(5){i{background-image:url("~static/images/client/exam/product-function-icon5.svg");}}
          li:nth-child(6){i{background-image:url("~static/images/client/exam/product-function-icon6.svg");}}
          li:nth-child(7){i{background-image:url("~static/images/client/exam/product-function-icon7.svg");}}
          li:nth-child(8){i{background-image:url("~static/images/client/exam/product-function-icon8.svg");}}
          li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
        }
      }

      /* 应用场景 */
      .platform-application-scenarios{
         background: #F9FAFF;
         padding-bottom: 80px;
        .application-scenarios-box{margin: 48px -12px 0;}
        li{
          width: 33.33%;
          display: inline-block;
          vertical-align: top;
          color: #fff;
          .application-scenarios-img{width: 100px;height: 100px;background-size: cover;margin: 0 auto 24px;}
          .application-scenarios-content{
            padding: 50px 30px 40px;margin: 0 12px;background: #FFF;
            h5{@include setFontStyle(0);text-align: center;margin-bottom: 24px;}
            p{@include setFontStyle(-4);line-height: 24px;text-align: justify;@include multi-line-ellipsis(5);min-height: 115px;max-height: 115px}
          }
        }
        li:nth-child(1){
          .application-scenarios-img {
            background-image: url("~static/images/client/exam/application-scenarios-img1.png");
          }
          .application-scenarios-content{background: #ffbf00;}
        }
        li:nth-child(2){
          .application-scenarios-img {
            background-image: url("~static/images/client/exam/application-scenarios-img2.png");
          }
          .application-scenarios-content{background: #3799db;}
        }
        li:nth-child(3){
          .application-scenarios-img {
            background-image: url("~static/images/client/exam/application-scenarios-img3.png");
          }
          .application-scenarios-content{background: #63ba86;}
        }
      }
  }

  /********  describe: 培训平台--图片（和考试默认图片不同） author: TX  date:2020-08-14  ********/
  .client-train-page{

    /* 网站banner */
    .client-platform-banner{
      background-color:#1F2772;
    }

    /* 产品功能 */
    .platform-product-function{
      // ul
      .product-function-box{
        li:nth-child(1){i{background-image:url("~static/images/client/train/product-function-icon1.svg");}}
        li:nth-child(2){i{background-image:url("~static/images/client/train/product-function-icon2.svg");}}
        li:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon3.svg");}}
        li:nth-child(4){i{background-image:url("~static/images/client/train/product-function-icon4.svg");}}
        li:nth-child(5){i{background-image:url("~static/images/client/train/product-function-icon5.svg");}}
        li:nth-child(6){i{background-image:url("~static/images/client/train/product-function-icon6.svg");}}
        li:nth-child(7){i{background-image:url("~static/images/client/train/product-function-icon7.svg");}}
        li:nth-child(8){i{background-image:url("~static/images/client/train/product-function-icon8.svg");}}
      }
    }

    /* 应用场景 */
    .train-application-scenarios{
      li:nth-child(1){
        .application-scenarios-img {
          background-image: url("~static/images/client/train/application-scenarios-img1.svg");
          i{top: 45px;left: 38px;background-image: url("~static/images/client/train/application-scenarios-icon1.svg");}
        }
      }
      li:nth-child(2){
        .application-scenarios-img {
          background-image: url("~static/images/client/train/application-scenarios-img2.svg");
          i{top: 45px;left: 38px;background-image: url("~static/images/client/train/application-scenarios-icon2.svg");}
        }
      }
      li:nth-child(3){
        .application-scenarios-img {
          background-image: url("~static/images/client/train/application-scenarios-img3.svg");
          i{top: 32px;left: 34px;background-image: url("~static/images/client/train/application-scenarios-icon3.svg");}
        }
      }
    }
  }

  /********  describe: 课程开发 author: TX  date:2020-08-24  ********/
  .client-course-page{
    /* 网站banner */
    .client-course-banner{
      width: 100%;
      height: 395px;
      background-color:#130C4F;
      background-position-x: center;
      background-repeat: no-repeat;
    }
    .client-course-banner:hover{cursor: pointer;}

    /* 调转菜单栏 */
    .course-service-nav{width: 100%;height: 72px;background: url("~static/images/client/course/course--nav-bg.png") repeat-x;padding-top: 15px;text-align: center;}
    .course-link-nav{
      width: 100%;height: 83px;background: #161B38;opacity: 0.9;
      a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;}
      a:nth-child(1){background: #353c61;}
      a:nth-child(2){background: #38406a;}
      a:nth-child(3){background: #3c4775;}
      a:nth-child(4){width:174px;background: #404b81;}
      a:nth-child(5){background: #3c4775;}
      a:nth-child(6){background: #38406a;}
      a:nth-child(7){background: #353c61;}
    }

    // 申请方案按钮
    .free-trial-default-btn{width:230px;display: inline-block;margin: 0}
    // 联系我们按钮
    .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;}

    /* E-learning课程 */
    .course-learn-box{

      // video列表
      .learn-box-list{
        margin: 54px -16px 0;
          li{
              width: 33.33%;display: inline-block;
              a{display: none;}
              div{background: #fff;border-radius: 8px;margin: 0 16px 40px;}
              span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden;position: relative}
              i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
                left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
              img{transition: all 0.5s;}
              p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);padding: 24px 0 24px;}
          }
          li span:hover{img{transform: scale(1.1);}}
          li i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
      }
    }

    /* PPT定制及美化、H5平面设计、视频后期处理 */
    .course-ppt-box,.course-H5-box,.course-videoPos-box{
      ul{margin: 48px 0;}
      li{display: inline-block;}
      li:not(:last-child){margin-right: 30px;}
      p{@include setFontStyle(-4);color: rgba(0, 0, 0, 0.65);margin-top: 24px;}
    }
    /* 视频后期处理 */
    .course-videoPos-box{
      padding-bottom: 80px;
      li:not(:last-child){margin-right: 80px;}
    }
  }

  /********  describe: 关于我们 author: TX  date:2020-08-07  ********/
  .client-aboutUs-page{

    // banner
    .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
        span{width: 1200px;overflow: hidden;display: block;margin: 0 auto;}
        img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
      }

    // 公司简介
    .company-profile-box{
      padding-bottom: 48px;
      font-size: 0;

      img{margin: 48px auto;display: block;}
      p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px}
    }

    // 品牌介绍
    .brand-introduction-box{
      .brand-introduction-content{
        width: 100%;
        padding: 42px;
        box-sizing: border-box;
        background: #fbfbfb;
        border-radius: 8px;
        float: right;
        .brand-introduction-left{
          display: inline-block;
          vertical-align: middle;
          padding-right: 42px;
          border-right: 1px solid #ddd;
          h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px}
          img{margin-bottom: 36px;}
        }
        span{width: 740px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 40px;display: inline-block;vertical-align: middle;padding-left: 42px;text-align: justify;}

      }
    }

    // 企业文化
    .corporate-culture-box{
      padding-bottom: 80px;
      dl{
        width: 240px;
        display: inline-block;
        vertical-align: middle;
        margin: 0 162px 0 90px;
        dt{
          margin-bottom: 16px;
          i{width: 14px;height: 14px;display:inline-block;border: 1px solid #2B5CFD;transform: rotate(45deg);margin-right: 16px;}
          span{@include setFontStyle(0);color: rgba(0,0,0,0.85);}
        }
        dd{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 24px;}
      }
      img{
        display: inline-block;vertical-align: middle;
      }
    }

    // 企业发展历程
    .enterprise-development-box{
      // 覆盖饿了么tab样式
      .enterprise-development-tab{
        .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;}
        .el-tabs__header{
          margin: 0;
          .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;}
          .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: unset}
        }
        .el-tabs__item{width: 170px;height: 45px;line-height:45px;border: 1px solid #3e7ee7;background: #fff;padding: 0;text-align: center;border-radius: 4px;margin-right: 24px;position: relative;}
        .el-tabs__item.is-active{background: #3e7ee7;color: #fff}
        .el-tabs__item:after{width: 14px;height: 14px;content: "";display: inline-block;border-radius: 50%;background: #888;position: absolute;bottom: -28px;left: 50%;margin-left: -7px;}
        .el-tabs__item.is-active:after{background: #3e7ee7;}
        .el-tabs__content{overflow: unset}
      }

      // 企业发展历程内容部分
      li{
        width: 25%;display: inline-block;padding-top: 36px;
        div{width: 250px;border-bottom: 1px solid #eee;}
        img{margin-bottom: 14px;}
        i{color: #3e7ee7;font-style: normal}
        p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;}
      }
    }

    // 联系我们
    .contact-us-box{
      height: 534px;
      padding-top: 80px;
      border-top: 1px solid #ddd;
      .contact-container-box{
        width: 460px;
        padding: 0 40px;
        box-sizing: border-box;
        color: rgba(0,0,0,0.85);
        h4{@include setFontStyle(10);margin-bottom: 32px;}
        li{
          i{width: 22px;height: 24px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px;vertical-align: middle;}
          span{@include setFontStyle(0);vertical-align: middle;}
          p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;margin: 20px 0 24px;}
        }
        li:nth-child(2) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
        }
        li:nth-child(3) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");}
        }
        li:nth-child(4) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
        }
        li:nth-child(5) {
          i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
        }
      }
    }

  }

  /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
  .client-newsInfor-page{
    // banner
    .newsInfor-banner{
      width: 100%;height: 305px;background-image: url("~static/images/client/newsInfor/newsInfor-banner-bg.png");overflow: hidden;
      img{width: 1200px;overflow: hidden;margin: 0 auto;display: block}
    }

    // 菜单 ul
    .newsInfor-menu-ul{
      display: block;
      margin: 0 auto;
      text-align: center;
      background: #F7F9FB;
      li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
      li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
      li:hover{
        transform: scale(1.1);
      }
    }

    // 页面主要内容区域
    .newsInfor-content-box{
      min-height: 304px;
      padding: 48px 0 80px;
      ul{display: inline-block;vertical-align: top}

      // 右侧内容区域
      .newsInfor-content-ul{
        padding: 0 32px;
        li{margin-bottom: 40px;}
        li:last-child{margin-bottom: 0;}
        //图片
        .newsInfor-img-box{width:318px;height:178px;display: inline-block;margin-right: 32px;border-radius: 8px;overflow: hidden;vertical-align: top;background-repeat: no-repeat;background-size: cover;background-position: center;}
        //内容区域
        .newsInfor-list-content{
          width: calc(100% - 350px);
          display: inline-block;
          vertical-align: top;

          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
          div{
            margin-bottom: 8px;
            i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~static/images/client/newsInfor/newsInfor-details-time.svg");}
            i[type="visits"]{background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");}
            span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
          }
          p{height: 72px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 32px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;}
          a{@include setFontStyle(-6);color: #4A73FD;}
          a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~static/images/client/newsInfor/newsInfor-list-icon.svg");margin-left: 8px;}
          a:hover{cursor: pointer;}
        }
      }
    }


  }

  /********  describe: 政府机构-详情页  author: TX  date:2020-08-10  ********/
  .client-government-page{
    // banner
    .government-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/government-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .government-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{
        width: 100%;height: 312px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/government-change-bg.png");
        li{
          margin-bottom: 24px;
          p{margin-left: 30px}
        }
        img{display: inline-block;vertical-align: top;margin: 85px 42px;}
      }
      .change-content-left{
        display: inline-block;padding: 32px 0 0 64px;vertical-align: top;
        h5,li,li i{color: #fff;border-color: #fff;}
        p{color: rgba(255,255,255,0.65);}
      }
      .change-content-right{width: 500px;display: inline-block;padding-top: 64px;}
    }

    // 我们的优势
    .government-advantage-box{
      padding-bottom: 50px;
        h4{margin-bottom: 48px;}
        dl{width:33.33%;display: inline-block;margin-bottom: 30px;}
        dt{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px}
        dd{@include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-left: 33px;}
        i{width: 17px;height: 17px;float:left;box-sizing: border-box;opacity: 0.8;display: inline-block;border: 1px solid #2B5CFD;transform: rotate(45deg);margin-right: 16px;}
        .government-advantage-content{margin-right: -100px;padding: 4px 0 0 4px;}
    }
  }

  /********  describe: 金融保险-详情页  author: TX  date:2020-09-01  ********/
  .client-finance-page{
    // banner
    .finance-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/finance-banner-img.png");background-position-x: center;}

    // 金融行业的问题
    .finance-question-box{
      background: #F9FAFF;
      padding: 80px 0;
        .finance-question-top{
          width: 946px;height: 104px;background-image: url("~static/images/client/industrydetails/finance-question-bg.png");margin: 0 auto 48px;
          h5{height: 104px;line-height:104px;display: inline-block;@include setFontStyle(10);color: rgba(255,255,255,0.85);padding: 0 56px}
          h5:first-child{margin-right: 180px;color: rgba(0,0,0,0.85);}
        }
        ul{
          width:460px;min-height:328px;display: inline-block;border: 1px solid #2B67FD;border-radius: 4px;padding: 32px;box-sizing: border-box;vertical-align: middle;margin: 0 52px;
          i{width: 12px;height: 12px;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;border:0;transform: rotate(0deg);opacity: 1;}
          p{margin-left: 30px;}
        }
        .finance-question-right{
          border: 1px solid #FF6226;
          i{background-image: linear-gradient(90deg, #FF6226 0%, #FFFFFF 100%);}
        }
    }
  }

  /********  describe: 信息产业-详情页  author: TX  date:2020-09-02  ********/
  .client-information-page{
    // banner
    .information-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/information-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .information-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{
        width: 100%;height: 300px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/information-change-bg.png");
        li{
          margin-bottom: 24px;
          p{margin-left: 30px;}
        }
        img{display: inline-block;vertical-align: top;margin: 120px 30px auto 70px;}
      }
      .change-content-left{
        display: inline-block;padding: 48px 0 0 64px;vertical-align: top;
        h5,li,li i{color: #fff;border-color: #fff;}
        p{color: rgba(255,255,255,0.65);}
      }
      .change-content-right{width: 500px;display: inline-block;padding-top: 48px;}
    }
  }

  /********  describe: 能源化工-详情页  author: TX  date:2020-09-02  ********/
  .client-energy-page{
    // banner
    .energy-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/energy-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .energy-change-box{
        background: #F9FAFF;
        padding-bottom: 80px;

        // 模块上半部分
        .change-box-top{
          width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;
          i{border: 1px solid #fff;}
        }

        // 模块下半部分
        .change-box-bottom{
          width: 1100px;height: 368px;padding: 24px;box-sizing: border-box;border-radius: 8px;background: #FE552C;margin-left: 100px;margin-top:-24px;position: relative;
          h5{margin-top: 70px;}
          li:nth-of-type(odd){p{margin-right: 60px}}
        }
        h5{color: rgba(255,255,255,0.85);}
        li{
          width: 50%;display: inline-block;@include setFontStyle(-6);color: rgba(255,255,255,0.65);margin-bottom: 24px;line-height: 22px;vertical-align: top;
          p{margin-left: 30px;color: rgba(255,255,255,0.65);}
        }
        img{position: absolute;top: -55px;left: 50%;margin-left: -50px;}
    }
  }

  /********  describe: 交通运输-详情页  author: TX  date:2020-09-02  ********/
  .client-traffic-page{
    // banner
    .traffic-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/traffic-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .traffic-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
        .change-content-left,.change-content-right{
          width: 462px;height: 359px;display:inline-block;background-repeat: no-repeat;vertical-align: top;margin-top: 48px;
          h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
          ul{margin-top: 80px;margin-left: 32px;}
          i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;margin-top: 5px;}
        }
        .change-content-left{background-image: url("~static/images/client/industrydetails/traffic-left-bg.png");margin-right: 104px;}
        .change-content-right{background-image: url("~static/images/client/industrydetails/traffic-right-bg.png");}
    }
  }

  /********  describe: 教育行业-详情页  author: TX  date:2020-09-02  ********/
  .client-education-page{
    // banner
    .education-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/education-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .education-change-box{
      background: #F9FAFF;padding-bottom: 80px;
      img{position: absolute;top: 50%;margin-top: -78px;left:50%;margin-left: -54px;}
      .industrydetails-content{position: relative;}
      .change-content-left,.change-content-right{height: 338px;box-sizing: border-box;}
      .change-content-left{width: 637px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");}
      .change-content-right{width: 610px;float:right;padding:32px 0 32px 100px;background-image: url("~static/images/client/industrydetails/education-right-bg.png");margin-left: -55px;}
    }


  }

  /********  describe: 食品餐饮-详情页  author: TX  date:2020-09-03  ********/
  .client-restaurant-page{
    // banner
    .restaurant-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/restaurant-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .restaurant-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{
        position: relative;
        img{position: absolute;top:50%;left: 50%;margin-top: -40px;margin-left: -45px;}
      }
      .change-content-left,.change-content-right{
        width: 552px;height: 328px;display:inline-block;background-repeat: no-repeat;vertical-align: top;
        h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
        ul{margin-top: 32px;margin-left: 48px;}
      }
      .change-content-left{background-image: url("~static/images/client/industrydetails/restaurant-left-bg.png");margin-right: 90px;}
      .change-content-right{background-image: url("~static/images/client/industrydetails/restaurant-right-bg.png");}
    }
  }

  /********  describe: 医疗卫生-详情页  author: TX  date:2020-09-03  ********/
  .client-medical-page{
    // banner
    .medical-banner{width: 100%;height: 400px;background-image: url("~static/images/client/industrydetails/medical-banner-img.png");background-position-x: center;}

    // 我们的系统为您改变了什么
    .medical-change-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
      .change-content-left,.change-content-right{
        width: 500px;display:inline-block;vertical-align: top;
        ul{margin-left: 48px;}
        h5{margin-top: 36px;color: rgba(255,255,255,0.85);}
        p{color: rgba(255,255,255,0.65);}
        i{border-color: #fff;}
      }
      .change-content-left{margin-right: 180px;}
    }
  }
}