customerNew.less 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. .bannar {
  2. width: 100%;
  3. height: 57.5rem;
  4. position: relative;
  5. .bannar_text {
  6. position: absolute;
  7. left: 9.875rem;
  8. bottom: 4.375rem;
  9. .bannar_text_item {
  10. font-family: PingFangSC, PingFang SC;
  11. font-size: 34px;
  12. color: #5c5d61;
  13. line-height: 4.375rem;
  14. }
  15. .bannar_text_title {
  16. font-size: 5.625rem;
  17. color: #12174e;
  18. margin-bottom: 3.75rem;
  19. }
  20. }
  21. }
  22. // 客户一体化
  23. .customer_integration {
  24. width: 100%;
  25. height: 51.875rem;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. .customer_integration_conter {
  30. display: flex;
  31. flex-direction: column;
  32. justify-content: center;
  33. .integrationImg {
  34. width: 180px;
  35. height: 180px;
  36. padding-bottom: 0.625rem;
  37. margin: auto;
  38. img {
  39. width: 100%;
  40. height: 100%;
  41. }
  42. }
  43. .integrationText {
  44. font-size: 34px;
  45. color: #354155;
  46. }
  47. }
  48. }
  49. // 核心功能
  50. .core {
  51. background: #f8f9ff;
  52. width: 100%;
  53. position: relative;
  54. padding: 6.25rem 0 6rem 0;
  55. .core-title {
  56. color: #000000;
  57. font-size: 3.125rem;
  58. padding-bottom: 1.4375rem;
  59. text-align: center;
  60. }
  61. .core-text {
  62. color: #5a5a5a;
  63. font-size: 1.625rem;
  64. text-align: center;
  65. }
  66. .core-content {
  67. padding-top: 4.875rem;
  68. width: 100rem;
  69. height: 41.25rem;
  70. margin: auto;
  71. display: flex;
  72. justify-content: space-between;
  73. flex-wrap: wrap;
  74. .core-content-item {
  75. width: 31.875rem;
  76. height: 18.75rem;
  77. display: flex;
  78. flex-direction: column;
  79. justify-content: flex-end;
  80. background: #fff;
  81. position: relative;
  82. box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.06);
  83. .item-img {
  84. width: 14.375rem;
  85. height: 14.375rem;
  86. position: absolute;
  87. top: 0.875rem;
  88. right: 3.75rem;
  89. img {
  90. width: 100%;
  91. height: 100%;
  92. }
  93. }
  94. .item-text {
  95. height: 4.125rem;
  96. display: flex;
  97. align-items: center;
  98. line-height: 2.0625rem;
  99. font-size: 1.5rem;
  100. color: #5a5a5a;
  101. padding: 1.625rem 0 1.75rem 2.3125rem;
  102. position: relative;
  103. z-index: 1;
  104. }
  105. .item-title {
  106. font-size: 2rem;
  107. color: #000000;
  108. padding-left: 2.3125rem;
  109. }
  110. }
  111. }
  112. }
  113. // 需求
  114. .demand {
  115. background: #fff;
  116. width: 100%;
  117. height: 62.5rem;
  118. padding: 7.0625rem 0 7.75rem 0;
  119. display: flex;
  120. flex-wrap: wrap;
  121. justify-content: center;
  122. align-content: space-around;
  123. .demand-title {
  124. width: 100%;
  125. text-align: center;
  126. font-size: 3.125rem;
  127. color: #000000;
  128. }
  129. .demand-content {
  130. position: relative;
  131. width: 59.375rem;
  132. height: 46.875rem;
  133. padding-bottom: 1.375rem;
  134. .demand-item {
  135. position: absolute;
  136. .demand-item-title {
  137. display: flex;
  138. align-items: center;
  139. font-size: 1.75rem;
  140. color: #000000;
  141. .item-title-img {
  142. width: 2.5rem;
  143. height: 2.5rem;
  144. }
  145. }
  146. .demand-item-text {
  147. font-weight: 500;
  148. font-size: 1.375rem;
  149. color: #5a5a5a;
  150. line-height: 2.25rem;
  151. padding-top: 0.25rem;
  152. }
  153. }
  154. .orientation1 {
  155. top: 2.75rem;
  156. left: -6.875rem;
  157. }
  158. .orientation2 {
  159. top: 2.75rem;
  160. right: -11.75rem;
  161. }
  162. .orientation3 {
  163. top: 17.875rem;
  164. left: -23.75rem;
  165. }
  166. .orientation4 {
  167. top: 17.875rem;
  168. right: -22.625rem;
  169. }
  170. .orientation5 {
  171. bottom: 2rem;
  172. left: -6.4375rem;
  173. }
  174. .orientation6 {
  175. bottom: 2rem;
  176. right: -4.0625rem;
  177. }
  178. }
  179. img {
  180. width: 100%;
  181. height: 100%;
  182. }
  183. }
  184. // 特色展示
  185. .exhibition {
  186. width: 100%;
  187. padding: 6rem 0;
  188. background: #f8f9ff;
  189. .exhibition-title {
  190. text-align: center;
  191. font-size: 3.125rem;
  192. line-height: 4.375rem;
  193. padding-bottom: 1.6875rem;
  194. }
  195. .exhibition-content {
  196. width: 103.5625rem;
  197. margin: auto;
  198. display: flex;
  199. justify-content: space-between;
  200. .exhibition-item {
  201. display: flex;
  202. .exhibition-item-line {
  203. width: 0.125rem;
  204. height: 55rem;
  205. background: #979797;
  206. position: relative;
  207. .optFor {
  208. width: 0.3125rem;
  209. height: 5rem;
  210. background: #3f76f7;
  211. position: relative;
  212. left: 50%;
  213. transform: translateX(-50%);
  214. transition: 0.5s;
  215. }
  216. }
  217. .exhibition-item-text {
  218. padding-left: 1.75rem;
  219. .text {
  220. height: 5rem;
  221. display: flex;
  222. align-items: center;
  223. color: #6f7b8f;
  224. font-size: 1.75rem;
  225. cursor: pointer;
  226. }
  227. .text-On {
  228. color: #000000;
  229. }
  230. }
  231. }
  232. .exhibition-show {
  233. margin-top: 4.375rem;
  234. width: 90.625rem;
  235. height: 48.75rem;
  236. background: url("../../image/customerNew/characteristicDisplay.png")
  237. no-repeat;
  238. background-size: cover;
  239. position: relative;
  240. .exhibition-show-carouselImage {
  241. position: absolute;
  242. top: 3.8125rem;
  243. left: 11.0625rem;
  244. width: 67.0625rem;
  245. height: 37.6875rem;
  246. img {
  247. width: 100%;
  248. height: 100%;
  249. }
  250. }
  251. }
  252. }
  253. }
  254. // 行业解决方案
  255. .solution {
  256. padding: 7.375rem 0 0 0;
  257. background: #fff;
  258. .solution-title {
  259. font-size: 3.125rem;
  260. color: #000000;
  261. line-height: 4.375rem;
  262. text-align: center;
  263. margin-bottom: 8.125rem;
  264. }
  265. .solution-content {
  266. width: 101.125rem;
  267. height: 40.625rem;
  268. display: flex;
  269. justify-content: space-between;
  270. flex-wrap: wrap;
  271. margin: auto;
  272. .solution-item {
  273. width: 18.75rem;
  274. height: 18.75rem;
  275. margin-right: 1.5625rem;
  276. border-radius: 0.25rem;
  277. overflow: hidden;
  278. box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.06);
  279. &:nth-child(5n) {
  280. margin-right: 0;
  281. }
  282. &:nth-child(2) .solution-item-title {
  283. background: #58c1f1;
  284. }
  285. &:nth-child(4) .solution-item-title {
  286. background: #58c1f1;
  287. }
  288. &:nth-child(7) .solution-item-title {
  289. background: #58c1f1;
  290. }
  291. &:nth-child(9) .solution-item-title {
  292. background: #58c1f1;
  293. }
  294. .solution-item-title {
  295. width: 100%;
  296. height: 5.625rem;
  297. font-size: 1.75rem;
  298. color: #fff;
  299. display: flex;
  300. padding-left: 1.25rem;
  301. align-items: center;
  302. background: #20a0ff;
  303. box-sizing: border-box;
  304. }
  305. .solution-item-text {
  306. width: 100%;
  307. height: 13.125rem;
  308. font-size: 1.5rem;
  309. line-height: 2.0625rem;
  310. color: #5a5a5a;
  311. padding: 2.125rem 1.25rem;
  312. box-sizing: border-box;
  313. }
  314. }
  315. }
  316. }
  317. // 客户评价
  318. .customerReviews {
  319. padding: 6.25rem 0 7.5rem 0;
  320. background: #fff;
  321. .customerReviews-title {
  322. font-size: 3.125rem;
  323. color: #000000;
  324. line-height: 4.375rem;
  325. text-align: center;
  326. margin-bottom: 7.6875rem;
  327. }
  328. .customerReviews-content {
  329. width: 100rem;
  330. height: 37.5rem;
  331. margin: auto;
  332. position: relative;
  333. .carousel-item-box {
  334. width: 100%;
  335. height: 100%;
  336. position: relative;
  337. .carousel-item-title, .carousel-item-text {
  338. position: absolute;
  339. left: 5.875rem;
  340. z-index: 1;
  341. color: #255980;
  342. font-weight: 500;
  343. line-height: 5rem;
  344. }
  345. .carousel-item-title {
  346. font-size: 2rem;
  347. top: 2.875rem;
  348. }
  349. .carousel-item-text {
  350. top: 8.125rem;
  351. font-size: 1.625rem;
  352. }
  353. }
  354. .carouselImage {
  355. width: 100%;
  356. height: 100%;
  357. border-radius: 0.375rem;
  358. overflow: hidden;
  359. img {
  360. width: 100%;
  361. height: 100%;
  362. }
  363. }
  364. }
  365. .icon {
  366. position: absolute;
  367. display: flex;
  368. align-items: center;
  369. justify-content: center;
  370. width: 5rem;
  371. height: 5rem;
  372. cursor: pointer;
  373. top: 50%;
  374. transform: translateY(-50%);
  375. img {
  376. width: 75%;
  377. height: 75%;
  378. }
  379. }
  380. .left {
  381. left: -7.1875rem;
  382. }
  383. .right {
  384. right: -7.1875rem;
  385. }
  386. }
  387. /* 咨询 */
  388. .zhixun {
  389. display: block;
  390. position: fixed;
  391. bottom: 7.5rem;
  392. right: 2.5rem;
  393. padding: 1rem;
  394. background: #fff;
  395. box-shadow: 0.1875rem 0.1875rem 0.625rem #ccc;
  396. z-index: 99999999;
  397. text-align: center;
  398. }
  399. .zhixun p {
  400. margin: 8px 0;
  401. }
  402. .zhixun img {
  403. width: 8rem;
  404. }
  405. .tabOn {
  406. background: #fff;
  407. color: #20a0ff !important;
  408. }
  409. .white {
  410. background: #fff !important;
  411. }
  412. /* 质询图标 */
  413. .consulting {
  414. width: 3.125rem;
  415. height: 3.125rem;
  416. border-radius: 50%;
  417. background: #fff;
  418. position: fixed;
  419. bottom: 3.75rem;
  420. right: 6.25rem;
  421. z-index: 4;
  422. box-shadow: 0 0 1.25rem 0px #cbcbcb;
  423. cursor: pointer;
  424. display: flex;
  425. align-items: center;
  426. justify-content: center;
  427. }
  428. .consulting:hover {
  429. background: #3396fb;
  430. }
  431. .conImgConImg {
  432. width: 2.5rem;
  433. height: 2.5rem;
  434. position: relative;
  435. margin-top: 1.5625rem;
  436. margin-left: 1.125rem;
  437. }
  438. .conImgConImg img {
  439. width: 100%;
  440. }