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: 480px;
      margin-top: 80px;
      background-image: url("~static/images/client/index/index-banner-background.png");
      background-position-x: center;
      .banner-left{
        width:500px;
        display: inline-block;
        h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 150px;}
        p{@include setFontStyle(4);display: inline-block;background: #6D4FFF;border-radius: 24px;color: #FFF;margin: 24px 5px;padding: 6px 40px;}
      }
      .banner-right{
        width: 611px;
        height: 432px;
        float: right;
        margin-top: 48px;
        background-image: url("~static/images/client/index/index-banner-img.png");
        position: relative;
          .banner-tel-box{
            width: 284px;
            height: 328px;
            background-image: url("~static/images/client/index/index-banner-tel.png");
            position: absolute;
            top: -10px;
            left: 140px;
              //电视屏幕
              img{position: absolute;top: 25px;left: 98px;animation: 5s bannerTel ease infinite;-webkit-animation: 5s bannerTel ease infinite;-moz-animation: 5s bannerTel ease infinite;-o-animation: 5s bannerTel ease infinite;}
              //电视屏幕动画效果
              @keyframes bannerTel{
                from {top: 25px;left: 98px;opacity: 1;}
                to {top: 35px;left: 65px;opacity: 0.1;}
              }
          }
          //饼图
          .banner-pie{
            width: 35px;
            height: 31px;
            display: block;
            position: absolute;
            top: 86px;
            right: 62px;
            background-image: url("~static/images/client/index/index-banner-pie.png");
            animation: 5s webPie ease infinite;-webkit-animation: 5s webPie ease infinite;-moz-animation: 5s webPie ease infinite;-o-animation: 5s webPie ease infinite;
            }
            //饼图动画效果
            @keyframes webPie {
              from {top: 86px;opacity: 1;}
              to {top: 50px;opacity: 0;transform: scale(1.3);}
            }

            //漂浮小圆点
            .banner-i-run i{
              width: 16px;
              height: 16px;
              display: block;
              position: absolute;
              background:#51E2F4;
              border-radius: 50%;
              bottom: 150px;
              left: 80px;
              opacity: 0;
            }
            .banner-i-run i:nth-child(1){animation: 5s bannerRunI1 ease infinite;-webkit-animation: 5s bannerRunI1 ease infinite;-moz-animation: 10s bannerRunI1 ease infinite;-o-animation: 5s bannerRunI1 ease infinite;}
            .banner-i-run i:nth-child(2){width:8px;height:8px;bottom: 240px;left: 50px;opacity: 0;animation: 5s bannerRunI2 ease 2s infinite;-webkit-animation: 5s bannerRunI2 ease 2s infinite;-moz-animation: 5s bannerRunI2 ease infinite;-o-animation: 5s bannerRunI2 ease infinite;}
            .banner-i-run i:nth-child(3){width:7px;height:7px;bottom: 220px;left: 110px;opacity: 0;animation: 5s bannerRunI3 ease 3s infinite;-webkit-animation: 5s bannerRunI3 ease 3s infinite;-moz-animation: 5s bannerRunI3 ease infinite;-o-animation: 5s bannerRunI3 ease infinite;}
            .banner-i-run i:nth-child(4){width:9px;height:9px;bottom: 300px;left: 130px;opacity: 0;animation: 5s bannerRunI4 ease 4s infinite;-webkit-animation: 5s bannerRunI4 ease 4s infinite;-moz-animation: 5s bannerRunI4 ease infinite;-o-animation: 5s bannerRunI4 ease infinite;}
            .banner-i-run i:nth-child(5){width:6px;height:6px;bottom: 310px;left: 70px;opacity: 0;animation: 5s bannerRunI5 ease 5s infinite;-webkit-animation: 5s bannerRunI5 ease 5s infinite;-moz-animation: 5s bannerRunI5 ease infinite;-o-animation: 5s bannerRunI5 ease infinite;}
            @keyframes bannerRunI1 {
              0%{bottom: 150px;opacity: 1;}
              100%{bottom: 240px;opacity: 0;left: 70px;}
            }
            @keyframes bannerRunI2 {
              //0%{opacity: 0.5;}
              0%{opacity: 0;}
              5%{bottom: 240px;opacity: 0.7;}
              100%{bottom: 410px;opacity: 0;left: 40px;}
            }
            @keyframes bannerRunI3 {
              0%{opacity: 0;}
              5%{bottom: 220px;opacity: 0.8;}
              100%{bottom: 380px;opacity: 0;left: 130px}
            }
            @keyframes bannerRunI4 {
              0%{opacity: 0;}
              5%{bottom: 300px;opacity: 0.8;}
              70%{bottom: 400px;opacity: 0;left: 160px}
            }
            @keyframes bannerRunI5 {
              0%{opacity: 0;}
              5%{bottom: 310px;opacity: 0.6;}
              100%{bottom: 420px;opacity: 0;left: 110px}
            }
      }
    }

    /* 认识我们*/
    .client-link-box{
      background: #F7F9FB;
      li{
        width: 25%;display: inline-block;padding:24px;border-right: 2px solid #FFF;box-sizing: border-box;transition: 0.3s;
        //左侧图片区域
        .link-left{
          width: 60px;height: 60px;float: left;background-image: url("~static/images/client/index/index-linkLeft-bg.svg");text-align:center;transition: 0.3s;
          i{width:24px;height:24px;display: inline-block;margin-top: 18px;}
        }

        h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 74px;}
        p{@include setFontStyle(-6);height:48px;color: rgba(0,0,0,0.65);line-height: 22px;margin-left:74px;@include multi-line-ellipsis(2);}
      }
      li:nth-child(1){.link-left i{background-image: url("~static/images/client/index/index-link-img1.svg");}}
      li:nth-child(1):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img1-a.svg");}}
      li:nth-child(2){.link-left i{background-image: url("~static/images/client/index/index-link-img2.svg");}}
      li:nth-child(2):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img2-a.svg");}}
      li:nth-child(3){.link-left i{background-image: url("~static/images/client/index/index-link-img3.svg");}}
      li:nth-child(3):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img3-a.svg");}}
      li:nth-child(4){.link-left i{background-image: url("~static/images/client/index/index-link-img4.svg");}}
      li:nth-child(4):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img4-a.svg");}}
      li:last-child{border-right: 0;}
      li:hover{
        background: #F1F1F1;
        cursor: pointer;
        //左侧图片区域
        .link-left{background-image: url("~static/images/client/index/index-linkLeft-bg-a.svg");}
        h5{color: #2B5CFD}
      }

    }

    /* 产品和服务 */
    .products-services-box{
      padding: 136px 0 32px;
        li{
          width: 33.33%;
          display: inline-block;
          vertical-align: top;
          position: relative;
          //头部图片
          .products-services-img{
            width: 96px;
            height: 120px;
            position: absolute;
            top: -80px;
            left: 50%;
            margin-left: -48px;
            transition: .3s all linear;
            i{
              display: block;
              position: absolute;
            }
          }
          //内容区域
          .products-services-content{
            padding: 66px 40px 32px;
            transition: .3s all linear;
            margin: 0 24px;
            @include setFontStyle(-6);
            h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
            p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 70px;text-align: justify;@include multi-line-ellipsis(6);}
            a,div,span{width: 120px;height: 32px;display:inline-block;line-height: 32px;opacity:0;margin-right: 24px}
            span{background: transparent;color: #2B5CFD;margin-right: 0}
          }
        }
        li:nth-child(1){
          .products-services-img{
            background-image: url("~static/images/client/index/index-products-kaoshi.png");
            i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~static/images/client/index/index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
          }
        }
        li:nth-child(2){
          .products-services-img{
            background-image: url("~static/images/client/index/index-products-peixun.png");
            i{width:21px;height:32px;top: 18px;left: 42px;background-image: url("~static/images/client/index/index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
          }
        }
        li:nth-child(3){
          .products-services-img{
            background-image: url("~static/images/client/index/index-products-kejian.png");
            i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~static/images/client/index/index-products-kejian-icon.svg");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
          }
        }
        //小图标动画效果
      //饼图动画效果
      @keyframes servicesImgUpDown {
        0%, to {top: 28px}
        50% {top: 38px;}
      }

      @keyframes servicesImgUpDown2 {
        0%, to {top: 18px}
        50% {top: 28px;}
      }

      @keyframes servicesImgRotate{
        from {transform:rotate(0);}
        to {transform:rotate(360deg);}
      }
        // li-鼠标悬浮效果
        li:hover{
          //头部图片
          .products-services-img{top: -90px;}
          //内容区域
          .products-services-content{
            cursor: default;
            box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
            border-radius: 8px;
            a,div,span{opacity: 1;}
          }
        }
    }

    /* 行业学习需求 */
    .client-demand-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      min-height: 720px;
      //tab
      .demand-box-tab{
        margin-top: 16px;
          .el-tabs__nav div:first-child{border-radius: 4px 0 0 4px;}
          .el-tabs__nav div:last-child{border-radius: 0 4px 4px 0;}
          .el-tabs__item{width:112px;height: 32px;line-height: 32px;@include setFontStyle(-4);color: rgba(0,0,0,0.85);padding: 0;text-align: center;border: 1px solid #FCA20E;}
          .el-tabs__item.is-active{background: #FEBF11;border-color:#FEBF11;color: rgba(255,255,255,0.85);}

      }
      //覆盖饿了么样式
      .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{border: 0}
      .demand-box-tab .el-tabs__nav-scroll{text-align: center;}
      .demand-box-tab .el-tabs__nav{float: none;}

      // 考试ul
      .demand-tab-list{
        margin-right: -34px;
        margin-bottom: 24px;
        li{
          width: 128px;height: 134px;margin-right: 34px;display: inline-block;background:#fff;text-align: center;box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
          border-radius: 8px;transition: 0.3s;
          i{width: 48px;height: 48px;display: inline-block;background-repeat: no-repeat;margin-top: 24px;transition: 0.3s;}
          p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);margin-top: 16px;transition: 0.3s;}
        }
        li:last-child{margin-right: 0;}
        li:hover,li.active{
          background-image: url("~static/images/client/index/demand-li-bg.png");cursor: pointer;
          p{color: rgba(255,255,255,0.85);}
        }
      }

      .demand-kaoshi-list{
        li:nth-child(1){i{background-image: url("~static/images/client/index/index-demand-img1.svg");}}
        li:hover:nth-child(1),li.active:nth-child(1){i{background-image: url("~static/images/client/index/index-demand-img1-a.svg");} }
        li:nth-child(2){i{background-image: url("~static/images/client/index/index-demand-img2.svg");}}
        li:hover:nth-child(2),li.active:nth-child(2){i{background-image: url("~static/images/client/index/index-demand-img2-a.svg");} }
        li:nth-child(3){i{background-image: url("~static/images/client/index/index-demand-img3.svg");}}
        li:hover:nth-child(3),li.active:nth-child(3){i{background-image: url("~static/images/client/index/index-demand-img3-a.svg");} }
        li:nth-child(4){i{background-image: url("~static/images/client/index/index-demand-img4.svg");}}
        li:hover:nth-child(4),li.active:nth-child(4){i{background-image: url("~static/images/client/index/index-demand-img4-a.svg");} }
        li:nth-child(5){i{background-image: url("~static/images/client/index/index-demand-img5.svg");}}
        li:hover:nth-child(5),li.active:nth-child(5){i{background-image: url("~static/images/client/index/index-demand-img5-a.svg");} }
        li:nth-child(6){i{background-image: url("~static/images/client/index/index-demand-img6.svg");}}
        li:hover:nth-child(6),li.active:nth-child(6){i{background-image: url("~static/images/client/index/index-demand-img6-a.svg");} }
      }
      //考试详情（li对应div）
      .demand-content-box{
        padding: 16px;background: #1276FF;
        border-radius: 8px;
        margin-right: 22px;
        h5{
          @include setFontStyle(-4);
          color: rgba(255,255,255,0.85);
          margin-bottom: 8px;
        }
        p{min-height: 66px;@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;@include multi-line-ellipsis(3);}
        .content-top-box{
          padding-bottom: 16px;
          margin-bottom: 16px;
          border-bottom:1px solid rgba(255,255,255,0.65);
          span{@include setFontStyle(-4);float:right;color: #FFD04E;}
        }
      }
      // 图标div
      .demand-icon-box{
        display: inline-block;
        text-align: center;
        margin-right: 40px;
        img{width: 48px;height: 48px;border-radius: 4px;display: block;margin: 0 auto}
        span{@include setFontStyle(-6);color: rgba(255,255,255,0.65);margin-top: 8px;}
      }
      // 行业ul
      /*.industry-box{
        margin-top: 10px;
        li{
          width: 25%;display: inline-block;margin-top: 38px;height: 112px;overflow: hidden;
          img{margin: 0 auto;display: block;transition: all .2s linear;}
          div{transition: all .25s linear;text-align: center;}
          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin: 18px 0 10px;}
          p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin: 0 8px 8px;min-height: 48px;@include multi-line-ellipsis(2);max-height: 48px;}
          a{@include setFontStyle(-6);display: block;color: #2B5CFD;margin: 0 auto;transition: .3s all linear;}
        }
        a:hover{cursor: pointer;color: #2249C9;}
        li:hover:not(:last-child) {
          img{opacity: 0;transform: translateY(10px);}
          div{margin-top: -147px}
          h5{@include setFontStyle(-2);margin-top: 90px;}
        }
        li:last-child:hover{
          cursor: pointer;
        }
      }*/
    }

    /* 超过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: #F9FAFF;
      padding-bottom: 80px;
      .cert-img-box{
        display: flex;
        justify-content: space-between;
        margin: 48px 0;
          span{display:block;background: #E8ECFF;border-radius: 8px;padding:10px;overflow: hidden;}
          img{width: 180px;height:260px;transition: all 0.5s;}
          img:hover{transform: scale(1.14);}
      }
      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;}
    }

    /* 为什么选择我们 */
    .client-chose-box{
      padding-bottom: 80px;
      .chose-img-box{
        li{
          width: 25%;display: inline-block;
          div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 48px auto 24px;transition: all 0.3s;background-size: cover}
          i{width: 62px;height: 62px;position: absolute;top: 63px;left: 45px;background-size: cover;}
          h5{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
        }
        li:nth-child(1){
          div{background-image: url("~static/images/client/index/index-chose-service.png");}
          i{background-image: url("~static/images/client/index/index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
        }
        li:nth-child(2){
          div{background-image: url("~static/images/client/index/index-chose-system.png");}
          i{background-image: url("~static/images/client/index/index-chose-system-icon.svg");top: 30px;left: 50px;animation: 3s choseImgUpDown2 linear infinite;}
        }
        li:nth-child(3){
          div{background-image: url("~static/images/client/index/index-chose-tech.png");}
          i{background-image: url("~static/images/client/index/index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
        }
        li:nth-child(4){
          div{background-image: url("~static/images/client/index/index-chose-operate.png");}
          i{background-image: url("~static/images/client/index/index-chose-operate-icon.svg");animation: 3s choseImgUpDown3 linear infinite;}
        }
        li:hover{
          div{box-shadow: 0 3px 9px rgba(43, 92, 253,0.25);transform: translateY(-10px);cursor: pointer;}
          h5{color: #2B5CFD;}
        }
        //选择我们动画效果
        @keyframes choseImgUpDown1 {
          0%, to {top: 65px;}
          50% {top: 55px;}
        }
        @keyframes choseImgUpDown2 {
          0%, to {top: 30px;}
          50% {top: 40px;}
        }
        @keyframes choseImgUpDown3 {
          0%, to {top: 40px;}
          50% {top: 50px;}
        }
      }
    }
  }

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


  }
}