cus-client-page.scss 72 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759
  1. @import "../base/utils";
  2. @import "cus-client-common";
  3. @mixin setClientPage() {
  4. /******** describe: 网站首页 author: TX date:2026-01-04 ********/
  5. .client-index-page{
  6. width: 100%;
  7. /* 网站banner */
  8. .client-index-banner{
  9. width: 100%;height: 520px;background-color:#fff;background-position: center;background-repeat: no-repeat;
  10. }
  11. /* banner-box */
  12. .client-banner-box{
  13. .el-carousel__container{height: 520px;cursor: pointer;}
  14. .el-carousel__item{
  15. .index-carousel-box{width:100%;height: 520px;display: block;background-position: center;background-repeat: no-repeat;background-color: #fff;}
  16. }
  17. }
  18. // img list
  19. .products-services-box img{width: 620px}
  20. /* 合作客户 */
  21. .client-customer-box{
  22. .customer-img-box{
  23. padding-bottom: 80px;
  24. li{width: 30%;margin: 32px 5% 0 0;display: inline-block;}
  25. li:nth-child(3n){margin-right: 0}
  26. img{transition: all 0.5s;width: 100%;}
  27. li:hover{
  28. img{transform: scale(1.04);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
  29. }
  30. }
  31. }
  32. /* 合作伙伴 */
  33. .hzhb-ul-box{
  34. display: flex;flex-wrap: wrap;justify-content: center;gap: 36px;margin-top: 36px;
  35. li{display: inline-block;font-size: 14px;padding: 4px 20px;color: #84888b;
  36. border: 1px solid #eee;border-radius: 20px;margin-right: 56px}
  37. }
  38. /* 新闻资讯 */
  39. .client-news-information {
  40. background: #f9fdfc;padding-bottom: 80px;
  41. .industry-information-box {
  42. margin-top: 48px;
  43. h4{color: #333;}
  44. h4:hover {cursor: pointer;color: #328971;}
  45. // 左
  46. .industry-information-left {
  47. width: 480px;margin-right: 80px;display: inline-block;vertical-align: top;color: #333;
  48. div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
  49. img {width: 480px;margin-bottom: 10px;}
  50. h4 {@include setFontStyle(-2);margin-bottom: 16px;line-height: 1.6;@include single-line-ellipsis;}
  51. p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
  52. b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
  53. span {@include setFontStyle(-6);display: block;color: #666;}
  54. }
  55. // 右
  56. .industry-information-right {
  57. width: 630px;
  58. display: inline-block;
  59. vertical-align: top;
  60. li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
  61. li:last-child {border: 0;}
  62. h4 {@include setFontStyle(-4);@include single-line-ellipsis;margin-bottom: 12px;}
  63. p {@include setFontStyle(-6);color: #666;margin-bottom: 16px;line-height: 1;
  64. display: flex;align-items: center;@include single-line-ellipsis;}
  65. span {margin: 0 30px 0 10px;}
  66. .content-text{
  67. margin: 0;display: contents;
  68. p{margin: 0;padding: 0;display: inline-block;}
  69. }
  70. }
  71. }
  72. }
  73. }
  74. /******** describe: 产品与服务 author: TX date:2026-01-04 ********/
  75. .client-cpyfw-page{
  76. .cpty-box {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 32px 0 46px;cursor: pointer;}
  77. // 产品体验
  78. .cpty-card-box {
  79. width: 300px;text-align: center;background-color: white;border-radius: 12px;
  80. padding: 25px 25px 52px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  81. transition: transform 0.3s ease, box-shadow 0.2s ease;
  82. img{width: 180px;height: 180px}
  83. .title {font-size: 24px;color: #333;margin-bottom: 10px;position: relative;margin-top: 16px;}
  84. .title::after {
  85. content: '';position: absolute;bottom: -10px;left: 50%;
  86. transform: translateX(-50%);width: 60px;height: 3px;background-color: #21a38d;
  87. }
  88. .desc {font-size: 14px;color: #666;line-height: 1;margin-top: 24px;}
  89. }
  90. .cpty-card-box:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}
  91. // 功能强大的家政管理系统
  92. .jzgl-box{
  93. width: 100%;height: 360px;background-position: center;background-size: cover;background-repeat: no-repeat;
  94. padding: 46px 0 36px;
  95. .jzgl-box-text{
  96. width: 1000px;margin: 0 auto;
  97. color: #333;font-size: 20px;line-height: 2;text-align: center;margin-top: 46px;
  98. }
  99. }
  100. // img list
  101. .cpyfw-products-services{
  102. img{width: 580px}
  103. .products-services-content h5{margin-bottom: 36px;}
  104. }
  105. // 家政人员
  106. .cpyfw-jzry-box{
  107. width: 100%;height: 560px;background-position: center;background-size: cover;background-repeat: no-repeat;
  108. .jzry-content-box{position: relative;box-sizing: border-box;padding-top: 260px;}
  109. .jzry-card{
  110. width: 332px;box-sizing: border-box;
  111. position: absolute;display: flex;align-items: center;background: #fff;border-radius: 12px;
  112. box-shadow: 0 4px 12px rgba(0,0,0,0.05);padding: 12px 16px;
  113. img{width: 60px;margin-right: 16px;}
  114. .card-title{font-size: 18px;margin-bottom: 6px;font-weight: bolder;}
  115. .card-desc{font-size: 16px;}
  116. }
  117. .jzry-card:nth-child(1){left: 0}
  118. .jzry-card:nth-child(2){top: 120px;left: 50%;transform: translateX(-50%);}
  119. .jzry-card:nth-child(3){right: 0}
  120. .jzry-img{width: 300px;margin: 0 auto;display: block;}
  121. }
  122. }
  123. /******** describe: 新闻中心 author: TX date:2026-01-05 ********/
  124. .client-newsInfor-page{
  125. // 页面主要内容区域
  126. .newsInfor-content-box{
  127. min-height: 304px;
  128. padding: 48px 0 80px;
  129. ul{display: inline-block;vertical-align: top}
  130. // 右侧内容区域
  131. .newsInfor-content-ul{
  132. li{margin-bottom: 32px;cursor: pointer;border-bottom: 1px solid #f5f5f5;padding-bottom: 32px}
  133. li:last-child{margin-bottom: 0;}
  134. //图片
  135. .newsInfor-img-box{width:318px;height:178px;display: inline-block;margin-right: 32px;border-radius: 4px;overflow: hidden;vertical-align: top;background-repeat: no-repeat;background-size: cover;background-position: center;}
  136. //内容区域
  137. .newsInfor-list-content{
  138. width: calc(100% - 350px);
  139. display: inline-block;
  140. vertical-align: top;
  141. h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 12px;@include single-line-ellipsis;color: #25ac83;}
  142. div{
  143. margin-bottom: 8px;
  144. i{
  145. width: 14px;height: 14px;display: inline-block;margin-right: 8px;background-size: cover;
  146. vertical-align: middle;background-image: url("~static/images/website/common/data-icon.svg");}
  147. span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
  148. }
  149. p{height: 72px;@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 1.8;margin-bottom: 32px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;}
  150. a{@include setFontStyle(-6);color: #25ac83;}
  151. a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~static/images/website/common/jt-icon.svg");margin-left: 8px;}
  152. a:hover{cursor: pointer;}
  153. }
  154. }
  155. }
  156. }
  157. /******** describe: 培训平台--图片(和考试默认图片不同) author: TX date:2020-08-14 ********/
  158. .client-train-page{
  159. /* 产品体验*/
  160. .platform-products-experience{
  161. .experience-ul-box li{
  162. em{background-image:url("~static/images/client/train/train-code-img.png")}
  163. }
  164. }
  165. /* 网站banner */
  166. .client-platform-banner{
  167. background-color:#fff;
  168. }
  169. /* 产品功能 */
  170. .platform-product-function{
  171. // ul
  172. .product-function-box{
  173. li:nth-child(1){i{background-image:url("~static/images/client/train/product-function-icon1.png");}}
  174. li:nth-child(2){i{background-image:url("~static/images/client/train/product-function-icon2.png");}}
  175. li:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon3.png");}}
  176. li:nth-child(4){i{background-image:url("~static/images/client/train/product-function-icon4.png");}}
  177. li:nth-child(5){i{background-image:url("~static/images/client/train/product-function-icon5.png");}}
  178. li:nth-child(6){i{background-image:url("~static/images/client/train/product-function-icon6.png");}}
  179. li:nth-child(7){i{background-image:url("~static/images/client/train/product-function-icon7.png");}}
  180. li:nth-child(8){i{background-image:url("~static/images/client/train/product-function-icon8.png");}}
  181. }
  182. }
  183. /* 应用场景 */
  184. .train-application-scenarios{
  185. li:nth-child(1){
  186. .application-scenarios-img {
  187. background-image: url("~static/images/client/train/application-scenarios-img1.png");
  188. }
  189. }
  190. li:nth-child(2){
  191. .application-scenarios-img {
  192. background-image: url("~static/images/client/train/application-scenarios-img2.png");
  193. }
  194. }
  195. li:nth-child(3){
  196. .application-scenarios-img {
  197. background-image: url("~static/images/client/train/application-scenarios-img3.png");
  198. }
  199. }
  200. }
  201. @media (max-width: 768px){
  202. /* 网站banner */
  203. .client-platform-banner .free-trial-default-btn{top: 95px;}
  204. }
  205. }
  206. /******** describe: 课程开发 author: TX date:2020-08-24 ********/
  207. .client-course-page{
  208. /* 网站banner */
  209. .client-course-banner{
  210. width: 100%;
  211. height: 520px;
  212. background-color:#fff;
  213. background-position-x: center;
  214. background-repeat: no-repeat;
  215. }
  216. /* 调转菜单栏 */
  217. .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;}
  218. .course-link-nav{
  219. width: 100%;height: 83px;background: #161B38;opacity: 0.9;
  220. a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;}
  221. a:nth-child(1){background: #353c61;}
  222. a:nth-child(2){background: #38406a;}
  223. a:nth-child(3){background: #3c4775;}
  224. a:nth-child(4){width:174px;background: #404b81;}
  225. a:nth-child(5){background: #3c4775;}
  226. a:nth-child(6){background: #38406a;}
  227. a:nth-child(7){background: #353c61;}
  228. }
  229. // 申请方案按钮
  230. .free-trial-default-btn{width:230px;display: inline-block;margin: 0}
  231. // 联系我们按钮
  232. .course-apply-btn{background: #fff;color: #3e7ee7;border:1px solid #3e7ee7;box-sizing: border-box;margin-left: 36px;}
  233. /* PPT定制及美化、H5平面设计、视频后期处理 */
  234. .course-ppt-box,.course-H5-box,.course-videoPos-box{
  235. ul{margin: 48px 0;}
  236. li{display: inline-block;}
  237. li:not(:last-child){margin-right: 30px;}
  238. p{@include setFontStyle(-4);color: rgba(0, 0, 0, 0.65);margin-top: 24px;}
  239. }
  240. /* 视频后期处理 */
  241. .course-videoPos-box{
  242. padding-bottom: 80px;
  243. li:not(:last-child){margin-right: 80px;}
  244. }
  245. @media (max-width: 768px){
  246. /* 网站banner */
  247. .client-course-banner{height: 150px;background-size: cover;}
  248. // 菜单 ul
  249. .course-menu-ul{
  250. background: #fff;margin: 20px 0 0;
  251. 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);
  252. color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box}
  253. li.active{color: #fff;background: rgb(0, 102, 204);}
  254. li:hover{transform: none;}
  255. }
  256. // 内容区域
  257. .client-container{padding: 0;}
  258. // 申请方案按钮
  259. .free-trial-default-btn{width:122px;display: inline-block;margin: 0 0 54px;}
  260. // 联系我们按钮
  261. .course-apply-btn{margin-left: 16px;}
  262. /* PPT定制及美化、H5平面设计、视频后期处理 */
  263. .course-ppt-box,.course-H5-box,.course-videoPos-box{
  264. margin: 0 6%;
  265. ul{margin: 12px 0;}
  266. li{box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;margin-bottom: 20px;}
  267. li:not(:last-child){margin-right: 0;}
  268. img{max-width: 100%;}
  269. p{margin: 20px 0;}
  270. }
  271. /* 视频后期处理 */
  272. .course-videoPos-box{
  273. padding-bottom: 16px;
  274. img{height: 180px;}
  275. }
  276. }
  277. }
  278. /******** describe: 关于我们 author: TX date:2020-08-07 ********/
  279. .client-aboutUs-page{
  280. // banner
  281. .aboutUs-banner{
  282. width: 100%;
  283. height: 520px;
  284. background-color: #fff;
  285. background-position-x: center;
  286. background-repeat: no-repeat;
  287. background-image: url("~static/images/client/aboutUs/aboutUs-banner.jpg");
  288. }
  289. // 公司简介
  290. .company-profile-box{
  291. padding-bottom: 48px;
  292. font-size: 0;
  293. img{margin: 48px auto;display: block;}
  294. p{@include setFontStyle(-2);color: rgba(0,0,0,0.65);line-height: 40px;text-align: justify;margin: 0 60px}
  295. }
  296. // 品牌介绍
  297. .brand-introduction-box{
  298. .brand-introduction-content{
  299. width: 100%;
  300. padding: 42px;
  301. box-sizing: border-box;
  302. background: #fbfbfb;
  303. border-radius: 8px;
  304. float: right;
  305. .brand-introduction-left{
  306. display: inline-block;
  307. vertical-align: middle;
  308. padding-right: 42px;
  309. border-right: 1px solid #ddd;
  310. h4{@include setFontStyle(6);color: rgba(0,0,0,0.75);margin-bottom: 36px}
  311. img{margin-bottom: 36px;}
  312. }
  313. 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;}
  314. }
  315. }
  316. // 企业文化
  317. .corporate-culture-box{
  318. //padding-bottom: 80px;
  319. li{
  320. width:25%;
  321. display: inline-block;
  322. vertical-align: middle;
  323. div{
  324. margin-right: 16px;
  325. margin-bottom: 16px;
  326. padding: 40px 0;
  327. border: 6px solid #f7f7f7;
  328. text-align: center;
  329. i{width: 70px;height: 70px;display:inline-block;margin-bottom: 16px;}
  330. h5{@include setFontStyle(0);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
  331. p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;}
  332. }
  333. }
  334. li:nth-child(1){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} }
  335. li:nth-child(2){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} }
  336. li:nth-child(3){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} }
  337. li:nth-child(4){i{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} }
  338. li:last-child{
  339. div{margin-right: 0;}
  340. }
  341. }
  342. // 企业发展历程
  343. .enterprise-development-box{
  344. // 覆盖饿了么tab样式
  345. .enterprise-development-tab{
  346. .el-tabs__nav-wrap::after,.el-tabs__active-bar{display: none;}
  347. .el-tabs__header{
  348. margin: 0;
  349. .el-tabs__nav{width: 100%;padding-bottom: 20px;border-bottom: 1px dotted #6c9ce1;}
  350. .el-tabs__nav-wrap,.el-tabs__nav-scroll{overflow: visible}
  351. }
  352. .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;}
  353. .el-tabs__item.is-active{background: #3e7ee7;color: #fff}
  354. .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;}
  355. .el-tabs__item.is-active:after{background: #3e7ee7;}
  356. .el-tabs__content{overflow: visible}
  357. }
  358. // 企业发展历程内容部分
  359. li{
  360. width: 25%;display: inline-block;padding: 36px 24px 60px;background:#fbfbfb;box-sizing: border-box;min-height: 196px;vertical-align: top;
  361. div{width: 250px;border-bottom: 1px solid #eee;}
  362. img{margin-bottom: 14px;}
  363. i{min-width:34px;display:inline-block;color: #3e7ee7;font-style: normal;margin-right: 10px;}
  364. p{@include setFontStyle(-4);color: rgba(0,0,0,.65);margin-top: 14px;}
  365. }
  366. }
  367. // 联系我们
  368. .contact-us-box{
  369. .contact-container-box{
  370. width: 100%;
  371. box-sizing: border-box;
  372. color: rgba(0,0,0,0.85);
  373. h4{@include setFontStyle(10);color: #3e7ee7;margin-bottom: 60px;margin-top: 20px;}
  374. li{
  375. width: 50%;display: inline-block;box-sizing: border-box;margin-bottom: 48px;
  376. i{width: 30px;height: 30px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: contain;margin-right: 8px;vertical-align: middle;}
  377. span{@include setFontStyle(0);color: rgba(16, 16, 16, 100);vertical-align: middle;}
  378. }
  379. li:nth-child(1) {
  380. i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
  381. }
  382. li:nth-child(2) {
  383. text-align: right;
  384. span{width: 273px;display: inline-block;text-align: left}
  385. i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");}
  386. }
  387. li:nth-child(3) {
  388. i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
  389. }
  390. li:nth-child(4) {
  391. text-align: right;
  392. span{width: 273px;display: inline-block;text-align: left}
  393. i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
  394. }
  395. }
  396. img{max-width: 100%;margin: 0 auto;display: block;}
  397. }
  398. @media (max-width: 768px){
  399. // banner
  400. .aboutUs-banner{
  401. height: 150px;background-size: cover;
  402. span{width: 100%;}
  403. }
  404. // 公司简介
  405. .company-profile-box{
  406. img{margin: 20px auto;max-width: 100%;}
  407. p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;}
  408. }
  409. // 品牌介绍
  410. .brand-introduction-box{
  411. background-color: rgb(238, 238, 238);
  412. .brand-introduction-content{
  413. background-color: transparent;padding: 24px 10px;
  414. .brand-introduction-left{
  415. display: block;border-right:0;padding-right:0;
  416. h4{font-size: 18px;color: rgba(0, 0, 0, 1);text-align: center;margin-bottom: 20px;font-weight: 700;}
  417. img{margin: 0 auto 24px;max-width: 230px;display: block;}
  418. }
  419. span{width: 100%;display: block;padding-left: 0;font-size: 14px;color: rgba(85, 85, 85, 1);line-height: 24px;}
  420. }
  421. }
  422. // 企业文化
  423. .corporate-culture-box{
  424. padding: 50px 0 0;
  425. li{
  426. width:100%;
  427. div{
  428. height: 70px;margin: 0 0 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0;
  429. i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;}
  430. h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;}
  431. p{font-size: 14px;color: #101010;}
  432. }
  433. }
  434. }
  435. // 联系我们
  436. .contact-us-box{
  437. padding: 54px 0 0;border: 0;line-height: 1;font-size: 0;
  438. .contact-container-box{
  439. width: 100%;
  440. padding: 0;
  441. color: rgba(0,0,0,0.85);
  442. display: flex;
  443. flex-direction: column;
  444. h4{@include setFontStyle(-2);font-weight: 700;color: rgba(0, 0, 0, 1);margin-bottom: 24px;margin-top:0;text-align: center;}
  445. li{
  446. width: 100%;display: block;margin-bottom: 24px;
  447. i{width: 20px;height: 20px;}
  448. span{@include setFontStyle(-6);}
  449. }
  450. li:nth-child(2),li:nth-child(4){
  451. text-align: left;
  452. span{width: auto;}
  453. }
  454. li:nth-child(1){order: 1;}
  455. li:nth-child(2){order: 2;}
  456. li:nth-child(3){order: 4;}
  457. li:nth-child(4){order: 3;}
  458. }
  459. }
  460. }
  461. }
  462. /******** describe: 政府机构-详情页 author: TX date:2020-08-10 ********/
  463. .client-government-page{
  464. // banner
  465. .industrydetails-banner{background-color: #1B33B7;}
  466. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/government-banner-img.png");}
  467. // 我们的系统为您改变了什么
  468. .government-change-box{
  469. background: #F9FAFF;
  470. padding-bottom: 80px;
  471. .industrydetails-content{
  472. width: 100%;height: 312px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/government-change-bg.png");
  473. li{
  474. p{margin-left: 30px}
  475. }
  476. img{width:100px;display: inline-block;vertical-align: top;margin: 85px 25px 85px 30px;}
  477. }
  478. .change-content-left{
  479. display: inline-block;padding: 32px 0 0 64px;vertical-align: top;
  480. h5,li,li i{color: #fff;border-color: #fff;}
  481. p{color: rgba(255,255,255,0.65);}
  482. }
  483. .change-content-right{width: 525px;display: inline-block;padding-top: 64px;}
  484. }
  485. // 我们的优势
  486. .government-advantage-box{
  487. padding-bottom: 50px;
  488. h4{margin-bottom: 48px;}
  489. dl{width:33.33%;display: inline-block;margin-bottom: 30px;}
  490. dt{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px}
  491. dd{@include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-left: 33px;}
  492. 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;}
  493. .government-advantage-content{margin-right: -100px;padding: 4px 0 0 4px;}
  494. }
  495. @media (max-width: 768px) {
  496. // 我们的系统为您改变了什么
  497. .government-change-box{
  498. background: rgb(238, 238, 238);padding: 0 15px;
  499. .industrydetails-content{
  500. height: auto;margin-top: 20px;background-image:unset;position: relative;
  501. li{
  502. p{margin-left: 20px}
  503. }
  504. img{width:80px;display:block;margin: -60px auto;position: absolute;left: 50%;margin-left: -40px;}
  505. }
  506. .change-content-left,.change-content-right{
  507. width: 100%;box-sizing: border-box;margin-bottom: 20px;
  508. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  509. i{border-color: #fff;opacity: 1;}
  510. }
  511. .change-content-left{background-color: rgb(0, 102, 204);padding: 20px 16px;}
  512. .change-content-right{background-color: rgb(255, 186, 0);padding: 60px 16px 36px;}
  513. }
  514. }
  515. }
  516. /******** describe: 金融保险-详情页 author: TX date:2020-09-01 ********/
  517. .client-finance-page{
  518. // banner
  519. .industrydetails-banner{background-color: #593513;}
  520. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/finance-banner-img.png");}
  521. // 金融行业的问题
  522. .finance-question-box{
  523. background: #F9FAFF;
  524. padding: 80px 0;
  525. .finance-question-top{
  526. width: 946px;height: 104px;background-image: url("~static/images/client/industrydetails/finance-question-bg.png");margin: 0 auto 48px;
  527. h5{height: 104px;line-height:104px;display: inline-block;@include setFontStyle(10);color: rgba(255,255,255,0.85);padding: 0 56px}
  528. h5:first-child{margin-right: 180px;color: rgba(0,0,0,0.85);}
  529. }
  530. ul{
  531. 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;
  532. i{width: 12px;height: 12px;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;border:0;transform: rotate(0deg);opacity: 1;}
  533. p{margin-left: 30px;}
  534. }
  535. .finance-question-right{
  536. border: 1px solid #FF6226;
  537. i{background-image: linear-gradient(90deg, #FF6226 0%, #FFFFFF 100%);}
  538. }
  539. }
  540. @media (max-width: 768px) {
  541. .finance-question-box{background-color: rgb(238, 238, 238);padding: 20px 15px 30px;}
  542. .phone-class-box{
  543. ul{
  544. border: 0;width: 100%;margin: 0;padding: 20px 0 0;min-height: unset;
  545. li{margin-bottom: 10px;}
  546. i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;border: 1px solid #fff;opacity: 1;border-radius:0;
  547. float: left;box-sizing: border-box;display: block;transform: rotate(45deg);background-image: unset;}
  548. p{font-size: 14px;color: white;line-height: 24px;margin-left: 20px;text-align: justify;}
  549. }
  550. h4{color: #fff;}
  551. img {width: 130px;display: block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
  552. .financial-tradition-phone{background-color: rgb(0, 102, 204);margin: 0 0 20px;padding: 0 16px 20px;}
  553. .financial-solve-phone{background-color: rgb(247, 109, 0);padding: 40px 16px 36px;}
  554. }
  555. }
  556. }
  557. /******** describe: 信息产业-详情页 author: TX date:2020-09-02 ********/
  558. .client-information-page{
  559. // banner
  560. .industrydetails-banner{background-color: #070B20;}
  561. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/information-banner-img.png");}
  562. // 我们的系统为您改变了什么
  563. .information-change-box{
  564. background: #F9FAFF;
  565. padding-bottom: 80px;
  566. .industrydetails-content{
  567. width: 100%;height: 300px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/information-change-bg.png");
  568. li{
  569. p{margin-left: 30px;}
  570. }
  571. img{display: inline-block;vertical-align: top;margin: 120px 30px auto 70px;}
  572. }
  573. .change-content-left{
  574. display: inline-block;padding: 48px 0 0 64px;vertical-align: top;
  575. h5,li,li i{color: #fff;border-color: #fff;}
  576. p{color: rgba(255,255,255,0.65);}
  577. }
  578. .change-content-right{width: 500px;display: inline-block;padding-top: 36px;}
  579. }
  580. @media (max-width: 768px) {
  581. // 我们的系统为您改变了什么
  582. .information-change-box{
  583. background-color: rgb(238, 238, 238);padding: 0 15px 15px;
  584. .industrydetails-content{
  585. height: auto;margin-top: 20px;background-image:unset;position: relative;
  586. li{
  587. p{margin-left: 20px}
  588. }
  589. img{width:130px;display:block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
  590. }
  591. .change-content-left,.change-content-right{
  592. width: 100%;box-sizing: border-box;margin-bottom: 20px;
  593. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  594. i{border-color: #fff;opacity: 1;}
  595. }
  596. .change-content-left{background-color: rgb(14, 60, 106);padding: 20px 16px;}
  597. .change-content-right{background-color: rgb(164, 3, 3);padding: 60px 16px 36px;}
  598. }
  599. }
  600. }
  601. /******** describe: 能源化工-详情页 author: TX date:2020-09-02 ********/
  602. .client-energy-page{
  603. // banner
  604. .industrydetails-banner{background-color: #073A44;}
  605. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/energy-banner-img.png");}
  606. // 我们的系统为您改变了什么
  607. .energy-change-box{
  608. background: #F9FAFF;
  609. padding-bottom: 80px;
  610. // 模块上半部分
  611. .change-box-top{
  612. width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;
  613. i{border: 1px solid #fff;}
  614. }
  615. // 模块下半部分
  616. .change-box-bottom{
  617. width: 1100px;height: 368px;padding: 24px;box-sizing: border-box;border-radius: 8px;background: #FE552C;margin-left: 100px;margin-top:-24px;position: relative;
  618. h5{margin-top: 55px;}
  619. li:nth-of-type(odd){p{margin-right: 60px}}
  620. }
  621. h5{color: rgba(255,255,255,0.85);}
  622. li{
  623. width: 50%;display: inline-block;@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;vertical-align: top;
  624. p{margin-left: 30px;color: rgba(255,255,255,0.65);}
  625. }
  626. img{position: absolute;top: -70px;left: 50%;margin-left: -50px;}
  627. }
  628. @media (max-width: 768px) {
  629. // 我们的系统为您改变了什么
  630. .energy-change-box{
  631. background-color: rgb(238, 238, 238);padding: 0 15px 15px;
  632. // 模块上半部分
  633. .change-box-top{width: 100%;height:auto;padding: 20px 16px;margin:20px 0 20px;border-radius:0;}
  634. // 模块下半部分
  635. .change-box-bottom{width: 100%;height:auto;padding: 60px 16px 36px;margin:0 0 20px;border-radius:0;background-color: rgb(255, 115, 5);}
  636. .change-box-top,.change-box-bottom{
  637. i{border: 1px solid #fff;opacity: 1;}
  638. h5{margin-top: 20px;color: #fff;}
  639. li:nth-of-type(odd){p{margin-right: 0}}
  640. }
  641. li{
  642. width: 100%;display: block;
  643. p{margin-left: 20px;color: #fff;}
  644. }
  645. }
  646. }
  647. }
  648. /******** describe: 交通运输-详情页 author: TX date:2020-09-02 ********/
  649. .client-traffic-page{
  650. // banner
  651. .industrydetails-banner{background-color: #0A2F41;}
  652. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/traffic-banner-img.png");}
  653. // 我们的系统为您改变了什么
  654. .traffic-change-box{
  655. background: #F9FAFF;
  656. padding-bottom: 80px;
  657. .change-content-left,.change-content-right{
  658. width: 462px;height: 359px;display:inline-block;background-repeat: no-repeat;vertical-align: top;margin-top: 48px;
  659. h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
  660. ul{margin-top: 80px;margin-left: 32px;}
  661. i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;margin-top: 5px;}
  662. }
  663. .change-content-left{background-image: url("~static/images/client/industrydetails/traffic-left-bg.png");margin-right: 104px;}
  664. .change-content-right{background-image: url("~static/images/client/industrydetails/traffic-right-bg.png");}
  665. }
  666. @media (max-width: 768px) {
  667. // 我们的系统为您改变了什么
  668. .traffic-change-box{
  669. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  670. .change-content-left,.change-content-right{
  671. width: 100%;height: unset;margin:0;box-sizing: border-box;
  672. ul{margin: 0;}
  673. h5{height: unset;line-height: unset;@include setFontStyle(-4);color: rgba(255, 255, 255, 1);margin-bottom: 16px;text-align: center;font-weight: 700;}
  674. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  675. i{width: 10px;height: 10px;border-color: #fff;opacity: 1;border-radius: 0;}
  676. }
  677. .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;background-image:unset;margin: 20px 0;}
  678. .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;background-image:unset;}
  679. }
  680. }
  681. }
  682. /******** describe: 教育行业-详情页 author: TX date:2020-09-02 ********/
  683. .client-education-page{
  684. // banner
  685. .industrydetails-banner{background-color: #085903;}
  686. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/education-banner-img.png");}
  687. // 我们的系统为您改变了什么
  688. .education-change-box{
  689. background: #F9FAFF;padding-bottom: 80px;
  690. img{position: absolute;top: 50%;margin-top: -78px;left:50%;margin-left: -54px;}
  691. .industrydetails-content{position: relative;}
  692. .change-content-left,.change-content-right{height: 338px;box-sizing: border-box;}
  693. .change-content-left{width: 637px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");}
  694. .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;}
  695. }
  696. @media (max-width: 768px) {
  697. .education-change-box{
  698. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  699. img{width:100px;margin: -105px auto;margin-left: -50px;}
  700. .mt48{margin-top: 20px;}
  701. .change-content-left,.change-content-right{
  702. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  703. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  704. i{border-color: #fff;opacity: 1;}
  705. }
  706. .change-content-left{background-color: rgb(50, 159, 132);padding: 20px 16px 52px;}
  707. .change-content-right{background-color: rgb(249, 163, 97);padding: 60px 16px 16px;}
  708. }
  709. }
  710. }
  711. /******** describe: 食品餐饮-详情页 author: TX date:2020-09-03 ********/
  712. .client-restaurant-page{
  713. // banner
  714. .industrydetails-banner{background-color: #1C1E21;}
  715. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/restaurant-banner-img.png");}
  716. // 我们的系统为您改变了什么
  717. .restaurant-change-box{
  718. background: #F9FAFF;
  719. padding-bottom: 80px;
  720. .industrydetails-content{
  721. position: relative;
  722. img{position: absolute;top:50%;left: 50%;margin-top: -40px;margin-left: -45px;}
  723. }
  724. .change-content-left,.change-content-right{
  725. width: 552px;height: 328px;display:inline-block;background-repeat: no-repeat;vertical-align: top;
  726. h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
  727. ul{margin-top: 32px;margin-left: 48px;}
  728. }
  729. .change-content-left{background-image: url("~static/images/client/industrydetails/restaurant-left-bg.png");margin-right: 90px;}
  730. .change-content-right{background-image: url("~static/images/client/industrydetails/restaurant-right-bg.png");}
  731. }
  732. @media (max-width: 768px) {
  733. // 我们的系统为您改变了什么
  734. .restaurant-change-box{
  735. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  736. .mt48{margin-top: 20px;}
  737. .industrydetails-content img{margin-top: -85px;}
  738. .change-content-left,.change-content-right{
  739. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  740. ul{margin: 0;}
  741. h5{height: unset;line-height: unset;color: #fff;}
  742. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  743. i{border-color: #fff;opacity: 1;}
  744. }
  745. .change-content-left{background-color: rgb(240, 112, 112);padding: 20px 16px;}
  746. .change-content-right{background-color: rgb(255, 207, 78);padding: 60px 16px 16px;}
  747. }
  748. }
  749. }
  750. /******** describe: 医疗卫生-详情页 author: TX date:2020-09-03 ********/
  751. .client-medical-page{
  752. // banner
  753. .industrydetails-banner{background-color: #2178E0;}
  754. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/medical-banner-img.png");}
  755. // 我们的系统为您改变了什么
  756. .medical-change-box{
  757. background: #F9FAFF;
  758. padding-bottom: 80px;
  759. .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
  760. .change-content-left,.change-content-right{
  761. width: 500px;display:inline-block;vertical-align: top;
  762. ul{margin-left: 48px;}
  763. h5{margin-top: 36px;color: rgba(255,255,255,0.85);}
  764. p{color: rgba(255,255,255,0.65);}
  765. i{border-color: #fff;}
  766. }
  767. .change-content-left{margin-right: 180px;}
  768. }
  769. @media (max-width: 768px) {
  770. .medical-change-box{
  771. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  772. .industrydetails-content{width: 100%;height: unset;background-image:unset;}
  773. .mt48{margin-top: 20px;}
  774. .change-content-left,.change-content-right{
  775. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  776. ul{margin: 0;}
  777. h5{height: unset;line-height: unset;color: #fff;margin-top: 0;}
  778. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  779. i{border-color: #fff;opacity: 1;}
  780. }
  781. .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;}
  782. .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;}
  783. }
  784. }
  785. }
  786. /******** describe: 1-X-详情页 author: TX date:2020-09-03 ********/
  787. .client-indexEducation-page{
  788. padding-bottom: 80px;
  789. .client-platform-new-banner{
  790. .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;
  791. position: absolute;top: 330px;left: 50%;margin-left: -150px;}
  792. .client-default-white-Btn{background: transparent;border-color: #0a86fe;color:#fff;left: 50%;margin-left: 30px;}
  793. }
  794. @media (max-width: 768px){
  795. padding-bottom: 15px;
  796. .client-platform-new-banner{
  797. .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;top: 105px;margin-left: -130px}
  798. .client-default-white-Btn{left: 50%;margin-left: 10px;}
  799. }
  800. }
  801. }
  802. /******** describe: 课程资源 author: TX date:2020-09-03 ********/
  803. .client-resources-page{
  804. // 图标列表
  805. .train-scheme-list{
  806. margin: 54px -24px 0;
  807. li{width: 25%;display: inline-block;text-align: center}
  808. i{width: 100px;height: 100px;display: block;margin: 0 auto;}
  809. span{@include setFontStyle(-4);color: #333;margin-top: 10px;display: block;}
  810. div{box-shadow: 0 0 7px 2px #f5f2ff;margin: 24px;padding: 42px 0;}
  811. li:nth-child(1) i{background-image: url("~static/images/client/resources/train-scheme-icon1.png")}
  812. li:nth-child(2) i{background-image: url("~static/images/client/resources/train-scheme-icon2.png")}
  813. li:nth-child(3) i{background-image: url("~static/images/client/resources/train-scheme-icon3.png")}
  814. li:nth-child(4) i{background-image: url("~static/images/client/resources/train-scheme-icon4.png")}
  815. li:nth-child(5) i{background-image: url("~static/images/client/resources/train-scheme-icon5.png")}
  816. li:nth-child(6) i{background-image: url("~static/images/client/resources/train-scheme-icon6.png")}
  817. li:nth-child(7) i{background-image: url("~static/images/client/resources/train-scheme-icon7.png")}
  818. li:nth-child(8) i{background-image: url("~static/images/client/resources/train-scheme-icon8.png")}
  819. }
  820. // 为企业培训打造学习矩阵
  821. .products-services-content p{line-height: 52px;}
  822. // 蓝色提醒文字
  823. .blue-big-size{
  824. font-size: 26px;color: #3e7ce7;padding: 0 5px;
  825. }
  826. // 课程内容形式多样
  827. .course-learn-box{
  828. background: #f9faff;
  829. // video列表
  830. .learn-box-list{
  831. margin: 54px -16px 0;
  832. li{
  833. width: 33.33%;display: inline-block;
  834. a{display: none;}
  835. div{background: #fff;border-radius: 8px;margin: 0 16px 40px;box-shadow: 0 0 7px 2px #f5f2ff;}
  836. span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden;position: relative}
  837. i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
  838. left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
  839. img{transition: all 0.5s;}
  840. p{@include setFontStyle(-4);color: #3e7ce7;padding: 24px 16px 16px;text-align: left}
  841. .course-explain-black{@include setFontStyle(-4);color: #333;line-height: 24px;padding: 0 16px 24px;}
  842. }
  843. li span:hover{img{transform: scale(1.1);}}
  844. li i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
  845. }
  846. }
  847. // banner背景色
  848. .client-platform-banner{background-color: #03022e;}
  849. // 新闻资讯
  850. .platform-news-information{background: #fff;}
  851. // 按钮
  852. .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;}
  853. .client-default-white-Btn{background: #fff;color:#3e7ce7;margin-right: 0 }
  854. @media (max-width: 768px){
  855. // 图标列表
  856. .train-scheme-list{
  857. margin: 12px 16px 36px;
  858. li{
  859. width: 50%;
  860. i{width: 70px;height: 70px;background-size: cover;}
  861. div{margin: 6px;padding: 24px 0;}
  862. }
  863. }
  864. // 为企业培训打造学习矩阵
  865. .products-services-content p{font-size: 14px;line-height: 40px;text-align: center;color: #101010;}
  866. // 蓝色提醒文字
  867. .blue-big-size{font-size: 18px;}
  868. // 按钮box
  869. .default-Btn-box{text-align: center}
  870. // 视频列表
  871. .course-learn-box{
  872. margin:0;background-color: rgb(238, 238, 238);
  873. .client-container {padding: 0 15px;}
  874. .learn-box-list{
  875. margin: 20px 0;
  876. li {
  877. width: 100%;
  878. div{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;border-radius:0;margin: 0 16px;}
  879. span {width: 100%;height: 180px;margin-top: 0;border-radius: 0;}
  880. img {max-width: 100%;}
  881. p {font-size: 14px;padding: 16px 0;text-align: center;}
  882. .course-explain-black{font-size: 14px;text-align: left;padding: 0 16px 20px;}
  883. }
  884. }
  885. }
  886. // 按钮
  887. .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;margin:0 8px 42px;}
  888. }
  889. }
  890. /******** describe: 考试系统更新日志 author: TX date:2020-09-03 ********/
  891. .client-checklog-page{
  892. // banner
  893. .client-checklog-banner{
  894. width: 100%;height: 300px;background-color: rgb(0, 102, 204);text-align: center;
  895. h4{font-size: 56px;color: rgba(255, 255, 255, 1);font-weight: bold;padding-top: 64px;}
  896. p{font-size: 28px;color: rgb(255, 255, 255);padding-top: 24px;}
  897. }
  898. // 数据展示
  899. .log-data-show{
  900. height: 200px;
  901. border-color: rgb(187, 187, 187);
  902. border-width: 1px;
  903. border-style: solid;
  904. box-shadow: rgb(121, 188, 255) 0px 2px 6px 0px;
  905. border-radius: 10px;
  906. padding: 24px;
  907. box-sizing: border-box;
  908. display: flex;
  909. justify-content: space-evenly;
  910. margin-top: -64px;
  911. background: #fff;
  912. div{
  913. display: inline-block;text-align: center;
  914. span{font-size: 24px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 32px;display: inline-block;}
  915. p{font-size: 54px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 10px;}
  916. }
  917. i{width: 1px;height: 150px;background: lightgray;display: inline-block;}
  918. }
  919. // 日志内容
  920. .log-content-box{
  921. margin: 52px auto 100px;color: rgb(16, 16, 16);
  922. li{
  923. color: rgb(16, 16, 16);border-bottom: 1px dashed #ccc;padding: 0 88px;
  924. h5{font-size: 18px;margin: 14px 0;font-weight: bold;}
  925. span{font-size: 18px;margin-bottom: 14px;display: block;font-weight: bold;}
  926. div{margin-bottom: 14px;}
  927. i{width: 12px;height: 1px;display: inline-block;background: #bbb;vertical-align: top;margin: 10px 6px 10px 0;}
  928. p{width: 1000px;font-size: 16px;display: inline-block;vertical-align: middle;line-height: 24px;color: #000;text-align: justify}
  929. }
  930. li:last-child{border: 0;}
  931. }
  932. }
  933. /******** describe: 体验中心 author: TX date:2021-06-09 ********/
  934. .tiyan-center-page{
  935. .tiyan-center-register{
  936. background: #3776ff;text-align: center;padding: 52px 0;margin-top: 70px;
  937. h5{font-size: 42px;color: #fff;margin: 24px 0;}
  938. p{font-size: 32px;color: #fff;margin-bottom: 52px;}
  939. span{font-size: 52px;color: #ffff00}
  940. a{width: 355px;height: 60px;line-height: 60px;text-align: center;background: #ff4d4d;border-radius: 4px;display: inline-block;color: #fff;}
  941. }
  942. @media (max-width: 768px){
  943. /* 网站banner */
  944. .client-platform-banner div{background-position-x: 42%;}
  945. .experience-swiper-box .swiper-pagination-style {width: 80px;margin-left: -30px;}
  946. }
  947. }
  948. // 立即注册弹窗
  949. .register-now-dialog{
  950. .el-dialog{
  951. width:540px;
  952. // 关闭图标
  953. .el-icon-close:before{color: #fff}
  954. // 弹窗头部
  955. .el-dialog__header{height: 100px;background: #363fdc;}
  956. // 弹窗body
  957. .el-dialog__body{
  958. height:200px;position: relative;background: #fff;
  959. .register-now-box{
  960. position: absolute;top: -100px;left: 0;right: 0;
  961. >p{font-size: 18px;color: #fff;text-align: center;line-height: 24px;margin-bottom: 8px}
  962. >span{
  963. margin-top: 36px;color: #666;font-size: 16px;display: block;text-align: center;
  964. .tel-code{font-size: 30px;color:#1f68b4;font-weight: bold;}
  965. }
  966. }
  967. }
  968. .system-box{
  969. 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;
  970. a{
  971. display: inline-block;
  972. i{width: 158px;height: 120px;display: block;background-size: cover;}
  973. }
  974. span{width: 1px;min-height: 100px;display:inline-block;background:#e8e8e8;@include setFontStyle(-4);margin: 10px;}
  975. p{@include setFontStyle(-4);color: rgba(0,0,0,0.85);line-height: 24px;text-align: center;}
  976. }
  977. .system-box:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon3.png");} }
  978. .system-box:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon6.png");} }
  979. }
  980. }
  981. // 系统维护弹窗
  982. .system-maintain-dialog{
  983. .el-dialog{width: 540px;height: 380px;background-image:url("~static/images/client/tiyanCenter/ty-dialog-bj.jpg");}
  984. }
  985. /******** describe: 课程开发解决方案 author: TX date:2021-08-06 ********/
  986. .course-develop-page{
  987. // 标题
  988. .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;}
  989. // form
  990. .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;}
  991. // 滑块px
  992. .nc-container{
  993. overflow: hidden;height: 52px;
  994. .nc_wrapper{width:100%!important;margin-bottom: 22px;border-radius: 5px;overflow: hidden;}
  995. .nc_scale{
  996. height: 30px;
  997. .scale_text{overflow: hidden;line-height: 30px;}
  998. span{width:40px;height: 30px;line-height: 30px;border-radius: 5px;border: 1px solid rgb(187, 187, 187);box-sizing: border-box;overflow: hidden}
  999. }
  1000. .btn_ok{margin-left: -1px;}
  1001. }
  1002. // 输入框-验证码
  1003. .course-develop-input-code{width: calc(100% - 122px);}
  1004. .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;}
  1005. // 公司名称
  1006. .dialog-input-company{
  1007. .el-form-item__content{display: grid;}
  1008. }
  1009. // 表单按钮
  1010. .form-blue-btn,.form-border-btn{
  1011. 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;
  1012. }
  1013. .form-blue-btn{background-color: rgb(0, 102, 204);border-color:rgb(0, 102, 204);}
  1014. .form-border-btn{display:block;border-color:rgb(0, 102, 204);color:rgb(0, 102, 204);margin-top: 20px; }
  1015. // 咨询电话
  1016. .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;}
  1017. // 产品
  1018. .dialog-input-company{text-align: center;padding: 0;}
  1019. }
  1020. /******** describe: 注册页面--手机 author: TX date:2021-08-06 ********/
  1021. .register-phone-page{
  1022. // 标题
  1023. .course-develop-title{font-size: 20px;}
  1024. // 咨询电话
  1025. .course-develop-tel{margin: 46px 0;}
  1026. }
  1027. /******** describe: 复制路径页面--手机 author: TX date:2021-08-06 ********/
  1028. .copy-url-page{
  1029. background: #fff;height: 100vh;
  1030. // 底部
  1031. .success-body-box{
  1032. img{max-width: 100%;padding: 30px;box-sizing: border-box;}
  1033. p{font-weight: 700;font-size: 20px;color: rgb(31, 104, 176);text-align: center;margin: 4px 0;}
  1034. 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;}
  1035. a{width: 122px;height: 36px;line-height:36px;background-color: rgb(234, 118, 27);color: rgb(255, 255, 255);
  1036. border-radius: 5px;font-size: 14px;display: block;margin: 0 auto;text-align: center}
  1037. }
  1038. }
  1039. /******** describe: 企业微课制作 author: TX date:2021-09-13 ********/
  1040. .client-makeCourse-page{
  1041. .client-platform-banner{
  1042. background-color: #22252A;
  1043. .free-trial-default-btn{background: #f76377}
  1044. }
  1045. // 按钮
  1046. .btn-big-box{width: 263px;margin: 50px auto 0;display: block;text-align: center;}
  1047. // 页面标题
  1048. .make-course-title {width: 100%;font-size: 24px;font-weight: normal;margin-bottom: 35px;padding-left: 10px;color: #333;text-align: center}
  1049. .course-blue-title{color: #3E7BE6;}
  1050. // 页面文字
  1051. .make-course-h2{
  1052. width: 100%;text-align: center;padding: 40px 0;border-bottom: 1px solid #CCC;
  1053. img{max-width: 100%;}
  1054. }
  1055. // 基本介绍
  1056. .makeCourse-introduce-box{
  1057. margin: 64px 0;
  1058. dl {
  1059. width: 580px;float: left;padding-top: 100px;padding-left: 20px;
  1060. h3{text-align: left}
  1061. dt {width: 100%;font-size: 18px;font-weight: normal;margin-bottom: 35px;color: #333;padding-left: 10px;}
  1062. }
  1063. }
  1064. .contrary-introduce-box{
  1065. margin-bottom: 88px;
  1066. dl {
  1067. width: 480px;float: right;padding-top: 0;height: 350px;
  1068. dt {margin-bottom: 20px;}
  1069. dd{margin-top: 35px;}
  1070. }
  1071. }
  1072. // 课程目标
  1073. .course-target-box{
  1074. background: #F8F8F8;padding: 42px 0;
  1075. li{
  1076. width: 20%;display: inline-block;
  1077. div{text-align: center;background: #fff;margin: 5px;padding: 24px 0;}
  1078. img{height: 100px;margin-bottom: 24px;}
  1079. span{text-align: center;font-size: 18px;color: #333;display: block}
  1080. }
  1081. }
  1082. // 培训讲师介绍
  1083. .px-teacher-box{
  1084. margin: 60px 0;
  1085. .teacher-content-box{display: flex;justify-content: space-between;align-items: center;}
  1086. span{display: block;font-size: 18px;color: #333;text-align: center;}
  1087. p{margin-left: 70px;line-height: 50px;}
  1088. .btn-big-box{margin-top: 32px;}
  1089. }
  1090. // 课程体系
  1091. .course-system-box{
  1092. padding: 32px 0;
  1093. .course-system-img{margin-bottom: 40px;max-width: 100%;}
  1094. img{max-width: 100%;}
  1095. }
  1096. // 微课设计
  1097. .course-learn-box{
  1098. padding: 64px 0;
  1099. .learn-box-list li div{margin: 0 16px 0;}
  1100. }
  1101. // 报名学习
  1102. .sign-study-box{
  1103. width: 100%;
  1104. .study-gj-box{width: 100%;height: 298px;background-image:url("~static/images/client/makeCourse/sign-study-bj.png");
  1105. margin-top: 20px;border-radius: 8px;bottom: -20px;position: relative;}
  1106. .sign-study-content{
  1107. position: absolute;bottom: 74px;font-size: 0;left: 76px;
  1108. .el-input{
  1109. width: 400px;font-size: 16px;
  1110. .el-input__inner{height: 64px;display: inline-block;border-radius: 0;font-size: 16px}
  1111. .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
  1112. font-size: 16px;
  1113. }
  1114. .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
  1115. font-size: 16px;
  1116. }
  1117. .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
  1118. font-size: 16px;
  1119. }
  1120. }
  1121. .el-button{width:150px;height:64px;display: inline-block;margin-left: -1px;font-size: 16px}
  1122. }
  1123. }
  1124. @media (max-width: 768px) {
  1125. // 按钮
  1126. .client-default-Btn{width: 120px;height: 35px;line-height: 35px;margin: 32px auto 0;}
  1127. // 页面标题
  1128. .make-course-title {font-size: 16px;margin-bottom: 16px;color: #3E7BE6;padding-left: 0;font-weight: bold;}
  1129. // 页面文字
  1130. .make-course-h2{
  1131. padding: 32px 0;
  1132. }
  1133. // 基本介绍
  1134. .makeCourse-introduce-box{
  1135. margin: 32px 0;
  1136. img{max-width: 100%;display: block;margin: 0 auto;}
  1137. dl {
  1138. width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;
  1139. h3{text-align: center;}
  1140. dt {font-size: 14px;margin-bottom: 16px;color: #555555;padding-left: 0;line-height: 24px}
  1141. }
  1142. }
  1143. .contrary-introduce-box{
  1144. dl {
  1145. width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;height: unset;
  1146. dt {margin-bottom: 4px;}
  1147. }
  1148. }
  1149. // 课程目标
  1150. .course-target-box{
  1151. background: #F8F8F8;padding: 16px 0 32px;
  1152. h3{font-size: 18px;color: #333;margin: 12px 0;text-align: center}
  1153. ul{text-align: center;}
  1154. li{
  1155. width: 33.33%;
  1156. div{margin: 6px;padding: 16px 0;}
  1157. img{height: 40px;margin-bottom: 10px;}
  1158. span{font-size: 16px;color: #333;}
  1159. }
  1160. .btn-big-box{margin-top: 50px;}
  1161. }
  1162. // 培训讲师介绍
  1163. .px-teacher-box{
  1164. margin: 32px 0;
  1165. .teacher-img-box{
  1166. width: 80px;padding: 0;box-sizing: border-box;flex-shrink: 0;
  1167. img{width: 80px;display: inline-block;vertical-align: middle;}
  1168. }
  1169. .teacher-content-box{display: flex;justify-content: space-between;}
  1170. span{font-size: 16px;margin: 10px 0;}
  1171. p{font-size: 14px;line-height: 24px;margin: 10px 12px;text-align: justify;}
  1172. .btn-big-box{margin-top: 32px;}
  1173. }
  1174. // 微课设计
  1175. .course-learn-box{
  1176. padding: 32px 0;
  1177. .client-container{padding: 0}
  1178. .learn-box-list li div{margin: 0}
  1179. }
  1180. // 报名学习
  1181. .sign-study-box{
  1182. background: #3776ff;
  1183. .client-container{padding: 0;}
  1184. .study-gj-box{height:180px;background-image:url("~static/images/client/makeCourse/sign-study-sjBj.png");background-size: contain;background-repeat: no-repeat;
  1185. bottom: 0;border-radius: 0;background-position: center;}
  1186. .sign-study-content{
  1187. bottom: 40px;left: 40px;right: 40px;
  1188. .el-input{
  1189. width: 68%;font-size: 14px;vertical-align: middle;
  1190. .el-input__inner{height: 38px;font-size: 14px}
  1191. .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
  1192. font-size: 14px;
  1193. }
  1194. .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
  1195. font-size: 14px;
  1196. }
  1197. .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
  1198. font-size: 14px;
  1199. }
  1200. }
  1201. .el-button{width:32%;height:38px;font-size: 14px;border-radius: 2px;vertical-align: middle; padding: 0;}
  1202. }
  1203. }
  1204. }
  1205. }
  1206. /**************** describe:城市合作商 author: TX date:2022-09-22 ****************/
  1207. .urban-partners-page{
  1208. // 标题
  1209. .urban-partners-title{
  1210. font-size: 36px;color: #3b3838;text-align: center;font-weight: 700;
  1211. }
  1212. // banner
  1213. .urban-partners-banner{
  1214. width:100%;height: 514px;background-position: center;position: relative;
  1215. background-image:url("~static/images/client/urbanPartners/urban-partners-banner-pc.png");
  1216. span{
  1217. width: 222px;height: 58px;line-height:58px;display: inline-block;font-size: 24px;
  1218. background: #f5f5f5;border-radius: 10px;color: #1d1ab2;position: absolute;left: 50%;
  1219. transform: translateX(-50%);bottom: 126px;text-align: center;cursor: pointer;
  1220. }
  1221. }
  1222. // 携手栋科软件
  1223. .xs-dk-box{
  1224. width: 100%;height: 386px;padding-top: 105px;box-sizing: border-box;
  1225. background-image:url("~static/images/client/urbanPartners/xs-dk-bj.png");
  1226. background-position: center;background-size: cover;
  1227. ul{display: flex;margin-top: 82px;justify-content: space-around;}
  1228. li{font-size: 22px;text-align: center;}
  1229. span{color: #0165CD;font-size: 36px;font-family: 'Din';padding: 0 4px;}
  1230. }
  1231. // 私有化部署
  1232. .syh-bs-box{
  1233. background: #F9F9F9;padding: 70px 0 114px;
  1234. // 布局
  1235. .syh-bs-card{
  1236. display: flex;
  1237. >div{width: 50%;}
  1238. >div +div{margin-left: 50px;}
  1239. }
  1240. // 头部
  1241. .syh-bs-head{
  1242. h4{font-size: 36px;font-weight: 700;color: #3b3838;text-align: center}
  1243. i{
  1244. width:313px;height:35px;display: block;margin: 12px auto;
  1245. background-image:url("~static/images/client/urbanPartners/tree-branch-icon.png");}
  1246. }
  1247. // 内容区域
  1248. .syh-bs-body{
  1249. display: flex;margin: 0 -25px;
  1250. li{width: 50%;}
  1251. div{height:352px;margin: 0 25px;background: #fff;border: 1px solid #d0d0d0;border-radius: 10px;}
  1252. i{width: 83px;height: 80px;display: block;margin: 56px auto 0;}
  1253. h5{font-size: 20px;font-weight: 700;color: #3b3838;text-align: center;margin: 36px 0 24px;}
  1254. p{width:82%;font-size: 18px;font-weight: 400;color: #3b3838;display: flex;
  1255. line-height: 28px;margin: 0 auto;text-align: justify;}
  1256. p:before{
  1257. content: '';width: 6px;height: 6px;background: #1d3ac3;border-radius: 50%;
  1258. flex-shrink: 0;margin: 10px 12px 0 0;
  1259. }
  1260. }
  1261. .syh-bs-left li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon1.png");}
  1262. .syh-bs-left li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon2.png");}
  1263. .syh-bs-right li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon3.png");}
  1264. .syh-bs-right li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/syh-bs-icon4.png");}
  1265. }
  1266. // 合作优势
  1267. .hz-ys-box{
  1268. background-color: #fff;padding: 94px 0 120px;font-size: 0;
  1269. h5{font-size: 24px;color: #3b3838;text-align: center;margin: 24px 0 75px;}
  1270. .hz-ys-card{
  1271. width: 48%;display: inline-block;border: 1px solid #2a63c6;padding: 35px 48px 35px 78px;
  1272. border-radius: 10px;box-sizing: border-box;
  1273. p{display: flex;font-size: 20px;font-weight: 500;margin-bottom: 32px;
  1274. color: #3b3838;line-height: 64px;}
  1275. p:last-child{margin-bottom: 0;}
  1276. i{width: 64px;height: 64px;display: block;margin-right: 44px;}
  1277. }
  1278. .hz-ys-card +.hz-ys-card{margin-left: 4%;}
  1279. .card-left p:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon1.png");}
  1280. .card-left p:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon3.png");}
  1281. .card-left p:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon5.png");}
  1282. .card-right p:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon2.png");}
  1283. .card-right p:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon4.png");}
  1284. .card-right p:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/hz-ys-icon6.png");}
  1285. }
  1286. // 合作条件
  1287. .hz-tj-box{
  1288. width: 100%;height: 651px;padding: 128px 0 124px;box-sizing: border-box;
  1289. background-image:url("~static/images/client/urbanPartners/hz-tj-bj.png");background-repeat: no-repeat;
  1290. background-position: center;
  1291. .hz-yj-body{
  1292. display: flex;margin: 100px -12px 0;
  1293. li{width: 25%;}
  1294. div{height: 267px;display: block;background: #fff;border-radius: 10px;margin: 0 12px;overflow: hidden;}
  1295. div:before{content: '';width:100%;height: 10px;display: block;
  1296. background: linear-gradient(89deg,#2739f6 0%, #5bbaf9 100%);}
  1297. p{
  1298. font-size: 26px;font-weight: 500;text-align: center;color: #2a63c6;margin-top: 70px;
  1299. }
  1300. span{
  1301. font-size: 18px;font-weight: 400;text-align: center;color: #3b3838;line-height: 30px;
  1302. margin-top: 30px;display: block;
  1303. }
  1304. }
  1305. }
  1306. // 合作商申请流程
  1307. .sq-lc-box{
  1308. padding: 90px 0 44px;
  1309. // 内容区域
  1310. .sq-lc-body{
  1311. display: flex;justify-content: space-between;margin-top: 83px;border-bottom: 1px dashed #d0d0d0;padding-bottom: 24px;
  1312. i{width: 91px;height: 91px;display: block;margin-bottom: 18px;}
  1313. span{
  1314. font-size: 22px;font-weight: 400;text-align: center;color: #3b3838;
  1315. }
  1316. li{position: relative}
  1317. li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon1.png");}
  1318. li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon2.png");}
  1319. li:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon3.png");}
  1320. li:nth-child(4) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon4.png");}
  1321. li:nth-child(5) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon5.png");}
  1322. li:nth-child(6) i{background-image:url("~static/images/client/urbanPartners/sq-lc-icon6.png");}
  1323. li:after{
  1324. content: '';width: 8px;height: 8px;background: #898989;display: block;border-radius: 50%;
  1325. position: absolute;bottom: -28px;left: 50%;transform: translateX(-50%);
  1326. }
  1327. }
  1328. // 二维码区域
  1329. .two-code-box{
  1330. i{width: 115px;height: 115px;display: block;margin: 60px auto 20px;background-size: cover;
  1331. //border: 1px solid #666;border-radius: 4px;
  1332. background-image:url("~static/images/client/urbanPartners/zs-qd-code.png");}
  1333. p{
  1334. font-size: 20px;font-weight: 400;text-align: center;color: #3b3838;
  1335. }
  1336. a{
  1337. width: 205px;height: 52px;line-height:52px;background: #2a63c6;border-radius: 6px;cursor: pointer;
  1338. font-size: 24px;font-weight: 400;text-align: center;color: #e6e8ef;display: block;margin: 20px auto;
  1339. }
  1340. }
  1341. }
  1342. // 优秀合作伙伴真实评价
  1343. .zs-pj-box{
  1344. background-color: #F9F9F9;padding: 100px 0 70px;
  1345. ul{display: flex;margin: 70px 0 0;justify-content: space-between;}
  1346. li{
  1347. width: 366px;height:420px;border-radius: 4px;background-color: #fff;overflow: hidden;
  1348. i{width:367px;height:196px;display: block;}
  1349. h5{
  1350. font-size: 20px;font-weight: 700;text-align: justify;
  1351. color: #3b3838;line-height: 24px;margin: 30px 24px 0;
  1352. }
  1353. p{
  1354. font-size: 16px;font-weight: 400;text-align: justify;
  1355. color: #3b3838;line-height: 24px;margin: 16px 24px 0;
  1356. }
  1357. }
  1358. li:nth-child(1) i{background-image:url("~static/images/client/urbanPartners/zs-pj-img1.jpg");}
  1359. li:nth-child(2) i{background-image:url("~static/images/client/urbanPartners/zs-pj-img2.jpg");}
  1360. li:nth-child(3) i{background-image:url("~static/images/client/urbanPartners/zs-pj-img3.jpg");}
  1361. }
  1362. // 申请城市合作商
  1363. .sqcs-hzs-box{
  1364. width: 100%;height: 303px;padding: 77px 0 50px;box-sizing: border-box;
  1365. background-image:url("~static/images/client/urbanPartners/zs-sq-bj-pc.png");
  1366. h4,h5{font-size: 36px;font-weight: 400;text-align: center;color: #ffffff;}
  1367. h5{font-weight: 700;margin-top: 20px;}
  1368. a{
  1369. width: 208px;height: 54px;background: #ffffff;display: block;
  1370. line-height:54px;border-radius: 6px;font-size: 24px;font-weight: 400;
  1371. text-align: center;color: #2a63c6;margin: 28px auto 0;}
  1372. }
  1373. // 申请城市合作商弹窗
  1374. .apply-collaborate-dialog{
  1375. .el-dialog{width: 480px;border-radius: 8px;}
  1376. .el-dialog__header{display: none;}
  1377. .el-dialog__body{padding:0 48px 38px;}
  1378. // 弹窗标题
  1379. h4{
  1380. font-size: 28px;font-weight: 700;color: #2a63c6;
  1381. padding: 36px 0 40px;text-align: center;
  1382. }
  1383. // 按钮
  1384. .dialog-btn-box{display: flex;justify-content: center;margin-top: 18px;}
  1385. .apply-dialog-btn{
  1386. width: 120px;height: 48px;cursor: pointer;font-weight: 400;
  1387. line-height: 48px;background: #0165CD;border-radius: 6px;
  1388. font-size: 18px;color: #fff;text-align: center;
  1389. }
  1390. .apply-dialog-btn + .apply-dialog-btn{margin-left: 20px}
  1391. .dialog-cancel-btn{
  1392. border: 1px solid #2a63c6;background: #fff;color: #2a63c6;
  1393. }
  1394. .el-input__prefix .el-input__icon{width: 16px;height: 16px;display: block;background-size: cover;margin: 12px 4px;}
  1395. .dialog-user-icon{background-image:url("~static/images/client/urbanPartners/dialog-user-icon.png");}
  1396. .dialog-tel-icon{background-image:url("~static/images/client/urbanPartners/dialog-tel-icon.png");}
  1397. .dialog-company-icon{background-image:url("~static/images/client/urbanPartners/dialog-company-icon.png");}
  1398. .dialog-region-icon{background-image:url("~static/images/client/urbanPartners/dialog-region-icon.png");}
  1399. .dialog-email-icon{background-image:url("~static/images/client/urbanPartners/dialog-email-icon.png");}
  1400. }
  1401. @media (max-width: 768px){
  1402. // 标题
  1403. .urban-partners-title{
  1404. font-size: 18px;line-height: 26px;
  1405. }
  1406. // banner
  1407. .urban-partners-banner{
  1408. width: 100%;height: 222px;background-size: cover;
  1409. background-image:url("~static/images/client/urbanPartners/urban-partners-banner-sj.png");
  1410. span{
  1411. width: 120px;height: 28px;line-height:28px;font-size:14px;border-radius: 4px;bottom: 16px;
  1412. }
  1413. }
  1414. // 携手栋科软件
  1415. .xs-dk-box{
  1416. height: 218px;padding-top: 25px;
  1417. ul{justify-content: center;flex-wrap: wrap;margin-top: 36px;}
  1418. li{width: 50%;font-size: 12px;font-weight: 600;margin-bottom: 22px;}
  1419. span{font-size: 18px;padding: 0 2px;font-weight: normal;}
  1420. }
  1421. // 私有化部署
  1422. .syh-bs-box{
  1423. padding: 26px 0;
  1424. // 布局
  1425. .syh-bs-card{
  1426. display: flex;flex-wrap: wrap;
  1427. >div{width: 100%;}
  1428. >div +div{margin-left: unset;}
  1429. }
  1430. // 头部
  1431. .syh-bs-head{
  1432. flex-wrap: wrap;
  1433. div{width: 100%;}
  1434. h4{font-size: 18px;}
  1435. i{
  1436. width:156px;height:17px;margin: 8px auto 6px;background-size: contain;
  1437. background-repeat: no-repeat;background-position: center;
  1438. }
  1439. }
  1440. // 内容区域
  1441. .syh-bs-body{
  1442. display: flex;margin: 0 0 42px;
  1443. li{width: 50%;}
  1444. div{height: 110%;margin: 0 6%;}
  1445. i{width: 38px;height: 36px;margin: 30px auto 0;background-size: contain;
  1446. background-repeat: no-repeat;background-position: center;}
  1447. h5{font-size: 12px;margin: 20px 0 12px;}
  1448. p{width:90%;font-size: 12px;line-height: 20px;}
  1449. p:before{
  1450. content: '';width: 3px;height: 3px;margin: 10px 6px 0 0;
  1451. }
  1452. }
  1453. }
  1454. // 合作优势
  1455. .hz-ys-box{
  1456. padding: 36px 0 24px;
  1457. h5{font-size: 12px;margin: 12px 0 38px;}
  1458. .hz-ys-card{
  1459. width: 90%;display: block;padding: 18px 18px 18px 24px;margin: 0 auto 18px;
  1460. p{font-size: 12px;margin-bottom: 16px;
  1461. color: #3b3838;line-height: 32px;}
  1462. i{width: 32px;height: 32px;margin-right: 14px;background-size: contain;
  1463. background-repeat: no-repeat;background-position: center;}
  1464. }
  1465. .hz-ys-card +.hz-ys-card{margin-left:unset;}
  1466. .card-right{margin: 0 auto!important;}
  1467. }
  1468. // 合作条件
  1469. .hz-tj-box{
  1470. height: 391px;padding: 34px 0 30px;background-size: cover;
  1471. .hz-yj-body{
  1472. display: flex;margin: 20px 0 0;flex-wrap: wrap;
  1473. li{width: 50%;margin-bottom: 23px;}
  1474. div{height: 134px;margin: 0 6px;}
  1475. div:before{height: 5px;}
  1476. p{font-size: 14px;margin-top: 24px;}
  1477. span{
  1478. font-size: 12px;line-height: 18px;margin-top: 20px;
  1479. }
  1480. }
  1481. }
  1482. // 合作商申请流程
  1483. .sq-lc-box {
  1484. padding: 32px 0 34px;
  1485. // 二维码区域
  1486. .two-code-box {
  1487. i {width: 60px;height: 60px;margin: 0 auto 10px;background-size: cover;}
  1488. p {font-size: 10px;}
  1489. a {
  1490. width: 102px;height: 26px;line-height: 26px;
  1491. border-radius: 4px;font-size: 12px;margin: 10px auto;
  1492. }
  1493. }
  1494. // 图片展示
  1495. .sq-lc-body-img{
  1496. width: 100%;height: 222px;background-size: contain;margin-top: 16px;
  1497. background-repeat: no-repeat;background-position: center;
  1498. background-image:url("~static/images/client/urbanPartners/sqlc-body-img.png");
  1499. }
  1500. }
  1501. // 优秀合作伙伴真实评价
  1502. .zs-pj-box{
  1503. padding: 38px 0 34px;
  1504. ul{margin: 27px 0 0;justify-content: center;flex-wrap: wrap;}
  1505. li{
  1506. width: 48%;height:auto;background-size: cover;margin-bottom: 32px;border-radius: 2px;
  1507. i{width: 100%;height: 100px;background-size: cover;flex-shrink: 0;}
  1508. h5{
  1509. font-size: 12px;line-height: 12px;margin: 14px 10px 0;
  1510. }
  1511. p{
  1512. font-size: 11px;line-height: 18px;margin: 8px 10px 10px;
  1513. }
  1514. }
  1515. li + li{margin-left: 4%;}
  1516. }
  1517. // 申请城市合作商
  1518. .sqcs-hzs-box{
  1519. width: 100%;height: 150px;padding: 36px 0 24px;background-repeat: no-repeat;
  1520. background-size: cover;background-position: center;
  1521. background-image:url("~static/images/client/urbanPartners/zs-sq-bj-sj.png");
  1522. h4,h5{font-size: 18px;}
  1523. h5{margin-top: 10px;}
  1524. a{
  1525. width: 104px;height: 27px;line-height:27px;border-radius: 3px;
  1526. font-size: 12px;margin: 14px auto 0;}
  1527. }
  1528. // 弹窗
  1529. .apply-collaborate-dialog{
  1530. .el-dialog{width: 90%;}
  1531. .el-dialog__body{padding:0 20px 24px;}
  1532. // 弹窗标题
  1533. h4{font-size: 20px;padding: 20px 0;}
  1534. // 按钮
  1535. .apply-dialog-btn{
  1536. width: 100px;height: 36px;line-height: 36px;font-size: 14px;
  1537. }
  1538. }
  1539. }
  1540. }
  1541. /**************** describe:课程开发梗概 author: TX date:2022-12-29 ****************/
  1542. .website-course-synopsis-page{
  1543. min-width: 1360px;
  1544. .website-synopsis-banner{
  1545. width: 100%;
  1546. height: 560px;
  1547. background-color:#fff;
  1548. background-position: center;
  1549. background-repeat: no-repeat;
  1550. cursor: pointer;
  1551. }
  1552. .synopsis-services-box{
  1553. width: 1360px;display: flex;align-items: center;justify-content: center;margin: 0 auto;
  1554. // 头部图片
  1555. img{ width: 726px;height: 510px;margin: 0 140px 0 0;}
  1556. // 内容区域
  1557. .course-services-content{
  1558. width: 460px;
  1559. box-sizing: border-box;
  1560. display: block;
  1561. h6{font-family: MiSans-Regular, "微软雅黑", Arial, sans-serif;@include setFontStyle(10);color: #0065cd;margin-bottom: 28px;}
  1562. p{@include setFontStyle(4);color: #333;margin-bottom: 30px;text-align: justify;}
  1563. .synopsis-list-box{
  1564. display: flex;align-items: center;flex-wrap: wrap;
  1565. li{width: 33.33%;margin-bottom: 24px;display: flex;align-items: center}
  1566. span{@include setFontStyle(-4);color: #333;}
  1567. i{width: 7px;height: 7px;background: #0066cc;display: block;border-radius: 50%;margin-right: 12px;}
  1568. }
  1569. .client-btn-box{margin: 48px 0 0;}
  1570. .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #0065CD;border: 1px solid #0065CD;box-sizing: border-box;}
  1571. .client-default-white-Btn{background: #fff;color: #0065CD;}
  1572. a,div.client-default-Btn{margin-right: 24px}
  1573. span.client-default-Btn{background: transparent;color: #0065CD;margin-right: 0;}
  1574. }
  1575. }
  1576. .synopsis-blue{background: #f5f9ff;}
  1577. .website-row-reverse{
  1578. img{margin: 0 0 0 60px;}
  1579. .course-services-content{margin-left: 120px;}
  1580. }
  1581. @media (max-width: 768px){
  1582. padding-bottom: 52px;min-width: unset;
  1583. // banner
  1584. .website-synopsis-banner{height: 150px;background-size: cover;}
  1585. // row
  1586. .synopsis-services-box{
  1587. width:100%;flex-direction: column;padding: 0;
  1588. // 头部图片
  1589. img{max-width: 100%;height: auto;float: none;margin: 0 auto;}
  1590. // 内容区域
  1591. .course-services-content{
  1592. width: 100%;padding: 0 10px;margin: 0;
  1593. h6{@include setFontStyle(-4);margin: 24px 0 16px;font-weight: bold;text-align: center;}
  1594. p{margin-bottom: 0;color: rgba(85, 85, 85, 1);font-size: 14px;text-align: center;}
  1595. .synopsis-list-box{
  1596. width: 85%;margin: 24px auto 0;
  1597. li{width: 33.33%;margin-bottom: 12px;}
  1598. span{@include setFontStyle(-7);color: #333;}
  1599. i{width: 6px;height: 6px;margin-right: 8px;}
  1600. }
  1601. .client-btn-box{text-align: center;margin:40px 0;}
  1602. .client-default-Btn,.client-default-white-Btn{width: 120px;height: 35px;line-height: 35px;}
  1603. a,div.client-default-Btn{margin-right: 16px}
  1604. }
  1605. }
  1606. .website-row-reverse img{margin: 0 auto;}
  1607. }
  1608. }
  1609. }