@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: 640px;cursor: pointer;} .el-carousel__item{ .index-carousel-box{width:100%;height: 640px;display: block;background-position: center;background-repeat: no-repeat;background-color: #a49d9b;} } } /* 发展历程 - 移动端隐藏*/ .client-company-history{ background:#f8f8f8; li{ width: 25%;display: inline-block;text-align: center; i{width: 40px;height: 40px;display: inline-block;background-size: cover;margin-right: 16px;vertical-align: middle;} a{ border-right:2px solid #e5e5e5;margin: 24px 0;display: block; div{display: inline-block;text-align: left;vertical-align: middle;} span{@include setFontStyle(-4);color: #333;margin-bottom: 10px;display: block;} p{@include setFontStyle(-4);color: #666;} } } li:last-child a{border-right: 0;} } li:nth-child(1){i{background-image: url("~static/images/client/index/company-history-icon1.png");}} li:nth-child(2){i{background-image: url("~static/images/client/index/company-history-icon2.png");}} li:nth-child(3){i{background-image: url("~static/images/client/index/company-history-icon3.png");}} li:nth-child(4){i{background-image: url("~static/images/client/index/company-history-icon4.png");}} /* 产品和服务 */ .client-products-services{ .client-title{ margin-bottom: 48px; } } /* 行业学习需求 */ .client-demand-box{ .demand-list-box{ margin-top: 24px; li{width: 25%;display: inline-block;margin: 34px 0;text-align: center;cursor: default;} span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;} i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;} p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;} li:nth-child(1){ span{background-color: rgb(0, 150, 136);} i{background-image: url("~static/images/client/index/index-demand-icon1.png");} } li:nth-child(2){ span{background-color: rgb(255, 152, 0);} i{background-image: url("~static/images/client/index/index-demand-icon2.png");} } li:nth-child(3){ span{background-color: rgb(234, 73, 79);} i{background-image: url("~static/images/client/index/index-demand-icon3.png");} } li:nth-child(4){ span{background-color: rgb(64, 158, 255);} i{background-image: url("~static/images/client/index/index-demand-icon4.png");} } li:nth-child(5){ span{background-color: rgb(255, 128, 108);} i{background-image: url("~static/images/client/index/index-demand-icon5.png");} } li:nth-child(6){ span{background-color: rgb(179, 111, 238);} i{background-image: url("~static/images/client/index/index-demand-icon6.png");} } li:nth-child(7){ span{background-color: rgb(72, 97, 132);} i{background-image: url("~static/images/client/index/index-demand-icon7.png");} } li:nth-child(8){ span{background-color: rgb(160, 212, 104);} i{background-image: url("~static/images/client/index/index-demand-icon8.png");} } li:hover{ span{transform: translateY(-8px);;} } } } /* 超过10万家客户的信任之选 */ .client-customer-box{ padding-bottom: 80px; img{margin: 24px auto;display: block;} /*.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-news-information { background: rgb(248, 248, 248); 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-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} } } } } } /******** describe: 平台页面(考试平台、培训平台) author: TX date:2020-08-12 ********/ .client-platform-page{ /* 网站banner */ .client-platform-banner{ width: 100%; height: 640px; 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:460px;left: 50%;margin-left: -119px;} } // 考试应用场景 .client-scene-box{ ul{ margin-top: 24px; li{width: 25%;display: inline-block;margin: 24px 0;text-align: center;cursor: default;} span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;} i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;} p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;} li:nth-child(1){ span{background-color: rgb(0, 150, 136);} i{background-image: url("~static/images/client/exam/exam-scene-icon1.png");} } li:nth-child(2){ span{background-color: rgb(255, 152, 0);} i{background-image: url("~static/images/client/exam/exam-scene-icon2.png");} } li:nth-child(3){ span{background-color: rgb(234, 73, 79);} i{background-image: url("~static/images/client/exam/exam-scene-icon3.png");} } li:nth-child(4){ span{background-color: rgb(64, 158, 255);} i{background-image: url("~static/images/client/exam/exam-scene-icon4.png");} } li:nth-child(5){ span{background-color: rgb(255, 128, 108);} i{background-image: url("~static/images/client/exam/exam-scene-icon5.png");} } li:nth-child(6){ span{background-color: rgb(179, 111, 238);} i{background-image: url("~static/images/client/exam/exam-scene-icon6.png");} } li:nth-child(7){ span{background-color: rgb(72, 97, 132);} i{background-image: url("~static/images/client/exam/exam-scene-icon7.png");} } li:nth-child(8){ span{background-color: rgb(160, 212, 104);} i{background-image: url("~static/images/client/exam/exam-scene-icon8.png");} } li:nth-child(9){ span{background-color: rgb(68, 70, 147);} i{background-image: url("~static/images/client/exam/exam-scene-icon9.png");} } li:nth-child(10){ span{background-color: rgb(174, 102, 66);} i{background-image: url("~static/images/client/exam/exam-scene-icon10.png");} } li:nth-child(11){ span{background-color: rgb(110, 87, 123);} i{background-image: url("~static/images/client/exam/exam-scene-icon11.png");} } li:nth-child(12){ span{background-color: rgb(116, 120, 124);} i{background-image: url("~static/images/client/exam/exam-scene-icon12.png");} } li:hover{ span{transform: translateY(-8px);;} } } } // 轻松组织一场考试 .platform-products-services{ .client-title{margin-bottom: 46px;} .products-services-content{ h5{margin: 0;} .client-btn-box { margin-top: 80px; } } } // 满足12大考试应用场景 .client-examOrg-box{ height: 560px;background-position: center;background-image: url("~static/images/client/exam/exam-org-bj.png");background-color: rgba(248, 248, 248, 0.8);background-blend-mode: overlay;background-position: center; .exam-dl-box{display: flex;justify-content: space-between;margin-top: 42px;} dt{font-weight: 400;font-size: 20px;color: rgba(0, 0, 0, 1);margin-bottom: 24px;} dd{font-weight: 400;font-size: 16px;color: rgba(0, 0, 0, 1);margin-bottom: 12px;} dd:before{width: 5px;height: 5px;background: #00aeba;content: '';display: inline-block;vertical-align: middle;margin-right: 6px;border-radius: 50%;} } // 按钮 .client-btn-box{ text-align: center;margin-top: 42px; .client-default-Btn,.client-default-white-Btn { width: 150px;height: 40px;line-height: 40px;display: inline-block;background: #00aeba;border: 1px solid #00aeba;box-sizing: border-box;margin-right: 24px; } .client-default-white-Btn {background: #fff;color: #00aeba;margin-right: 0;} } } /******** describe: 培训平台--图片(和考试默认图片不同) author: TX date:2020-08-14 ********/ .client-train-page{ /* 网站banner */ .client-platform-banner{ background-color:#1F2772; } /* 企业培训现状 */ .train-status-box{ text-align: center; .client-container{background-image:url("~static/images/client/train/train-status-bj.png");background-size: cover;background-repeat: no-repeat;background-position: center;margin: 32px auto;} p{margin-bottom: 32px;font-weight: 400;font-size: 18px;color: rgb(16, 16, 16);} .client-btn-box{margin-top: 200px;} } /* 企业培训痛点 */ .train-pain-point{ ul{text-align: center;margin-top: 24px;} li{ width: 30%;display: inline-block;text-align: center;vertical-align: top;padding-bottom: 10px; p{font-weight: 400;font-size: 18px;color: rgb(16, 16, 16);} i{width: 55px;height: 55px;display: block;margin: 16px auto;background-size: cover;} } li:nth-child(1) i{background-image:url("~static/images/client/train/train-pain-point1.png");} li:nth-child(2) i{background-image:url("~static/images/client/train/train-pain-point2.png");} li:nth-child(3) i{background-image:url("~static/images/client/train/train-pain-point3.png");} li:nth-child(4) i{background-image:url("~static/images/client/train/train-pain-point4.png");} li:nth-child(5) i{background-image:url("~static/images/client/train/train-pain-point5.png");} li:nth-child(6) i{background-image:url("~static/images/client/train/train-pain-point6.png");} // 下边线 li:nth-child(-n+3){ border-bottom:1px solid #bbb; } // 右边线 li:not(:nth-child(3)):not(:nth-child(6)){ border-right:1px solid #bbb;} // 按钮 .client-btn-box{text-align: left} } /* 系统十大适用功能辅助授课 */ .train-fzsk-box{ height: 460px;background-image:url("~static/images/client/train/train-fzsk-bj.png");background-color: rgba(248, 248, 248, 0.8); background-size: cover;background-repeat: no-repeat;background-position: center;background-blend-mode: overlay; li{ width: 20%;display: inline-block;text-align: center; span{width: 30px;height: 30px;line-height: 30px;border: 2px solid rgb(0, 0, 0);display: block;margin: 32px auto 16px;color: rgb(0, 0, 0);border-radius: 50%;font-size: 18px;} p{font-weight: 700;font-size: 18px;color: rgb(0, 0, 0);} } } /* 我们与优秀客户一同发展*/ .client-customer-box{ padding-bottom: 80px; img{margin: 24px auto;display: block;} } } /******** describe: 课程开发 author: TX date:2020-08-24 ********/ .client-course-page{ // 申请方案按钮 .free-trial-default-btn{width:230px;display: inline-block;margin: 0} // 联系我们按钮 .course-apply-btn{background: #fff;color: #00AEBA;border:1px solid #00AEBA;box-sizing: border-box;margin-left: 36px;} /* 网站banner */ .client-course-banner{ width: 100%; height: 640px; background-color:#042D85; position: relative; div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;} .free-trial-default-btn{width: 238px;position: absolute;top: 460px;left: 50%;margin: 40px auto 0;margin-left: -119px;} } /* 调转菜单栏 */ .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;} } // 课程定制开发流程 .course-dzkf-box{ display: flex;justify-content: center;margin: 32px 0 72px; div{width: 82px;display: inline-block;vertical-align: top;} i{width: 80px;height: 80px;display: block;border: 2px solid rgb(0, 174, 186);border-radius: 50%;margin-bottom: 16px;} i:before{content: '';width: 40px;height: 40px;display: block;background-size: contain;background-repeat: no-repeat;margin: 20px auto;} span{font-weight: 700;font-size: 18px;color: rgb(16, 16, 16);margin-bottom: 16px;display: block;} p{text-align: justify;font-weight: 400;font-size: 16px;color: #101010;} em{content: '';width: 30px;height: 30px;background-image: url("~static/images/client/course/course-jt-icon.svg");display: inline-block;margin: 25px 20px 0;} li:nth-child(1){i:before{background-image: url("~static/images/client/course/course-dzkf-icon1.png");}} li:nth-child(2){i:before{background-image: url("~static/images/client/course/course-dzkf-icon2.png");}} li:nth-child(3){i:before{background-image: url("~static/images/client/course/course-dzkf-icon3.png");}} li:nth-child(4){i:before{background-image: url("~static/images/client/course/course-dzkf-icon4.png");}} li:nth-child(5){i:before{background-image: url("~static/images/client/course/course-dzkf-icon5.png");}} li:nth-child(6){i:before{background-image: url("~static/images/client/course/course-dzkf-icon6.png");}} li:nth-child(7){i:before{background-image: url("~static/images/client/course/course-dzkf-icon7.png");}} } @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;} } } /******** 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{ font-size: 0; img{width: 375px;margin: 48px auto 8px;display: block;} i{width: 340px;height: 4px;background: rgba(0, 174, 186, 1);display: block;margin: 0 auto 24px;} p{font-size: 18px;color: rgb(16, 16, 16);line-height: 24px;text-align: justify;margin: 24px 60px} } // 企业文化 .corporate-culture-box{ ul{display: flex;justify-content: center;flex-wrap: wrap;} li{ width:42%; display: inline-block; vertical-align: middle; div{ width: 390px;height: 195px;background-repeat: no-repeat;background-color: rgba(0, 0, 0, 0.5);background-blend-mode: overlay; border-radius: 8px;margin: 46px auto;text-align: center; p{font-size:20px;color: #fff;line-height: 195px;} } } li:nth-child(1){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} } li:nth-child(2){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} } li:nth-child(3){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} } li:nth-child(4){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} } } // 联系我们 .contact-us-box{ ul{margin: 24px 0 48px;} li{ width: 50%;margin: 24px 0;display: inline-block;vertical-align: middle; i{width: 30px;height: 30px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px;vertical-align: middle;} span{font-weight: 700;font-size: 25px;color: rgb(16, 16, 16);display: inline-block;vertical-align: middle;} } li:nth-child(1) { i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");} } li:nth-child(2) { i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");} } li:nth-child(3) { i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");} } li:nth-child(4) { i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");} } img{max-width: 100%;display: block;} } @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;} } // 企业文化 .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;} } } } } } /******** 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} } img{width:100px;display: inline-block;vertical-align: top;margin: 85px 25px 85px 30px;} } .change-content-left{ display: inline-block;padding: 32px 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: 525px;display: inline-block;padding-top: 64px;} } // 我们的优势 .government-advantage-box{ padding-bottom: 50px; h4{margin-bottom: 48px;} dl{width:33.33%;display: inline-block;margin-bottom: 30px;} 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;} 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{ // 为企业培训打造学习矩阵 .products-services-content p{line-height: 52px;} // 蓝色提醒文字 .blue-big-size{ font-size: 26px;color: #3e7ce7;padding: 0 5px; } // 课程内容形式多样 .course-learn-box{ // 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 #00AEBA;background: #00AEBA;margin-right: 24px;margin-bottom: 0;} .client-default-white-Btn{background: #fff;color:#00AEBA;margin-right: 0 } // 为企业培训打造学习矩阵 .products-services-box{ margin-top: 24px; img{width: 640px;} .products-services-content{ width: 400px; p{font-weight: 700;font-size: 18px;color: rgb(16, 16, 16);} } } @media (max-width: 768px){ // 为企业培训打造学习矩阵 .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{ // 麦塔在线考试系统体验版 .experience-ul-box{ text-align: center;margin-top: 36px; li{width: 30%;display: inline-block;text-align: center;} div{box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;width: 90%;border-radius: 8px;margin: 0 auto;padding: 24px 0;} i{width: 128px;height: 128px;background-size: contain;display: block;background-repeat: no-repeat;margin: 0 auto 32px;background-position: center;} li:nth-child(1) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon1.png");} li:nth-child(2) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon2.png");} li:nth-child(3) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon3.png");} h4{font-weight: 400;font-size: 24px;color: rgb(16, 16, 16);margin: 16px 0;} p{font-weight: 400;font-size: 16px;color: rgb(16, 16, 16);} span{font-weight: 700;font-size: 16px;color: rgb(255, 0, 0);} a{width: 200px;height: 40px;line-height: 40px;margin: 0 auto 16px;background: #00aeba;font-size: 14px;color: #fff;display: block;border-radius: 4px;} } .peixun-ul-box{ margin-bottom: 80px; li:nth-child(1) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon1.png");} li:nth-child(2) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon2.png");} li:nth-child(3) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon3.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;} } } } } }