portal/src/assets/css/cus-website/cus-website-page.scss

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

@mixin setWebsitePage() {
  /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
  .website-index-page{
     width: 100%;
     min-width: 1240px;
    /* 网站banner */
    .website-banner{
      width: 100%;
      height: 480px;
      background-image: url("~@/assets/images/website/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/website/index/" + "index-banner-img.png");
        position: relative;
          .banner-tel-box{
            width: 284px;
            height: 328px;
            background-image: url("~@/assets/images/website/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/website/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}
            }
      }
    }

    /* 网站标题 */
    .website-index-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}

    /* 产品和服务 */
    .products-services-box{
      padding: 116px 0 30px;
        li{
          width: 33.33%;
          display: inline-block;
          vertical-align: top;
          position: relative;
          //头部图片
          .products-services-img{
            height: 173px;
            position: absolute;
            top: -80px;
            left: 50%;
            transition: .3s all linear;
            i{
              display: block;
              position: absolute;
            }
          }
          //内容区域
          .products-services-content{
            padding: 110px 32px 48px 32px;
            transition: .3s all linear;
            @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);}
            a{background: #2B5CFD;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;display: block;text-align: center;margin: 0 auto;}
          }
        }
        li:nth-child(1){
          .products-services-img{
            width: 148px;
            margin-left: -74px;
            background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi.png");
            i{width:57px;height:41px;top: 28px;left: 50px;background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi-icon.png");animation: 3s servicesImgUpDown linear infinite;}
          }
        }
        li:nth-child(2){
          .products-services-img{
            width: 138px;
            margin-left: -69px;
            background-image: url("~@/assets/images/website/index/" + "index-products-peixun.png");
            i{width:31px;height:45px;top: 28px;left: 60px;background-image: url("~@/assets/images/website/index/" + "index-products-peixun-icon.png");animation: 3s servicesImgUpDown linear infinite;}
          }
        }
        li:nth-child(3){
          .products-services-img{
            width: 155px;
            margin-left: -77px;
            background-image: url("~@/assets/images/website/index/" + "index-products-kejian.png");
            i{width:48px;height:48px;top: 35px;left: 45px;background-image: url("~@/assets/images/website/index/" + "index-products-kejian-icon.png");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
          }
        }
        //小图标动画效果
      //饼图动画效果
      @keyframes servicesImgUpDown {
        0%, to {top: 28px}
        50% {top: 40px;}
      }
      @keyframes servicesImgRotate{
        from {transform:rotate(0);}
        to {transform:rotate(360deg);}
      }
        // li-鼠标悬浮效果
        li:hover{
          //头部图片
          .products-services-img{top: -100px;}
          //内容区域
          .products-services-content{
            cursor: default;
            box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
            border-radius: 8px;
          }
        }
    }

    /* 行业学习需求 */
    .website-demand-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      // 行业ul
      .industry-box{
        margin-top: 8px;
        li{
          width: 25%;display: inline-block;margin-top: 32px;height: 147px;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: 24px 0 16px;}
          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);}
          a{@include setFontStyle(-6);display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
        }
        li:hover{
          img{opacity: 0;transform: translateY(10px);}
          div{margin-top: -147px}
          h2{@include setFontStyle(-2);margin-top: 80px;}
          a{cursor: pointer;}
        }
      }
    }

    /* 超过10万家客户的信任之选 */
    .website-customer-box{
      .customer-img-box{
        margin: 40px 0 80px;
        li{
          width: 20%;
          display: inline-block;
        }
        img{margin: 16px auto;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}
        }
      }
    }

    /* 我们始终专注教育系统研发更懂用户需求 */
    .website-cert-box{
      background: #F9FAFF;
      padding-bottom: 80px;
      .website-index-title{padding-bottom: 8px;}
      .cert-img-box{
        display: flex;
        justify-content: space-between;
        margin: 32px 0;
          span{display:block;border: 2px solid #2B5CFD;border-radius: 8px;padding:5px;overflow: hidden;}
          img{width: 200px;height:280px;transition: all 0.5s;}
          img:hover{transform: scale(1.1);}
      }
      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;text-align: center;@include setFontStyle(-4);display:block;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
      a:hover{cursor: pointer}
    }

    /* 为什么选择我们 */
    .website-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: 40px auto 24px;transition: all 0.3s;background-size: cover}
          i{width: 62px;height: 62px;position: absolute;top: 65px;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/website/index/" + "index-chose-service.png");}
          i{background-image: url("~@/assets/images/website/index/" + "index-chose-service-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
        }
        li:nth-child(2){
          div{background-image: url("~@/assets/images/website/index/" + "index-chose-system.png");}
          i{background-image: url("~@/assets/images/website/index/" + "index-chose-system-icon.png");top: 30px;left: 55px;animation: 3s choseImgUpDown2 linear infinite;}
        }
        li:nth-child(3){
          div{background-image: url("~@/assets/images/website/index/" + "index-chose-tech.png");}
          i{background-image: url("~@/assets/images/website/index/" + "index-chose-tech-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
        }
        li:nth-child(4){
          div{background-image: url("~@/assets/images/website/index/" + "index-chose-operate.png");}
          i{background-image: url("~@/assets/images/website/index/" + "index-chose-operate-icon.png");top: 50px;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;}
        }
      }
    }

    /* 行业资讯 */
    .website-industry-information{
      background: #F9FAFF;
      padding-bottom: 80px;
      // 轮播组件
      .el-carousel{
        margin-top: 40px;
        .el-carousel__container{
          height: 360px;
        }

      }
      .el-carousel__item{
        background: #FFFFFF;
        border-radius: 8px;
        .website-img-box{
          width: 200px;
          height: 360px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          transition: 0.3s;
          float: left;
        }
        .website-content-box{
          margin-left: 200px;
          padding:32px;
          h1{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
          p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(9);min-height: 200px;margin-bottom: 24px;}
          a{width: 132px;height: 32px;line-height:32px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center}
        }
      }
      .el-carousel__item.is-active{
        height: 350px;
        box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
        .website-img-box{width: 400px;}
        .website-content-box{
          margin-left: 400px;
          p{@include multi-line-ellipsis(9);}
        }
      }
      //指示器
      .el-carousel__indicators{display: none}
    }
  }
}