portal/src/assets/css/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("~@/assets/images/client/index/" + "index-banner-background.png");
      background-position-x: center;
      .banner-left{
        width:500px;
        display: inline-block;
        h1{@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("~@/assets/images/client/index/" + "index-banner-img.png");
        position: relative;
          .banner-tel-box{
            width: 284px;
            height: 328px;
            background-image: url("~@/assets/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("~@/assets/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("~@/assets/images/client/index/" + "index-linkLeft-bg.png");text-align:center;transition: 0.3s;
          img{display: inline-block;margin-top: 18px;}
        }

        h1{@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:last-child{border-right: 0;}
      li:hover{
        background: #F3F3F3;
        cursor: pointer;
        //左侧图片区域
        .link-left{background-image: url("~@/assets/images/client/index/" + "index-linkLeft-bg-a.png");}
        h1{color: #2B5CFD}
      }

    }

    /* 产品和服务 */
    .products-services-box{
      padding: 136px 0 32px;
      margin: 0 -29px;
        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 42px 32px;
            transition: .3s all linear;
            margin: 0 29px;
            @include setFontStyle(-6);
            h2{@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: 32px;text-align: justify;min-height: 136px;@include multi-line-ellipsis(6);max-height: 136px}
            a{width: 120px;height: 32px;line-height: 32px;opacity:0;margin: 0 auto;}
          }
        }
        li:nth-child(1){
          .products-services-img{
            background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi.png");
            i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
          }
        }
        li:nth-child(2){
          .products-services-img{
            background-image: url("~@/assets/images/client/index/" + "index-products-peixun.png");
            i{width:21px;height:32px;top: 18px;left: 42px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
          }
        }
        li:nth-child(3){
          .products-services-img{
            background-image: url("~@/assets/images/client/index/" + "index-products-kejian.png");
            i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~@/assets/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{opacity: 1;}
          }
        }
    }

    /* 行业学习需求 */
    .client-demand-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      // 行业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;}
          h2{@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}
          h2{@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: 8px}
        }
      }
    }

    /* 我们始终专注教育系统研发更懂用户需求 */
    .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{
        margin: 0 -70px;
        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;}
          h2{@include setFontStyle(-2);text-align: center;color: rgba(0,0,0,0.85);}
        }
        li:nth-child(1){
          div{background-image: url("~@/assets/images/client/index/" + "index-chose-service.png");}
          i{background-image: url("~@/assets/images/client/index/" + "index-chose-service-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
        }
        li:nth-child(2){
          div{background-image: url("~@/assets/images/client/index/" + "index-chose-system.png");}
          i{background-image: url("~@/assets/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("~@/assets/images/client/index/" + "index-chose-tech.png");}
          i{background-image: url("~@/assets/images/client/index/" + "index-chose-tech-icon.svg");animation: 3s choseImgUpDown1 linear infinite;}
        }
        li:nth-child(4){
          div{background-image: url("~@/assets/images/client/index/" + "index-chose-operate.png");}
          i{background-image: url("~@/assets/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;}
          h2{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;}
        }
      }
    }

    /* 新闻资讯 */
    .client-industry-information{
      background-image: url("~@/assets/images/client/index/" + "index-industry-bg.png");
      background-position: center;
      padding-bottom: 80px;
      // 标题
      .client-title{
        color: #fff;
      }
      // 轮播组件
      .el-carousel{
        margin-top: 40px;
        .el-carousel__container{
          height: 360px;
        }

      }
      .el-carousel__item{
        background: #FFFFFF;
        border-radius: 8px;
        .industry-img-box{
          width: 25%;
          height: 360px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          transition: 0.3s;
          float: left;
        }
        .industry-content-box{
          margin-left: 25%;
          padding:32px;
          height: inherit;
          box-sizing: border-box;
          position: relative;
          h1{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;@include multi-line-ellipsis(2);line-height: 30px;max-height: 60px;}
          p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(6);margin-bottom: 24px;max-height: 144px;}
          a{width: 132px;height: 32px;line-height:32px;position: absolute;bottom: 32px;}
        }
      }
      .el-carousel__item.is-active{
        height: 350px;
        //box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
        box-shadow: 0 2px 8px 0 rgba(146, 143, 143, 0.76);
        .industry-img-box{width: 50%;}
        .industry-content-box{
          margin-left: 50%;
        }
      }
      //指示器
      .el-carousel__indicators{display: none}
    }
  }

  /********  describe: 考试平台 author: TX  date:2020-08-12  ********/
  .client-exam-page{
    /* 网站banner */
    .client-exam-banner{
      width: 100%;
      height: 400px;
      background-image: url("~@/assets/images/client/exam/" + "exam-banner-background.png");
      background-position-x: center;
      // banner文字区域
      .exam-banner-container{
        width:500px;
        display: inline-block;
        h1{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 110px;}
        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
        em{width:1px;height:16px;display:inline-block;margin: 0 24px;background: #DFE6FE;vertical-align: middle;}
        a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
      }
    }
  }

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

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

    // 公司简介
    .company-profile-box{
      padding-bottom: 80px;
      .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;
      }
    }

    // 联系我们
    .contact-us-box{
      background: #F9FAFF;
      .contact-container-box{
        li{
          width: 25%;
          display: inline-block;
          i{width: 22px;height: 24px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px}
          span{@include setFontStyle(0);color: rgba(0,0,0,0.85);}
          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin: 20px 0 32px;}
        }
        li:nth-child(1) {
          i {background-image: url("~@/assets/images/client/aboutUs/" + "contact-us-icon1.svg");}
        }
        li:nth-child(2) {
          i {background-image: url("~@/assets/images/client/aboutUs/" + "contact-us-icon2.svg");}
        }
        li:nth-child(3) {
          i {background-image: url("~@/assets/images/client/aboutUs/" + "contact-us-icon3.svg");}
        }
        li:nth-child(4) {
          i {background-image: url("~@/assets/images/client/aboutUs/" + "contact-us-icon4.svg");}
        }
      }
    }

    //地图
    .address-img-box{
      width: 100%;
      height: 720px;
      background-image: url("~@/assets/images/client/aboutUs/" + "contact-us-img.png");
      background-position: center;
      overflow: hidden;
    }
  }

  /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
  .client-newsInfor-page{
    // banner
    .newsInfor-banner{width: 100%;height: 400px;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-banner.png");background-position-x: center;}

    // 页面主要内容区域
    .newsInfor-content-box{
      min-height: 304px;
      padding: 80px 0;
      ul{display: inline-block;vertical-align: top}
      // 菜单 ul
      .newsInfor-menu-ul{
        li{width: 200px;height: 64px;line-height: 64px;@include setFontStyle(0);color: rgba(0,0,0,0.64);text-align: left;padding: 0;padding-left: 24px;border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
        li:before{content: "";width:8px;height:8px;display: inline-block;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-tab-unSelect.svg");margin-right: 16px;
          vertical-align: middle;}
        li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
        li.active:before{background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-tab-select.svg");}
      }

      // 右侧内容区域
      .newsInfor-content-ul{
        padding: 0 32px;
        width: calc(100% - 290px);
        li{margin-bottom: 40px;}
        li:last-child{margin-bottom: 0;}
        //图片
        img{width:200px;height:150px;display: inline-block;margin-right: 24px;border-radius: 8px;overflow: hidden;vertical-align: top;}
        //内容区域
        .newsInfor-list-content{
          width: calc(100% - 224px);
          display: inline-block;
          vertical-align: top;

          h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
          div{
            margin-bottom: 16px;
            i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-details-time.svg");}
            i[type="visits"]{background-image: url("~@/assets/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: 16px;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("~@/assets/images/client/newsInfor/" + "newsInfor-list-icon.svg");margin-left: 8px;}
          a:hover{cursor: pointer;}
        }
      }
    }


  }
}