|
|
@@ -524,6 +524,163 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ /******** 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: 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-07 ********/
|
|
|
.client-aboutUs-page{
|
|
|
|
tanxue
