@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; } /* banner-box */ .client-banner-box{ .el-carousel__container{height: 395px;cursor: pointer;} .el-carousel__item{ .index-carousel-box{width:100%;height: 395px;display: block;background-position: center;background-repeat: no-repeat;background-color: #010619;} } } /* 发展历程 - 移动端隐藏*/ .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: #f5f5f5; 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{max-height: 100px;overflow: hidden;@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");}} } li:nth-child(6){ .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic12.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; h4{color: #333;} h4:hover {cursor: pointer;color: #3e7ce7;} // 左 .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;} 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);@include single-line-ellipsis;margin-bottom: 12px;} p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;} span {margin: 0 30px 0 10px;} } } } // 移动端手机尺寸(0-768) @media (max-width: 768px){ /* 网站banner */ .client-index-banner{height: 150px;} /* banner-box */ .client-banner-box{ .el-carousel__container{height: 150px;} .el-carousel__item .index-carousel-box{height: 150px;background-size: cover;} // 左箭头 .el-carousel__arrow--left{display: none;} // 右箭头 .el-carousel__arrow--right{display: none;} // 分页 .el-carousel__button {width: 6px;height: 6px;border-radius: 3px;} } /* 产品和服务 */ .client-products-services{ .client-title{ margin-bottom: 0; } } /* 行业学习需求 */ .client-demand-box{ padding: 30px 0 0; min-height: 610px; //tab .demand-box-tab{ margin-top: 20px; .el-tabs__item{width:100px;height: 30px;line-height: 30px;border-radius: 5px;margin: 0 8px 12px;} .el-tabs__item.is-active:after{border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #3e7ee7;bottom: -14px;} } //覆盖饿了么样式 .el-tabs__header{margin: 0 7px 15px;} // 考试ul .demand-tab-list{ margin: 0; li{ width: 50%;margin-bottom: 12px; // 内容区域 .demand-content-box{height: 125px;background-size: 25%;margin: 0 7px;} //图片区域 .demand-img-box{ min-width: 70px;top: 30px;margin-left: -35px; i{width: 40px;height: 40px;margin: 0 auto 15px;} h4{@include setFontStyle(-6);color: rgb(16, 16, 16);} } // 蒙版 .demand-mask-box{display: none;} // 点击按钮 .demand-onclick-btn{position: absolute;top: 0;left: 7px;right: 7px;bottom: 0;z-index: 99;} } } } /* 为什么选择我们 */ .client-chose-box{ padding: 0; .chose-img-box{ margin: 20px 0 0; li{ width: 50%;margin-bottom: 12px; div{height: 125px;margin: 0 7px;} span{height: 90px;} img{width:60px;margin: 16px auto 0;} h5{@include setFontStyle(-4);color: #101010;} } } .client-default-Btn { width: 238px; height: 40px; line-height: 40px; margin: 40px auto 0; } } /* 新闻资讯 */ .client-newsInfo-phone{ background-color: rgb(238, 238, 238); // 轮播外层 .el-carousel{ padding: 20px 0 40px; // card .el-carousel__item{ width: 80%;left: -15%;color: rgb(16, 16, 16);background: #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px; img{width: 100%;height: 135px;} } // 文字区域 .newsInfo-card-content{ padding: 24px 20px; h4{@include setFontStyle(-4);} span{@include setFontStyle(-8);margin-top: 16px;display: block} p{min-height: 48px;@include setFontStyle(-6);margin-top: 16px;@include multi-line-ellipsis(3);} } } } /* 超过10万家客户的信任之选 */ .client-customer-box{padding-top: 50px; .customer-img-box{ padding-bottom: 50px; li{width: 50%;text-align: center;} img{max-width:90%;margin: 10px 0;} 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{ padding: 0 7px 28px; .cert-img-box{ margin: 20px 0 0; span{height: 64px;padding: 2px 2px 0;} span:nth-child(3){ height: 55px; img{width: 80px;height:53px;} } img{width: 44px;height:62px;} img:hover{transform: none;} } a{width:122px;height:35px;line-height: 35px;margin: 28px auto 0;} } } } /******** describe: 平台页面(考试平台、培训平台) author: TX date:2020-08-12 ********/ .client-platform-page{ /* 网站banner */ .client-platform-banner{ width: 100%; height: 396px; background-color:#042D85; position: relative; div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;} .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;} } /* 产品体验*/ .platform-products-experience{ >p{font-size: 20px;line-height: 20px;text-align: center;margin: 30px 0 42px;} .experience-ul-box{ margin: 0 -16px;text-align: center; li{ width:25%;display: inline-block;text-align: center;font-size: 16px; >div{ margin: 0 16px;padding:32px 18px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;border-radius: 10px;position: relative; div{font-size:20px;color:#fff;position: absolute;right: 0;left: 0;top: 0;bottom: 305px;box-sizing: border-box;transition: 0.5s;overflow: hidden;border-radius: 10px;line-height: 305px;background: rgba(0,0,0,.6);cursor: default;} } i{display: inline-block;width: 46px;height: 46px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;} h5{font-size: 22px;color: rgb(16, 16, 16);margin-bottom: 24px;} p{font-size: 16px;padding: 0;margin: 0;color: #101010;line-height: 26px;} a{width: 180px;height: 40px;line-height: 40px;display: inline-block;margin-top: 24px;text-align: center;background-color: #3e7ce7; border-color: rgba(255, 0, 0, 0);border-width: 1px;border-style: solid;color: rgb(255, 255, 255);border-radius:4px;font-weight: normal;cursor: pointer} span{display: block;transition: 0.5s;position: absolute;top: 0;bottom: 305px;left: 0;right: 0;overflow: hidden;} em{width:180px;height:180px;display: block;margin: 24px auto;background-image:url("~static/images/client/exam/exam-code-img.png")} em.px-img-box{background-image:url("~static/images/client/train/train-code-img.png")} } li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")} li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")} li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-sz-icon.png")} li:nth-child(4) i{background-image:url("~static/images/client/exam/exam-sx-icon.svg")} } } /* 产品优势 */ .platform-products-services{ li:not(:last-child){border-bottom:1px solid #eee; } } /* 产品功能 */ .platform-product-function{ background: #f8f8f8; padding-bottom: 32px; // ul .product-function-box{ margin-top: 48px; li{ width: 50%;display: inline-block;transition: .3s all linear; div{padding: 12px 16px 12px 8px;margin: 0 32px 24px;background: #fff;} i{width: 158px;height: 120px;margin-right:24px;float:left;background-size: cover;background-repeat: no-repeat;} h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin: 12px 0 8px 0;} p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);@include multi-line-ellipsis(3);} } } .product-function-box li:nth-child(1) i,.product-function-icon1{background-image:url("~static/images/client/exam/product-function-icon1.png");} .product-function-box li:nth-child(2) i,.product-function-icon2{background-image:url("~static/images/client/exam/product-function-icon2.png");} .product-function-box li:nth-child(3) i,.product-function-icon3{background-image:url("~static/images/client/exam/product-function-icon3.png");} .product-function-box li:nth-child(4) i,.product-function-icon4{background-image:url("~static/images/client/exam/product-function-icon4.png");} .product-function-box li:nth-child(5) i,.product-function-icon5{background-image:url("~static/images/client/exam/product-function-icon5.png");} .product-function-box li:nth-child(6) i,.product-function-icon6{background-image:url("~static/images/client/exam/product-function-icon6.png");} .product-function-box li:nth-child(7) i,.product-function-icon7{background-image:url("~static/images/client/exam/product-function-icon7.png");} .product-function-box li:nth-child(8) i,.product-function-icon8{background-image:url("~static/images/client/exam/product-function-icon8.png");} .product-function-box li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}} } /* 应用场景 */ .platform-application-scenarios{ background: #FFF; padding-bottom: 80px; .application-scenarios-box{margin: 48px -12px 0;} li{ width: 33.33%; display: inline-block; vertical-align: top; color: #fff; .application-scenarios-img{width: 100px;height: 100px;background-size: cover;margin: 0 auto 24px;} .application-scenarios-content{ padding: 50px 30px 40px;margin: 0 12px;background: #FFF; h5{@include setFontStyle(0);text-align: center;margin-bottom: 24px;} p{@include setFontStyle(-4);line-height: 24px;text-align: justify;@include multi-line-ellipsis(5);min-height: 118px;max-height: 118px} } } li:nth-child(1){ .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img1.png");} .application-scenarios-content{background: #ffbf00;} } li:nth-child(2){ .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img2.png");} .application-scenarios-content{background: #3799db;} } li:nth-child(3){ .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img3.png");} .application-scenarios-content{background: #63ba86;} } } @media (max-width: 768px){ /* 网站banner */ .client-platform-banner{ height: 150px; div{background-size: cover;} .free-trial-default-btn{top: 90px;margin-left: -61px;} } // 产品体验 .platform-products-experience{ .sjxyd-icon {background-image: url("~static/images/client/exam/exam-tel-icon.png")} .dnxyd-icon {background-image: url("~static/images/client/exam/exam-pc-icon.png")} .dngld-icon {background-image: url("~static/images/client/exam/exam-sz-icon.png")} .skrz-icon {background-image: url("~static/images/client/exam/exam-sx-icon.svg")} >p{font-weight: 400;font-size: 14px;color: rgba(85, 85, 85, 1);margin: 24px 0 16px;} } // 产品优势 .platform-products-services{ li:not(:last-child) {border: 0;} .products-services-content div{text-align: center;margin-bottom: 40px;} } // 产品功能 .platform-product-function{ padding-bottom: 16px; // swiper .experience-swiper-box{ // swiper 内容区域 .experience-content-box{ height:328px;margin: 16px 4% 20px;padding: 16px 16px 46px;box-sizing: border-box;box-shadow: rgb(170, 209, 249) 0 0 6px -1px;background-color: #fff; i{width: 150px;height: 122px;} h5{width: 100%;text-align: left;margin-bottom: 12px;} p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(4);} } // 分页 .swiper-pagination-style {width: 200px;margin-left: -90px;bottom: 50px;} // 左右滑动 .experience-swiper-tip{margin: 0} } } // 应用场景 .platform-application-scenarios{ padding-bottom: 16px; // swiper .experience-swiper-box{ margin-top: 16px; .experience-content-box{ height: 295px;box-shadow:none;padding: 16px;box-sizing: border-box;margin: 0 4% 40px; h5{margin-bottom: 12px;color: #fff} p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(45);color: #fff} } .scenarios-gwks-box{ background-color: #ffbf00; i{background-image: url("~static/images/client/exam/application-scenarios-img1.png");} } .scenarios-dxjs-box{ background-color: #3799db; i{background-image: url("~static/images/client/exam/application-scenarios-img2.png");} } .scenarios-zgks-box{ background-color: #63ba86; i{background-image: url("~static/images/client/exam/application-scenarios-img3.png");} } // 分页 .swiper-pagination-style {width: 76px;margin-left: -30px;bottom:25px;} // 左右滑动 .experience-swiper-tip{margin: 0} } } } } /******** describe: 培训平台--图片(和考试默认图片不同) author: TX date:2020-08-14 ********/ .client-train-page{ /* 产品体验*/ .platform-products-experience{ .experience-ul-box li{ em{background-image:url("~static/images/client/train/train-code-img.png")} } } /* 网站banner */ .client-platform-banner{ background-color:#1F2772; } /* 产品功能 */ .platform-product-function{ // ul .product-function-box{ li:nth-child(1){i{background-image:url("~static/images/client/train/product-function-icon1.png");}} li:nth-child(2){i{background-image:url("~static/images/client/train/product-function-icon2.png");}} li:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon3.png");}} li:nth-child(4){i{background-image:url("~static/images/client/train/product-function-icon4.png");}} li:nth-child(5){i{background-image:url("~static/images/client/train/product-function-icon5.png");}} li:nth-child(6){i{background-image:url("~static/images/client/train/product-function-icon6.png");}} li:nth-child(7){i{background-image:url("~static/images/client/train/product-function-icon7.png");}} li:nth-child(8){i{background-image:url("~static/images/client/train/product-function-icon8.png");}} } } /* 应用场景 */ .train-application-scenarios{ li:nth-child(1){ .application-scenarios-img { background-image: url("~static/images/client/train/application-scenarios-img1.png"); } } li:nth-child(2){ .application-scenarios-img { background-image: url("~static/images/client/train/application-scenarios-img2.png"); } } li:nth-child(3){ .application-scenarios-img { background-image: url("~static/images/client/train/application-scenarios-img3.png"); } } } @media (max-width: 768px){ /* 网站banner */ .client-platform-banner .free-trial-default-btn{top: 95px;} } } /******** describe: 课程开发 author: TX date:2020-08-24 ********/ .client-course-page{ /* 网站banner */ .client-course-banner{ width: 100%; height: 395px; background-color:#130C4F; background-position-x: center; background-repeat: no-repeat; } /* 调转菜单栏 */ .course-service-nav{width: 100%;height: 72px;background: url("~static/images/client/course/course--nav-bg.png") repeat-x;padding-top: 15px;text-align: center;} .course-link-nav{ width: 100%;height: 83px;background: #161B38;opacity: 0.9; a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;} a:nth-child(1){background: #353c61;} a:nth-child(2){background: #38406a;} a:nth-child(3){background: #3c4775;} a:nth-child(4){width:174px;background: #404b81;} a:nth-child(5){background: #3c4775;} a:nth-child(6){background: #38406a;} a:nth-child(7){background: #353c61;} } // 申请方案按钮 .free-trial-default-btn{width:230px;display: inline-block;margin: 0} // 联系我们按钮 .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;} /* PPT定制及美化、H5平面设计、视频后期处理 */ .course-ppt-box,.course-H5-box,.course-videoPos-box{ ul{margin: 48px 0;} li{display: inline-block;} li:not(:last-child){margin-right: 30px;} p{@include setFontStyle(-4);color: rgba(0, 0, 0, 0.65);margin-top: 24px;} } /* 视频后期处理 */ .course-videoPos-box{ padding-bottom: 80px; li:not(:last-child){margin-right: 80px;} } @media (max-width: 768px){ /* 网站banner */ .client-course-banner{height: 150px;background-size: cover;} // 菜单 ul .course-menu-ul{ background: #fff;margin: 20px 0 0; li{width: 100px;height: 30px;line-height:30px;margin:0 10px;padding:0;border-radius:5px;border: 1px solid rgb(0, 102, 204);@include setFontStyle(-4); color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box} li.active{color: #fff;background: rgb(0, 102, 204);} li:hover{transform: none;} } // 内容区域 .client-container{padding: 0;} // 申请方案按钮 .free-trial-default-btn{width:122px;display: inline-block;margin: 0 0 54px;} // 联系我们按钮 .course-apply-btn{margin-left: 16px;} /* PPT定制及美化、H5平面设计、视频后期处理 */ .course-ppt-box,.course-H5-box,.course-videoPos-box{ margin: 0 6%; ul{margin: 12px 0;} li{box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;margin-bottom: 20px;} li:not(:last-child){margin-right: 0;} img{max-width: 100%;} p{margin: 20px 0;} } /* 视频后期处理 */ .course-videoPos-box{ padding-bottom: 16px; img{height: 180px;} } } } /******** describe: 关于我们 author: TX date:2020-08-07 ********/ .client-aboutUs-page{ // banner .aboutUs-banner{width: 100%;height: 305px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png"); span{width: 1200px;overflow: hidden;display: block;margin: 0 auto;} img{width: 1200px;overflow: hidden;margin: 0 auto;display: block} } // 公司简介 .company-profile-box{ padding: 48px 0; font-size: 0; img{margin: 48px auto;display: block;} p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px} } // 品牌介绍 .brand-introduction-box{ .brand-introduction-content{ width: 100%; padding: 42px; box-sizing: border-box; background: #fbfbfb; border-radius: 8px; float: right; .brand-introduction-left{ display: inline-block; vertical-align: middle; padding-right: 42px; border-right: 1px solid #ddd; h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px} img{margin-bottom: 36px;} } span{width: 740px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 40px;display: inline-block;vertical-align: middle;padding-left: 42px;text-align: justify;} } } // 企业文化 .corporate-culture-box{ padding-bottom: 80px; li{ width:25%; display: inline-block; vertical-align: middle; div{ margin-right: 16px; margin-bottom: 16px; padding: 40px 0; border: 6px solid #f7f7f7; text-align: center; i{width: 70px;height: 70px;display:inline-block;margin-bottom: 16px;} h5{@include setFontStyle(0);color: rgba(0,0,0,0.85);margin-bottom: 16px;} p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;} } } li:nth-child(1){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} } li:nth-child(2){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} } li:nth-child(3){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} } li:nth-child(4){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} } li:last-child{ div{margin-right: 0;} } } // 企业发展历程 .enterprise-development-box{ // 覆盖饿了么tab样式 .enterprise-development-tab{ .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;} .el-tabs__header{ margin: 0; .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;} .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: visible} } .el-tabs__item{width: 170px;height: 45px;line-height:45px;border: 1px solid #3e7ee7;background: #fff;padding: 0;text-align: center;border-radius: 4px;margin-right: 24px;position: relative;} .el-tabs__item.is-active{background: #3e7ee7;color: #fff} .el-tabs__item:after{width: 14px;height: 14px;content: "";display: inline-block;border-radius: 50%;background: #888;position: absolute;bottom: -28px;left: 50%;margin-left: -7px;} .el-tabs__item.is-active:after{background: #3e7ee7;} .el-tabs__content{overflow: visible} } // 企业发展历程内容部分 li{ width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;min-height: 196px;vertical-align: top; div{width: 250px;border-bottom: 1px solid #eee;} img{margin-bottom: 14px;} i{min-width:34px;display:inline-block;color: #3e7ee7;font-style: normal;margin-right: 10px;} p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;} } } // 联系我们 .contact-us-box{ padding: 80px 0; border-top: 1px solid #ddd; .contact-container-box{ width: 460px; padding: 0 40px; box-sizing: border-box; color: rgba(0,0,0,0.85); float: left; h4{@include setFontStyle(10);color: #3e7ee7;margin-bottom: 60px;margin-top: 20px;} h5{@include setFontStyle(0);color: #333;margin-bottom: 32px;} li{ margin-bottom: 24px; 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(-4);color: rgba(0,0,0,0.64);vertical-align: middle;} } li:nth-child(3) { i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.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");} } li:nth-child(6) { //i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");} } } img{float: right} } @media (max-width: 768px){ // banner .aboutUs-banner{ height: 150px; span{width: 100%;} img{width: auto;height: 150px;} } // 公司简介 .company-profile-box{ img{margin: 20px auto;max-width: 100%;} p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;} } // 品牌介绍 .brand-introduction-box{ background-color: rgb(238, 238, 238); .brand-introduction-content{ background-color: transparent;padding: 24px 10px; .brand-introduction-left{ display: block;border-right:0;padding-right:0; h4{font-size: 18px;color: rgba(0, 0, 0, 1);text-align: center;margin-bottom: 20px;font-weight: 700;} img{margin: 0 auto 24px;max-width: 230px;display: block;} } span{width: 100%;display: block;padding-left: 0;font-size: 14px;color: rgba(85, 85, 85, 1);line-height: 24px;} } } // 企业文化 .corporate-culture-box{ padding: 50px 0 0; li{ width:100%; div{ height: 70px;margin: 0 10px 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0; i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;} h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;} p{font-size: 14px;color: #101010;} } } } // 联系我们 .contact-us-box{ padding: 54px 10px 0;border: 0;line-height: 1;font-size: 0; .contact-container-box{ width: 100%; padding: 0; color: rgba(0,0,0,0.85); float: unset; h4{@include setFontStyle(-2);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;margin-top:0;text-align: center;} h5{@include setFontStyle(-4);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;} li{ span{color: rgba(0,0,0,0.54);} } } img{float: unset;width: calc(100% + 50px);margin: 0 -25px;} } } } /******** describe: 新闻资讯 author: TX date:2020-08-10 ********/ .client-newsInfor-page{ // banner .newsInfor-banner{ width: 100%;height: 305px;background-image: url("~static/images/client/newsInfor/newsInfor-banner-bg.png");overflow: hidden; img{width: 1200px;overflow: hidden;margin: 0 auto;display: block} } // 菜单 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;cursor: pointer} 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;} } } } @media (max-width: 768px){ // banner .newsInfor-banner{ height: 150px; img{width: auto;height: 150px;} } // 页面主要内容区域 .newsInfor-content-box{ min-height: unset;padding: 20px 0 50px; // 右侧内容区域 .newsInfor-content-ul{ width:100%;padding: 0 6%;box-sizing: border-box; li{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;margin-bottom: 20px;} //图片 .newsInfor-img-box{width:100%;height:180px;display: block;margin-right:0;border-radius: 0;} //内容区域 .newsInfor-list-content{ width: 100%;padding: 20px;box-sizing: border-box; h5{@include setFontStyle(-4);color: rgb(16, 16, 16);margin-bottom: 12px;} div{ span{margin-bottom: 0;@include setFontStyle(-8);color: rgb(16, 16, 16);} } p{height: auto;max-height: 60px;margin-bottom:0;font-size: 14px;color: rgb(16, 16, 16);line-height: 20px;} } // 分页 .client-el-pagination{margin-top: 24px} } } } } /******** describe: 政府机构-详情页 author: TX date:2020-08-10 ********/ .client-government-page{ // banner .industrydetails-banner{background-color: #1B33B7;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/government-banner-img.png");} // 我们的系统为您改变了什么 .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{ p{margin-left: 30px;line-height: 24px;} } h5{margin-bottom: 16px;} img{width:100px;display: inline-block;vertical-align: top;margin: 85px 25px 85px 0;} } .change-content-left{ width: 480px;display: inline-block;padding: 16px 0 0 32px;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: 54px;} } // 我们的优势 .government-advantage-box{ padding-bottom: 50px; h4{margin-bottom: 48px;} dl{width:33.33%;display: inline-block;margin-bottom: 30px;vertical-align: top;} 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;line-height: 24px;} 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;} } @media (max-width: 768px) { // 我们的系统为您改变了什么 .government-change-box{ background: rgb(238, 238, 238);padding: 0 15px; .industrydetails-content{ height: auto;margin-top: 20px;background-image:unset;position: relative; li{ p{margin-left: 20px} } img{width:80px;display:block;margin: -60px auto;position: absolute;left: 50%;margin-left: -40px;} } .change-content-left,.change-content-right{ width: 100%;box-sizing: border-box;margin-bottom: 20px; p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;} i{border-color: #fff;opacity: 1;} } .change-content-left{background-color: rgb(0, 102, 204);padding: 20px 16px;} .change-content-right{background-color: rgb(255, 186, 0);padding: 60px 16px 36px;} } } } /******** describe: 金融保险-详情页 author: TX date:2020-09-01 ********/ .client-finance-page{ // banner .industrydetails-banner{background-color: #593513;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/finance-banner-img.png");} // 金融行业的问题 .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:345px;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%);} } } @media (max-width: 768px) { .finance-question-box{background-color: rgb(238, 238, 238);padding: 20px 15px 30px;} .phone-class-box{ ul{ border: 0;width: 100%;margin: 0;padding: 20px 0 0;min-height: unset; li{margin-bottom: 10px;} i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;border: 1px solid #fff;opacity: 1;border-radius:0; float: left;box-sizing: border-box;display: block;transform: rotate(45deg);background-image: unset;} p{font-size: 14px;color: white;line-height: 24px;margin-left: 20px;text-align: justify;} } h4{color: #fff;} img {width: 130px;display: block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;} .financial-tradition-phone{background-color: rgb(0, 102, 204);margin: 0 0 20px;padding: 0 16px 20px;} .financial-solve-phone{background-color: rgb(247, 109, 0);padding: 40px 16px 36px;} } } } /******** describe: 信息产业-详情页 author: TX date:2020-09-02 ********/ .client-information-page{ // banner .industrydetails-banner{background-color: #070B20;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/information-banner-img.png");} // 我们的系统为您改变了什么 .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{ 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: 36px;} } @media (max-width: 768px) { // 我们的系统为您改变了什么 .information-change-box{ background-color: rgb(238, 238, 238);padding: 0 15px 15px; .industrydetails-content{ height: auto;margin-top: 20px;background-image:unset;position: relative; li{ p{margin-left: 20px} } img{width:130px;display:block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;} } .change-content-left,.change-content-right{ width: 100%;box-sizing: border-box;margin-bottom: 20px; p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;} i{border-color: #fff;opacity: 1;} } .change-content-left{background-color: rgb(14, 60, 106);padding: 20px 16px;} .change-content-right{background-color: rgb(164, 3, 3);padding: 60px 16px 36px;} } } } /******** describe: 能源化工-详情页 author: TX date:2020-09-02 ********/ .client-energy-page{ // banner .industrydetails-banner{background-color: #073A44;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/energy-banner-img.png");} // 我们的系统为您改变了什么 .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: 55px;} 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);line-height: 22px;vertical-align: top; p{margin-left: 30px;color: rgba(255,255,255,0.65);} } img{position: absolute;top: -70px;left: 50%;margin-left: -50px;} } @media (max-width: 768px) { // 我们的系统为您改变了什么 .energy-change-box{ background-color: rgb(238, 238, 238);padding: 0 15px 15px; // 模块上半部分 .change-box-top{width: 100%;height:auto;padding: 20px 16px;margin:20px 0 20px;border-radius:0;} // 模块下半部分 .change-box-bottom{width: 100%;height:auto;padding: 60px 16px 36px;margin:0 0 20px;border-radius:0;background-color: rgb(255, 115, 5);} .change-box-top,.change-box-bottom{ i{border: 1px solid #fff;opacity: 1;} h5{margin-top: 20px;color: #fff;} li:nth-of-type(odd){p{margin-right: 0}} } li{ width: 100%;display: block; p{margin-left: 20px;color: #fff;} } } } } /******** describe: 交通运输-详情页 author: TX date:2020-09-02 ********/ .client-traffic-page{ // banner .industrydetails-banner{background-color: #0A2F41;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/traffic-banner-img.png");} // 我们的系统为您改变了什么 .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");} } @media (max-width: 768px) { // 我们的系统为您改变了什么 .traffic-change-box{ background-color: rgb(238, 238, 238);padding: 0 15px 30px; .change-content-left,.change-content-right{ width: 100%;height: unset;margin:0;box-sizing: border-box; ul{margin: 0;} h5{height: unset;line-height: unset;@include setFontStyle(-4);color: rgba(255, 255, 255, 1);margin-bottom: 16px;text-align: center;font-weight: 700;} p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;} i{width: 10px;height: 10px;border-color: #fff;opacity: 1;border-radius: 0;} } .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;background-image:unset;margin: 20px 0;} .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;background-image:unset;} } } } /******** describe: 教育行业-详情页 author: TX date:2020-09-02 ********/ .client-education-page{ // banner .industrydetails-banner{background-color: #085903;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/education-banner-img.png");} // 我们的系统为您改变了什么 .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;} } @media (max-width: 768px) { .education-change-box{ background-color: rgb(238, 238, 238);padding: 0 15px 30px; img{width:100px;margin: -105px auto;margin-left: -50px;} .mt48{margin-top: 20px;} .change-content-left,.change-content-right{ width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px; p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;} i{border-color: #fff;opacity: 1;} } .change-content-left{background-color: rgb(50, 159, 132);padding: 20px 16px 52px;} .change-content-right{background-color: rgb(249, 163, 97);padding: 60px 16px 16px;} } } } /******** describe: 食品餐饮-详情页 author: TX date:2020-09-03 ********/ .client-restaurant-page{ // banner .industrydetails-banner{background-color: #1C1E21;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/restaurant-banner-img.png");} // 我们的系统为您改变了什么 .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");} } @media (max-width: 768px) { // 我们的系统为您改变了什么 .restaurant-change-box{ background-color: rgb(238, 238, 238);padding: 0 15px 30px; .mt48{margin-top: 20px;} .industrydetails-content img{margin-top: -85px;} .change-content-left,.change-content-right{ width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px; ul{margin: 0;} h5{height: unset;line-height: unset;color: #fff;} p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;} i{border-color: #fff;opacity: 1;} } .change-content-left{background-color: rgb(240, 112, 112);padding: 20px 16px;} .change-content-right{background-color: rgb(255, 207, 78);padding: 60px 16px 16px;} } } } /******** describe: 医疗卫生-详情页 author: TX date:2020-09-03 ********/ .client-medical-page{ // banner .industrydetails-banner{background-color: #2178E0;} .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/medical-banner-img.png");} // 我们的系统为您改变了什么 .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;} } @media (max-width: 768px) { .medical-change-box{ background-color: rgb(238, 238, 238);padding: 0 15px 30px; .industrydetails-content{width: 100%;height: unset;background-image:unset;} .mt48{margin-top: 20px;} .change-content-left,.change-content-right{ width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px; ul{margin: 0;} h5{height: unset;line-height: unset;color: #fff;margin-top: 0;} p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;} i{border-color: #fff;opacity: 1;} } .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;} .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;} } } } /******** describe: 1-X-详情页 author: TX date:2020-09-03 ********/ .client-indexEducation-page{ padding-bottom: 80px; .client-platform-banner{ background-color: #04004a; .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box; position: absolute;top: 330px;left: 50%;margin-left: -150px;} .client-default-white-Btn{background: #fff;color: #3e7ce7;left: 50%;margin-left: 30px;} } @media (max-width: 768px){ padding-bottom: 15px; .client-platform-banner{ .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;top: 105px;margin-left: -130px} .client-default-white-Btn{background: #fff;color: #3e7ce7;left: 50%;margin-left: 10px;} } } } /******** describe: 课程资源 author: TX date:2020-09-03 ********/ .client-resources-page{ // 图标列表 .train-scheme-list{ margin: 54px -24px 0; li{width: 25%;display: inline-block;text-align: center} i{width: 100px;height: 100px;display: block;margin: 0 auto;} span{@include setFontStyle(-4);color: #333;margin-top: 10px;display: block;} div{box-shadow: 0 0 7px 2px #f5f2ff;margin: 24px;padding: 42px 0;} li:nth-child(1) i{background-image: url("~static/images/client/resources/train-scheme-icon1.png")} li:nth-child(2) i{background-image: url("~static/images/client/resources/train-scheme-icon2.png")} li:nth-child(3) i{background-image: url("~static/images/client/resources/train-scheme-icon3.png")} li:nth-child(4) i{background-image: url("~static/images/client/resources/train-scheme-icon4.png")} li:nth-child(5) i{background-image: url("~static/images/client/resources/train-scheme-icon5.png")} li:nth-child(6) i{background-image: url("~static/images/client/resources/train-scheme-icon6.png")} li:nth-child(7) i{background-image: url("~static/images/client/resources/train-scheme-icon7.png")} li:nth-child(8) i{background-image: url("~static/images/client/resources/train-scheme-icon8.png")} } // 为企业培训打造学习矩阵 .products-services-content p{line-height: 52px;} // 蓝色提醒文字 .blue-big-size{ font-size: 26px;color: #3e7ce7;padding: 0 5px; } // 课程内容形式多样 .course-learn-box{ background: #f9faff; // video列表 .learn-box-list{ margin: 54px -16px 0; li{ width: 33.33%;display: inline-block; a{display: none;} div{background: #fff;border-radius: 8px;margin: 0 16px 40px;box-shadow: 0 0 7px 2px #f5f2ff;} 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: #3e7ce7;padding: 24px 16px 16px;text-align: left} .course-explain-black{@include setFontStyle(-4);color: #333;line-height: 24px;padding: 0 16px 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;} } } // banner背景色 .client-platform-banner{background-color: #03022e;} // 新闻资讯 .platform-news-information{background: #fff;} // 按钮 .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;border: 1px solid #3e7ce7;background: #3e7ce7;margin-right: 24px;margin-bottom: 42px;} .client-default-white-Btn{background: #fff;color:#3e7ce7;margin-right: 0 } @media (max-width: 768px){ // 图标列表 .train-scheme-list{ margin: 12px 16px 36px; li{ width: 50%; i{width: 70px;height: 70px;background-size: cover;} div{margin: 6px;padding: 24px 0;} } } // 为企业培训打造学习矩阵 .products-services-content p{font-size: 14px;line-height: 40px;text-align: center;color: #101010;} // 蓝色提醒文字 .blue-big-size{font-size: 18px;} // 按钮box .default-Btn-box{text-align: center} // 视频列表 .course-learn-box{ margin:0;background-color: rgb(238, 238, 238); .client-container {padding: 0 15px;} .learn-box-list{ margin: 20px 0; li { width: 100%; div{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;border-radius:0;margin: 0 16px;} span {width: 100%;height: 180px;margin-top: 0;border-radius: 0;} img {max-width: 100%;} p {font-size: 14px;padding: 16px 0;text-align: center;} .course-explain-black{font-size: 14px;text-align: left;padding: 0 16px 20px;} } } } // 按钮 .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;margin:0 8px 42px;} } } /******** describe: 考试系统更新日志 author: TX date:2020-09-03 ********/ .client-checklog-page{ // banner .client-checklog-banner{ width: 100%;height: 300px;background-color: rgb(0, 102, 204);text-align: center; h4{font-size: 56px;color: rgba(255, 255, 255, 1);font-weight: bold;padding-top: 64px;} p{font-size: 28px;color: rgb(255, 255, 255);padding-top: 24px;} } // 数据展示 .log-data-show{ height: 200px; border-color: rgb(187, 187, 187); border-width: 1px; border-style: solid; box-shadow: rgb(121, 188, 255) 0px 2px 6px 0px; border-radius: 10px; padding: 24px; box-sizing: border-box; display: flex; justify-content: space-evenly; margin-top: -64px; background: #fff; div{ display: inline-block;text-align: center; span{font-size: 24px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 32px;display: inline-block;} p{font-size: 54px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 10px;} } i{width: 1px;height: 150px;background: lightgray;display: inline-block;} } // 日志内容 .log-content-box{ margin: 52px auto 100px;color: rgb(16, 16, 16); li{ color: rgb(16, 16, 16);border-bottom: 1px dashed #ccc;padding: 0 88px; h5{font-size: 18px;margin: 14px 0;font-weight: bold;} span{font-size: 18px;margin-bottom: 14px;display: block;font-weight: bold;} div{margin-bottom: 14px;} i{width: 12px;height: 1px;display: inline-block;background: #bbb;vertical-align: top;margin: 10px 6px 10px 0;} p{width: 1000px;font-size: 16px;display: inline-block;vertical-align: middle;line-height: 24px;color: #000;text-align: justify} } li:last-child{border: 0;} } } /******** describe: 体验中心 author: TX date:2021-06-09 ********/ .tiyan-center-page{ .tiyan-center-register{ background: #3776ff;text-align: center;padding: 52px 0;margin-top: 70px; h5{font-size: 42px;color: #fff;margin: 24px 0;} p{font-size: 32px;color: #fff;margin-bottom: 52px;} span{font-size: 52px;color: #ffff00} a{width: 355px;height: 60px;line-height: 60px;text-align: center;background: #ff4d4d;border-radius: 4px;display: inline-block;color: #fff;} } @media (max-width: 768px){ /* 网站banner */ .client-platform-banner div{background-position-x: 42%;} .experience-swiper-box .swiper-pagination-style {width: 80px;margin-left: -30px;} } } // 立即注册弹窗 .register-now-dialog{ .el-dialog{ width:540px; // 关闭图标 .el-icon-close:before{color: #fff} // 弹窗头部 .el-dialog__header{height: 100px;background: #363fdc;} // 弹窗body .el-dialog__body{ height:200px;position: relative;background: #fff; .register-now-box{ position: absolute;top: -100px;left: 0;right: 0; >p{font-size: 18px;color: #fff;text-align: center;line-height: 24px;margin-bottom: 8px} >span{ margin-top: 36px;color: #666;font-size: 16px;display: block;text-align: center; .tel-code{font-size: 30px;color:#1f68b4;font-weight: bold;} } } } .system-box{ width:400px;height:160px;background: #fff;border: 1px solid #b5b5b5;border-radius: 4px;padding: 10px 8px;margin: 16px auto;display:flex;justify-content: space-around;align-items: center; a{ display: inline-block; i{width: 158px;height: 120px;display: block;background-size: cover;} } span{width: 1px;min-height: 100px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;} p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;} } .system-box:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} } .system-box:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} } } } // 系统维护弹窗 .system-maintain-dialog{ .el-dialog{width: 540px;height: 380px;background-image:url("~static/images/client/tiyanCenter/ty-dialog-bj.jpg");} } /******** describe: 课程开发解决方案 author: TX date:2021-08-06 ********/ .course-develop-page{ // 标题 .course-develop-title{background-color: rgb(39, 68, 98);padding: 50px 0 100px;font-weight: 700;font-size: 24px;color: rgb(255, 255, 255);text-align: center;} // form .course-develop-form{width: 90%;min-height: 380px;background: #fff;margin: -50px auto 0;padding: 40px 24px;box-sizing: border-box;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px -1px;} // 滑块px .nc-container{ overflow: hidden;height: 52px; .nc_wrapper{width:100%!important;margin-bottom: 22px;border-radius: 5px;overflow: hidden;} .nc_scale{ height: 30px; .scale_text{overflow: hidden;line-height: 30px;} span{width:40px;height: 30px;line-height: 30px;border-radius: 5px;border: 1px solid rgb(187, 187, 187);box-sizing: border-box;overflow: hidden} } .btn_ok{margin-left: -1px;} } // 输入框-验证码 .course-develop-input-code{width: calc(100% - 122px);} .course-develop-code-btn.el-button{width:110px;box-sizing:border-box;padding: 12px;margin-left: 8px;background-color: rgb(0, 102, 204);color: #fff;} // 公司名称 .dialog-input-company{ .el-form-item__content{display: grid;} } // 表单按钮 .form-blue-btn,.form-border-btn{ width: 100%;height: 50px;line-height: 50px;color: rgb(255, 255, 255);border-radius: 5px;@include setFontStyle(-4);text-align: center;border: 1px solid transparent; } .form-blue-btn{background-color: rgb(0, 102, 204);border-color:rgb(0, 102, 204);} .form-border-btn{display:block;border-color:rgb(0, 102, 204);color:rgb(0, 102, 204);margin-top: 20px; } // 咨询电话 .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;} // 产品 .dialog-input-company{text-align: center;padding: 0;} } /******** describe: 注册页面--手机 author: TX date:2021-08-06 ********/ .register-phone-page{ // 标题 .course-develop-title{font-size: 20px;} // 咨询电话 .course-develop-tel{margin: 46px 0;} } /******** describe: 复制路径页面--手机 author: TX date:2021-08-06 ********/ .copy-url-page{ background: #fff;height: 100vh; // 底部 .success-body-box{ img{max-width: 100%;padding: 30px;box-sizing: border-box;} p{font-weight: 700;font-size: 20px;color: rgb(31, 104, 176);text-align: center;margin: 4px 0;} span{line-height: 24px;font-weight: 400;font-size: 16px;color: rgb(16, 16, 16);display: block;text-align: center;padding:30px;word-break: break-all;} a{width: 122px;height: 36px;line-height:36px;background-color: rgb(234, 118, 27);color: rgb(255, 255, 255); border-radius: 5px;font-size: 14px;display: block;margin: 0 auto;text-align: center} } } /******** describe: 企业微课制作 author: TX date:2021-09-13 ********/ .client-makeCourse-page{ .client-platform-banner{ background-color: #22252A; .free-trial-default-btn{background: #f76377} } // 按钮 .btn-big-box{width: 263px;margin: 50px auto 0;display: block;text-align: center;} // 页面标题 .make-course-title {width: 100%;font-size: 24px;font-weight: normal;margin-bottom: 35px;padding-left: 10px;color: #333;text-align: center} .course-blue-title{color: #3E7BE6;} // 页面文字 .make-course-h2{ width: 100%;text-align: center;padding: 40px 0;border-bottom: 1px solid #CCC; img{max-width: 100%;} } // 基本介绍 .makeCourse-introduce-box{ margin: 64px 0; dl { width: 580px;float: left;padding-top: 100px;padding-left: 20px; h3{text-align: left} dt {width: 100%;font-size: 18px;font-weight: normal;margin-bottom: 35px;color: #333;padding-left: 10px;} } } .contrary-introduce-box{ margin-bottom: 88px; dl { width: 480px;float: right;padding-top: 0;height: 350px; dt {margin-bottom: 20px;} dd{margin-top: 35px;} } } // 课程目标 .course-target-box{ background: #F8F8F8;padding: 42px 0; li{ width: 20%;display: inline-block; div{text-align: center;background: #fff;margin: 5px;padding: 24px 0;} img{height: 100px;margin-bottom: 24px;} span{text-align: center;font-size: 18px;color: #333;display: block} } } // 培训讲师介绍 .px-teacher-box{ margin: 60px 0; .teacher-content-box{display: flex;justify-content: space-between;align-items: center;} span{display: block;font-size: 18px;color: #333;text-align: center;} p{margin-left: 70px;line-height: 50px;} .btn-big-box{margin-top: 32px;} } // 课程体系 .course-system-box{ padding: 32px 0; .course-system-img{margin-bottom: 40px;max-width: 100%;} img{max-width: 100%;} } // 微课设计 .course-learn-box{ padding: 64px 0; .learn-box-list li div{margin: 0 16px 0;} } // 报名学习 .sign-study-box{ width: 100%; .study-gj-box{width: 100%;height: 298px;background-image:url("~static/images/client/makeCourse/sign-study-bj.png"); margin-top: 20px;border-radius: 8px;bottom: -20px;position: relative;} .sign-study-content{ position: absolute;bottom: 74px;font-size: 0;left: 76px; .el-input{ width: 400px;font-size: 16px; .el-input__inner{height: 64px;display: inline-block;border-radius: 0;font-size: 16px} .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */ font-size: 16px; } .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: 16px; } .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 16px; } } .el-button{width:150px;height:64px;display: inline-block;margin-left: -1px;font-size: 16px} } } @media (max-width: 768px) { // 按钮 .client-default-Btn{width: 120px;height: 35px;line-height: 35px;margin: 32px auto 0;} // 页面标题 .make-course-title {font-size: 16px;margin-bottom: 16px;color: #3E7BE6;padding-left: 0;font-weight: bold;} // 页面文字 .make-course-h2{ padding: 32px 0; } // 基本介绍 .makeCourse-introduce-box{ margin: 32px 0; img{max-width: 100%;display: block;margin: 0 auto;} dl { width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center; h3{text-align: center;} dt {font-size: 14px;margin-bottom: 16px;color: #555555;padding-left: 0;line-height: 24px} } } .contrary-introduce-box{ dl { width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;height: unset; dt {margin-bottom: 4px;} } } // 课程目标 .course-target-box{ background: #F8F8F8;padding: 16px 0 32px; h3{font-size: 18px;color: #333;margin: 12px 0;text-align: center} ul{text-align: center;} li{ width: 33.33%; div{margin: 6px;padding: 16px 0;} img{height: 40px;margin-bottom: 10px;} span{font-size: 16px;color: #333;} } .btn-big-box{margin-top: 50px;} } // 培训讲师介绍 .px-teacher-box{ margin: 32px 0; .teacher-img-box{ width: 80px;padding: 0;box-sizing: border-box;flex-shrink: 0; img{width: 80px;display: inline-block;vertical-align: middle;} } .teacher-content-box{display: flex;justify-content: space-between;} span{font-size: 16px;margin: 10px 0;} p{font-size: 14px;line-height: 24px;margin: 10px 12px;text-align: justify;} .btn-big-box{margin-top: 32px;} } // 微课设计 .course-learn-box{ padding: 32px 0; .client-container{padding: 0} .learn-box-list li div{margin: 0} } // 报名学习 .sign-study-box{ background: #3776ff; .client-container{padding: 0;} .study-gj-box{height:180px;background-image:url("~static/images/client/makeCourse/sign-study-sjBj.png");background-size: contain;background-repeat: no-repeat; bottom: 0;border-radius: 0;background-position: center;} .sign-study-content{ bottom: 40px;left: 40px;right: 40px; .el-input{ width: 68%;font-size: 14px;vertical-align: middle; .el-input__inner{height: 38px;font-size: 14px} .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */ font-size: 14px; } .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: 14px; } .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 14px; } } .el-button{width:32%;height:38px;font-size: 14px;border-radius: 2px;vertical-align: middle; padding: 0;} } } } } }