cus-client-page.scss 59 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396
  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: 395px;
  11. background-color:#031073;
  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: 640px;cursor: pointer;}
  19. .el-carousel__item{
  20. .index-carousel-box{width:100%;height: 640px;display: block;background-position: center;background-repeat: no-repeat;background-color: #a49d9b;}
  21. }
  22. }
  23. /* 发展历程 - 移动端隐藏*/
  24. .client-company-history{
  25. background:#f8f8f8;
  26. li{
  27. width: 25%;display: inline-block;text-align: center;
  28. i{width: 40px;height: 40px;display: inline-block;background-size: cover;margin-right: 16px;vertical-align: middle;}
  29. a{
  30. border-right:2px solid #e5e5e5;margin: 24px 0;display: block;
  31. div{display: inline-block;text-align: left;vertical-align: middle;}
  32. span{@include setFontStyle(-4);color: #333;margin-bottom: 10px;display: block;}
  33. p{@include setFontStyle(-4);color: #666;}
  34. }
  35. }
  36. li:last-child a{border-right: 0;}
  37. }
  38. li:nth-child(1){i{background-image: url("~static/images/client/index/company-history-icon1.png");}}
  39. li:nth-child(2){i{background-image: url("~static/images/client/index/company-history-icon2.png");}}
  40. li:nth-child(3){i{background-image: url("~static/images/client/index/company-history-icon3.png");}}
  41. li:nth-child(4){i{background-image: url("~static/images/client/index/company-history-icon4.png");}}
  42. /* 产品和服务 */
  43. .client-products-services{
  44. .client-title{
  45. margin-bottom: 48px;
  46. }
  47. }
  48. /* 行业学习需求 */
  49. .client-demand-box{
  50. .demand-list-box{
  51. margin-top: 24px;
  52. li{width: 25%;display: inline-block;margin: 34px 0;text-align: center;cursor: default;}
  53. span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;}
  54. i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;}
  55. p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;}
  56. li:nth-child(1){
  57. span{background-color: rgb(0, 150, 136);}
  58. i{background-image: url("~static/images/client/index/index-demand-icon1.png");}
  59. }
  60. li:nth-child(2){
  61. span{background-color: rgb(255, 152, 0);}
  62. i{background-image: url("~static/images/client/index/index-demand-icon2.png");}
  63. }
  64. li:nth-child(3){
  65. span{background-color: rgb(234, 73, 79);}
  66. i{background-image: url("~static/images/client/index/index-demand-icon3.png");}
  67. }
  68. li:nth-child(4){
  69. span{background-color: rgb(64, 158, 255);}
  70. i{background-image: url("~static/images/client/index/index-demand-icon4.png");}
  71. }
  72. li:nth-child(5){
  73. span{background-color: rgb(255, 128, 108);}
  74. i{background-image: url("~static/images/client/index/index-demand-icon5.png");}
  75. }
  76. li:nth-child(6){
  77. span{background-color: rgb(179, 111, 238);}
  78. i{background-image: url("~static/images/client/index/index-demand-icon6.png");}
  79. }
  80. li:nth-child(7){
  81. span{background-color: rgb(72, 97, 132);}
  82. i{background-image: url("~static/images/client/index/index-demand-icon7.png");}
  83. }
  84. li:nth-child(8){
  85. span{background-color: rgb(160, 212, 104);}
  86. i{background-image: url("~static/images/client/index/index-demand-icon8.png");}
  87. }
  88. li:hover{
  89. span{transform: translateY(-8px);;}
  90. }
  91. }
  92. }
  93. /* 超过10万家客户的信任之选 */
  94. .client-customer-box{
  95. padding-bottom: 80px;
  96. img{margin: 24px auto;display: block;}
  97. /*.customer-img-box{
  98. padding-bottom: 80px;
  99. li{
  100. width: 20%;
  101. display: inline-block;
  102. }
  103. img{margin: 48px 30px 0;transition: all 0.5s;}
  104. li:hover{
  105. img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
  106. }
  107. }*/
  108. }
  109. /* 新闻资讯 */
  110. .client-news-information {
  111. background: rgb(248, 248, 248);
  112. padding-bottom: 80px;
  113. .industry-information-box {
  114. margin-top: 48px;
  115. h4{color: #333;}
  116. h4:hover {cursor: pointer;color: #3e7ce7;}
  117. // 左
  118. .industry-information-left {
  119. width: 520px;
  120. margin-right: 80px;
  121. display: inline-block;
  122. vertical-align: top;
  123. color: #333;
  124. div {float: left;border-right: 1px solid #dbdbea;padding: 8px 16px 8px 0;}
  125. img {width: 520px;height: 210px;margin-bottom: 42px;}
  126. h4 {@include setFontStyle(-2);margin-bottom: 16px;}
  127. i{width:25px;height:12px;float:right;background-image:url("~static/images/client/index/news-information-icon.png")}
  128. p {@include setFontStyle(-6);height: 68px;line-height: 22px;padding: 2px 0 0 16px;text-align: justify;@include multi-line-ellipsis(3);}
  129. b {@include setFontStyle(-4);font-weight: normal;display: block;margin-bottom: 16px;}
  130. span {@include setFontStyle(-6);display: block;color: #666;}
  131. }
  132. // 右
  133. .industry-information-right {
  134. width: 590px;
  135. display: inline-block;
  136. vertical-align: top;
  137. li {border-bottom: 1px solid #ccc;margin-bottom: 16px;}
  138. li:last-child {border: 0;}
  139. h4 {@include setFontStyle(-4);@include single-line-ellipsis;margin-bottom: 12px;}
  140. p {@include setFontStyle(-6);color: #666;@include single-line-ellipsis;margin-bottom: 16px;}
  141. span {margin: 0 30px 0 10px;}
  142. }
  143. }
  144. }
  145. // 移动端手机尺寸(0-768)
  146. @media (max-width: 768px){
  147. /* 网站banner */
  148. .client-index-banner{height: 150px;}
  149. /* banner-box */
  150. .client-banner-box{
  151. .el-carousel__container{height: 150px;}
  152. .el-carousel__item .index-carousel-box{height: 150px;background-size: cover;}
  153. // 左箭头
  154. .el-carousel__arrow--left{display: none;}
  155. // 右箭头
  156. .el-carousel__arrow--right{display: none;}
  157. // 分页
  158. .el-carousel__button {width: 6px;height: 6px;border-radius: 3px;}
  159. }
  160. /* 产品和服务 */
  161. .client-products-services{
  162. .client-title{
  163. margin-bottom: 0;
  164. }
  165. }
  166. /* 新闻资讯 */
  167. .client-newsInfo-phone{
  168. background-color: rgb(238, 238, 238);
  169. // 轮播外层
  170. .el-carousel{
  171. padding: 20px 0 40px;
  172. // card
  173. .el-carousel__item{
  174. width: 80%;left: -15%;color: rgb(16, 16, 16);background: #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;
  175. img{width: 100%;height: 135px;}
  176. }
  177. // 文字区域
  178. .newsInfo-card-content{
  179. padding: 24px 20px;
  180. h4{@include setFontStyle(-4);}
  181. span{@include setFontStyle(-8);margin-top: 16px;display: block}
  182. p{min-height: 48px;@include setFontStyle(-6);margin-top: 16px;@include multi-line-ellipsis(3);}
  183. }
  184. }
  185. }
  186. /* 超过10万家客户的信任之选 */
  187. .client-customer-box{padding-top: 50px;
  188. .customer-img-box{
  189. padding-bottom: 50px;
  190. li{width: 50%;text-align: center;}
  191. img{max-width:90%;margin: 10px 0;}
  192. li:hover{
  193. img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
  194. }
  195. }
  196. }
  197. }
  198. }
  199. /******** describe: 平台页面(考试平台、培训平台) author: TX date:2020-08-12 ********/
  200. .client-platform-page{
  201. /* 网站banner */
  202. .client-platform-banner{
  203. width: 100%;
  204. height: 640px;
  205. background-color:#042D85;
  206. position: relative;
  207. div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
  208. .free-trial-default-btn{position: absolute;top:460px;left: 50%;margin-left: -119px;}
  209. }
  210. // 考试应用场景
  211. .client-scene-box{
  212. ul{
  213. margin-top: 24px;
  214. li{width: 25%;display: inline-block;margin: 24px 0;text-align: center;cursor: default;}
  215. span{width: 100px;height: 100px;border-radius: 50%;display: inline-block;text-align: center;transition: .3s;}
  216. i{width: 60px;height: 60px;background-size: cover;display: inline-block;margin-top: 20px;}
  217. p{font-weight: 700;font-size: 20px;color: rgb(16, 16, 16);margin: 12px 0;}
  218. li:nth-child(1){
  219. span{background-color: rgb(0, 150, 136);}
  220. i{background-image: url("~static/images/client/exam/exam-scene-icon1.png");}
  221. }
  222. li:nth-child(2){
  223. span{background-color: rgb(255, 152, 0);}
  224. i{background-image: url("~static/images/client/exam/exam-scene-icon2.png");}
  225. }
  226. li:nth-child(3){
  227. span{background-color: rgb(234, 73, 79);}
  228. i{background-image: url("~static/images/client/exam/exam-scene-icon3.png");}
  229. }
  230. li:nth-child(4){
  231. span{background-color: rgb(64, 158, 255);}
  232. i{background-image: url("~static/images/client/exam/exam-scene-icon4.png");}
  233. }
  234. li:nth-child(5){
  235. span{background-color: rgb(255, 128, 108);}
  236. i{background-image: url("~static/images/client/exam/exam-scene-icon5.png");}
  237. }
  238. li:nth-child(6){
  239. span{background-color: rgb(179, 111, 238);}
  240. i{background-image: url("~static/images/client/exam/exam-scene-icon6.png");}
  241. }
  242. li:nth-child(7){
  243. span{background-color: rgb(72, 97, 132);}
  244. i{background-image: url("~static/images/client/exam/exam-scene-icon7.png");}
  245. }
  246. li:nth-child(8){
  247. span{background-color: rgb(160, 212, 104);}
  248. i{background-image: url("~static/images/client/exam/exam-scene-icon8.png");}
  249. }
  250. li:nth-child(9){
  251. span{background-color: rgb(68, 70, 147);}
  252. i{background-image: url("~static/images/client/exam/exam-scene-icon9.png");}
  253. }
  254. li:nth-child(10){
  255. span{background-color: rgb(174, 102, 66);}
  256. i{background-image: url("~static/images/client/exam/exam-scene-icon10.png");}
  257. }
  258. li:nth-child(11){
  259. span{background-color: rgb(110, 87, 123);}
  260. i{background-image: url("~static/images/client/exam/exam-scene-icon11.png");}
  261. }
  262. li:nth-child(12){
  263. span{background-color: rgb(116, 120, 124);}
  264. i{background-image: url("~static/images/client/exam/exam-scene-icon12.png");}
  265. }
  266. li:hover{
  267. span{transform: translateY(-8px);;}
  268. }
  269. }
  270. }
  271. // 轻松组织一场考试
  272. .platform-products-services{
  273. .client-title{margin-bottom: 46px;}
  274. .products-services-content{
  275. h5{margin: 0;}
  276. .client-btn-box {
  277. margin-top: 80px;
  278. }
  279. }
  280. }
  281. // 满足12大考试应用场景
  282. .client-examOrg-box{
  283. height: 560px;background-position: center;background-image: url("~static/images/client/exam/exam-org-bj.png");background-color: rgba(248, 248, 248, 0.8);background-blend-mode: overlay;background-position: center;
  284. .exam-dl-box{display: flex;justify-content: space-between;margin-top: 42px;}
  285. dt{font-weight: 400;font-size: 20px;color: rgba(0, 0, 0, 1);margin-bottom: 24px;}
  286. dd{font-weight: 400;font-size: 16px;color: rgba(0, 0, 0, 1);margin-bottom: 12px;}
  287. dd:before{width: 5px;height: 5px;background: #00aeba;content: '';display: inline-block;vertical-align: middle;margin-right: 6px;border-radius: 50%;}
  288. }
  289. // 按钮
  290. .client-btn-box{
  291. text-align: center;margin-top: 42px;
  292. .client-default-Btn,.client-default-white-Btn {
  293. width: 150px;height: 40px;line-height: 40px;display: inline-block;background: #00aeba;border: 1px solid #00aeba;box-sizing: border-box;margin-right: 24px;
  294. }
  295. .client-default-white-Btn {background: #fff;color: #00aeba;margin-right: 0;}
  296. }
  297. }
  298. /******** describe: 培训平台--图片(和考试默认图片不同) author: TX date:2020-08-14 ********/
  299. .client-train-page{
  300. /* 网站banner */
  301. .client-platform-banner{
  302. background-color:#1F2772;
  303. }
  304. /* 企业培训现状 */
  305. .train-status-box{
  306. text-align: center;
  307. .client-container{background-image:url("~static/images/client/train/train-status-bj.png");background-size: cover;background-repeat: no-repeat;background-position: center;margin: 32px auto;}
  308. p{margin-bottom: 32px;font-weight: 400;font-size: 18px;color: rgb(16, 16, 16);}
  309. .client-btn-box{margin-top: 200px;}
  310. }
  311. /* 企业培训痛点 */
  312. .train-pain-point{
  313. ul{text-align: center;margin-top: 24px;}
  314. li{
  315. width: 30%;display: inline-block;text-align: center;vertical-align: top;padding-bottom: 10px;
  316. p{font-weight: 400;font-size: 18px;color: rgb(16, 16, 16);}
  317. i{width: 55px;height: 55px;display: block;margin: 16px auto;background-size: cover;}
  318. }
  319. li:nth-child(1) i{background-image:url("~static/images/client/train/train-pain-point1.png");}
  320. li:nth-child(2) i{background-image:url("~static/images/client/train/train-pain-point2.png");}
  321. li:nth-child(3) i{background-image:url("~static/images/client/train/train-pain-point3.png");}
  322. li:nth-child(4) i{background-image:url("~static/images/client/train/train-pain-point4.png");}
  323. li:nth-child(5) i{background-image:url("~static/images/client/train/train-pain-point5.png");}
  324. li:nth-child(6) i{background-image:url("~static/images/client/train/train-pain-point6.png");}
  325. // 下边线
  326. li:nth-child(-n+3){
  327. border-bottom:1px solid #bbb;
  328. }
  329. // 右边线
  330. li:not(:nth-child(3)):not(:nth-child(6)){ border-right:1px solid #bbb;}
  331. // 按钮
  332. .client-btn-box{text-align: left}
  333. }
  334. /* 系统十大适用功能辅助授课 */
  335. .train-fzsk-box{
  336. height: 460px;background-image:url("~static/images/client/train/train-fzsk-bj.png");background-color: rgba(248, 248, 248, 0.8);
  337. background-size: cover;background-repeat: no-repeat;background-position: center;background-blend-mode: overlay;
  338. li{
  339. width: 20%;display: inline-block;text-align: center;
  340. span{width: 30px;height: 30px;line-height: 30px;border: 2px solid rgb(0, 0, 0);display: block;margin: 32px auto 16px;color: rgb(0, 0, 0);border-radius: 50%;font-size: 18px;}
  341. p{font-weight: 700;font-size: 18px;color: rgb(0, 0, 0);}
  342. }
  343. }
  344. /* 我们与优秀客户一同发展*/
  345. .client-customer-box{
  346. padding-bottom: 80px;
  347. img{margin: 24px auto;display: block;}
  348. }
  349. }
  350. /******** describe: 课程开发 author: TX date:2020-08-24 ********/
  351. .client-course-page{
  352. // 申请方案按钮
  353. .free-trial-default-btn{width:230px;display: inline-block;margin: 0}
  354. // 联系我们按钮
  355. .course-apply-btn{background: #fff;color: #00AEBA;border:1px solid #00AEBA;box-sizing: border-box;margin-left: 36px;}
  356. /* 网站banner */
  357. .client-course-banner{
  358. width: 100%;
  359. height: 640px;
  360. background-color:#042D85;
  361. position: relative;
  362. div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
  363. .free-trial-default-btn{width: 238px;position: absolute;top: 460px;left: 50%;margin: 40px auto 0;margin-left: -119px;}
  364. }
  365. /* 调转菜单栏 */
  366. .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;}
  367. .course-link-nav{
  368. width: 100%;height: 83px;background: #161B38;opacity: 0.9;
  369. a{width: 171px;height: 83px;line-height:83px;display: inline-block;@include setFontStyle(-2);color: #fff;text-align: center;}
  370. a:nth-child(1){background: #353c61;}
  371. a:nth-child(2){background: #38406a;}
  372. a:nth-child(3){background: #3c4775;}
  373. a:nth-child(4){width:174px;background: #404b81;}
  374. a:nth-child(5){background: #3c4775;}
  375. a:nth-child(6){background: #38406a;}
  376. a:nth-child(7){background: #353c61;}
  377. }
  378. // 课程定制开发流程
  379. .course-dzkf-box{
  380. display: flex;justify-content: center;margin: 32px 0 72px;
  381. div{width: 82px;display: inline-block;vertical-align: top;}
  382. i{width: 80px;height: 80px;display: block;border: 2px solid rgb(0, 174, 186);border-radius: 50%;margin-bottom: 16px;}
  383. i:before{content: '';width: 40px;height: 40px;display: block;background-size: contain;background-repeat: no-repeat;margin: 20px auto;}
  384. span{font-weight: 700;font-size: 18px;color: rgb(16, 16, 16);margin-bottom: 16px;display: block;}
  385. p{text-align: justify;font-weight: 400;font-size: 16px;color: #101010;}
  386. em{content: '';width: 30px;height: 30px;background-image: url("~static/images/client/course/course-jt-icon.svg");display: inline-block;margin: 25px 20px 0;}
  387. li:nth-child(1){i:before{background-image: url("~static/images/client/course/course-dzkf-icon1.png");}}
  388. li:nth-child(2){i:before{background-image: url("~static/images/client/course/course-dzkf-icon2.png");}}
  389. li:nth-child(3){i:before{background-image: url("~static/images/client/course/course-dzkf-icon3.png");}}
  390. li:nth-child(4){i:before{background-image: url("~static/images/client/course/course-dzkf-icon4.png");}}
  391. li:nth-child(5){i:before{background-image: url("~static/images/client/course/course-dzkf-icon5.png");}}
  392. li:nth-child(6){i:before{background-image: url("~static/images/client/course/course-dzkf-icon6.png");}}
  393. li:nth-child(7){i:before{background-image: url("~static/images/client/course/course-dzkf-icon7.png");}}
  394. }
  395. @media (max-width: 768px){
  396. /* 网站banner */
  397. .client-course-banner{height: 150px;background-size: cover;}
  398. // 菜单 ul
  399. .course-menu-ul{
  400. background: #fff;margin: 20px 0 0;
  401. 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);
  402. color: rgb(0, 102, 204);background: #fff;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);box-sizing: border-box}
  403. li.active{color: #fff;background: rgb(0, 102, 204);}
  404. li:hover{transform: none;}
  405. }
  406. // 内容区域
  407. .client-container{padding: 0;}
  408. // 申请方案按钮
  409. .free-trial-default-btn{width:122px;display: inline-block;margin: 0 0 54px;}
  410. // 联系我们按钮
  411. .course-apply-btn{margin-left: 16px;}
  412. }
  413. }
  414. /******** describe: 关于我们 author: TX date:2020-08-07 ********/
  415. .client-aboutUs-page{
  416. // banner
  417. .aboutUs-banner{
  418. width: 100%;height: 640px;background-image: url("~static/images/client/aboutUs/aboutUs-banner-bg.png");
  419. div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
  420. }
  421. // 公司简介
  422. .company-profile-box{
  423. font-size: 0;
  424. img{width: 375px;margin: 48px auto 8px;display: block;}
  425. i{width: 340px;height: 4px;background: rgba(0, 174, 186, 1);display: block;margin: 0 auto 24px;}
  426. p{font-size: 18px;color: rgb(16, 16, 16);line-height: 24px;text-align: justify;margin: 24px 60px}
  427. }
  428. // 企业文化
  429. .corporate-culture-box{
  430. ul{display: flex;justify-content: center;flex-wrap: wrap;}
  431. li{
  432. width:42%;
  433. display: inline-block;
  434. vertical-align: middle;
  435. div{
  436. width: 390px;height: 195px;background-repeat: no-repeat;background-color: rgba(0, 0, 0, 0.5);background-blend-mode: overlay;
  437. border-radius: 8px;margin: 46px auto;text-align: center;
  438. p{font-size:20px;color: #fff;line-height: 195px;}
  439. }
  440. }
  441. li:nth-child(1){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon1.png");} }
  442. li:nth-child(2){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon2.png");} }
  443. li:nth-child(3){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon3.png");} }
  444. li:nth-child(4){div{background-image: url("~static/images/client/aboutUs/corporate-culture-icon4.png");} }
  445. }
  446. // 联系我们
  447. .contact-us-box{
  448. ul{margin: 24px 0 48px;}
  449. li{
  450. width: 50%;margin: 24px 0;display: inline-block;vertical-align: middle;
  451. i{width: 30px;height: 30px;display: inline-block;background-repeat: no-repeat;background-position: center;background-size: cover;margin-right: 16px;vertical-align: middle;}
  452. span{font-weight: 700;font-size: 25px;color: rgb(16, 16, 16);display: inline-block;vertical-align: middle;}
  453. }
  454. li:nth-child(1) {
  455. i {background-image: url("~static/images/client/aboutUs/contact-us-icon1.png");}
  456. }
  457. li:nth-child(2) {
  458. i {background-image: url("~static/images/client/aboutUs/contact-us-icon2.png");}
  459. }
  460. li:nth-child(3) {
  461. i {background-image: url("~static/images/client/aboutUs/contact-us-icon3.png");}
  462. }
  463. li:nth-child(4) {
  464. i {background-image: url("~static/images/client/aboutUs/contact-us-icon4.png");}
  465. }
  466. img{max-width: 100%;display: block;}
  467. }
  468. @media (max-width: 768px){
  469. // 公司简介
  470. .company-profile-box{
  471. img{margin: 20px auto;max-width: 100%;}
  472. p{@include setFontStyle(-6);color: rgba(85, 85, 85, 1);line-height: 24px;margin: 0 10px 6px;}
  473. }
  474. // 企业文化
  475. .corporate-culture-box{
  476. padding: 50px 0 0;
  477. li{
  478. width:100%;
  479. div{
  480. height: 70px;margin: 0 10px 16px;border: 0;box-shadow: rgb(206, 206, 206) 0 0 6px -1px;padding: 14px 0;
  481. i{display: unset;float: left;margin-left: 30px;margin-bottom: 0;}
  482. h5{font-weight: 700;font-size: 16px;color: #101010;margin: 12px 0;}
  483. p{font-size: 14px;color: #101010;}
  484. }
  485. }
  486. }
  487. }
  488. }
  489. /******** describe: 新闻资讯 author: TX date:2020-08-10 ********/
  490. .client-newsInfor-page{
  491. // banner
  492. .newsInfor-banner{
  493. width: 100%;height: 640px;overflow: hidden;
  494. div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
  495. }
  496. // 菜单 ul
  497. .newsInfor-menu-ul{
  498. display: block;
  499. margin: 0 auto;
  500. text-align: center;
  501. background: #F7F9FB;
  502. 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}
  503. li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
  504. li:hover{
  505. transform: scale(1.1);
  506. }
  507. }
  508. // 页面主要内容区域
  509. .newsInfor-content-box{
  510. min-height: 304px;
  511. padding: 48px 0 80px;
  512. ul{display: inline-block;vertical-align: top}
  513. // 右侧内容区域
  514. .newsInfor-content-ul{
  515. padding: 0 32px;
  516. li{margin-bottom: 40px;cursor: pointer}
  517. li:last-child{margin-bottom: 0;}
  518. //图片
  519. .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;}
  520. //内容区域
  521. .newsInfor-list-content{
  522. width: calc(100% - 350px);
  523. display: inline-block;
  524. vertical-align: top;
  525. h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
  526. div{
  527. margin-bottom: 8px;
  528. 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");}
  529. i[type="visits"]{background-image: url("~static/images/client/newsInfor/newsInfor-details-visits.svg");}
  530. span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
  531. }
  532. 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;}
  533. a{@include setFontStyle(-6);color: #4A73FD;}
  534. a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~static/images/client/newsInfor/newsInfor-list-icon.svg");margin-left: 8px;}
  535. a:hover{cursor: pointer;}
  536. }
  537. }
  538. }
  539. @media (max-width: 768px){
  540. // 页面主要内容区域
  541. .newsInfor-content-box{
  542. min-height: unset;padding: 20px 0 50px;
  543. // 右侧内容区域
  544. .newsInfor-content-ul{
  545. width:100%;padding: 0 6%;box-sizing: border-box;
  546. li{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;margin-bottom: 20px;}
  547. //图片
  548. .newsInfor-img-box{width:100%;height:180px;display: block;margin-right:0;border-radius: 0;}
  549. //内容区域
  550. .newsInfor-list-content{
  551. width: 100%;padding: 20px;box-sizing: border-box;
  552. h5{@include setFontStyle(-4);color: rgb(16, 16, 16);margin-bottom: 12px;}
  553. div{
  554. span{margin-bottom: 0;@include setFontStyle(-8);color: rgb(16, 16, 16);}
  555. }
  556. p{height: auto;max-height: 60px;margin-bottom:0;font-size: 14px;color: rgb(16, 16, 16);line-height: 20px;}
  557. }
  558. // 分页
  559. .client-el-pagination{margin-top: 24px}
  560. }
  561. }
  562. }
  563. }
  564. /******** describe: 政府机构-详情页 author: TX date:2020-08-10 ********/
  565. .client-government-page{
  566. // banner
  567. .industrydetails-banner{background-color: #1B33B7;}
  568. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/government-banner-img.png");}
  569. // 我们的系统为您改变了什么
  570. .government-change-box{
  571. background: #F9FAFF;
  572. padding-bottom: 80px;
  573. .industrydetails-content{
  574. width: 100%;height: 312px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/government-change-bg.png");
  575. li{
  576. p{margin-left: 30px}
  577. }
  578. img{width:100px;display: inline-block;vertical-align: top;margin: 85px 25px 85px 30px;}
  579. }
  580. .change-content-left{
  581. display: inline-block;padding: 32px 0 0 64px;vertical-align: top;
  582. h5,li,li i{color: #fff;border-color: #fff;}
  583. p{color: rgba(255,255,255,0.65);}
  584. }
  585. .change-content-right{width: 525px;display: inline-block;padding-top: 64px;}
  586. }
  587. // 我们的优势
  588. .government-advantage-box{
  589. padding-bottom: 50px;
  590. h4{margin-bottom: 48px;}
  591. dl{width:33.33%;display: inline-block;margin-bottom: 30px;}
  592. dt{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 16px}
  593. dd{@include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-left: 33px;}
  594. 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;}
  595. .government-advantage-content{margin-right: -100px;padding: 4px 0 0 4px;}
  596. }
  597. @media (max-width: 768px) {
  598. // 我们的系统为您改变了什么
  599. .government-change-box{
  600. background: rgb(238, 238, 238);padding: 0 15px;
  601. .industrydetails-content{
  602. height: auto;margin-top: 20px;background-image:unset;position: relative;
  603. li{
  604. p{margin-left: 20px}
  605. }
  606. img{width:80px;display:block;margin: -60px auto;position: absolute;left: 50%;margin-left: -40px;}
  607. }
  608. .change-content-left,.change-content-right{
  609. width: 100%;box-sizing: border-box;margin-bottom: 20px;
  610. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  611. i{border-color: #fff;opacity: 1;}
  612. }
  613. .change-content-left{background-color: rgb(0, 102, 204);padding: 20px 16px;}
  614. .change-content-right{background-color: rgb(255, 186, 0);padding: 60px 16px 36px;}
  615. }
  616. }
  617. }
  618. /******** describe: 金融保险-详情页 author: TX date:2020-09-01 ********/
  619. .client-finance-page{
  620. // banner
  621. .industrydetails-banner{background-color: #593513;}
  622. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/finance-banner-img.png");}
  623. // 金融行业的问题
  624. .finance-question-box{
  625. background: #F9FAFF;
  626. padding: 80px 0;
  627. .finance-question-top{
  628. width: 946px;height: 104px;background-image: url("~static/images/client/industrydetails/finance-question-bg.png");margin: 0 auto 48px;
  629. h5{height: 104px;line-height:104px;display: inline-block;@include setFontStyle(10);color: rgba(255,255,255,0.85);padding: 0 56px}
  630. h5:first-child{margin-right: 180px;color: rgba(0,0,0,0.85);}
  631. }
  632. ul{
  633. 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;
  634. i{width: 12px;height: 12px;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;border:0;transform: rotate(0deg);opacity: 1;}
  635. p{margin-left: 30px;}
  636. }
  637. .finance-question-right{
  638. border: 1px solid #FF6226;
  639. i{background-image: linear-gradient(90deg, #FF6226 0%, #FFFFFF 100%);}
  640. }
  641. }
  642. @media (max-width: 768px) {
  643. .finance-question-box{background-color: rgb(238, 238, 238);padding: 20px 15px 30px;}
  644. .phone-class-box{
  645. ul{
  646. border: 0;width: 100%;margin: 0;padding: 20px 0 0;min-height: unset;
  647. li{margin-bottom: 10px;}
  648. i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;border: 1px solid #fff;opacity: 1;border-radius:0;
  649. float: left;box-sizing: border-box;display: block;transform: rotate(45deg);background-image: unset;}
  650. p{font-size: 14px;color: white;line-height: 24px;margin-left: 20px;text-align: justify;}
  651. }
  652. h4{color: #fff;}
  653. img {width: 130px;display: block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
  654. .financial-tradition-phone{background-color: rgb(0, 102, 204);margin: 0 0 20px;padding: 0 16px 20px;}
  655. .financial-solve-phone{background-color: rgb(247, 109, 0);padding: 40px 16px 36px;}
  656. }
  657. }
  658. }
  659. /******** describe: 信息产业-详情页 author: TX date:2020-09-02 ********/
  660. .client-information-page{
  661. // banner
  662. .industrydetails-banner{background-color: #070B20;}
  663. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/information-banner-img.png");}
  664. // 我们的系统为您改变了什么
  665. .information-change-box{
  666. background: #F9FAFF;
  667. padding-bottom: 80px;
  668. .industrydetails-content{
  669. width: 100%;height: 300px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/information-change-bg.png");
  670. li{
  671. p{margin-left: 30px;}
  672. }
  673. img{display: inline-block;vertical-align: top;margin: 120px 30px auto 70px;}
  674. }
  675. .change-content-left{
  676. display: inline-block;padding: 48px 0 0 64px;vertical-align: top;
  677. h5,li,li i{color: #fff;border-color: #fff;}
  678. p{color: rgba(255,255,255,0.65);}
  679. }
  680. .change-content-right{width: 500px;display: inline-block;padding-top: 36px;}
  681. }
  682. @media (max-width: 768px) {
  683. // 我们的系统为您改变了什么
  684. .information-change-box{
  685. background-color: rgb(238, 238, 238);padding: 0 15px 15px;
  686. .industrydetails-content{
  687. height: auto;margin-top: 20px;background-image:unset;position: relative;
  688. li{
  689. p{margin-left: 20px}
  690. }
  691. img{width:130px;display:block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
  692. }
  693. .change-content-left,.change-content-right{
  694. width: 100%;box-sizing: border-box;margin-bottom: 20px;
  695. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  696. i{border-color: #fff;opacity: 1;}
  697. }
  698. .change-content-left{background-color: rgb(14, 60, 106);padding: 20px 16px;}
  699. .change-content-right{background-color: rgb(164, 3, 3);padding: 60px 16px 36px;}
  700. }
  701. }
  702. }
  703. /******** describe: 能源化工-详情页 author: TX date:2020-09-02 ********/
  704. .client-energy-page{
  705. // banner
  706. .industrydetails-banner{background-color: #073A44;}
  707. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/energy-banner-img.png");}
  708. // 我们的系统为您改变了什么
  709. .energy-change-box{
  710. background: #F9FAFF;
  711. padding-bottom: 80px;
  712. // 模块上半部分
  713. .change-box-top{
  714. width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;
  715. i{border: 1px solid #fff;}
  716. }
  717. // 模块下半部分
  718. .change-box-bottom{
  719. width: 1100px;height: 368px;padding: 24px;box-sizing: border-box;border-radius: 8px;background: #FE552C;margin-left: 100px;margin-top:-24px;position: relative;
  720. h5{margin-top: 55px;}
  721. li:nth-of-type(odd){p{margin-right: 60px}}
  722. }
  723. h5{color: rgba(255,255,255,0.85);}
  724. li{
  725. width: 50%;display: inline-block;@include setFontStyle(-6);color: rgba(255,255,255,0.65);line-height: 22px;vertical-align: top;
  726. p{margin-left: 30px;color: rgba(255,255,255,0.65);}
  727. }
  728. img{position: absolute;top: -70px;left: 50%;margin-left: -50px;}
  729. }
  730. @media (max-width: 768px) {
  731. // 我们的系统为您改变了什么
  732. .energy-change-box{
  733. background-color: rgb(238, 238, 238);padding: 0 15px 15px;
  734. // 模块上半部分
  735. .change-box-top{width: 100%;height:auto;padding: 20px 16px;margin:20px 0 20px;border-radius:0;}
  736. // 模块下半部分
  737. .change-box-bottom{width: 100%;height:auto;padding: 60px 16px 36px;margin:0 0 20px;border-radius:0;background-color: rgb(255, 115, 5);}
  738. .change-box-top,.change-box-bottom{
  739. i{border: 1px solid #fff;opacity: 1;}
  740. h5{margin-top: 20px;color: #fff;}
  741. li:nth-of-type(odd){p{margin-right: 0}}
  742. }
  743. li{
  744. width: 100%;display: block;
  745. p{margin-left: 20px;color: #fff;}
  746. }
  747. }
  748. }
  749. }
  750. /******** describe: 交通运输-详情页 author: TX date:2020-09-02 ********/
  751. .client-traffic-page{
  752. // banner
  753. .industrydetails-banner{background-color: #0A2F41;}
  754. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/traffic-banner-img.png");}
  755. // 我们的系统为您改变了什么
  756. .traffic-change-box{
  757. background: #F9FAFF;
  758. padding-bottom: 80px;
  759. .change-content-left,.change-content-right{
  760. width: 462px;height: 359px;display:inline-block;background-repeat: no-repeat;vertical-align: top;margin-top: 48px;
  761. h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
  762. ul{margin-top: 80px;margin-left: 32px;}
  763. i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;margin-top: 5px;}
  764. }
  765. .change-content-left{background-image: url("~static/images/client/industrydetails/traffic-left-bg.png");margin-right: 104px;}
  766. .change-content-right{background-image: url("~static/images/client/industrydetails/traffic-right-bg.png");}
  767. }
  768. @media (max-width: 768px) {
  769. // 我们的系统为您改变了什么
  770. .traffic-change-box{
  771. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  772. .change-content-left,.change-content-right{
  773. width: 100%;height: unset;margin:0;box-sizing: border-box;
  774. ul{margin: 0;}
  775. h5{height: unset;line-height: unset;@include setFontStyle(-4);color: rgba(255, 255, 255, 1);margin-bottom: 16px;text-align: center;font-weight: 700;}
  776. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  777. i{width: 10px;height: 10px;border-color: #fff;opacity: 1;border-radius: 0;}
  778. }
  779. .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;background-image:unset;margin: 20px 0;}
  780. .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;background-image:unset;}
  781. }
  782. }
  783. }
  784. /******** describe: 教育行业-详情页 author: TX date:2020-09-02 ********/
  785. .client-education-page{
  786. // banner
  787. .industrydetails-banner{background-color: #085903;}
  788. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/education-banner-img.png");}
  789. // 我们的系统为您改变了什么
  790. .education-change-box{
  791. background: #F9FAFF;padding-bottom: 80px;
  792. img{position: absolute;top: 50%;margin-top: -78px;left:50%;margin-left: -54px;}
  793. .industrydetails-content{position: relative;}
  794. .change-content-left,.change-content-right{height: 338px;box-sizing: border-box;}
  795. .change-content-left{width: 637px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");}
  796. .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;}
  797. }
  798. @media (max-width: 768px) {
  799. .education-change-box{
  800. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  801. img{width:100px;margin: -105px auto;margin-left: -50px;}
  802. .mt48{margin-top: 20px;}
  803. .change-content-left,.change-content-right{
  804. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  805. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  806. i{border-color: #fff;opacity: 1;}
  807. }
  808. .change-content-left{background-color: rgb(50, 159, 132);padding: 20px 16px 52px;}
  809. .change-content-right{background-color: rgb(249, 163, 97);padding: 60px 16px 16px;}
  810. }
  811. }
  812. }
  813. /******** describe: 食品餐饮-详情页 author: TX date:2020-09-03 ********/
  814. .client-restaurant-page{
  815. // banner
  816. .industrydetails-banner{background-color: #1C1E21;}
  817. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/restaurant-banner-img.png");}
  818. // 我们的系统为您改变了什么
  819. .restaurant-change-box{
  820. background: #F9FAFF;
  821. padding-bottom: 80px;
  822. .industrydetails-content{
  823. position: relative;
  824. img{position: absolute;top:50%;left: 50%;margin-top: -40px;margin-left: -45px;}
  825. }
  826. .change-content-left,.change-content-right{
  827. width: 552px;height: 328px;display:inline-block;background-repeat: no-repeat;vertical-align: top;
  828. h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
  829. ul{margin-top: 32px;margin-left: 48px;}
  830. }
  831. .change-content-left{background-image: url("~static/images/client/industrydetails/restaurant-left-bg.png");margin-right: 90px;}
  832. .change-content-right{background-image: url("~static/images/client/industrydetails/restaurant-right-bg.png");}
  833. }
  834. @media (max-width: 768px) {
  835. // 我们的系统为您改变了什么
  836. .restaurant-change-box{
  837. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  838. .mt48{margin-top: 20px;}
  839. .industrydetails-content img{margin-top: -85px;}
  840. .change-content-left,.change-content-right{
  841. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  842. ul{margin: 0;}
  843. h5{height: unset;line-height: unset;color: #fff;}
  844. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  845. i{border-color: #fff;opacity: 1;}
  846. }
  847. .change-content-left{background-color: rgb(240, 112, 112);padding: 20px 16px;}
  848. .change-content-right{background-color: rgb(255, 207, 78);padding: 60px 16px 16px;}
  849. }
  850. }
  851. }
  852. /******** describe: 医疗卫生-详情页 author: TX date:2020-09-03 ********/
  853. .client-medical-page{
  854. // banner
  855. .industrydetails-banner{background-color: #2178E0;}
  856. .industrydetails-banner-box{background-image: url("~static/images/client/industrydetails/medical-banner-img.png");}
  857. // 我们的系统为您改变了什么
  858. .medical-change-box{
  859. background: #F9FAFF;
  860. padding-bottom: 80px;
  861. .industrydetails-content{width: 1200px;height: 316px;background-image: url("~static/images/client/industrydetails/medical-change-bg.png");}
  862. .change-content-left,.change-content-right{
  863. width: 500px;display:inline-block;vertical-align: top;
  864. ul{margin-left: 48px;}
  865. h5{margin-top: 36px;color: rgba(255,255,255,0.85);}
  866. p{color: rgba(255,255,255,0.65);}
  867. i{border-color: #fff;}
  868. }
  869. .change-content-left{margin-right: 180px;}
  870. }
  871. @media (max-width: 768px) {
  872. .medical-change-box{
  873. background-color: rgb(238, 238, 238);padding: 0 15px 30px;
  874. .industrydetails-content{width: 100%;height: unset;background-image:unset;}
  875. .mt48{margin-top: 20px;}
  876. .change-content-left,.change-content-right{
  877. width: 100%;height:unset;box-sizing: border-box;margin-bottom: 20px;background-image: unset;float: unset;margin: 0 0 20px;
  878. ul{margin: 0;}
  879. h5{height: unset;line-height: unset;color: #fff;margin-top: 0;}
  880. p{@include setFontStyle(-6);color: rgba(255, 255, 255, 1);line-height: 24px;}
  881. i{border-color: #fff;opacity: 1;}
  882. }
  883. .change-content-left{background-color: rgb(31, 104, 176);padding: 20px 16px;}
  884. .change-content-right{background-color: rgb(234, 118, 27);padding: 20px 16px;}
  885. }
  886. }
  887. }
  888. /******** describe: 1-X-详情页 author: TX date:2020-09-03 ********/
  889. .client-indexEducation-page{
  890. padding-bottom: 80px;
  891. .client-platform-banner{
  892. background-color: #04004a;
  893. .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;
  894. position: absolute;top: 330px;left: 50%;margin-left: -150px;}
  895. .client-default-white-Btn{background: #fff;color: #3e7ce7;left: 50%;margin-left: 30px;}
  896. }
  897. @media (max-width: 768px){
  898. padding-bottom: 15px;
  899. .client-platform-banner{
  900. .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;top: 105px;margin-left: -130px}
  901. .client-default-white-Btn{background: #fff;color: #3e7ce7;left: 50%;margin-left: 10px;}
  902. }
  903. }
  904. }
  905. /******** describe: 课程资源 author: TX date:2020-09-03 ********/
  906. .client-resources-page{
  907. // 为企业培训打造学习矩阵
  908. .products-services-content p{line-height: 52px;}
  909. // 蓝色提醒文字
  910. .blue-big-size{
  911. font-size: 26px;color: #3e7ce7;padding: 0 5px;
  912. }
  913. // 课程内容形式多样
  914. .course-learn-box{
  915. // video列表
  916. .learn-box-list{
  917. margin: 54px -16px 0;
  918. li{
  919. width: 33.33%;display: inline-block;
  920. a{display: none;}
  921. div{background: #fff;border-radius: 8px;margin: 0 16px 40px;box-shadow: 0 0 7px 2px #f5f2ff;}
  922. span{width:342px;height:192px;display: inline-block;margin-top: 16px;border-radius:4px;overflow: hidden;position: relative}
  923. i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
  924. left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
  925. img{transition: all 0.5s;}
  926. p{@include setFontStyle(-4);color: #3e7ce7;padding: 24px 16px 16px;text-align: left}
  927. .course-explain-black{@include setFontStyle(-4);color: #333;line-height: 24px;padding: 0 16px 24px;}
  928. }
  929. li span:hover{img{transform: scale(1.1);}}
  930. li i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
  931. }
  932. }
  933. // banner背景色
  934. .client-platform-banner{background-color: #03022e;}
  935. // 新闻资讯
  936. .platform-news-information{background: #fff;}
  937. // 按钮
  938. .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;border: 1px solid #00AEBA;background: #00AEBA;margin-right: 24px;margin-bottom: 0;}
  939. .client-default-white-Btn{background: #fff;color:#00AEBA;margin-right: 0 }
  940. // 为企业培训打造学习矩阵
  941. .products-services-box{
  942. margin-top: 24px;
  943. img{width: 640px;}
  944. .products-services-content{
  945. width: 400px;
  946. p{font-weight: 700;font-size: 18px;color: rgb(16, 16, 16);}
  947. }
  948. }
  949. @media (max-width: 768px){
  950. // 为企业培训打造学习矩阵
  951. .products-services-content p{font-size: 14px;line-height: 40px;text-align: center;color: #101010;}
  952. // 蓝色提醒文字
  953. .blue-big-size{font-size: 18px;}
  954. // 按钮box
  955. .default-Btn-box{text-align: center}
  956. // 视频列表
  957. .course-learn-box{
  958. margin:0;background-color: rgb(238, 238, 238);
  959. .client-container {padding: 0 15px;}
  960. .learn-box-list{
  961. margin: 20px 0;
  962. li {
  963. width: 100%;
  964. div{box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;border-radius:0;margin: 0 16px;}
  965. span {width: 100%;height: 180px;margin-top: 0;border-radius: 0;}
  966. img {max-width: 100%;}
  967. p {font-size: 14px;padding: 16px 0;text-align: center;}
  968. .course-explain-black{font-size: 14px;text-align: left;padding: 0 16px 20px;}
  969. }
  970. }
  971. }
  972. // 按钮
  973. .client-default-Btn,.client-default-white-Btn{width: 122px;height: 35px;line-height: 35px;margin:0 8px 42px;}
  974. }
  975. }
  976. /******** describe: 考试系统更新日志 author: TX date:2020-09-03 ********/
  977. .client-checklog-page{
  978. // banner
  979. .client-checklog-banner{
  980. width: 100%;height: 300px;background-color: rgb(0, 102, 204);text-align: center;
  981. h4{font-size: 56px;color: rgba(255, 255, 255, 1);font-weight: bold;padding-top: 64px;}
  982. p{font-size: 28px;color: rgb(255, 255, 255);padding-top: 24px;}
  983. }
  984. // 数据展示
  985. .log-data-show{
  986. height: 200px;
  987. border-color: rgb(187, 187, 187);
  988. border-width: 1px;
  989. border-style: solid;
  990. box-shadow: rgb(121, 188, 255) 0px 2px 6px 0px;
  991. border-radius: 10px;
  992. padding: 24px;
  993. box-sizing: border-box;
  994. display: flex;
  995. justify-content: space-evenly;
  996. margin-top: -64px;
  997. background: #fff;
  998. div{
  999. display: inline-block;text-align: center;
  1000. span{font-size: 24px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 32px;display: inline-block;}
  1001. p{font-size: 54px;color: rgba(39, 137, 221, 1);font-weight: bold;padding-top: 10px;}
  1002. }
  1003. i{width: 1px;height: 150px;background: lightgray;display: inline-block;}
  1004. }
  1005. // 日志内容
  1006. .log-content-box{
  1007. margin: 52px auto 100px;color: rgb(16, 16, 16);
  1008. li{
  1009. color: rgb(16, 16, 16);border-bottom: 1px dashed #ccc;padding: 0 88px;
  1010. h5{font-size: 18px;margin: 14px 0;font-weight: bold;}
  1011. span{font-size: 18px;margin-bottom: 14px;display: block;font-weight: bold;}
  1012. div{margin-bottom: 14px;}
  1013. i{width: 12px;height: 1px;display: inline-block;background: #bbb;vertical-align: top;margin: 10px 6px 10px 0;}
  1014. p{width: 1000px;font-size: 16px;display: inline-block;vertical-align: middle;line-height: 24px;color: #000;text-align: justify}
  1015. }
  1016. li:last-child{border: 0;}
  1017. }
  1018. }
  1019. /******** describe: 体验中心 author: TX date:2021-06-09 ********/
  1020. .tiyan-center-page{
  1021. // 久创锐康在线考试系统体验版
  1022. .experience-ul-box{
  1023. text-align: center;margin-top: 36px;
  1024. li{width: 30%;display: inline-block;text-align: center;}
  1025. div{box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;width: 90%;border-radius: 8px;margin: 0 auto;padding: 24px 0;}
  1026. i{width: 128px;height: 128px;background-size: contain;display: block;background-repeat: no-repeat;margin: 0 auto 32px;background-position: center;}
  1027. li:nth-child(1) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon1.png");}
  1028. li:nth-child(2) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon2.png");}
  1029. li:nth-child(3) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon3.png");}
  1030. h4{font-weight: 400;font-size: 24px;color: rgb(16, 16, 16);margin: 16px 0;}
  1031. p{font-weight: 400;font-size: 16px;color: rgb(16, 16, 16);}
  1032. span{font-weight: 700;font-size: 16px;color: rgb(255, 0, 0);}
  1033. a{width: 200px;height: 40px;line-height: 40px;margin: 0 auto 16px;background: #00aeba;font-size: 14px;color: #fff;display: block;border-radius: 4px;}
  1034. }
  1035. .peixun-ul-box{
  1036. margin-bottom: 80px;
  1037. li:nth-child(1) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon1.png");}
  1038. li:nth-child(2) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon2.png");}
  1039. li:nth-child(3) i{background-image:url("~static/images/client/tiyanCenter/tiyan-kaoshi-icon3.png");}
  1040. }
  1041. }
  1042. // 系统维护弹窗
  1043. .system-maintain-dialog{
  1044. .el-dialog{width: 540px;height: 380px;background-image:url("~static/images/client/tiyanCenter/ty-dialog-bj.jpg");}
  1045. }
  1046. /******** describe: 课程开发解决方案 author: TX date:2021-08-06 ********/
  1047. .course-develop-page{
  1048. // 标题
  1049. .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;}
  1050. // form
  1051. .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;}
  1052. // 滑块px
  1053. .nc-container{
  1054. overflow: hidden;height: 52px;
  1055. .nc_wrapper{width:100%!important;margin-bottom: 22px;border-radius: 5px;overflow: hidden;}
  1056. .nc_scale{
  1057. height: 30px;
  1058. .scale_text{overflow: hidden;line-height: 30px;}
  1059. span{width:40px;height: 30px;line-height: 30px;border-radius: 5px;border: 1px solid rgb(187, 187, 187);box-sizing: border-box;overflow: hidden}
  1060. }
  1061. .btn_ok{margin-left: -1px;}
  1062. }
  1063. // 输入框-验证码
  1064. .course-develop-input-code{width: calc(100% - 122px);}
  1065. .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;}
  1066. // 公司名称
  1067. .dialog-input-company{
  1068. .el-form-item__content{display: grid;}
  1069. }
  1070. // 表单按钮
  1071. .form-blue-btn,.form-border-btn{
  1072. 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;
  1073. }
  1074. .form-blue-btn{background-color: rgb(0, 102, 204);border-color:rgb(0, 102, 204);}
  1075. .form-border-btn{display:block;border-color:rgb(0, 102, 204);color:rgb(0, 102, 204);margin-top: 20px; }
  1076. // 咨询电话
  1077. .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;}
  1078. // 产品
  1079. .dialog-input-company{text-align: center;padding: 0;}
  1080. }
  1081. /******** describe: 注册页面--手机 author: TX date:2021-08-06 ********/
  1082. .register-phone-page{
  1083. // 标题
  1084. .course-develop-title{font-size: 20px;}
  1085. // 咨询电话
  1086. .course-develop-tel{margin: 46px 0;}
  1087. }
  1088. /******** describe: 复制路径页面--手机 author: TX date:2021-08-06 ********/
  1089. .copy-url-page{
  1090. background: #fff;height: 100vh;
  1091. // 底部
  1092. .success-body-box{
  1093. img{max-width: 100%;padding: 30px;box-sizing: border-box;}
  1094. p{font-weight: 700;font-size: 20px;color: rgb(31, 104, 176);text-align: center;margin: 4px 0;}
  1095. 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;}
  1096. a{width: 122px;height: 36px;line-height:36px;background-color: rgb(234, 118, 27);color: rgb(255, 255, 255);
  1097. border-radius: 5px;font-size: 14px;display: block;margin: 0 auto;text-align: center}
  1098. }
  1099. }
  1100. /******** describe: 企业微课制作 author: TX date:2021-09-13 ********/
  1101. .client-makeCourse-page{
  1102. .client-platform-banner{
  1103. background-color: #22252A;
  1104. .free-trial-default-btn{background: #f76377}
  1105. }
  1106. // 按钮
  1107. .btn-big-box{width: 263px;margin: 50px auto 0;display: block;text-align: center;}
  1108. // 页面标题
  1109. .make-course-title {width: 100%;font-size: 24px;font-weight: normal;margin-bottom: 35px;padding-left: 10px;color: #333;text-align: center}
  1110. .course-blue-title{color: #3E7BE6;}
  1111. // 页面文字
  1112. .make-course-h2{
  1113. width: 100%;text-align: center;padding: 40px 0;border-bottom: 1px solid #CCC;
  1114. img{max-width: 100%;}
  1115. }
  1116. // 基本介绍
  1117. .makeCourse-introduce-box{
  1118. margin: 64px 0;
  1119. dl {
  1120. width: 580px;float: left;padding-top: 100px;padding-left: 20px;
  1121. h3{text-align: left}
  1122. dt {width: 100%;font-size: 18px;font-weight: normal;margin-bottom: 35px;color: #333;padding-left: 10px;}
  1123. }
  1124. }
  1125. .contrary-introduce-box{
  1126. margin-bottom: 88px;
  1127. dl {
  1128. width: 480px;float: right;padding-top: 0;height: 350px;
  1129. dt {margin-bottom: 20px;}
  1130. dd{margin-top: 35px;}
  1131. }
  1132. }
  1133. // 课程目标
  1134. .course-target-box{
  1135. background: #F8F8F8;padding: 42px 0;
  1136. li{
  1137. width: 20%;display: inline-block;
  1138. div{text-align: center;background: #fff;margin: 5px;padding: 24px 0;}
  1139. img{height: 100px;margin-bottom: 24px;}
  1140. span{text-align: center;font-size: 18px;color: #333;display: block}
  1141. }
  1142. }
  1143. // 培训讲师介绍
  1144. .px-teacher-box{
  1145. margin: 60px 0;
  1146. .teacher-content-box{display: flex;justify-content: space-between;align-items: center;}
  1147. span{display: block;font-size: 18px;color: #333;text-align: center;}
  1148. p{margin-left: 70px;line-height: 50px;}
  1149. .btn-big-box{margin-top: 32px;}
  1150. }
  1151. // 课程体系
  1152. .course-system-box{
  1153. padding: 32px 0;
  1154. .course-system-img{margin-bottom: 40px;max-width: 100%;}
  1155. img{max-width: 100%;}
  1156. }
  1157. // 微课设计
  1158. .course-learn-box{
  1159. padding: 64px 0;
  1160. .learn-box-list li div{margin: 0 16px 0;}
  1161. }
  1162. // 报名学习
  1163. .sign-study-box{
  1164. width: 100%;
  1165. .study-gj-box{width: 100%;height: 298px;background-image:url("~static/images/client/makeCourse/sign-study-bj.png");
  1166. margin-top: 20px;border-radius: 8px;bottom: -20px;position: relative;}
  1167. .sign-study-content{
  1168. position: absolute;bottom: 74px;font-size: 0;left: 76px;
  1169. .el-input{
  1170. width: 400px;font-size: 16px;
  1171. .el-input__inner{height: 64px;display: inline-block;border-radius: 0;font-size: 16px}
  1172. .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
  1173. font-size: 16px;
  1174. }
  1175. .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
  1176. font-size: 16px;
  1177. }
  1178. .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
  1179. font-size: 16px;
  1180. }
  1181. }
  1182. .el-button{width:150px;height:64px;display: inline-block;margin-left: -1px;font-size: 16px}
  1183. }
  1184. }
  1185. @media (max-width: 768px) {
  1186. // 按钮
  1187. .client-default-Btn{width: 120px;height: 35px;line-height: 35px;margin: 32px auto 0;}
  1188. // 页面标题
  1189. .make-course-title {font-size: 16px;margin-bottom: 16px;color: #3E7BE6;padding-left: 0;font-weight: bold;}
  1190. // 页面文字
  1191. .make-course-h2{
  1192. padding: 32px 0;
  1193. }
  1194. // 基本介绍
  1195. .makeCourse-introduce-box{
  1196. margin: 32px 0;
  1197. img{max-width: 100%;display: block;margin: 0 auto;}
  1198. dl {
  1199. width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;
  1200. h3{text-align: center;}
  1201. dt {font-size: 14px;margin-bottom: 16px;color: #555555;padding-left: 0;line-height: 24px}
  1202. }
  1203. }
  1204. .contrary-introduce-box{
  1205. dl {
  1206. width: 100%;float: unset;padding: 24px 10px;box-sizing: border-box;text-align: center;height: unset;
  1207. dt {margin-bottom: 4px;}
  1208. }
  1209. }
  1210. // 课程目标
  1211. .course-target-box{
  1212. background: #F8F8F8;padding: 16px 0 32px;
  1213. h3{font-size: 18px;color: #333;margin: 12px 0;text-align: center}
  1214. ul{text-align: center;}
  1215. li{
  1216. width: 33.33%;
  1217. div{margin: 6px;padding: 16px 0;}
  1218. img{height: 40px;margin-bottom: 10px;}
  1219. span{font-size: 16px;color: #333;}
  1220. }
  1221. .btn-big-box{margin-top: 50px;}
  1222. }
  1223. // 培训讲师介绍
  1224. .px-teacher-box{
  1225. margin: 32px 0;
  1226. .teacher-img-box{
  1227. width: 80px;padding: 0;box-sizing: border-box;flex-shrink: 0;
  1228. img{width: 80px;display: inline-block;vertical-align: middle;}
  1229. }
  1230. .teacher-content-box{display: flex;justify-content: space-between;}
  1231. span{font-size: 16px;margin: 10px 0;}
  1232. p{font-size: 14px;line-height: 24px;margin: 10px 12px;text-align: justify;}
  1233. .btn-big-box{margin-top: 32px;}
  1234. }
  1235. // 微课设计
  1236. .course-learn-box{
  1237. padding: 32px 0;
  1238. .client-container{padding: 0}
  1239. .learn-box-list li div{margin: 0}
  1240. }
  1241. // 报名学习
  1242. .sign-study-box{
  1243. background: #3776ff;
  1244. .client-container{padding: 0;}
  1245. .study-gj-box{height:180px;background-image:url("~static/images/client/makeCourse/sign-study-sjBj.png");background-size: contain;background-repeat: no-repeat;
  1246. bottom: 0;border-radius: 0;background-position: center;}
  1247. .sign-study-content{
  1248. bottom: 40px;left: 40px;right: 40px;
  1249. .el-input{
  1250. width: 68%;font-size: 14px;vertical-align: middle;
  1251. .el-input__inner{height: 38px;font-size: 14px}
  1252. .el-input__inner::-webkit-input-placeholder { /* WebKit browsers */
  1253. font-size: 14px;
  1254. }
  1255. .el-input__inner::-moz-placeholder { /* Mozilla Firefox 19+ */
  1256. font-size: 14px;
  1257. }
  1258. .el-input__inner:-ms-input-placeholder { /* Internet Explorer 10+ */
  1259. font-size: 14px;
  1260. }
  1261. }
  1262. .el-button{width:32%;height:38px;font-size: 14px;border-radius: 2px;vertical-align: middle; padding: 0;}
  1263. }
  1264. }
  1265. }
  1266. }
  1267. }