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;
    }

    /* 发展历程*/
    .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;
        // 左
        .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;color: #222;}
          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);color: #333;@include single-line-ellipsis;margin-bottom: 12px;}
          h4:hover {cursor: pointer;color: #3e7ce7;}
          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-exam-page{
      /* 网站banner */
      .client-exam-banner{
        width: 100%;
        height: 400px;
        background-image: url("~static/images/client/exam/exam-banner-background.png");
        background-position-x: center;

      /* banner文字区域 */
      .exam-banner-container{
        width:500px;
        display: inline-block;
        margin-left: 150px;
        h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 110px;}
        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
        i{width:1px;height:16px;display:inline-block;margin: 0 24px;background: #DFE6FE;vertical-align: middle;}
        a{width: 132px;height: 32px;line-height: 32px;display: inline-block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
      }
    }

      /* 产品优势 */
      .exam-product-advantages{
        width: 100%;display: flex;justify-content: space-between;margin: 48px 0;
        li{width: 250px;padding: 32px 0;border-radius: 8px;transition: .3s all linear;}
        li:hover{background: #F9FAFF;cursor: default}
        img{display: block;margin: 0 auto;}
        h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin: 16px 0 8px;}
        p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);padding:0 24px;margin-bottom: 21px;text-align: center;@include multi-line-ellipsis(3);}
      }

      /* 产品功能 */
      .exam-product-function{
        background: #F9FAFF;
        padding-bottom: 32px;
        // ul
        .product-function-box{
          margin-top: 24px;
          li{
            width: 50%;display: inline-block;transition: .3s all linear;
            div{padding: 24px 32px;margin: 0 32px;}
            i{width: 40px;height: 40px;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}}
        }
      }

      /* 产品展示 */
      .exam-product-show{
        background: #0E1F3C;
        h4{color: #fff;}
        // 轮播外层容器
        .product-show-container{max-width: 1600px;margin: 0 auto;}
        .el-carousel{
          min-height: 360px;padding: 48px 0 80px;
          // 轮播内容区
          .el-carousel__container{width: 1360px;height: 360px;margin: 0 auto;}
        }
        // 后方卡片
        .el-carousel__item{
          width:560px;
          .el-carousel__mask{background: transparent;}
          .product-show-carousel{
            width:350px;
            padding-top: 70px;
            margin: 0 auto;
            img{width:100%;height: 198px;border-radius: 8px;}
            h5{@include setFontStyle(-4);color: rgba(255,255,255,0.65);margin-top: 16px;text-align: center;}
          }
        }
        // 前方卡片（active）
        .el-carousel__item.is-active{
            width: 560px;
          .product-show-carousel{
            width: 560px;
            padding-top: 0;
            img{height: 315px;}
          }
        }
        // 轮播下方进度标签
        .el-carousel__indicators--outside{display: none}

      }

      /* 应用场景 */
      .exam-application-scenarios{
         background: #F9FAFF;
        .application-scenarios-box{padding: 120px 0 80px;margin: 0 -16px;}
        li{
          width: 33.33%;
          display: inline-block;
          vertical-align: top;
          position: relative;
          transition: .3s all linear;
          .application-scenarios-img{
            width: 116px;
            height: 116px;
            position: absolute;
             top: -70px;
             left: 50%;
             margin-left: -58px;
             background-size: cover;

            i{width:32px;height:32px;display: block;background-size: cover;position: absolute;}
          }
          .application-scenarios-content{
            padding: 80px 24px 40px;
            margin: 0 16px;
            background: #FFF;
            border-radius: 8px;
            h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
            p{@include setFontStyle(-6);line-height: 22px;color: rgba(0,0,0,0.65);text-align: justify;@include multi-line-ellipsis(5);min-height: 110px;max-height: 110px}
          }
        }
        li:hover{
          margin-top: -16px;cursor: default;
        }
        li:nth-child(1){
          .application-scenarios-img {
            background-image: url("~static/images/client/exam/application-scenarios-img1.svg");
            i{top: 48px;left: 42px;background-image: url("~static/images/client/exam/application-scenarios-icon1.svg");animation: 3s scenariosImgUpDown1 linear infinite;}
          }
        }
        li:nth-child(2){
          .application-scenarios-img {
            background-image: url("~static/images/client/exam/application-scenarios-img2.svg");
            i{top: 35px;left: 38px;background-image: url("~static/images/client/exam/application-scenarios-icon2.svg");animation: 3s scenariosImgUpDown2 linear infinite;}
          }
        }
        li:nth-child(3){
          .application-scenarios-img {
            background-image: url("~static/images/client/exam/application-scenarios-img3.svg");
            i{top: 35px;left: 32px;background-image: url("~static/images/client/exam/application-scenarios-icon3.svg");animation: 3s scenariosImgUpDown2 linear infinite;}
          }
        }
        // 应用场景图标动画
        @keyframes scenariosImgUpDown1 {
          0%, to {top: 48px;}
          50% {top: 40px;}
        }
        @keyframes scenariosImgUpDown2 {
          0%, to {top: 35px;}
          50% {top: 28px;}
        }
      }
  }

  /********  describe: 培训平台 author: TX  date:2020-08-14  ********/
  .client-train-page{

    /* 网站banner */
    .client-train-banner{
      width: 100%;
      height: 454px;
      background-image: url("~static/images/client/train/train-banner-background.png");
      background-position-x: center;

      /* banner文字区域 */
      .train-banner-container{
        width:500px;
        display: inline-block;
        margin-left: 150px;
        h4{@include setFontStyle(36);color: #FFF;letter-spacing: 0;padding-top: 110px;}
        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
        a{width: 132px;height: 32px;line-height: 32px;display: inline-block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
      }
    }

    /* 产品优势 */
    .train-product-advantages{
      width: 100%;display: flex;justify-content: space-between;margin: 48px 0;
      li{width: 250px;padding: 32px 0;border-radius: 8px;transition: .3s all linear;}
      li:hover{background: #F9FAFF;cursor: default}
      img{display: block;margin: 0 auto;}
      h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin: 16px 0 8px;}
      p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);padding:0 24px;margin-bottom: 21px;text-align: center;@include multi-line-ellipsis(3);}
    }

    /* 产品功能 */
    .train-product-function{
      background: #F9FAFF;
      padding-bottom: 32px;
      // ul
      .product-function-box{
        margin-top: 24px;
        li{
          width: 50%;display: inline-block;transition: .3s all linear;
          div{padding: 24px 32px;margin: 0 32px;}
          i{width: 40px;height: 40px;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/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");}}
        li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
      }
    }

    /* 产品展示 */
    .train-product-show{
      background: #0E1F3C;
      h4{color: #fff;}
      // 轮播外层容器
      .product-show-container{max-width: 1600px;margin: 0 auto;}
      .el-carousel{
        height: 360px;padding: 48px 0 80px;
        // 轮播内容区
        .el-carousel__container{width: 1360px;height: 360px;margin: 0 auto;}
      }
      // 后方卡片
      .el-carousel__item{
        width:560px;
        .el-carousel__mask{background: transparent;}
        .product-show-carousel{
          width:350px;
          padding-top: 70px;
          margin: 0 auto;
          img{width:100%;height: 198px;border-radius: 8px;}
          h5{@include setFontStyle(-4);color: rgba(255,255,255,0.65);margin-top: 16px;text-align: center;}
        }
      }
      // 前方卡片（active）
      .el-carousel__item.is-active{
        width: 560px;
        .product-show-carousel{
          width: 560px;
          padding-top: 0;
          img{height: 315px;}
        }
      }
      // 轮播下方进度标签
      .el-carousel__indicators--outside{display: none}

    }

    /* 应用场景 */
    .train-application-scenarios{
      background: #F9FAFF;
      .application-scenarios-box{height:266px;padding: 120px 0 80px;margin: 0 -16px;}
      li{
        width: 33.33%;
        display: inline-block;
        vertical-align: top;
        position: relative;
        transition: .3s all linear;
        .application-scenarios-img{
          width: 116px;
          height: 116px;
          position: absolute;
          top: -70px;
          left: 50%;
          margin-left: -58px;
          background-size: cover;

          i{width:32px;height:32px;display: block;background-size: cover;position: absolute;}
        }
        .application-scenarios-content{
          padding: 80px 24px 40px;
          margin: 0 16px;
          background: #FFF;
          border-radius: 8px;
          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
          p{@include setFontStyle(-6);line-height: 22px;color: rgba(0,0,0,0.65);text-align: justify;@include multi-line-ellipsis(5);min-height: 110px;max-height: 110px}
        }
      }
      li:hover{
        margin-top: -16px;cursor: default;
      }
      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");animation: 3s trainScenariosImgUpDown1 linear infinite;}
        }
      }
      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");animation: 3s trainScenariosImgUpDown1 linear infinite;}
        }
      }
      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");animation: 3s trainScenariosImgUpDown2 linear infinite;}
        }
      }
      // 应用场景图标动画
      @keyframes trainScenariosImgUpDown1 {
        0%, to {top: 45px;}
        50% {top: 38px;}
      }
      @keyframes trainScenariosImgUpDown2 {
        0%, to {top: 32px;}
        50% {top: 25px;}
      }
    }
  }

  /********  describe: 课程开发 author: TX  date:2020-08-24  ********/
  .client-course-page{
    /* 网站banner */
    .client-course-banner{
      width: 100%;
      height: 400px;
      background-image: url("~static/images/client/course/course-banner-background.png");
      background-position-x: center;

      /* banner文字区域 */
      .course-course-container{
        width:520px;
        display: inline-block;
        margin-left: 150px;
        h4{@include setFontStyle(36);color: #FFF;letter-spacing: 0;padding-top: 110px;}
        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
        a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
      }
    }

    /* 课程定制开发 */
    .course-made-box{
        padding-bottom: 80px;
        .client-container{width: 880px;padding-top: 48px;}
        .course-made-content{
            display: inline-block;
            vertical-align: middle;
            margin-right: 56px;
          p{width: 455px;@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin-bottom: 40px;text-align: justify}
          a{width: 132px;height: 32px;line-height: 32px;@include setFontStyle(-4);display:inline-block;text-align:center;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
        }
        img{width: 357px;height: 251px;display:inline-block;vertical-align: middle;}
    }

    /* E-learning课程 */
    .course-learn-box{
      background: #F9FAFF;
      padding-bottom: 80px;

      // 申请方案按钮
      .course-apply-btn{width: 238px;height: 40px;line-height:40px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center;margin: 0 auto;}

      // video列表
      .learn-box-list{
        margin: 54px -16px 24px;
          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;}
      }
    }

    /* 微课程 */
    .course-micro-box{background: #FFF;}
  }

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

    // banner
    .aboutUs-banner{width: 100%;height: 400px;background-image: url("~static/images/client/aboutUs/aboutUs-banner.png");background-position-x: center;}

    // 公司简介
    .company-profile-box{
      padding-bottom: 80px;
      font-size: 0;
      .company-profile-left{
        width: 480px;
        display: inline-block;
        margin-right: 48px;
        vertical-align: middle;
        p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;text-align: justify;}
      }
      .company-profile-right{
        width:432px;height:296px;display: inline-block;background: #E8ECFF;border-radius: 8px;text-align: center;vertical-align: middle;
        img{margin-top: 12px;}
      }
    }

    // 品牌介绍
    .brand-introduction-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .brand-introduction-content{
        width: 806px;
        padding: 30px 0;
        background: #E8ECFF;
        border-radius: 8px;
        float: right;
        span{width: 570px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;display: inline-block;vertical-align: middle;padding-left: 60px;text-align: justify;}
        img{
          display: inline-block;
          vertical-align: middle;
          margin-left: -126px;
        }
      }
    }

    // 企业文化
    .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{
      background: #F9FAFF;
      .development-left{
        float: left;
        width: 50%;
        text-align: right;
        padding-right: 76px;
        padding-top: 170px;
        box-sizing: border-box;
        .development-content{
          h4 div{top: -8px;right: -87px;left: auto}
          p i{margin-left:16px;}
        }
      }
      .development-right{
        width: 50%;
        margin-bottom: 80px;
        float: right;
        padding-left: 76px;
        border-left: 1px solid #D1DFFD;
        box-sizing: border-box;
        .development-content{
          h4 div{top: -8px;left: -87px;right: auto}
          p i{margin-right:16px;}
        }

      }
      .development-content{
        position: relative;
        h4{
          @include setFontStyle(8);color: rgba(0,0,0,0.85);margin-bottom: 24px;
          div{width: 20px;height: 34px;position: absolute;background:#F9FAFF}
          span{
            width: 18px;
            height: 18px;
            border: 1px solid #2B5CFD;
            display: inline-block;
            vertical-align: middle;
            border-radius: 50%;
            text-align: center;
          }
          i{
            width: 12px;
            height: 12px;
            display: inline-block;
            vertical-align: top;
            margin-top: 3px;
            background-image: url("~static/images/client/aboutUs/development-content-icon.svg");
          }
          p{display: inline-block;margin: 0;}
        }
        p{
          margin-bottom: 16px;
          i{width: 36px;height:24px;line-height:24px;display: inline-block;text-align: center;@include setFontStyle(-6);color: rgba(0,0,0,0.65);background: rgba(121,152,255,0.26);border: 1px solid #7998FF;border-radius: 4px;font-style: normal;}
          span{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
        }
      }
      .development-content + .development-content {
        margin-top: 204px;
      }
    }

    // 联系我们
    .contact-us-box{
      height: 534px;
      padding-top: 80px;
      background-image: url("~static/images/client/aboutUs/contact-us-background.png");
      .contact-container-box{
        color: rgba(255,255,255,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(255,255,255,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: 300px;background-image: url("~static/images/client/newsInfor/newsInfor-banner.png");background-position-x: center;}

    // 菜单 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;}
    }
  }
}