cus-client-page.scss 98 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383
  1. @import "../base/utils";
  2. @import "cus-client-common";
  3. @mixin setClientPage() {
  4. /******** describe: 网站首页 author: TX date:2020-07-30 ********/
  5. .client-index-page{
  6. width: 100%;
  7. /* 网站banner */
  8. .client-index-banner{
  9. width: 100%;
  10. height: 520px;
  11. background-color:#fff;
  12. background-image: url("~static/images/client/index/index-banner-background.png");
  13. background-position-x: center;
  14. background-repeat: no-repeat;
  15. }
  16. /* banner-box */
  17. .client-banner-box{
  18. .el-carousel__container{height: 520px;cursor: pointer;}
  19. .el-carousel__item{
  20. .index-carousel-box{width:100%;height: 520px;display: block;background-position: center;background-repeat: no-repeat;background-color: #fff;}
  21. }
  22. }
  23. .products-services-box img{float: unset;}
  24. /* 发展历程 - 移动端隐藏*/
  25. .client-company-history{
  26. background:#f8f8f8;
  27. li{
  28. width: 25%;display: inline-block;text-align: center;
  29. div{border-right:2px solid #e5e5e5;margin: 24px 0;}
  30. p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
  31. span{@include setFontStyle(6);}
  32. h4{@include setFontStyle(-4);color: #666;}
  33. }
  34. li:last-child div{border-right: 0;}
  35. }
  36. /* 产品和服务 */
  37. .client-products-services{
  38. .client-title{
  39. margin-bottom: 48px;
  40. }
  41. }
  42. /* 行业学习需求 */
  43. .client-demand-box{
  44. background: #f5f5f5;
  45. padding-bottom: 80px;
  46. min-height: 720px;
  47. //tab
  48. .demand-box-tab{
  49. margin-top: 30px;
  50. .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;}
  51. .el-tabs__item.is-active{background-color:#3e7ee7;color: #fff;position: relative}
  52. .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;
  53. position: absolute;bottom: -33px;left: 50%;margin-left: -8px;}
  54. // 免费试用按钮
  55. .client-default-Btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;}
  56. }
  57. //覆盖饿了么样式
  58. .el-tabs__header{margin: 0 0 48px;}
  59. .demand-box-tab.el-tabs--card>.el-tabs__header{border: 0}
  60. .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;}
  61. .demand-box-tab .el-tabs__nav-scroll{text-align: center;}
  62. .demand-box-tab .el-tabs__nav{float: none;}
  63. // 考试ul
  64. .demand-tab-list{
  65. margin: 0 -18px;
  66. li{
  67. width: 33.33%;display: inline-block;position: relative;margin-bottom: 24px;overflow: hidden;
  68. // 内容区域
  69. .demand-content-box{height: 300px;margin: 0 18px;background-color: #fff;background-repeat: no-repeat;background-position: 5px 5px;}
  70. //图片区域
  71. .demand-img-box{
  72. position: absolute;
  73. top: 90px;
  74. left: 50%;
  75. margin-left: -50px;
  76. i{width: 100px;height: 100px;display:block;margin-bottom: 24px;background-repeat: no-repeat;background-size: cover;}
  77. h4{@include setFontStyle(-2);color: #272727;text-align: center;}
  78. }
  79. // 蒙版
  80. .demand-mask-box{
  81. position: absolute;
  82. top: 300px;
  83. padding: 20px;
  84. background:rgba(66,66,66,0.65);
  85. transition: 0.5s;
  86. margin: 0 18px;
  87. color: #fff;
  88. h4{
  89. @include setFontStyle(0);margin-bottom: 24px;text-align: center;
  90. >a{float: right;display: none;}
  91. }
  92. p{max-height: 100px;overflow: hidden;@include setFontStyle(-6);line-height: 24px;margin-bottom: 16px;@include multi-line-ellipsis(4);text-align: justify; }
  93. span{@include setFontStyle(-6);color: #fff;}
  94. 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");}
  95. }
  96. // 图标div
  97. .demand-icon-box{
  98. padding: 16px 0;
  99. border-top: 1px solid #fff;
  100. a{margin-right: 8px}
  101. a:last-child{margin-right: 0;}
  102. img{width: 77px;height: 77px;}
  103. }
  104. }
  105. li:nth-child(1){
  106. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
  107. .demand-content-box{background-image: url("~static/images/client/index/index-demand-img1.png");}
  108. }
  109. li:nth-child(2){
  110. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic2.png");}}
  111. .demand-content-box{background-image: url("~static/images/client/index/index-demand-img2.png");}
  112. }
  113. li:nth-child(3){
  114. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
  115. .demand-content-box{background-image: url("~static/images/client/index/index-demand-img3.png");}
  116. }
  117. li:nth-child(4){
  118. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic4.png");}}
  119. .demand-content-box{background-image: url("~static/images/client/index/index-demand-img4.png");}
  120. }
  121. li:nth-child(5){
  122. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic5.png");}}
  123. .demand-content-box{background-image: url("~static/images/client/index/index-demand-img5.png");}
  124. }
  125. li:nth-child(6){
  126. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
  127. .demand-content-box{background-image: url("~static/images/client/index/index-demand-img6.png");}
  128. }
  129. li:hover{
  130. // 蒙版
  131. .demand-mask-box{
  132. top:0;
  133. h4{
  134. text-align: left;
  135. >a{display: inline-block;}
  136. }
  137. }
  138. }
  139. }
  140. .demand-peixun-list{
  141. li:nth-child(1){
  142. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic7.png");}}
  143. }
  144. li:nth-child(2){
  145. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic6.png");}}
  146. }
  147. li:nth-child(3){
  148. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic8.png");}}
  149. }
  150. li:nth-child(4){
  151. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic1.png");}}
  152. }
  153. li:nth-child(5){
  154. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic3.png");}}
  155. }
  156. li:nth-child(6){
  157. .demand-img-box{i{background-image: url("~static/images/client/index/index-demand-pic12.png");}}
  158. }
  159. }
  160. }
  161. /* 超过10万家客户的信任之选 */
  162. .client-customer-box{
  163. .customer-img-box{
  164. padding-bottom: 80px;
  165. li{
  166. width: 20%;
  167. display: inline-block;
  168. }
  169. img{margin: 48px 30px 0;transition: all 0.5s;}
  170. li:hover{
  171. img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
  172. }
  173. }
  174. }
  175. /* 我们始终专注教育系统研发更懂用户需求 */
  176. .client-cert-box{
  177. background: #005491;
  178. padding-bottom: 80px;
  179. .client-title{color: #fff}
  180. .cert-img-box{
  181. display: flex;
  182. justify-content: space-between;
  183. margin: 48px 0 0;
  184. align-items: center;
  185. span{display:block;height: max-content;background: #80aac8;padding: 8px 8px 3px;overflow: hidden;}
  186. span:nth-child(3){
  187. img{width: 320px;height:210px;}
  188. }
  189. img{width: 170px;height:240px;transition: all 0.5s;}
  190. img:hover{transform: scale(1.14);}
  191. }
  192. a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;background: #005491;border: 1px solid #fff;box-sizing: border-box;}
  193. }
  194. /* 新闻资讯 */
  195. .client-news-information {
  196. background: #f9faff;
  197. padding-bottom: 80px;
  198. .industry-information-box {
  199. margin-top: 48px;
  200. h4{color: #333;}
  201. h4:hover {cursor: pointer;color: #3e7ce7;}
  202. // 左
  203. .industry-information-left {
  204. width: 520px;
  205. margin-right: 80px;
  206. display: inline-block;
  207. vertical-align: top;
  208. color: #333;
  209. div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
  210. img {width: 520px;height: 210px;margin-bottom: 42px;}
  211. h4 {@include setFontStyle(-2);margin-bottom: 16px;}
  212. i{width:25px;height:12px;float:right;background-image:url("~static/images/client/index/news-information-icon.png")}
  213. p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
  214. b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
  215. span {@include setFontStyle(-6);display: block;color: #666;}
  216. }
  217. // 右
  218. .industry-information-right {
  219. width: 590px;
  220. display: inline-block;
  221. vertical-align: top;
  222. li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
  223. li:last-child {border: 0;}
  224. h4 {@include setFontStyle(-4);@include single-line-ellipsis;margin-bottom: 12px;}
  225. p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;}
  226. span {margin: 0 30px 0 10px;}
  227. }
  228. }
  229. }
  230. // 移动端手机尺寸(0-768)
  231. @media (max-width: 768px){
  232. /* 网站banner */
  233. .client-index-banner{height: 150px;}
  234. /* banner-box */
  235. .client-banner-box{
  236. .el-carousel__container{height: 150px;}
  237. .el-carousel__item .index-carousel-box{height: 150px;background-size: cover;}
  238. // 左箭头
  239. .el-carousel__arrow--left{display: none;}
  240. // 右箭头
  241. .el-carousel__arrow--right{display: none;}
  242. // 分页
  243. .el-carousel__button {width: 6px;height: 6px;border-radius: 3px;}
  244. }
  245. /* 产品和服务 */
  246. .client-products-services{
  247. .client-title{
  248. margin-bottom: 0;
  249. }
  250. }
  251. /* 行业学习需求 */
  252. .client-demand-box{
  253. padding: 30px 0 0;
  254. min-height: 610px;
  255. //tab
  256. .demand-box-tab{
  257. margin-top: 20px;
  258. .el-tabs__item{width:100px;height: 30px;line-height: 30px;border-radius: 5px;margin: 0 8px 12px;}
  259. .el-tabs__item.is-active:after{border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #3e7ee7;bottom: -14px;}
  260. }
  261. //覆盖饿了么样式
  262. .el-tabs__header{margin: 0 7px 15px;}
  263. // 考试ul
  264. .demand-tab-list{
  265. margin: 0;
  266. li{
  267. width: 50%;margin-bottom: 12px;
  268. // 内容区域
  269. .demand-content-box{height: 125px;background-size: 25%;margin: 0 7px;}
  270. //图片区域
  271. .demand-img-box{
  272. min-width: 70px;top: 30px;margin-left: -35px;
  273. i{width: 40px;height: 40px;margin: 0 auto 15px;}
  274. h4{@include setFontStyle(-6);color: rgb(16, 16, 16);}
  275. }
  276. // 蒙版
  277. .demand-mask-box{display: none;}
  278. // 点击按钮
  279. .demand-onclick-btn{position: absolute;top: 0;left: 7px;right: 7px;bottom: 0;z-index: 99;}
  280. }
  281. }
  282. }
  283. /* 新闻资讯 */
  284. .client-newsInfo-phone{
  285. background-color: rgb(238, 238, 238);
  286. // 轮播外层
  287. .el-carousel{
  288. padding: 20px 0 40px;
  289. // card
  290. .el-carousel__item{
  291. width: 80%;left: -15%;color: rgb(16, 16, 16);background: #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;
  292. img{width: 100%;height: 135px;}
  293. }
  294. // 文字区域
  295. .newsInfo-card-content{
  296. padding: 24px 20px;
  297. h4{@include setFontStyle(-4);}
  298. span{@include setFontStyle(-8);margin-top: 16px;display: block}
  299. p{min-height: 48px;@include setFontStyle(-6);margin-top: 16px;@include multi-line-ellipsis(3);}
  300. }
  301. }
  302. }
  303. /* 超过10万家客户的信任之选 */
  304. .client-customer-box{padding-top: 50px;
  305. .customer-img-box{
  306. padding-bottom: 50px;
  307. li{width: 50%;text-align: center;}
  308. img{max-width:90%;margin: 10px 0;}
  309. li:hover{
  310. img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
  311. }
  312. }
  313. }
  314. /* 我们始终专注教育系统研发更懂用户需求 */
  315. .client-cert-box{
  316. padding: 0 7px 28px;
  317. .cert-img-box{
  318. margin: 20px 0 0;
  319. span{height: 64px;padding: 2px 2px 0;}
  320. span:nth-child(3){
  321. height: 55px;
  322. img{width: 80px;height:53px;}
  323. }
  324. img{width: 44px;height:62px;}
  325. img:hover{transform: none;}
  326. }
  327. a{width:122px;height:35px;line-height: 35px;margin: 28px auto 0;}
  328. }
  329. }
  330. }
  331. /******** describe: 平台页面(考试平台、培训平台) author: TX date:2020-08-12 ********/
  332. .client-platform-page,.client-new-platform-page{
  333. /* 网站banner */
  334. .client-platform-banner,.client-platform-new-banner{
  335. width: 100%;
  336. position: relative;
  337. div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
  338. .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;}
  339. }
  340. /* 网站banner */
  341. .client-platform-banner{height: 396px;background-color:#042D85;}
  342. .client-platform-new-banner{height: 520px;background-color:#fff;}
  343. /* 产品体验*/
  344. .platform-products-experience{
  345. >p{font-size: 20px;line-height: 20px;text-align: center;margin: 30px 0 42px;}
  346. .experience-ul-box{
  347. margin: 0 -16px;text-align: center;
  348. li{
  349. width:25%;display: inline-block;text-align: center;font-size: 16px;
  350. >div{
  351. margin: 0 16px;padding:32px 18px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;border-radius: 10px;position: relative;
  352. 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;}
  353. }
  354. i{display: inline-block;width: 46px;height: 46px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;}
  355. h5{font-size: 22px;color: rgb(16, 16, 16);margin-bottom: 24px;}
  356. p{font-size: 16px;padding: 0;margin: 0;color: #101010;line-height: 26px;}
  357. a{width: 180px;height: 40px;line-height: 40px;display: inline-block;margin-top: 24px;text-align: center;background-color: #3e7ce7;
  358. 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}
  359. span{display: block;transition: 0.5s;position: absolute;top: 0;bottom: 305px;left: 0;right: 0;overflow: hidden;}
  360. em{width:180px;height:180px;display: block;margin: 24px auto;background-image:url("~static/images/client/exam/exam-code-img.png")}
  361. em.px-img-box{background-image:url("~static/images/client/train/train-code-img.png")}
  362. }
  363. li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")}
  364. li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")}
  365. li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-sz-icon.png")}
  366. li:nth-child(4) i{background-image:url("~static/images/client/exam/exam-sx-icon.svg")}
  367. }
  368. }
  369. /* 产品优势 */
  370. .platform-products-services{
  371. li:not(:last-child){border-bottom:1px solid #eee; }
  372. }
  373. /* 产品功能 */
  374. .platform-product-function{
  375. background: #f8f8f8;
  376. padding-bottom: 32px;
  377. // ul
  378. .product-function-box{
  379. margin-top: 48px;
  380. li{
  381. width: 50%;display: inline-block;transition: .3s all linear;
  382. div{padding: 12px 16px 12px 8px;margin: 0 32px 24px;background: #fff;}
  383. i{width: 158px;height: 120px;margin-right:24px;float:left;background-size: cover;background-repeat: no-repeat;}
  384. h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin: 12px 0 8px 0;}
  385. p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);@include multi-line-ellipsis(3);}
  386. }
  387. }
  388. .product-function-box li:nth-child(1) i,.product-function-icon1{background-image:url("~static/images/client/exam/product-function-icon1.png");}
  389. .product-function-box li:nth-child(2) i,.product-function-icon2{background-image:url("~static/images/client/exam/product-function-icon2.png");}
  390. .product-function-box li:nth-child(3) i,.product-function-icon3{background-image:url("~static/images/client/exam/product-function-icon3.png");}
  391. .product-function-box li:nth-child(4) i,.product-function-icon4{background-image:url("~static/images/client/exam/product-function-icon4.png");}
  392. .product-function-box li:nth-child(5) i,.product-function-icon5{background-image:url("~static/images/client/exam/product-function-icon5.png");}
  393. .product-function-box li:nth-child(6) i,.product-function-icon6{background-image:url("~static/images/client/exam/product-function-icon6.png");}
  394. .product-function-box li:nth-child(7) i,.product-function-icon7{background-image:url("~static/images/client/exam/product-function-icon7.png");}
  395. .product-function-box li:nth-child(8) i,.product-function-icon8{background-image:url("~static/images/client/exam/product-function-icon8.png");}
  396. .product-function-box li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
  397. }
  398. /* 应用场景 */
  399. .platform-application-scenarios{
  400. background: #FFF;
  401. padding-bottom: 80px;
  402. .application-scenarios-box{margin: 48px -12px 0;}
  403. li{
  404. width: 33.33%;
  405. display: inline-block;
  406. vertical-align: top;
  407. color: #fff;
  408. .application-scenarios-img{width: 100px;height: 100px;background-size: cover;margin: 0 auto 24px;}
  409. .application-scenarios-content{
  410. padding: 50px 30px 40px;margin: 0 12px;background: #FFF;
  411. h5{@include setFontStyle(0);text-align: center;margin-bottom: 24px;}
  412. p{@include setFontStyle(-4);line-height: 24px;text-align: justify;@include multi-line-ellipsis(5);min-height: 118px;max-height: 118px}
  413. }
  414. }
  415. li:nth-child(1){
  416. .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img1.png");}
  417. .application-scenarios-content{background: #ffbf00;}
  418. }
  419. li:nth-child(2){
  420. .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img2.png");}
  421. .application-scenarios-content{background: #3799db;}
  422. }
  423. li:nth-child(3){
  424. .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img3.png");}
  425. .application-scenarios-content{background: #63ba86;}
  426. }
  427. }
  428. @media (max-width: 768px){
  429. /* 网站banner */
  430. .client-platform-banner,.client-platform-new-banner{
  431. height: 150px;
  432. div{background-size: cover;}
  433. .free-trial-default-btn{top: 90px;margin-left: -61px;}
  434. }
  435. // 产品体验
  436. .platform-products-experience{
  437. .sjxyd-icon {background-image: url("~static/images/client/exam/exam-tel-icon.png")}
  438. .dnxyd-icon {background-image: url("~static/images/client/exam/exam-pc-icon.png")}
  439. .dngld-icon {background-image: url("~static/images/client/exam/exam-sz-icon.png")}
  440. .skrz-icon {background-image: url("~static/images/client/exam/exam-sx-icon.svg")}
  441. >p{font-weight: 400;font-size: 14px;color: rgba(85, 85, 85, 1);margin: 24px 0 16px;}
  442. }
  443. // 产品优势
  444. .platform-products-services{
  445. li:not(:last-child) {border: 0;}
  446. .products-services-content div{text-align: center;margin-bottom: 40px;}
  447. }
  448. // 产品功能
  449. .platform-product-function{
  450. padding-bottom: 16px;
  451. // swiper
  452. .experience-swiper-box{
  453. // swiper 内容区域
  454. .experience-content-box{
  455. 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;
  456. i{width: 150px;height: 122px;}
  457. h5{width: 100%;text-align: left;margin-bottom: 12px;}
  458. p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(4);}
  459. }
  460. // 分页
  461. .swiper-pagination-style {width: 200px;margin-left: -90px;bottom: 50px;}
  462. // 左右滑动
  463. .experience-swiper-tip{margin: 0}
  464. }
  465. }
  466. // 应用场景
  467. .platform-application-scenarios{
  468. padding-bottom: 16px;
  469. // swiper
  470. .experience-swiper-box{
  471. margin-top: 16px;
  472. .experience-content-box{
  473. height: 295px;box-shadow:none;padding: 16px;box-sizing: border-box;margin: 0 4% 40px;
  474. h5{margin-bottom: 12px;color: #fff}
  475. p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(45);color: #fff}
  476. }
  477. .scenarios-gwks-box{
  478. background-color: #ffbf00;
  479. i{background-image: url("~static/images/client/exam/application-scenarios-img1.png");}
  480. }
  481. .scenarios-dxjs-box{
  482. background-color: #3799db;
  483. i{background-image: url("~static/images/client/exam/application-scenarios-img2.png");}
  484. }
  485. .scenarios-zgks-box{
  486. background-color: #63ba86;
  487. i{background-image: url("~static/images/client/exam/application-scenarios-img3.png");}
  488. }
  489. // 分页
  490. .swiper-pagination-style {width: 76px;margin-left: -30px;bottom:25px;}
  491. // 左右滑动
  492. .experience-swiper-tip{margin: 0}
  493. }
  494. }
  495. }
  496. }
  497. .client-new-platform-page{
  498. .platform-products-services li:not(:last-child) {border: 0;}
  499. .products-services-box{
  500. width: 100%;
  501. display: flex;
  502. align-items: center;
  503. justify-content: space-between;
  504. margin-bottom: 160px;
  505. img {height: 427px;}
  506. .products-services-content{
  507. padding: 0;
  508. h5{margin-bottom: 50px;line-height: 44px;}
  509. p{font-size: 16px;font-weight: 500;text-align: justify;color: #333333;line-height: 36px;margin-bottom: 50px;}
  510. .client-default-Btn{background: #0065CD;border: 1px solid #0065CD;}
  511. span.client-default-Btn {
  512. background: #fff;
  513. color: #0065CD;
  514. margin-right: 0;
  515. }
  516. }
  517. }
  518. @media (max-width: 768px){
  519. .products-services-box{
  520. display: inline-block;margin-bottom: 36px;
  521. img {height: auto;}
  522. .products-services-content {
  523. padding-top: 24px;
  524. h5 {
  525. margin-bottom: 24px;
  526. line-height: 22px;
  527. }
  528. p {
  529. margin-bottom: 24px; line-height: 24px;
  530. }
  531. }
  532. }
  533. }
  534. }
  535. /******** describe: 培训平台--图片(和考试默认图片不同) author: TX date:2020-08-14 ********/
  536. .client-train-page{
  537. /* 产品体验*/
  538. .platform-products-experience{
  539. .experience-ul-box li{
  540. em{background-image:url("~static/images/client/train/train-code-img.png")}
  541. }
  542. }
  543. /* 网站banner */
  544. .client-platform-banner{
  545. background-color:#fff;
  546. }
  547. /* 产品功能 */
  548. .platform-product-function{
  549. // ul
  550. .product-function-box{
  551. li:nth-child(1){i{background-image:url("~static/images/client/train/product-function-icon1.png");}}
  552. li:nth-child(2){i{background-image:url("~static/images/client/train/product-function-icon2.png");}}
  553. li:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon3.png");}}
  554. li:nth-child(4){i{background-image:url("~static/images/client/train/product-function-icon4.png");}}
  555. li:nth-child(5){i{background-image:url("~static/images/client/train/product-function-icon5.png");}}
  556. li:nth-child(6){i{background-image:url("~static/images/client/train/product-function-icon6.png");}}
  557. li:nth-child(7){i{background-image:url("~static/images/client/train/product-function-icon7.png");}}
  558. li:nth-child(8){i{background-image:url("~static/images/client/train/product-function-icon8.png");}}
  559. }
  560. }
  561. /* 应用场景 */
  562. .train-application-scenarios{
  563. li:nth-child(1){
  564. .application-scenarios-img {
  565. background-image: url("~static/images/client/train/application-scenarios-img1.png");
  566. }
  567. }
  568. li:nth-child(2){
  569. .application-scenarios-img {
  570. background-image: url("~static/images/client/train/application-scenarios-img2.png");
  571. }
  572. }
  573. li:nth-child(3){
  574. .application-scenarios-img {
  575. background-image: url("~static/images/client/train/application-scenarios-img3.png");
  576. }
  577. }
  578. }
  579. @media (max-width: 768px){
  580. /* 网站banner */
  581. .client-platform-banner .free-trial-default-btn{top: 95px;}
  582. }
  583. }
  584. /******** describe: 课程开发 author: TX date:2020-08-24 ********/
  585. .client-course-page{
  586. /* 网站banner */
  587. .client-course-banner{
  588. width: 100%;
  589. height: 520px;
  590. background-color:#fff;
  591. background-position-x: center;
  592. background-repeat: no-repeat;
  593. }
  594. /* 调转菜单栏 */
  595. .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;}
  596. .course-link-nav{
  597. width: 100%;height: 83px;background: #161B38;opacity: 0.9;
  598. a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;}
  599. a:nth-child(1){background: #353c61;}
  600. a:nth-child(2){background: #38406a;}
  601. a:nth-child(3){background: #3c4775;}
  602. a:nth-child(4){width:174px;background: #404b81;}
  603. a:nth-child(5){background: #3c4775;}
  604. a:nth-child(6){background: #38406a;}
  605. a:nth-child(7){background: #353c61;}
  606. }
  607. // 申请方案按钮
  608. .free-trial-default-btn{width:230px;display: inline-block;margin: 0}
  609. // 联系我们按钮
  610. .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;}
  611. /* PPT定制及美化、H5平面设计、视频后期处理 */
  612. .course-ppt-box,.course-H5-box,.course-videoPos-box{
  613. ul{margin: 48px 0;}
  614. li{display: inline-block;}
  615. li:not(:last-child){margin-right: 30px;}
  616. p{@include setFontStyle(-4);color: rgba(0, 0, 0, 0.65);margin-top: 24px;}
  617. }
  618. /* 视频后期处理 */
  619. .course-videoPos-box{
  620. padding-bottom: 80px;
  621. li:not(:last-child){margin-right: 80px;}
  622. }
  623. @media (max-width: 768px){
  624. /* 网站banner */
  625. .client-course-banner{height: 150px;background-size: cover;}
  626. // 菜单 ul
  627. .course-menu-ul{
  628. background: #fff;margin: 20px 0 0;
  629. 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);
  630. color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box}
  631. li.active{color: #fff;background: rgb(0, 102, 204);}
  632. li:hover{transform: none;}
  633. }
  634. // 内容区域
  635. .client-container{padding: 0;}
  636. // 申请方案按钮
  637. .free-trial-default-btn{width:122px;display: inline-block;margin: 0 0 54px;}
  638. // 联系我们按钮
  639. .course-apply-btn{margin-left: 16px;}
  640. /* PPT定制及美化、H5平面设计、视频后期处理 */
  641. .course-ppt-box,.course-H5-box,.course-videoPos-box{
  642. margin: 0 6%;
  643. ul{margin: 12px 0;}
  644. li{box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;margin-bottom: 20px;}
  645. li:not(:last-child){margin-right: 0;}
  646. img{max-width: 100%;}
  647. p{margin: 20px 0;}
  648. }
  649. /* 视频后期处理 */
  650. .course-videoPos-box{
  651. padding-bottom: 16px;
  652. img{height: 180px;}
  653. }
  654. }
  655. }
  656. /******** describe: 关于我们 author: TX date:2020-08-07 ********/
  657. .client-aboutUs-page{
  658. // banner
  659. .aboutUs-banner{
  660. width: 100%;
  661. height: 520px;
  662. background-color: #fff;
  663. background-position-x: center;
  664. background-repeat: no-repeat;
  665. background-image: url("~static/images/client/aboutUs/aboutUs-banner.jpg");
  666. }
  667. // 公司简介
  668. .company-profile-box{
  669. padding-bottom: 48px;
  670. font-size: 0;
  671. img{margin: 48px auto;display: block;}
  672. p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px}
  673. }
  674. // 品牌介绍
  675. .brand-introduction-box{
  676. .brand-introduction-content{
  677. width: 100%;
  678. padding: 42px;
  679. box-sizing: border-box;
  680. background: #fbfbfb;
  681. border-radius: 8px;
  682. float: right;
  683. .brand-introduction-left{
  684. display: inline-block;
  685. vertical-align: middle;
  686. padding-right: 42px;
  687. border-right: 1px solid #ddd;
  688. h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px}
  689. img{margin-bottom: 36px;}
  690. }
  691. span{width: 740px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 42px;display: inline-block;vertical-align: middle;padding-left: 42px;text-align: justify;}
  692. }
  693. }
  694. // 企业文化
  695. .corporate-culture-box{
  696. //padding-bottom: 80px;
  697. li{
  698. width:25%;
  699. display: inline-block;
  700. vertical-align: middle;
  701. div{
  702. margin-right: 16px;
  703. margin-bottom: 16px;
  704. padding: 40px 0;
  705. border: 6px solid #f7f7f7;
  706. text-align: center;
  707. i{width: 70px;height: 70px;display:inline-block;margin-bottom: 16px;}
  708. h5{@include setFontStyle(0);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
  709. p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
  710. }
  711. }
  712. li:nth-child(1){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} }
  713. li:nth-child(2){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} }
  714. li:nth-child(3){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} }
  715. li:nth-child(4){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} }
  716. li:last-child{
  717. div{margin-right: 0;}
  718. }
  719. }
  720. // 企业发展历程
  721. .enterprise-development-box{
  722. // 覆盖饿了么tab样式
  723. .enterprise-development-tab{
  724. .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;}
  725. .el-tabs__header{
  726. margin: 0;
  727. .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;}
  728. .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: visible}
  729. }
  730. .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;}
  731. .el-tabs__item.is-active{background: #3e7ee7;color: #fff}
  732. .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;}
  733. .el-tabs__item.is-active:after{background: #3e7ee7;}
  734. .el-tabs__content{overflow: visible}
  735. }
  736. // 企业发展历程内容部分
  737. li{
  738. width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;min-height: 196px;vertical-align: top;
  739. div{width: 250px;border-bottom: 1px solid #eee;}
  740. img{margin-bottom: 14px;}
  741. i{min-width:34px;display:inline-block;color: #3e7ee7;font-style: normal;margin-right: 10px;}
  742. p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;}
  743. }
  744. }
  745. // 联系我们
  746. .contact-us-box{
  747. .contact-container-box{
  748. width: 100%;
  749. box-sizing: border-box;
  750. color: rgba(0,0,0,0.85);
  751. h4{@include setFontStyle(10);color: #3e7ee7;margin-bottom: 60px;margin-top: 20px;}
  752. li{
  753. width: 50%;display: inline-block;box-sizing: border-box;margin-bottom: 48px;
  754. i{width: 30px;height: 30px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: contain;margin-right: 8px;vertical-align: middle;}
  755. span{@include setFontStyle(0);color: rgba(16, 16, 16, 100);vertical-align: middle;}
  756. }
  757. li:nth-child(1) {
  758. i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
  759. }
  760. li:nth-child(2) {
  761. text-align: right;
  762. span{width: 273px;display: inline-block;text-align: left}
  763. i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");}
  764. }
  765. li:nth-child(3) {
  766. i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
  767. }
  768. li:nth-child(4) {
  769. text-align: right;
  770. span{width: 273px;display: inline-block;text-align: left}
  771. i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
  772. }
  773. }
  774. img{max-width: 100%;margin: 0 auto;display: block;}
  775. }
  776. @media (max-width: 768px){
  777. // banner
  778. .aboutUs-banner{
  779. height: 150px;background-size: cover;
  780. span{width: 100%;}
  781. }
  782. // 公司简介
  783. .company-profile-box{
  784. img{margin: 20px auto;max-width: 100%;}
  785. p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;}
  786. }
  787. // 品牌介绍
  788. .brand-introduction-box{
  789. background-color: rgb(238, 238, 238);
  790. .brand-introduction-content{
  791. background-color: transparent;padding: 24px 10px;
  792. .brand-introduction-left{
  793. display: block;border-right:0;padding-right:0;
  794. h4{font-size: 18px;color: rgba(0, 0, 0, 1);text-align: center;margin-bottom: 20px;font-weight: 700;}
  795. img{margin: 0 auto 24px;max-width: 230px;display: block;}
  796. }
  797. span{width: 100%;display: block;padding-left: 0;font-size: 14px;color: rgba(85, 85, 85, 1);line-height: 24px;}
  798. }
  799. }
  800. // 企业文化
  801. .corporate-culture-box{
  802. padding: 50px 0 0;
  803. li{
  804. width:100%;
  805. div{
  806. height: 70px;margin: 0 0 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0;
  807. i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;}
  808. h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;}
  809. p{font-size: 14px;color: #101010;}
  810. }
  811. }
  812. }
  813. // 联系我们
  814. .contact-us-box{
  815. padding: 54px 0 0;border: 0;line-height: 1;font-size: 0;
  816. .contact-container-box{
  817. width: 100%;
  818. padding: 0;
  819. color: rgba(0,0,0,0.85);
  820. display: flex;
  821. flex-direction: column;
  822. h4{@include setFontStyle(-2);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;margin-top:0;text-align: center;}
  823. li{
  824. width: 100%;display: block;margin-bottom: 24px;
  825. i{width: 20px;height: 20px;}
  826. span{@include setFontStyle(-6);}
  827. }
  828. li:nth-child(2),li:nth-child(4){
  829. text-align: left;
  830. span{width: auto;}
  831. }
  832. li:nth-child(1){order: 1;}
  833. li:nth-child(2){order: 2;}
  834. li:nth-child(3){order: 4;}
  835. li:nth-child(4){order: 3;}
  836. }
  837. }
  838. }
  839. }
  840. /******** describe: 新闻资讯 author: TX date:2020-08-10 ********/
  841. .client-newsInfor-page{
  842. // banner
  843. .newsInfor-banner{
  844. width: 100%;
  845. height: 520px;
  846. background-color: #fff;
  847. background-position-x: center;
  848. background-repeat: no-repeat;
  849. }
  850. // 菜单 ul
  851. .newsInfor-menu-ul{
  852. display: block;
  853. margin: 0 auto;
  854. text-align: center;
  855. background: #F7F9FB;
  856. 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}
  857. li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
  858. li:hover{
  859. transform: scale(1.1);
  860. }
  861. }
  862. // 页面主要内容区域
  863. .newsInfor-content-box{
  864. min-height: 304px;
  865. padding: 48px 0 80px;
  866. ul{display: inline-block;vertical-align: top}
  867. // 右侧内容区域
  868. .newsInfor-content-ul{
  869. padding: 0 32px;
  870. li{margin-bottom: 40px;cursor: pointer}
  871. li:last-child{margin-bottom: 0;}
  872. //图片
  873. .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;}
  874. //内容区域
  875. .newsInfor-list-content{
  876. width: calc(100% - 350px);
  877. display: inline-block;
  878. vertical-align: top;
  879. h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
  880. div{
  881. margin-bottom: 8px;
  882. 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");}
  883. i[type="visits"]{background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");}
  884. span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
  885. }
  886. 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;}
  887. a{@include setFontStyle(-6);color: #4A73FD;}
  888. a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~static/images/client/newsInfor/newsInfor-list-icon.svg");margin-left: 8px;}
  889. a:hover{cursor: pointer;}
  890. }
  891. }
  892. }
  893. @media (max-width: 768px){
  894. // banner
  895. .newsInfor-banner{
  896. height: 150px;background-size: cover;
  897. img{width: auto;height: 150px;}
  898. }
  899. // 页面主要内容区域
  900. .newsInfor-content-box{
  901. min-height: unset;padding: 20px 0 50px;
  902. // 右侧内容区域
  903. .newsInfor-content-ul{
  904. width:100%;padding: 0 6%;box-sizing: border-box;
  905. li{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;margin-bottom: 20px;}
  906. //图片
  907. .newsInfor-img-box{width:100%;height:180px;display: block;margin-right:0;border-radius: 0;}
  908. //内容区域
  909. .newsInfor-list-content{
  910. width: 100%;padding: 20px;box-sizing: border-box;
  911. h5{@include setFontStyle(-4);color: rgb(16, 16, 16);margin-bottom: 12px;}
  912. div{
  913. span{margin-bottom: 0;@include setFontStyle(-8);color: rgb(16, 16, 16);}
  914. }
  915. p{height: auto;max-height: 60px;margin-bottom:0;font-size: 14px;color: rgb(16, 16, 16);line-height: 20px;}
  916. }
  917. // 分页
  918. .client-el-pagination{margin-top: 24px}
  919. }
  920. }
  921. }
  922. }
  923. /******** describe: 政府机构-详情页 author: TX date:2020-08-10 ********/
  924. .client-government-page{
  925. // banner
  926. .industrydetails-banner{background-color: #1B33B7;}
  927. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/government-banner-img.png");}
  928. // 我们的系统为您改变了什么
  929. .government-change-box{
  930. background: #F9FAFF;
  931. padding-bottom: 80px;
  932. .industrydetails-content{
  933. width: 100%;height: 312px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/government-change-bg.png");
  934. li{
  935. p{margin-left: 30px}
  936. }
  937. img{width:100px;display: inline-block;vertical-align: top;margin: 85px 25px 85px 30px;}
  938. }
  939. .change-content-left{
  940. display: inline-block;padding: 32px 0 0 64px;vertical-align: top;
  941. h5,li,li i{color: #fff;border-color: #fff;}
  942. p{color: rgba(255,255,255,0.65);}
  943. }
  944. .change-content-right{width: 525px;display: inline-block;padding-top: 64px;}
  945. }
  946. // 我们的优势
  947. .government-advantage-box{
  948. padding-bottom: 50px;
  949. h4{margin-bottom: 48px;}
  950. dl{width:33.33%;display: inline-block;margin-bottom: 30px;}
  951. dt{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px}
  952. dd{@include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-left: 33px;}
  953. 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;}
  954. .government-advantage-content{margin-right: -100px;padding: 4px 0 0 4px;}
  955. }
  956. @media (max-width: 768px) {
  957. // 我们的系统为您改变了什么
  958. .government-change-box{
  959. background: rgb(238, 238, 238);padding: 0 15px;
  960. .industrydetails-content{
  961. height: auto;margin-top: 20px;background-image:unset;position: relative;
  962. li{
  963. p{margin-left: 20px}
  964. }
  965. img{width:80px;display:block;margin: -60px auto;position: absolute;left: 50%;margin-left: -40px;}
  966. }
  967. .change-content-left,.change-content-right{
  968. width: 100%;box-sizing: border-box;margin-bottom: 20px;
  969. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  970. i{border-color: #fff;opacity: 1;}
  971. }
  972. .change-content-left{background-color: rgb(0, 102, 204);padding: 20px 16px;}
  973. .change-content-right{background-color: rgb(255, 186, 0);padding: 60px 16px 36px;}
  974. }
  975. }
  976. }
  977. /******** describe: 金融保险-详情页 author: TX date:2020-09-01 ********/
  978. .client-finance-page{
  979. // banner
  980. .industrydetails-banner{background-color: #593513;}
  981. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/finance-banner-img.png");}
  982. // 金融行业的问题
  983. .finance-question-box{
  984. background: #F9FAFF;
  985. padding: 80px 0;
  986. .finance-question-top{
  987. width: 946px;height: 104px;background-image: url("~static/images/client/industrydetails/finance-question-bg.png");margin: 0 auto 48px;
  988. h5{height: 104px;line-height:104px;display: inline-block;@include setFontStyle(10);color: rgba(255,255,255,0.85);padding: 0 56px}
  989. h5:first-child{margin-right: 180px;color: rgba(0,0,0,0.85);}
  990. }
  991. ul{
  992. 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;
  993. i{width: 12px;height: 12px;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;border:0;transform: rotate(0deg);opacity: 1;}
  994. p{margin-left: 30px;}
  995. }
  996. .finance-question-right{
  997. border: 1px solid #FF6226;
  998. i{background-image: linear-gradient(90deg, #FF6226 0%, #FFFFFF 100%);}
  999. }
  1000. }
  1001. @media (max-width: 768px) {
  1002. .finance-question-box{background-color: rgb(238, 238, 238);padding: 20px 15px 30px;}
  1003. .phone-class-box{
  1004. ul{
  1005. border: 0;width: 100%;margin: 0;padding: 20px 0 0;min-height: unset;
  1006. li{margin-bottom: 10px;}
  1007. i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;border: 1px solid #fff;opacity: 1;border-radius:0;
  1008. float: left;box-sizing: border-box;display: block;transform: rotate(45deg);background-image: unset;}
  1009. p{font-size: 14px;color: white;line-height: 24px;margin-left: 20px;text-align: justify;}
  1010. }
  1011. h4{color: #fff;}
  1012. img {width: 130px;display: block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
  1013. .financial-tradition-phone{background-color: rgb(0, 102, 204);margin: 0 0 20px;padding: 0 16px 20px;}
  1014. .financial-solve-phone{background-color: rgb(247, 109, 0);padding: 40px 16px 36px;}
  1015. }
  1016. }
  1017. }
  1018. /******** describe: 信息产业-详情页 author: TX date:2020-09-02 ********/
  1019. .client-information-page{
  1020. // banner
  1021. .industrydetails-banner{background-color: #070B20;}
  1022. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/information-banner-img.png");}
  1023. // 我们的系统为您改变了什么
  1024. .information-change-box{
  1025. background: #F9FAFF;
  1026. padding-bottom: 80px;
  1027. .industrydetails-content{
  1028. width: 100%;height: 300px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/information-change-bg.png");
  1029. li{
  1030. p{margin-left: 30px;}
  1031. }
  1032. img{display: inline-block;vertical-align: top;margin: 120px 30px auto 70px;}
  1033. }
  1034. .change-content-left{
  1035. display: inline-block;padding: 48px 0 0 64px;vertical-align: top;
  1036. h5,li,li i{color: #fff;border-color: #fff;}
  1037. p{color: rgba(255,255,255,0.65);}
  1038. }
  1039. .change-content-right{width: 500px;display: inline-block;padding-top: 36px;}
  1040. }
  1041. @media (max-width: 768px) {
  1042. // 我们的系统为您改变了什么
  1043. .information-change-box{
  1044. background-color: rgb(238, 238, 238);padding: 0 15px 15px;
  1045. .industrydetails-content{
  1046. height: auto;margin-top: 20px;background-image:unset;position: relative;
  1047. li{
  1048. p{margin-left: 20px}
  1049. }
  1050. img{width:130px;display:block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
  1051. }
  1052. .change-content-left,.change-content-right{
  1053. width: 100%;box-sizing: border-box;margin-bottom: 20px;
  1054. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  1055. i{border-color: #fff;opacity: 1;}
  1056. }
  1057. .change-content-left{background-color: rgb(14, 60, 106);padding: 20px 16px;}
  1058. .change-content-right{background-color: rgb(164, 3, 3);padding: 60px 16px 36px;}
  1059. }
  1060. }
  1061. }
  1062. /******** describe: 能源化工-详情页 author: TX date:2020-09-02 ********/
  1063. .client-energy-page{
  1064. // banner
  1065. .industrydetails-banner{background-color: #073A44;}
  1066. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/energy-banner-img.png");}
  1067. // 我们的系统为您改变了什么
  1068. .energy-change-box{
  1069. background: #F9FAFF;
  1070. padding-bottom: 80px;
  1071. // 模块上半部分
  1072. .change-box-top{
  1073. width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;
  1074. i{border: 1px solid #fff;}
  1075. }
  1076. // 模块下半部分
  1077. .change-box-bottom{
  1078. width: 1100px;height: 368px;padding: 24px;box-sizing: border-box;border-radius: 8px;background: #FE552C;margin-left: 100px;margin-top:-24px;position: relative;
  1079. h5{margin-top: 55px;}
  1080. li:nth-of-type(odd){p{margin-right: 60px}}
  1081. }
  1082. h5{color: rgba(255,255,255,0.85);}
  1083. li{
  1084. width: 50%;display: inline-block;@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;vertical-align: top;
  1085. p{margin-left: 30px;color: rgba(255,255,255,0.65);}
  1086. }
  1087. img{position: absolute;top: -70px;left: 50%;margin-left: -50px;}
  1088. }
  1089. @media (max-width: 768px) {
  1090. // 我们的系统为您改变了什么
  1091. .energy-change-box{
  1092. background-color: rgb(238, 238, 238);padding: 0 15px 15px;
  1093. // 模块上半部分
  1094. .change-box-top{width: 100%;height:auto;padding: 20px 16px;margin:20px 0 20px;border-radius:0;}
  1095. // 模块下半部分
  1096. .change-box-bottom{width: 100%;height:auto;padding: 60px 16px 36px;margin:0 0 20px;border-radius:0;background-color: rgb(255, 115, 5);}
  1097. .change-box-top,.change-box-bottom{
  1098. i{border: 1px solid #fff;opacity: 1;}
  1099. h5{margin-top: 20px;color: #fff;}
  1100. li:nth-of-type(odd){p{margin-right: 0}}
  1101. }
  1102. li{
  1103. width: 100%;display: block;
  1104. p{margin-left: 20px;color: #fff;}
  1105. }
  1106. }
  1107. }
  1108. }
  1109. /******** describe: 交通运输-详情页 author: TX date:2020-09-02 ********/
  1110. .client-traffic-page{
  1111. // banner
  1112. .industrydetails-banner{background-color: #0A2F41;}
  1113. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/traffic-banner-img.png");}
  1114. // 我们的系统为您改变了什么
  1115. .traffic-change-box{
  1116. background: #F9FAFF;
  1117. padding-bottom: 80px;
  1118. .change-content-left,.change-content-right{
  1119. width: 462px;height: 359px;display:inline-block;background-repeat: no-repeat;vertical-align: top;margin-top: 48px;
  1120. h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
  1121. ul{margin-top: 80px;margin-left: 32px;}
  1122. i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;margin-top: 5px;}
  1123. }
  1124. .change-content-left{background-image: url("~static/images/client/industrydetails/traffic-left-bg.png");margin-right: 104px;}
  1125. .change-content-right{background-image: url("~static/images/client/industrydetails/traffic-right-bg.png");}
  1126. }
  1127. @media (max-width: 768px) {
  1128. // 我们的系统为您改变了什么
  1129. .traffic-change-box{
  1130. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  1131. .change-content-left,.change-content-right{
  1132. width: 100%;height: unset;margin:0;box-sizing: border-box;
  1133. ul{margin: 0;}
  1134. h5{height: unset;line-height: unset;@include setFontStyle(-4);color: rgba(255, 255, 255, 1);margin-bottom: 16px;text-align: center;font-weight: 700;}
  1135. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  1136. i{width: 10px;height: 10px;border-color: #fff;opacity: 1;border-radius: 0;}
  1137. }
  1138. .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;background-image:unset;margin: 20px 0;}
  1139. .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;background-image:unset;}
  1140. }
  1141. }
  1142. }
  1143. /******** describe: 教育行业-详情页 author: TX date:2020-09-02 ********/
  1144. .client-education-page{
  1145. // banner
  1146. .industrydetails-banner{background-color: #085903;}
  1147. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/education-banner-img.png");}
  1148. // 我们的系统为您改变了什么
  1149. .education-change-box{
  1150. background: #F9FAFF;padding-bottom: 80px;
  1151. img{position: absolute;top: 50%;margin-top: -78px;left:50%;margin-left: -54px;}
  1152. .industrydetails-content{position: relative;}
  1153. .change-content-left,.change-content-right{height: 338px;box-sizing: border-box;}
  1154. .change-content-left{width: 637px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");}
  1155. .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;}
  1156. }
  1157. @media (max-width: 768px) {
  1158. .education-change-box{
  1159. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  1160. img{width:100px;margin: -105px auto;margin-left: -50px;}
  1161. .mt48{margin-top: 20px;}
  1162. .change-content-left,.change-content-right{
  1163. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  1164. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  1165. i{border-color: #fff;opacity: 1;}
  1166. }
  1167. .change-content-left{background-color: rgb(50, 159, 132);padding: 20px 16px 52px;}
  1168. .change-content-right{background-color: rgb(249, 163, 97);padding: 60px 16px 16px;}
  1169. }
  1170. }
  1171. }
  1172. /******** describe: 食品餐饮-详情页 author: TX date:2020-09-03 ********/
  1173. .client-restaurant-page{
  1174. // banner
  1175. .industrydetails-banner{background-color: #1C1E21;}
  1176. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/restaurant-banner-img.png");}
  1177. // 我们的系统为您改变了什么
  1178. .restaurant-change-box{
  1179. background: #F9FAFF;
  1180. padding-bottom: 80px;
  1181. .industrydetails-content{
  1182. position: relative;
  1183. img{position: absolute;top:50%;left: 50%;margin-top: -40px;margin-left: -45px;}
  1184. }
  1185. .change-content-left,.change-content-right{
  1186. width: 552px;height: 328px;display:inline-block;background-repeat: no-repeat;vertical-align: top;
  1187. h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
  1188. ul{margin-top: 32px;margin-left: 48px;}
  1189. }
  1190. .change-content-left{background-image: url("~static/images/client/industrydetails/restaurant-left-bg.png");margin-right: 90px;}
  1191. .change-content-right{background-image: url("~static/images/client/industrydetails/restaurant-right-bg.png");}
  1192. }
  1193. @media (max-width: 768px) {
  1194. // 我们的系统为您改变了什么
  1195. .restaurant-change-box{
  1196. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  1197. .mt48{margin-top: 20px;}
  1198. .industrydetails-content img{margin-top: -85px;}
  1199. .change-content-left,.change-content-right{
  1200. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  1201. ul{margin: 0;}
  1202. h5{height: unset;line-height: unset;color: #fff;}
  1203. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  1204. i{border-color: #fff;opacity: 1;}
  1205. }
  1206. .change-content-left{background-color: rgb(240, 112, 112);padding: 20px 16px;}
  1207. .change-content-right{background-color: rgb(255, 207, 78);padding: 60px 16px 16px;}
  1208. }
  1209. }
  1210. }
  1211. /******** describe: 医疗卫生-详情页 author: TX date:2020-09-03 ********/
  1212. .client-medical-page{
  1213. // banner
  1214. .industrydetails-banner{background-color: #2178E0;}
  1215. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/medical-banner-img.png");}
  1216. // 我们的系统为您改变了什么
  1217. .medical-change-box{
  1218. background: #F9FAFF;
  1219. padding-bottom: 80px;
  1220. .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
  1221. .change-content-left,.change-content-right{
  1222. width: 500px;display:inline-block;vertical-align: top;
  1223. ul{margin-left: 48px;}
  1224. h5{margin-top: 36px;color: rgba(255,255,255,0.85);}
  1225. p{color: rgba(255,255,255,0.65);}
  1226. i{border-color: #fff;}
  1227. }
  1228. .change-content-left{margin-right: 180px;}
  1229. }
  1230. @media (max-width: 768px) {
  1231. .medical-change-box{
  1232. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  1233. .industrydetails-content{width: 100%;height: unset;background-image:unset;}
  1234. .mt48{margin-top: 20px;}
  1235. .change-content-left,.change-content-right{
  1236. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  1237. ul{margin: 0;}
  1238. h5{height: unset;line-height: unset;color: #fff;margin-top: 0;}
  1239. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  1240. i{border-color: #fff;opacity: 1;}
  1241. }
  1242. .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;}
  1243. .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;}
  1244. }
  1245. }
  1246. }
  1247. /******** describe: 1-X-详情页 author: TX date:2020-09-03 ********/
  1248. .client-indexEducation-page{
  1249. padding-bottom: 80px;
  1250. .client-platform-new-banner{
  1251. .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #0a86fe;border: 1px solid #0a86fe;box-sizing: border-box;
  1252. position: absolute;top: 330px;left: 50%;margin-left: -150px;}
  1253. .client-default-white-Btn{background: transparent;border-color: #0a86fe;color:#fff;left: 50%;margin-left: 30px;}
  1254. }
  1255. @media (max-width: 768px){
  1256. padding-bottom: 15px;
  1257. .client-platform-new-banner{
  1258. .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;top: 105px;margin-left: -130px}
  1259. .client-default-white-Btn{left: 50%;margin-left: 10px;}
  1260. }
  1261. }
  1262. }
  1263. /******** describe: 课程资源 author: TX date:2020-09-03 ********/
  1264. .client-resources-page{
  1265. // 图标列表
  1266. .train-scheme-list{
  1267. margin: 54px -24px 0;
  1268. li{width: 25%;display: inline-block;text-align: center}
  1269. i{width: 100px;height: 100px;display: block;margin: 0 auto;}
  1270. span{@include setFontStyle(-4);color: #333;margin-top: 10px;display: block;}
  1271. div{box-shadow: 0 0 7px 2px #f5f2ff;margin: 24px;padding: 42px 0;}
  1272. li:nth-child(1) i{background-image: url("~static/images/client/resources/train-scheme-icon1.png")}
  1273. li:nth-child(2) i{background-image: url("~static/images/client/resources/train-scheme-icon2.png")}
  1274. li:nth-child(3) i{background-image: url("~static/images/client/resources/train-scheme-icon3.png")}
  1275. li:nth-child(4) i{background-image: url("~static/images/client/resources/train-scheme-icon4.png")}
  1276. li:nth-child(5) i{background-image: url("~static/images/client/resources/train-scheme-icon5.png")}
  1277. li:nth-child(6) i{background-image: url("~static/images/client/resources/train-scheme-icon6.png")}
  1278. li:nth-child(7) i{background-image: url("~static/images/client/resources/train-scheme-icon7.png")}
  1279. li:nth-child(8) i{background-image: url("~static/images/client/resources/train-scheme-icon8.png")}
  1280. }
  1281. // 为企业培训打造学习矩阵
  1282. .products-services-content p{line-height: 52px;}
  1283. // 蓝色提醒文字
  1284. .blue-big-size{
  1285. font-size: 26px;color: #3e7ce7;padding: 0 5px;
  1286. }
  1287. // 课程内容形式多样
  1288. .course-learn-box{
  1289. background: #f9faff;
  1290. // video列表
  1291. .learn-box-list{
  1292. margin: 54px -16px 0;
  1293. li{
  1294. width: 33.33%;display: inline-block;
  1295. a{display: none;}
  1296. div{background: #fff;border-radius: 8px;margin: 0 16px 40px;box-shadow: 0 0 7px 2px #f5f2ff;}
  1297. span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden;position: relative}
  1298. i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
  1299. left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
  1300. img{transition: all 0.5s;}
  1301. p{@include setFontStyle(-4);color: #3e7ce7;padding: 24px 16px 16px;text-align: left}
  1302. .course-explain-black{@include setFontStyle(-4);color: #333;line-height: 24px;padding: 0 16px 24px;}
  1303. }
  1304. li span:hover{img{transform: scale(1.1);}}
  1305. li i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
  1306. }
  1307. }
  1308. // banner背景色
  1309. .client-platform-banner{background-color: #03022e;}
  1310. // 新闻资讯
  1311. .platform-news-information{background: #fff;}
  1312. // 按钮
  1313. .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;}
  1314. .client-default-white-Btn{background: #fff;color:#3e7ce7;margin-right: 0 }
  1315. @media (max-width: 768px){
  1316. // 图标列表
  1317. .train-scheme-list{
  1318. margin: 12px 16px 36px;
  1319. li{
  1320. width: 50%;
  1321. i{width: 70px;height: 70px;background-size: cover;}
  1322. div{margin: 6px;padding: 24px 0;}
  1323. }
  1324. }
  1325. // 为企业培训打造学习矩阵
  1326. .products-services-content p{font-size: 14px;line-height: 40px;text-align: center;color: #101010;}
  1327. // 蓝色提醒文字
  1328. .blue-big-size{font-size: 18px;}
  1329. // 按钮box
  1330. .default-Btn-box{text-align: center}
  1331. // 视频列表
  1332. .course-learn-box{
  1333. margin:0;background-color: rgb(238, 238, 238);
  1334. .client-container {padding: 0 15px;}
  1335. .learn-box-list{
  1336. margin: 20px 0;
  1337. li {
  1338. width: 100%;
  1339. div{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;border-radius:0;margin: 0 16px;}
  1340. span {width: 100%;height: 180px;margin-top: 0;border-radius: 0;}
  1341. img {max-width: 100%;}
  1342. p {font-size: 14px;padding: 16px 0;text-align: center;}
  1343. .course-explain-black{font-size: 14px;text-align: left;padding: 0 16px 20px;}
  1344. }
  1345. }
  1346. }
  1347. // 按钮
  1348. .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;margin:0 8px 42px;}
  1349. }
  1350. }
  1351. /******** describe: 考试系统更新日志 author: TX date:2020-09-03 ********/
  1352. .client-checklog-page{
  1353. // banner
  1354. .client-checklog-banner{
  1355. width: 100%;height: 300px;background-color: rgb(0, 102, 204);text-align: center;
  1356. h4{font-size: 56px;color: rgba(255, 255, 255, 1);font-weight: bold;padding-top: 64px;}
  1357. p{font-size: 28px;color: rgb(255, 255, 255);padding-top: 24px;}
  1358. }
  1359. // 数据展示
  1360. .log-data-show{
  1361. height: 200px;
  1362. border-color: rgb(187, 187, 187);
  1363. border-width: 1px;
  1364. border-style: solid;
  1365. box-shadow: rgb(121, 188, 255) 0px 2px 6px 0px;
  1366. border-radius: 10px;
  1367. padding: 24px;
  1368. box-sizing: border-box;
  1369. display: flex;
  1370. justify-content: space-evenly;
  1371. margin-top: -64px;
  1372. background: #fff;
  1373. div{
  1374. display: inline-block;text-align: center;
  1375. span{font-size: 24px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 32px;display: inline-block;}
  1376. p{font-size: 54px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 10px;}
  1377. }
  1378. i{width: 1px;height: 150px;background: lightgray;display: inline-block;}
  1379. }
  1380. // 日志内容
  1381. .log-content-box{
  1382. margin: 52px auto 100px;color: rgb(16, 16, 16);
  1383. li{
  1384. color: rgb(16, 16, 16);border-bottom: 1px dashed #ccc;padding: 0 88px;
  1385. h5{font-size: 18px;margin: 14px 0;font-weight: bold;}
  1386. span{font-size: 18px;margin-bottom: 14px;display: block;font-weight: bold;}
  1387. div{margin-bottom: 14px;}
  1388. i{width: 12px;height: 1px;display: inline-block;background: #bbb;vertical-align: top;margin: 10px 6px 10px 0;}
  1389. p{width: 1000px;font-size: 16px;display: inline-block;vertical-align: middle;line-height: 24px;color: #000;text-align: justify}
  1390. }
  1391. li:last-child{border: 0;}
  1392. }
  1393. }
  1394. /******** describe: 体验中心 author: TX date:2021-06-09 ********/
  1395. .tiyan-center-page{
  1396. .tiyan-center-register{
  1397. background: #3776ff;text-align: center;padding: 52px 0;margin-top: 70px;
  1398. h5{font-size: 42px;color: #fff;margin: 24px 0;}
  1399. p{font-size: 32px;color: #fff;margin-bottom: 52px;}
  1400. span{font-size: 52px;color: #ffff00}
  1401. a{width: 355px;height: 60px;line-height: 60px;text-align: center;background: #ff4d4d;border-radius: 4px;display: inline-block;color: #fff;}
  1402. }
  1403. @media (max-width: 768px){
  1404. /* 网站banner */
  1405. .client-platform-banner div{background-position-x: 42%;}
  1406. .experience-swiper-box .swiper-pagination-style {width: 80px;margin-left: -30px;}
  1407. }
  1408. }
  1409. // 立即注册弹窗
  1410. .register-now-dialog{
  1411. .el-dialog{
  1412. width:540px;
  1413. // 关闭图标
  1414. .el-icon-close:before{color: #fff}
  1415. // 弹窗头部
  1416. .el-dialog__header{height: 100px;background: #363fdc;}
  1417. // 弹窗body
  1418. .el-dialog__body{
  1419. height:200px;position: relative;background: #fff;
  1420. .register-now-box{
  1421. position: absolute;top: -100px;left: 0;right: 0;
  1422. >p{font-size: 18px;color: #fff;text-align: center;line-height: 24px;margin-bottom: 8px}
  1423. >span{
  1424. margin-top: 36px;color: #666;font-size: 16px;display: block;text-align: center;
  1425. .tel-code{font-size: 30px;color:#1f68b4;font-weight: bold;}
  1426. }
  1427. }
  1428. }
  1429. .system-box{
  1430. 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;
  1431. a{
  1432. display: inline-block;
  1433. i{width: 158px;height: 120px;display: block;background-size: cover;}
  1434. }
  1435. span{width: 1px;min-height: 100px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;}
  1436. p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;}
  1437. }
  1438. .system-box:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} }
  1439. .system-box:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
  1440. }
  1441. }
  1442. // 系统维护弹窗
  1443. .system-maintain-dialog{
  1444. .el-dialog{width: 540px;height: 380px;background-image:url("~static/images/client/tiyanCenter/ty-dialog-bj.jpg");}
  1445. }
  1446. /******** describe: 课程开发解决方案 author: TX date:2021-08-06 ********/
  1447. .course-develop-page{
  1448. // 标题
  1449. .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;}
  1450. // form
  1451. .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;}
  1452. // 滑块px
  1453. .nc-container{
  1454. overflow: hidden;height: 52px;
  1455. .nc_wrapper{width:100%!important;margin-bottom: 22px;border-radius: 5px;overflow: hidden;}
  1456. .nc_scale{
  1457. height: 30px;
  1458. .scale_text{overflow: hidden;line-height: 30px;}
  1459. span{width:40px;height: 30px;line-height: 30px;border-radius: 5px;border: 1px solid rgb(187, 187, 187);box-sizing: border-box;overflow: hidden}
  1460. }
  1461. .btn_ok{margin-left: -1px;}
  1462. }
  1463. // 输入框-验证码
  1464. .course-develop-input-code{width: calc(100% - 122px);}
  1465. .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;}
  1466. // 公司名称
  1467. .dialog-input-company{
  1468. .el-form-item__content{display: grid;}
  1469. }
  1470. // 表单按钮
  1471. .form-blue-btn,.form-border-btn{
  1472. 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;
  1473. }
  1474. .form-blue-btn{background-color: rgb(0, 102, 204);border-color:rgb(0, 102, 204);}
  1475. .form-border-btn{display:block;border-color:rgb(0, 102, 204);color:rgb(0, 102, 204);margin-top: 20px; }
  1476. // 咨询电话
  1477. .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;}
  1478. // 产品
  1479. .dialog-input-company{text-align: center;padding: 0;}
  1480. }
  1481. /******** describe: 注册页面--手机 author: TX date:2021-08-06 ********/
  1482. .register-phone-page{
  1483. // 标题
  1484. .course-develop-title{font-size: 20px;}
  1485. // 咨询电话
  1486. .course-develop-tel{margin: 46px 0;}
  1487. }
  1488. /******** describe: 复制路径页面--手机 author: TX date:2021-08-06 ********/
  1489. .copy-url-page{
  1490. background: #fff;height: 100vh;
  1491. // 底部
  1492. .success-body-box{
  1493. img{max-width: 100%;padding: 30px;box-sizing: border-box;}
  1494. p{font-weight: 700;font-size: 20px;color: rgb(31, 104, 176);text-align: center;margin: 4px 0;}
  1495. 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;}
  1496. a{width: 122px;height: 36px;line-height:36px;background-color: rgb(234, 118, 27);color: rgb(255, 255, 255);
  1497. border-radius: 5px;font-size: 14px;display: block;margin: 0 auto;text-align: center}
  1498. }
  1499. }
  1500. /******** describe: 企业微课制作 author: TX date:2021-09-13 ********/
  1501. .client-makeCourse-page{
  1502. .client-platform-banner{
  1503. background-color: #22252A;
  1504. .free-trial-default-btn{background: #f76377}
  1505. }
  1506. // 按钮
  1507. .btn-big-box{width: 263px;margin: 50px auto 0;display: block;text-align: center;}
  1508. // 页面标题
  1509. .make-course-title {width: 100%;font-size: 24px;font-weight: normal;margin-bottom: 35px;padding-left: 10px;color: #333;text-align: center}
  1510. .course-blue-title{color: #3E7BE6;}
  1511. // 页面文字
  1512. .make-course-h2{
  1513. width: 100%;text-align: center;padding: 40px 0;border-bottom: 1px solid #CCC;
  1514. img{max-width: 100%;}
  1515. }
  1516. // 基本介绍
  1517. .makeCourse-introduce-box{
  1518. margin: 64px 0;
  1519. dl {
  1520. width: 580px;float: left;padding-top: 100px;padding-left: 20px;
  1521. h3{text-align: left}
  1522. dt {width: 100%;font-size: 18px;font-weight: normal;margin-bottom: 35px;color: #333;padding-left: 10px;}
  1523. }
  1524. }
  1525. .contrary-introduce-box{
  1526. margin-bottom: 88px;
  1527. dl {
  1528. width: 480px;float: right;padding-top: 0;height: 350px;
  1529. dt {margin-bottom: 20px;}
  1530. dd{margin-top: 35px;}
  1531. }
  1532. }
  1533. // 课程目标
  1534. .course-target-box{
  1535. background: #F8F8F8;padding: 42px 0;
  1536. li{
  1537. width: 20%;display: inline-block;
  1538. div{text-align: center;background: #fff;margin: 5px;padding: 24px 0;}
  1539. img{height: 100px;margin-bottom: 24px;}
  1540. span{text-align: center;font-size: 18px;color: #333;display: block}
  1541. }
  1542. }
  1543. // 培训讲师介绍
  1544. .px-teacher-box{
  1545. margin: 60px 0;
  1546. .teacher-content-box{display: flex;justify-content: space-between;align-items: center;}
  1547. span{display: block;font-size: 18px;color: #333;text-align: center;}
  1548. p{margin-left: 70px;line-height: 50px;}
  1549. .btn-big-box{margin-top: 32px;}
  1550. }
  1551. // 课程体系
  1552. .course-system-box{
  1553. padding: 32px 0;
  1554. .course-system-img{margin-bottom: 40px;max-width: 100%;}
  1555. img{max-width: 100%;}
  1556. }
  1557. // 微课设计
  1558. .course-learn-box{
  1559. padding: 64px 0;
  1560. .learn-box-list li div{margin: 0 16px 0;}
  1561. }
  1562. // 报名学习
  1563. .sign-study-box{
  1564. width: 100%;
  1565. .study-gj-box{width: 100%;height: 298px;background-image:url("~static/images/client/makeCourse/sign-study-bj.png");
  1566. margin-top: 20px;border-radius: 8px;bottom: -20px;position: relative;}
  1567. .sign-study-content{
  1568. position: absolute;bottom: 74px;font-size: 0;left: 76px;
  1569. .el-input{
  1570. width: 400px;font-size: 16px;
  1571. .el-input__inner{height: 64px;display: inline-block;border-radius: 0;font-size: 16px}
  1572. .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
  1573. font-size: 16px;
  1574. }
  1575. .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
  1576. font-size: 16px;
  1577. }
  1578. .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
  1579. font-size: 16px;
  1580. }
  1581. }
  1582. .el-button{width:150px;height:64px;display: inline-block;margin-left: -1px;font-size: 16px}
  1583. }
  1584. }
  1585. @media (max-width: 768px) {
  1586. // 按钮
  1587. .client-default-Btn{width: 120px;height: 35px;line-height: 35px;margin: 32px auto 0;}
  1588. // 页面标题
  1589. .make-course-title {font-size: 16px;margin-bottom: 16px;color: #3E7BE6;padding-left: 0;font-weight: bold;}
  1590. // 页面文字
  1591. .make-course-h2{
  1592. padding: 32px 0;
  1593. }
  1594. // 基本介绍
  1595. .makeCourse-introduce-box{
  1596. margin: 32px 0;
  1597. img{max-width: 100%;display: block;margin: 0 auto;}
  1598. dl {
  1599. width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;
  1600. h3{text-align: center;}
  1601. dt {font-size: 14px;margin-bottom: 16px;color: #555555;padding-left: 0;line-height: 24px}
  1602. }
  1603. }
  1604. .contrary-introduce-box{
  1605. dl {
  1606. width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;height: unset;
  1607. dt {margin-bottom: 4px;}
  1608. }
  1609. }
  1610. // 课程目标
  1611. .course-target-box{
  1612. background: #F8F8F8;padding: 16px 0 32px;
  1613. h3{font-size: 18px;color: #333;margin: 12px 0;text-align: center}
  1614. ul{text-align: center;}
  1615. li{
  1616. width: 33.33%;
  1617. div{margin: 6px;padding: 16px 0;}
  1618. img{height: 40px;margin-bottom: 10px;}
  1619. span{font-size: 16px;color: #333;}
  1620. }
  1621. .btn-big-box{margin-top: 50px;}
  1622. }
  1623. // 培训讲师介绍
  1624. .px-teacher-box{
  1625. margin: 32px 0;
  1626. .teacher-img-box{
  1627. width: 80px;padding: 0;box-sizing: border-box;flex-shrink: 0;
  1628. img{width: 80px;display: inline-block;vertical-align: middle;}
  1629. }
  1630. .teacher-content-box{display: flex;justify-content: space-between;}
  1631. span{font-size: 16px;margin: 10px 0;}
  1632. p{font-size: 14px;line-height: 24px;margin: 10px 12px;text-align: justify;}
  1633. .btn-big-box{margin-top: 32px;}
  1634. }
  1635. // 微课设计
  1636. .course-learn-box{
  1637. padding: 32px 0;
  1638. .client-container{padding: 0}
  1639. .learn-box-list li div{margin: 0}
  1640. }
  1641. // 报名学习
  1642. .sign-study-box{
  1643. background: #3776ff;
  1644. .client-container{padding: 0;}
  1645. .study-gj-box{height:180px;background-image:url("~static/images/client/makeCourse/sign-study-sjBj.png");background-size: contain;background-repeat: no-repeat;
  1646. bottom: 0;border-radius: 0;background-position: center;}
  1647. .sign-study-content{
  1648. bottom: 40px;left: 40px;right: 40px;
  1649. .el-input{
  1650. width: 68%;font-size: 14px;vertical-align: middle;
  1651. .el-input__inner{height: 38px;font-size: 14px}
  1652. .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
  1653. font-size: 14px;
  1654. }
  1655. .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
  1656. font-size: 14px;
  1657. }
  1658. .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
  1659. font-size: 14px;
  1660. }
  1661. }
  1662. .el-button{width:32%;height:38px;font-size: 14px;border-radius: 2px;vertical-align: middle; padding: 0;}
  1663. }
  1664. }
  1665. }
  1666. }
  1667. /**************** describe:城市合作商 author: TX date:2022-09-22 ****************/
  1668. .urban-partners-page{
  1669. // 标题
  1670. .urban-partners-title{
  1671. font-size: 36px;color: #3b3838;text-align: center;font-weight: 700;
  1672. }
  1673. // banner
  1674. .urban-partners-banner{
  1675. width:100%;height: 514px;background-position: center;position: relative;
  1676. background-image:url("~static/images/client/urbanPartners/urban-partners-banner-pc.png");
  1677. span{
  1678. width: 222px;height: 58px;line-height:58px;display: inline-block;font-size: 24px;
  1679. background: #f5f5f5;border-radius: 10px;color: #1d1ab2;position: absolute;left: 50%;
  1680. transform: translateX(-50%);bottom: 126px;text-align: center;cursor: pointer;
  1681. }
  1682. }
  1683. // 携手栋科软件
  1684. .xs-dk-box{
  1685. width: 100%;height: 386px;padding-top: 105px;box-sizing: border-box;
  1686. background-image:url("~static/images/client/urbanPartners/xs-dk-bj.png");
  1687. background-position: center;background-size: cover;
  1688. ul{display: flex;margin-top: 82px;justify-content: space-around;}
  1689. li{font-size: 22px;text-align: center;}
  1690. span{color: #0165CD;font-size: 36px;font-family: 'Din';padding: 0 4px;}
  1691. }
  1692. // 私有化部署
  1693. .syh-bs-box{
  1694. background: #F9F9F9;padding: 70px 0 114px;
  1695. // 布局
  1696. .syh-bs-card{
  1697. display: flex;
  1698. >div{width: 50%;}
  1699. >div +div{margin-left: 50px;}
  1700. }
  1701. // 头部
  1702. .syh-bs-head{
  1703. h4{font-size: 36px;font-weight: 700;color: #3b3838;text-align: center}
  1704. i{
  1705. width:313px;height:35px;display: block;margin: 12px auto;
  1706. background-image:url("~static/images/client/urbanPartners/tree-branch-icon.png");}
  1707. }
  1708. // 内容区域
  1709. .syh-bs-body{
  1710. display: flex;margin: 0 -25px;
  1711. li{width: 50%;}
  1712. div{height:352px;margin: 0 25px;background: #fff;border: 1px solid #d0d0d0;border-radius: 10px;}
  1713. i{width: 83px;height: 80px;display: block;margin: 56px auto 0;}
  1714. h5{font-size: 20px;font-weight: 700;color: #3b3838;text-align: center;margin: 36px 0 24px;}
  1715. p{width:82%;font-size: 18px;font-weight: 400;color: #3b3838;display: flex;
  1716. line-height: 28px;margin: 0 auto;text-align: justify;}
  1717. p:before{
  1718. content: '';width: 6px;height: 6px;background: #1d3ac3;border-radius: 50%;
  1719. flex-shrink: 0;margin: 10px 12px 0 0;
  1720. }
  1721. }
  1722. .syh-bs-left li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon1.png");}
  1723. .syh-bs-left li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon2.png");}
  1724. .syh-bs-right li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon3.png");}
  1725. .syh-bs-right li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon4.png");}
  1726. }
  1727. // 合作优势
  1728. .hz-ys-box{
  1729. background-color: #fff;padding: 94px 0 120px;font-size: 0;
  1730. h5{font-size: 24px;color: #3b3838;text-align: center;margin: 24px 0 75px;}
  1731. .hz-ys-card{
  1732. width: 48%;display: inline-block;border: 1px solid #2a63c6;padding: 35px 48px 35px 78px;
  1733. border-radius: 10px;box-sizing: border-box;
  1734. p{display: flex;font-size: 20px;font-weight: 500;margin-bottom: 32px;
  1735. color: #3b3838;line-height: 64px;}
  1736. p:last-child{margin-bottom: 0;}
  1737. i{width: 64px;height: 64px;display: block;margin-right: 44px;}
  1738. }
  1739. .hz-ys-card +.hz-ys-card{margin-left: 4%;}
  1740. .card-left p:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon1.png");}
  1741. .card-left p:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon3.png");}
  1742. .card-left p:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon5.png");}
  1743. .card-right p:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon2.png");}
  1744. .card-right p:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon4.png");}
  1745. .card-right p:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon6.png");}
  1746. }
  1747. // 合作条件
  1748. .hz-tj-box{
  1749. width: 100%;height: 651px;padding: 128px 0 124px;box-sizing: border-box;
  1750. background-image:url("~static/images/client/urbanPartners/hz-tj-bj.png");background-repeat: no-repeat;
  1751. background-position: center;
  1752. .hz-yj-body{
  1753. display: flex;margin: 100px -12px 0;
  1754. li{width: 25%;}
  1755. div{height: 267px;display: block;background: #fff;border-radius: 10px;margin: 0 12px;overflow: hidden;}
  1756. div:before{content: '';width:100%;height: 10px;display: block;
  1757. background: linear-gradient(89deg,#2739f6 0%, #5bbaf9 100%);}
  1758. p{
  1759. font-size: 26px;font-weight: 500;text-align: center;color: #2a63c6;margin-top: 70px;
  1760. }
  1761. span{
  1762. font-size: 18px;font-weight: 400;text-align: center;color: #3b3838;line-height: 30px;
  1763. margin-top: 30px;display: block;
  1764. }
  1765. }
  1766. }
  1767. // 合作商申请流程
  1768. .sq-lc-box{
  1769. padding: 90px 0 44px;
  1770. // 内容区域
  1771. .sq-lc-body{
  1772. display: flex;justify-content: space-between;margin-top: 83px;border-bottom: 1px dashed #d0d0d0;padding-bottom: 24px;
  1773. i{width: 91px;height: 91px;display: block;margin-bottom: 18px;}
  1774. span{
  1775. font-size: 22px;font-weight: 400;text-align: center;color: #3b3838;
  1776. }
  1777. li{position: relative}
  1778. li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon1.png");}
  1779. li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon2.png");}
  1780. li:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon3.png");}
  1781. li:nth-child(4) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon4.png");}
  1782. li:nth-child(5) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon5.png");}
  1783. li:nth-child(6) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon6.png");}
  1784. li:after{
  1785. content: '';width: 8px;height: 8px;background: #898989;display: block;border-radius: 50%;
  1786. position: absolute;bottom: -28px;left: 50%;transform: translateX(-50%);
  1787. }
  1788. }
  1789. // 二维码区域
  1790. .two-code-box{
  1791. i{width: 115px;height: 115px;display: block;margin: 60px auto 20px;
  1792. background-image:url("~static/images/client/urbanPartners/zs-qd-code.png");}
  1793. p{
  1794. font-size: 20px;font-weight: 400;text-align: center;color: #3b3838;
  1795. }
  1796. a{
  1797. width: 205px;height: 52px;line-height:52px;background: #2a63c6;border-radius: 6px;cursor: pointer;
  1798. font-size: 24px;font-weight: 400;text-align: center;color: #e6e8ef;display: block;margin: 20px auto;
  1799. }
  1800. }
  1801. }
  1802. // 优秀合作伙伴真实评价
  1803. .zs-pj-box{
  1804. background-color: #F9F9F9;padding: 100px 0 70px;
  1805. ul{display: flex;margin: 70px 0 0;justify-content: space-between;}
  1806. li{
  1807. width: 366px;height:420px;border-radius: 4px;background-color: #fff;overflow: hidden;
  1808. i{width:367px;height:196px;display: block;}
  1809. h5{
  1810. font-size: 20px;font-weight: 700;text-align: justify;
  1811. color: #3b3838;line-height: 24px;margin: 30px 24px 0;
  1812. }
  1813. p{
  1814. font-size: 16px;font-weight: 400;text-align: justify;
  1815. color: #3b3838;line-height: 24px;margin: 16px 24px 0;
  1816. }
  1817. }
  1818. li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/zs-pj-img1.jpg");}
  1819. li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/zs-pj-img2.jpg");}
  1820. li:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/zs-pj-img3.jpg");}
  1821. }
  1822. // 申请城市合作商
  1823. .sqcs-hzs-box{
  1824. width: 100%;height: 303px;padding: 77px 0 50px;box-sizing: border-box;
  1825. background-image:url("~static/images/client/urbanPartners/zs-sq-bj-pc.png");
  1826. h4,h5{font-size: 36px;font-weight: 400;text-align: center;color: #ffffff;}
  1827. h5{font-weight: 700;margin-top: 20px;}
  1828. a{
  1829. width: 208px;height: 54px;background: #ffffff;display: block;
  1830. line-height:54px;border-radius: 6px;font-size: 24px;font-weight: 400;
  1831. text-align: center;color: #2a63c6;margin: 28px auto 0;}
  1832. }
  1833. // 申请城市合作商弹窗
  1834. .apply-collaborate-dialog{
  1835. .el-dialog{width: 480px;border-radius: 8px;}
  1836. .el-dialog__header{display: none;}
  1837. .el-dialog__body{padding:0 48px 38px;}
  1838. // 弹窗标题
  1839. h4{
  1840. font-size: 28px;font-weight: 700;color: #2a63c6;
  1841. padding: 36px 0 40px;text-align: center;
  1842. }
  1843. // 按钮
  1844. .dialog-btn-box{display: flex;justify-content: center;margin-top: 18px;}
  1845. .apply-dialog-btn{
  1846. width: 120px;height: 48px;cursor: pointer;font-weight: 400;
  1847. line-height: 48px;background: #0165CD;border-radius: 6px;
  1848. font-size: 18px;color: #fff;text-align: center;
  1849. }
  1850. .apply-dialog-btn + .apply-dialog-btn{margin-left: 20px}
  1851. .dialog-cancel-btn{
  1852. border: 1px solid #2a63c6;background: #fff;color: #2a63c6;
  1853. }
  1854. .el-input__prefix .el-input__icon{width: 16px;height: 16px;display: block;background-size: cover;margin: 12px 4px;}
  1855. .dialog-user-icon{background-image:url("~static/images/client/urbanPartners/dialog-user-icon.png");}
  1856. .dialog-tel-icon{background-image:url("~static/images/client/urbanPartners/dialog-tel-icon.png");}
  1857. .dialog-company-icon{background-image:url("~static/images/client/urbanPartners/dialog-company-icon.png");}
  1858. .dialog-region-icon{background-image:url("~static/images/client/urbanPartners/dialog-region-icon.png");}
  1859. .dialog-email-icon{background-image:url("~static/images/client/urbanPartners/dialog-email-icon.png");}
  1860. }
  1861. @media (max-width: 768px){
  1862. // 标题
  1863. .urban-partners-title{
  1864. font-size: 18px;line-height: 26px;
  1865. }
  1866. // banner
  1867. .urban-partners-banner{
  1868. width: 100%;height: 222px;background-size: cover;
  1869. background-image:url("~static/images/client/urbanPartners/urban-partners-banner-sj.png");
  1870. span{
  1871. width: 120px;height: 28px;line-height:28px;font-size:14px;border-radius: 4px;bottom: 16px;
  1872. }
  1873. }
  1874. // 携手栋科软件
  1875. .xs-dk-box{
  1876. height: 218px;padding-top: 25px;
  1877. ul{justify-content: center;flex-wrap: wrap;margin-top: 36px;}
  1878. li{width: 50%;font-size: 12px;font-weight: 600;margin-bottom: 22px;}
  1879. span{font-size: 18px;padding: 0 2px;font-weight: normal;}
  1880. }
  1881. // 私有化部署
  1882. .syh-bs-box{
  1883. padding: 26px 0;
  1884. // 布局
  1885. .syh-bs-card{
  1886. display: flex;flex-wrap: wrap;
  1887. >div{width: 100%;}
  1888. >div +div{margin-left: unset;}
  1889. }
  1890. // 头部
  1891. .syh-bs-head{
  1892. flex-wrap: wrap;
  1893. div{width: 100%;}
  1894. h4{font-size: 18px;}
  1895. i{
  1896. width:156px;height:17px;margin: 8px auto 6px;background-size: contain;
  1897. background-repeat: no-repeat;background-position: center;
  1898. }
  1899. }
  1900. // 内容区域
  1901. .syh-bs-body{
  1902. display: flex;margin: 0 0 42px;
  1903. li{width: 50%;}
  1904. div{height: 110%;margin: 0 6%;}
  1905. i{width: 38px;height: 36px;margin: 30px auto 0;background-size: contain;
  1906. background-repeat: no-repeat;background-position: center;}
  1907. h5{font-size: 12px;margin: 20px 0 12px;}
  1908. p{width:90%;font-size: 12px;line-height: 20px;}
  1909. p:before{
  1910. content: '';width: 3px;height: 3px;margin: 10px 6px 0 0;
  1911. }
  1912. }
  1913. }
  1914. // 合作优势
  1915. .hz-ys-box{
  1916. padding: 36px 0 24px;
  1917. h5{font-size: 12px;margin: 12px 0 38px;}
  1918. .hz-ys-card{
  1919. width: 90%;display: block;padding: 18px 18px 18px 24px;margin: 0 auto 18px;
  1920. p{font-size: 12px;margin-bottom: 16px;
  1921. color: #3b3838;line-height: 32px;}
  1922. i{width: 32px;height: 32px;margin-right: 14px;background-size: contain;
  1923. background-repeat: no-repeat;background-position: center;}
  1924. }
  1925. .hz-ys-card +.hz-ys-card{margin-left:unset;}
  1926. .card-right{margin: 0 auto!important;}
  1927. }
  1928. // 合作条件
  1929. .hz-tj-box{
  1930. height: 391px;padding: 34px 0 30px;background-size: cover;
  1931. .hz-yj-body{
  1932. display: flex;margin: 20px 0 0;flex-wrap: wrap;
  1933. li{width: 50%;margin-bottom: 23px;}
  1934. div{height: 134px;margin: 0 6px;}
  1935. div:before{height: 5px;}
  1936. p{font-size: 14px;margin-top: 24px;}
  1937. span{
  1938. font-size: 12px;line-height: 18px;margin-top: 20px;
  1939. }
  1940. }
  1941. }
  1942. // 合作商申请流程
  1943. .sq-lc-box {
  1944. padding: 32px 0 34px;
  1945. // 二维码区域
  1946. .two-code-box {
  1947. i {width: 60px;height: 60px;margin: 0 auto 10px;background-size: cover;}
  1948. p {font-size: 10px;}
  1949. a {
  1950. width: 102px;height: 26px;line-height: 26px;
  1951. border-radius: 4px;font-size: 12px;margin: 10px auto;
  1952. }
  1953. }
  1954. // 图片展示
  1955. .sq-lc-body-img{
  1956. width: 100%;height: 222px;background-size: contain;margin-top: 16px;
  1957. background-repeat: no-repeat;background-position: center;
  1958. background-image:url("~static/images/client/urbanPartners/sqlc-body-img.png");
  1959. }
  1960. }
  1961. // 优秀合作伙伴真实评价
  1962. .zs-pj-box{
  1963. padding: 38px 0 34px;
  1964. ul{margin: 27px 0 0;justify-content: center;flex-wrap: wrap;}
  1965. li{
  1966. width: 48%;height:auto;background-size: cover;margin-bottom: 32px;border-radius: 2px;
  1967. i{width: 100%;height: 100px;background-size: cover;flex-shrink: 0;}
  1968. h5{
  1969. font-size: 12px;line-height: 12px;margin: 14px 10px 0;
  1970. }
  1971. p{
  1972. font-size: 11px;line-height: 18px;margin: 8px 10px 10px;
  1973. }
  1974. }
  1975. li + li{margin-left: 4%;}
  1976. }
  1977. // 申请城市合作商
  1978. .sqcs-hzs-box{
  1979. width: 100%;height: 150px;padding: 36px 0 24px;background-repeat: no-repeat;
  1980. background-size: cover;background-position: center;
  1981. background-image:url("~static/images/client/urbanPartners/zs-sq-bj-sj.png");
  1982. h4,h5{font-size: 18px;}
  1983. h5{margin-top: 10px;}
  1984. a{
  1985. width: 104px;height: 27px;line-height:27px;border-radius: 3px;
  1986. font-size: 12px;margin: 14px auto 0;}
  1987. }
  1988. // 弹窗
  1989. .apply-collaborate-dialog{
  1990. .el-dialog{width: 90%;}
  1991. .el-dialog__body{padding:0 20px 24px;}
  1992. // 弹窗标题
  1993. h4{font-size: 20px;padding: 20px 0;}
  1994. // 按钮
  1995. .apply-dialog-btn{
  1996. width: 100px;height: 36px;line-height: 36px;font-size: 14px;
  1997. }
  1998. }
  1999. }
  2000. }
  2001. /**************** describe:课程开发平台运营 author: TX date:2022-12-28 ****************/
  2002. .client-course-platform-page{
  2003. // 产品功能
  2004. .course-product-function{
  2005. background: #f3f8fe;
  2006. .course-product-box{
  2007. display: flex;flex-wrap: wrap;align-items: center;justify-content: center;padding: 80px 0;
  2008. li{width: 50%;}
  2009. h5{font-size: 24px;color: #fff;margin-bottom: 20px;}
  2010. p{width:380px;font-size: 16px;color: #fff;line-height: 24px;text-align: justify;}
  2011. div{width: 565px;height: 168px;padding: 24px 40px;box-sizing: border-box;margin: 20px auto;
  2012. background-repeat: no-repeat;background-position: center;background-size: cover;}
  2013. li:nth-child(1) div{background-image: url("~static/images/client/component/product-function-bj1.png");}
  2014. li:nth-child(2) div{background-image: url("~static/images/client/component/product-function-bj2.png");}
  2015. li:nth-child(3) div{background-image: url("~static/images/client/component/product-function-bj3.png");}
  2016. li:nth-child(4) div{background-image: url("~static/images/client/component/product-function-bj4.png");}
  2017. li:nth-child(5) div{background-image: url("~static/images/client/component/product-function-bj5.png");}
  2018. li:nth-child(6) div{background-image: url("~static/images/client/component/product-function-bj6.png");}
  2019. }
  2020. }
  2021. // 应用场景
  2022. .application-scenario-box{
  2023. .application-scenario-list{
  2024. display: flex;justify-content: space-between;margin: 90px 0;
  2025. li{width: 345px;height: 358px;position: relative}
  2026. li:nth-child(1){background-image: url("~static/images/client/course/course-platform-img5.png");}
  2027. li:nth-child(2){background-image: url("~static/images/client/course/course-platform-img6.png");}
  2028. li:nth-child(3){background-image: url("~static/images/client/course/course-platform-img7.png");}
  2029. p{width:80%;font-size: 16px;font-weight: 400;text-align: justify;color: #565656;
  2030. margin: 170px auto 0;line-height: 26px;}
  2031. h4{font-size: 24px;font-weight: 400;color: #fff;position: absolute;bottom: 20px;
  2032. left: 0;right: 0;}
  2033. }
  2034. }
  2035. @media (max-width: 768px){
  2036. // 产品功能
  2037. .course-product-function {
  2038. .course-product-box {
  2039. padding: 42px 0;
  2040. li {width: 100%;}
  2041. h5{font-size: 14px;margin-bottom: 6px;}
  2042. p{width:85%;font-size: 10px;line-height: 16px;}
  2043. div {width: 283px;height: 84px;margin: 10px auto;padding: 8px 16px;}
  2044. }
  2045. }
  2046. // 应用场景
  2047. .application-scenario-box{
  2048. .application-scenario-list{
  2049. flex-wrap: wrap;justify-content: center;margin: 16px 0;
  2050. li{width: 283px;height: 294px;background-position: center;background-repeat: no-repeat;
  2051. background-size: contain;margin: 16px 6px;}
  2052. p{width:86%;font-size: 12px;margin: 120px auto 0;line-height: 22px;}
  2053. h4{font-size: 14px;bottom: 20px;}
  2054. }
  2055. }
  2056. }
  2057. }
  2058. /**************** describe:课程开发梗概 author: TX date:2022-12-29 ****************/
  2059. .website-course-synopsis-page{
  2060. /*发展历程*/
  2061. .synopsis-company-history{
  2062. background:#f8f8f8;
  2063. li{
  2064. width: 25%;display: inline-block;text-align: center;
  2065. div{border-right:2px solid #dfdfdf;margin: 32px 0;}
  2066. p{@include setFontStyle(16);padding: 10px 0 16px;color: #0166CB;font-weight: 600;}
  2067. h4{@include setFontStyle(-4);color: #565656;padding-bottom: 10px}
  2068. }
  2069. li:last-child div{border-right: 0;}
  2070. }
  2071. /* 核心业务 */
  2072. .course-services-box{
  2073. .course-services-content p{width: 80%;}
  2074. }
  2075. @media (max-width: 768px){
  2076. /*发展历程*/
  2077. .synopsis-company-history {
  2078. ul{
  2079. display: flex;
  2080. justify-content: space-between;
  2081. align-content: center;
  2082. align-items: center;
  2083. }
  2084. li {
  2085. width: 49%;padding-bottom: 14px;
  2086. div{border: 0;padding: 24px 0 0;margin: 0;}
  2087. p{@include setFontStyle(5);padding: 10px 0;}
  2088. h4{@include setFontStyle(-8);}
  2089. }
  2090. i{width: 1px;height:160px;background-color: #dfdfdf;padding-bottom: 0;}
  2091. }
  2092. /* 核心业务 */
  2093. .course-services-box{
  2094. .course-services-content p{width: 100%;}
  2095. h5{width: 100%;text-align: center;color: #333;font-weight: 400;}
  2096. }
  2097. }
  2098. }
  2099. /**************** describe:课程开发课程大赛 author: TX date:2022-12-29 ****************/
  2100. .website-course-compete-page{
  2101. padding-bottom: 94px;
  2102. // 默认大标题
  2103. .client-subtitle-title{width: 900px;margin-top: 40px;}
  2104. // 新大标题
  2105. .course-compete-title{
  2106. text-align: center;position: relative;height: 102px;line-height: 102px;
  2107. em{font-size: 124px;font-weight: 600;color: #0077ff;opacity: 0.18;position: absolute;transform: translate(5%);}
  2108. span{font-size: 36px;font-weight: 400;color: #333;}
  2109. }
  2110. // 新副标题
  2111. .course-compete-subtitle-title{
  2112. font-size: 24px;font-weight: 400;text-align: center;color: #0066cc;display: flex;
  2113. justify-content: center;align-items: center;margin-top: 55px;
  2114. i{width: 10px;height: 1px;margin: 0 8px;display: block;background: #0066cc;}
  2115. }
  2116. // 按钮
  2117. .course-compete-btn{width: 138px;height: 50px;line-height:50px;background: #0065cd;border-radius: 6px;display: block;
  2118. font-size: 16px;font-weight: 400;color: #ffffff;text-align: center;margin: 0 auto;}
  2119. // 蓝色背景
  2120. .compete-blue-bj{background: #f3f8fe;}
  2121. // 栋科提供的服务
  2122. .dk-service-box{
  2123. padding-bottom: 94px;
  2124. ul{display: flex;justify-content: space-between;margin: 120px 0;}
  2125. li{width: 283px;height: 227px;background-size: cover;background-repeat: no-repeat;background-position: center;}
  2126. li:nth-child(1) {background-image: url("~static/images/client/course/course-compete-dk1.png");}
  2127. li:nth-child(2) {background-image: url("~static/images/client/course/course-compete-dk2.png");}
  2128. li:nth-child(3) {background-image: url("~static/images/client/course/course-compete-dk3.png");}
  2129. li:nth-child(4) {background-image: url("~static/images/client/course/course-compete-dk4.png");}
  2130. p{font-size: 24px;color: #fff;font-weight: normal;margin: 155px 0 0;}
  2131. }
  2132. // 知识萃取
  2133. .compete-introduce-box{
  2134. padding: 100px 0;
  2135. img{max-width: 100%;margin: 80px auto 90px;display: block;}
  2136. }
  2137. // 微课培训
  2138. .compete-introduce-list{
  2139. display: flex;justify-content: space-between;margin: 46px 0 80px;
  2140. li{width: 204px;height: 237px;background-repeat: no-repeat;background-size: cover;padding: 0 30px;box-sizing: border-box;}
  2141. p{font-size: 18px;text-align: center;color: #0066cc;margin-top: 122px}
  2142. li:nth-child(1) {background-image: url("~static/images/client/course/compete-wkpx-img1.png");}
  2143. li:nth-child(2) {background-image: url("~static/images/client/course/compete-wkpx-img2.png");}
  2144. li:nth-child(3) {background-image: url("~static/images/client/course/compete-wkpx-img3.png");}
  2145. li:nth-child(4) {background-image: url("~static/images/client/course/compete-wkpx-img4.png");}
  2146. li:nth-child(5) {background-image: url("~static/images/client/course/compete-wkpx-img5.png");}
  2147. }
  2148. @media (max-width: 768px){
  2149. padding: 24px 0;
  2150. // 默认大标题
  2151. .client-subtitle-title{width: 90%;margin-top: 20px;text-align: center;}
  2152. // 新大标题
  2153. .course-compete-title{
  2154. height: 51px;line-height: 51px;
  2155. em{font-size: 62px;transform: translate(5%);}
  2156. span{font-size: 18px;}
  2157. }
  2158. // 新副标题
  2159. .course-compete-subtitle-title{
  2160. font-size: 15px;margin-top: 32px;
  2161. i{width: 5px;height: 1px;margin: 0 4px;}
  2162. }
  2163. // 按钮
  2164. .course-compete-btn{width: 90px;height: 30px;line-height:30px;font-size: 12px;border-radius: 4px;}
  2165. // 栋科提供的服务
  2166. .dk-service-box{
  2167. padding: 16px 0 24px;
  2168. ul{justify-content: center;flex-wrap: wrap;margin: 32px 0;}
  2169. li{width: 141px;height: 113px;margin: 10px;}
  2170. p{font-size: 12px;margin: 78px 0 0;}
  2171. }
  2172. // 知识萃取
  2173. .compete-introduce-box{
  2174. padding: 50px 0;
  2175. img{margin: 42px auto;}
  2176. }
  2177. // 微课培训
  2178. .compete-introduce-list{
  2179. margin: 46px 0 80px;flex-wrap: wrap;justify-content: center;margin: 16px -6px;
  2180. li{width: 106px;height: 120px;padding: 0 10px;margin:16px 6px;background-size: contain}
  2181. p{font-size: 11px;margin-top: 62px}
  2182. li:nth-child(1) {background-image: url("~static/images/client/course/compete-wkpx-img1.png");}
  2183. li:nth-child(2) {background-image: url("~static/images/client/course/compete-wkpx-img2.png");}
  2184. li:nth-child(3) {background-image: url("~static/images/client/course/compete-wkpx-img3.png");}
  2185. li:nth-child(4) {background-image: url("~static/images/client/course/compete-wkpx-img4.png");}
  2186. li:nth-child(5) {background-image: url("~static/images/client/course/compete-wkpx-img5.png");}
  2187. }
  2188. }
  2189. }
  2190. }