product_detail.css 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419
  1. /* 产品功能 开始 */
  2. .product-top {
  3. /* height: 457px; */
  4. height: 420px;
  5. padding: 10px 30px 50px;
  6. }
  7. .product-top .product-project-image {
  8. height: 390px;
  9. width: 390px;
  10. position: absolute;
  11. right: 30px;
  12. top: 0px;
  13. image-rendering: -moz-crisp-edges;
  14. /* Firefox */
  15. image-rendering: -o-crisp-edges;
  16. /* Opera */
  17. image-rendering: -webkit-optimize-contrast;
  18. /* Webkit (non-standard naming) */
  19. image-rendering: crisp-edges;
  20. -ms-interpolation-mode: nearest-neighbor;
  21. /* IE (non-standard property) */
  22. }
  23. .product-top .product-top-name {
  24. height: 33px;
  25. font-size: 24px;
  26. font-weight: 600;
  27. letter-spacing: 1px;
  28. color: #212326;
  29. display: inline-block;
  30. vertical-align: middle;
  31. }
  32. .product-top .product-top-title,
  33. .product-top .product-top-title.wiki,
  34. .product-top .product-top-title.plan,
  35. .product-top .product-top-title.account,
  36. .product-top .product-top-subtitle {
  37. /* width: 345px; */
  38. width: 500px;
  39. }
  40. .product-top .product-top-subtitle.perform,
  41. .product-top .product-top-subtitle.account {
  42. width: 339px;
  43. }
  44. .product-page-main-content {
  45. padding-top: 80px;
  46. padding-bottom: 80px;
  47. background-color: #fafbfc;
  48. }
  49. .product-top .top-content {
  50. margin-top: 80px;
  51. }
  52. .product-page-main {
  53. position: relative;
  54. z-index: 5;
  55. }
  56. .product-page-main-content {
  57. padding: 60px 0;
  58. }
  59. .product-page-main-content .product-content {
  60. width: 1200px;
  61. margin: auto;
  62. }
  63. .product-page-main .product-title {
  64. font-size: 32px;
  65. text-align: center;
  66. line-height: 1.5;
  67. font-weight: 600;
  68. color: #1d1e20;
  69. }
  70. .product-page-main .product-subtitle {
  71. font-size: 16px;
  72. line-height: 28px;
  73. text-align: center;
  74. font-weight: 400;
  75. color: #6c6f75;
  76. margin-top: 10px;
  77. margin-bottom: 40px;
  78. }
  79. .product-page-main-content .product-content .project-slide-component {
  80. width: 100%;
  81. height: 475px;
  82. margin-top: 20px;
  83. }
  84. .product-page-main-content .product-content .product-subtitle {
  85. width: 680px;
  86. line-height: 32px;
  87. margin: 10px auto 50px;
  88. }
  89. .product-page-main-content .product-content .project-slide-component.left {
  90. margin-bottom: 80px;
  91. }
  92. .product-page-main-content .product-content .project-slide-component.right {
  93. margin-bottom: 80px;
  94. }
  95. /* .product-page-main-content .product-content .project-slide-component.left {
  96. margin-bottom: 50px;
  97. } */
  98. .product-page-main-content .product-content .project-slide-component .slide-component {
  99. position: relative;
  100. }
  101. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul {
  102. position: absolute;
  103. }
  104. /* .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul {
  105. position: relative;
  106. display: inline-block;
  107. width: 100%;
  108. } */
  109. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul.left {
  110. left: 0;
  111. }
  112. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul.right {
  113. right: 0;
  114. }
  115. /* .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul.left {
  116. left: auto;
  117. } */
  118. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li {
  119. width: 386px;
  120. margin-bottom: 20px;
  121. cursor: pointer;
  122. border-radius: 3px;
  123. box-shadow: 0 2px 12px 0 rgb(48 48 48 / 5%), 0 2px 8px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(0 0 0 / 10%);
  124. background-color: #fff;
  125. padding: 30px;
  126. border-left: 3px solid;
  127. border-color: #fff;
  128. color: #212326;
  129. max-height: 260px;
  130. transition: .3s;
  131. position: relative;
  132. }
  133. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li.active {
  134. border-color: #0b5dd9;
  135. }
  136. /* .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li {
  137. display: inline-block;
  138. width: 365px;
  139. height: 172px;
  140. padding-left: 20px;
  141. padding-right: 20px;
  142. } */
  143. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul-title {
  144. /* font-size: 24px; */
  145. /* font-size: 22px; */
  146. font-size: 20px;
  147. height: 36px;
  148. line-height: 1.5;
  149. color: #1d1e20;
  150. margin-bottom: 15px;
  151. }
  152. .product-content-intro,
  153. .slide-component-ul-intro {
  154. position: relative;
  155. /* font-size: 16px; */
  156. font-size: 14px;
  157. line-height: 28px;
  158. font-weight: 400;
  159. color: #45464a;
  160. margin-bottom: 5px;
  161. padding-left: 15px;
  162. }
  163. .product-content-intro:before,
  164. .slide-component-ul-intro:before {
  165. content: "";
  166. width: 6px;
  167. height: 6px;
  168. border-radius: 50%;
  169. display: inline-block;
  170. position: absolute;
  171. background-color: #212326;
  172. top: 12px;
  173. left: 0;
  174. }
  175. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img {
  176. position: absolute;
  177. display: none;
  178. border-radius: 3px;
  179. box-shadow: 0 20px 24px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 20%);
  180. width: 784px;
  181. /* height: 475px; */
  182. }
  183. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img.left {
  184. left: 0;
  185. }
  186. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img.right {
  187. right: 0;
  188. }
  189. .product-top .product-top-logo img {
  190. vertical-align: middle;
  191. object-fit: contain;
  192. }
  193. /* 产品功能 结束 */
  194. /* 相通产品开始 */
  195. .product-matrix-and-scene {
  196. padding: 80px 0 16px;
  197. }
  198. .product-matrix-and-scene .product-matrix-card {
  199. display: inline-block;
  200. width: 485px;
  201. height: 240px;
  202. border-radius: 3px;
  203. box-shadow: 0 4px 8px 0 rgb(48 48 48 / 10%);
  204. background-color: #fff;
  205. margin-right: 10px;
  206. padding: 41px 30px;
  207. margin-bottom: 10px;
  208. transition: .3s;
  209. }
  210. .product-matrix-and-scene .product-matrix-card:hover {
  211. position: relative;
  212. box-shadow: 0 20px 40px 0 rgb(48 48 48 / 5%), 0 30px 60px 0 rgb(48 48 48 / 10%);
  213. z-index: 1;
  214. }
  215. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img {
  216. width: 151px;
  217. height: 158px;
  218. display: inline-block;
  219. vertical-align: top;
  220. }
  221. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content {
  222. display: inline-block;
  223. width: 255px;
  224. margin-left: 15px;
  225. vertical-align: top;
  226. }
  227. .product-matrix-and-scene .product-matrix-card .product-matrix-card-title {
  228. height: 30px;
  229. font-size: 20px;
  230. line-height: 1.5;
  231. color: #1d1e20;
  232. font-weight: 500;
  233. letter-spacing: 1.2px;
  234. }
  235. .product-matrix-and-scene .product-matrix-card .product-matrix-card-intro {
  236. width: 266px;
  237. height: 72px;
  238. font-size: 14px;
  239. line-height: 24px;
  240. color: #373737;
  241. margin-top: 10px;
  242. margin-bottom: 26px;
  243. }
  244. .product-page-main .product-matrix-card-more {
  245. display: inline-block;
  246. transition: .3s;
  247. height: 20px;
  248. }
  249. .product-page-main .product-matrix-card-link-more {
  250. display: inline-block;
  251. height: 20px;
  252. font-size: 14px;
  253. font-weight: 500;
  254. line-height: 20px;
  255. color: #0b5dd9;
  256. transition: .3s;
  257. }
  258. .matrix-card-more-arrow {
  259. background-image: url(../images/index/icon-right-arrowX3-bf0513bd00.png);
  260. }
  261. .product-matrix-and-scene .product-scene-card.last {
  262. margin-right: 0;
  263. }
  264. .product-matrix-and-scene .second-content {
  265. margin-top: 70px;
  266. }
  267. /* 相通产品结束 */
  268. /* 场景开始 */
  269. .product-matrix-and-scene .product-scene-card {
  270. height: 178px;
  271. width: 288px;
  272. display: inline-block;
  273. position: relative;
  274. margin-right: 62px;
  275. margin-bottom: 64px;
  276. }
  277. .product-matrix-and-scene .product-scene-card .product-scene-card-img {
  278. margin-bottom: 20px;
  279. }
  280. .product-scene-card-title {
  281. font-size: 20px;
  282. height: 30px;
  283. line-height: 1.5;
  284. letter-spacing: 1.2px;
  285. color: #1d1e20;
  286. font-weight: 500;
  287. }
  288. .product-scene-card-intro {
  289. height: 48px;
  290. font-size: 14px;
  291. line-height: 24px;
  292. color: #45464a;
  293. font-weight: 400;
  294. margin-top: 10px;
  295. }
  296. .product-matrix-and-scene .product-scene-card.last {
  297. margin-right: 0;
  298. }
  299. /* 场景结束 */
  300. @media screen and (min-width: 768px) and (max-width: 991px) {
  301. /* 产品功能 开始*/
  302. .index-pc {
  303. display: none;
  304. }
  305. .index-mobile {
  306. display: block;
  307. }
  308. .product-top {
  309. height: auto;
  310. padding: 50px 30px 0;
  311. }
  312. .normal-width {
  313. width: 555px;
  314. }
  315. .product-top .product-top-logo {
  316. margin-bottom: 20px;
  317. }
  318. .product-top .product-top-logo img {
  319. height: 28px;
  320. width: 28px;
  321. }
  322. .product-top .product-top-logo .product-top-name {
  323. font-size: 20px;
  324. height: 27px;
  325. }
  326. .product-top .product-top-title,
  327. .product-top .product-top-title.account,
  328. .product-top .product-top-title.plan,
  329. .product-top .product-top-title.wiki {
  330. width: 100%;
  331. font-size: 32px;
  332. line-height: 48px;
  333. letter-spacing: 1px;
  334. }
  335. .product-top .product-top-subtitle,
  336. .product-top .product-top-subtitle.account,
  337. .product-top .product-top-subtitle.perform {
  338. width: 100%;
  339. font-size: 14px;
  340. line-height: 20px;
  341. letter-spacing: 0;
  342. }
  343. .product-top .product-project-image {
  344. float: none;
  345. height: 342px;
  346. width: 342px;
  347. position: relative;
  348. left: auto;
  349. bottom: auto;
  350. top: auto;
  351. right: auto;
  352. margin: 20px auto;
  353. }
  354. .product-top .product-project-image img {
  355. width: 100%;
  356. height: 100%;
  357. margin: auto;
  358. }
  359. .product-page-main .product-content .product-title {
  360. font-size: 24px;
  361. line-height: 34px;
  362. text-align: left;
  363. margin-bottom: 10px;
  364. letter-spacing: 1px;
  365. }
  366. .product-page-main .product-content .product-subtitle {
  367. font-size: 14px;
  368. line-height: 24px;
  369. text-align: left;
  370. width: auto;
  371. margin-bottom: 40px;
  372. }
  373. .product-page-main .product-response-card {
  374. margin-bottom: 50px;
  375. }
  376. .product-page-main .product-response-card-content {
  377. margin-bottom: 10px;
  378. }
  379. .product-page-main .product-content-title {
  380. font-size: 20px;
  381. line-height: 36px;
  382. color: #212326;
  383. }
  384. .product-page-main .product-content-intro {
  385. font-size: 14px;
  386. line-height: 24px;
  387. color: #212326;
  388. margin-bottom: 0;
  389. }
  390. .product-content-intro:before,
  391. .slide-component-ul-intro:before {
  392. content: "";
  393. width: 6px;
  394. height: 6px;
  395. border-radius: 50%;
  396. display: inline-block;
  397. position: absolute;
  398. background-color: #212326;
  399. top: 12px;
  400. left: 0;
  401. }
  402. .product-page-main .product-content-intro {
  403. font-size: 14px;
  404. line-height: 24px;
  405. color: #212326;
  406. margin-bottom: 0;
  407. padding-left: 15px;
  408. position: relative;
  409. font-weight: 400;
  410. }
  411. .product-page-main .product-content {
  412. width: 495px;
  413. margin: 0 auto;
  414. }
  415. .product-page-main .product-response-card-img {
  416. width: 100%;
  417. height: 300px;
  418. }
  419. .product-page-main .product-response-card-img img,
  420. .product-page-main .product-response-card-img video {
  421. height: 100%;
  422. width: 100%;
  423. box-shadow: 0 20px 24px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 20%);
  424. border-radius: 3px;
  425. }
  426. /* 产品功能 结束*/
  427. /* 相通产品开始 */
  428. .product-matrix-and-scene {
  429. padding: 50px 30px 20px;
  430. }
  431. .product-page-main .product-title {
  432. font-size: 24px;
  433. line-height: 34px;
  434. text-align: left;
  435. width: auto;
  436. margin-bottom: 10px;
  437. letter-spacing: 1px;
  438. }
  439. .product-page-main .product-subtitle {
  440. font-size: 14px;
  441. text-align: left;
  442. line-height: 24px;
  443. }
  444. .product-matrix-and-scene .product-matrix-card {
  445. display: block;
  446. width: 100%;
  447. margin-bottom: 30px;
  448. padding: 40px 20px;
  449. }
  450. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img {
  451. width: 151px;
  452. height: 158px;
  453. margin-top: 0;
  454. }
  455. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img img {
  456. height: 100%;
  457. width: 100%;
  458. object-fit: contain;
  459. }
  460. /* 相通产品结束 */
  461. /* 场景 */
  462. .product-matrix-and-scene .product-scene-card {
  463. width: 217px;
  464. height: 190px;
  465. margin-bottom: 30px;
  466. vertical-align: top;
  467. margin-right: 28px;
  468. }
  469. .product-matrix-and-scene .product-scene-card .product-scene-card-img {
  470. width: 56px;
  471. height: 44px;
  472. margin-top: 14px;
  473. }
  474. .product-matrix-and-scene .product-scene-card .product-scene-card-img img {
  475. height: 100%;
  476. width: 100%;
  477. image-rendering: -webkit-optimize-contrast;
  478. }
  479. .product-matrix-and-scene .product-scene-card .product-scene-card-title {
  480. font-size: 16px;
  481. line-height: 30px;
  482. }
  483. .product-matrix-and-scene .product-scene-card .product-scene-card-intro {
  484. margin-right: 0;
  485. font-size: 14px;
  486. line-height: 22px;
  487. }
  488. /* 场景 */
  489. }
  490. @media screen and (min-width: 200px) and (max-width: 767px) {
  491. /* 产品功能 开始*/
  492. .product-top {
  493. height: auto;
  494. padding: 30px 20px 0;
  495. }
  496. .normal-width {
  497. width: 375px;
  498. }
  499. .product-top .product-top-logo {
  500. margin-bottom: 20px;
  501. display: inline-block;
  502. }
  503. .product-top .product-top-logo img {
  504. height: 28px;
  505. width: 28px;
  506. vertical-align: middle;
  507. object-fit: contain;
  508. }
  509. .product-top .product-top-logo .product-top-name {
  510. font-size: 20px;
  511. height: 27px;
  512. }
  513. .product-top .product-top-title.project,
  514. .product-top .product-top-title.testcase {
  515. width: 90%;
  516. }
  517. .product-top .product-project-image {
  518. height: 268px;
  519. width: 268px;
  520. position: relative;
  521. left: auto;
  522. bottom: auto;
  523. margin: 20px auto;
  524. }
  525. .product-top .product-project-image {
  526. float: none;
  527. }
  528. .product-top .product-project-image img {
  529. width: 100%;
  530. height: 100%;
  531. margin: auto;
  532. }
  533. .product-top .top-content {
  534. margin-top: auto;
  535. }
  536. .product-page-main .product-page-main-content {
  537. padding: 50px 0;
  538. background-color: #fafbfc;
  539. }
  540. .product-page-main .product-content {
  541. /* width: 495px; */
  542. width: 335px;
  543. /* padding: 0 20px; */
  544. margin: 0 auto;
  545. }
  546. .product-page-main .product-content .product-title {
  547. font-size: 24px;
  548. line-height: 34px;
  549. text-align: left;
  550. margin-bottom: 10px;
  551. letter-spacing: 1px;
  552. }
  553. .product-page-main .product-content .product-subtitle {
  554. font-size: 14px;
  555. line-height: 24px;
  556. text-align: left;
  557. width: auto;
  558. margin-bottom: 40px;
  559. }
  560. .product-page-main .product-response-card {
  561. margin-bottom: 50px;
  562. }
  563. .product-page-main .product-response-card-content {
  564. margin-bottom: 10px;
  565. }
  566. .product-page-main .product-response-card-img {
  567. width: 100%;
  568. height: 203px;
  569. }
  570. .product-page-main .product-content-title {
  571. font-size: 20px;
  572. line-height: 36px;
  573. color: #212326;
  574. }
  575. .product-page-main .product-content-intro {
  576. font-size: 14px;
  577. line-height: 24px;
  578. color: #212326;
  579. margin-bottom: 0;
  580. position: relative;
  581. }
  582. .product-content-intro:before,
  583. .slide-component-ul-intro:before {
  584. content: "";
  585. width: 6px;
  586. height: 6px;
  587. border-radius: 50%;
  588. display: inline-block;
  589. position: absolute;
  590. background-color: #212326;
  591. top: 12px;
  592. left: 0;
  593. }
  594. .product-page-main .product-content-intro {
  595. font-size: 14px;
  596. line-height: 24px;
  597. color: #212326;
  598. margin-bottom: 0;
  599. }
  600. .product-page-main .product-response-card-img img,
  601. .product-page-main .product-response-card-img video {
  602. height: 100%;
  603. width: 100%;
  604. box-shadow: 0 20px 24px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 20%);
  605. border-radius: 3px;
  606. }
  607. /* 产品功能 结束*/
  608. /* 相通产品开始 */
  609. .product-matrix-and-scene {
  610. padding: 50px 20px 20px;
  611. }
  612. .product-page-main .product-title {
  613. font-size: 24px;
  614. line-height: 34px;
  615. text-align: left;
  616. width: auto;
  617. margin-bottom: 10px;
  618. letter-spacing: 1px;
  619. }
  620. .product-page-main .product-subtitle {
  621. font-size: 14px;
  622. text-align: left;
  623. line-height: 24px;
  624. margin-bottom: 30px;
  625. }
  626. .product-matrix-and-scene .product-matrix-card {
  627. width: 100%;
  628. height: 393px;
  629. text-align: center;
  630. padding: 30px 20px;
  631. }
  632. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img {
  633. width: 151px;
  634. height: 158px;
  635. margin-top: auto;
  636. }
  637. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img img {
  638. height: 100%;
  639. width: 100%;
  640. object-fit: contain;
  641. }
  642. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content {
  643. margin-left: 0;
  644. width: 100%;
  645. margin-top: 20px;
  646. }
  647. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-title {
  648. width: auto;
  649. }
  650. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-intro {
  651. height: 72px;
  652. margin-bottom: 20px;
  653. }
  654. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-more {
  655. height: 20px;
  656. }
  657. /* 相通产品结束 */
  658. /* 场景 */
  659. .product-page-main .product-subtitle {
  660. margin-bottom: 30px;
  661. }
  662. .product-matrix-and-scene .product-scene-card {
  663. height: 213px;
  664. width: 152px;
  665. }
  666. .product-matrix-and-scene .product-scene-card .product-scene-card-img {
  667. width: 56px;
  668. height: 44px;
  669. margin-top: 14px;
  670. }
  671. .product-matrix-and-scene .product-scene-card .product-scene-card-img img {
  672. height: 100%;
  673. width: 100%;
  674. image-rendering: -webkit-optimize-contrast;
  675. }
  676. .product-project .product-scene-card,
  677. .product-project .product-scene-card.last {
  678. margin-right: 12px;
  679. }
  680. .product-matrix-and-scene .product-scene-card .product-scene-card-title {
  681. font-size: 16px;
  682. line-height: 30px;
  683. }
  684. .product-matrix-and-scene .product-scene-card .product-scene-card-intro {
  685. margin-right: 0;
  686. font-size: 14px;
  687. line-height: 22px;
  688. }
  689. }
  690. .jianjie_box {
  691. display: flex;
  692. justify-content: space-between;
  693. flex-wrap: nowrap;
  694. margin-top: 30px;
  695. }
  696. .jianjie_box img {
  697. width: 22%;
  698. display: block;
  699. }
  700. .img_box img {
  701. display: block;
  702. width: 100%;
  703. margin-top: 10px;
  704. }
  705. /*
  706. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li:first-child {
  707. margin-right: 10px;
  708. }
  709. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li .slide-component-ul-coming {
  710. left: 164px;
  711. }
  712. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li .slide-component-ul-coming.second {
  713. left: 140px;
  714. }
  715. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img {
  716. position: relative;
  717. width: 740px;
  718. height: 448px;
  719. }
  720. /* .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img.right {
  721. right: auto;
  722. }
  723. .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-img.left {
  724. left: auto;
  725. } */
  726. /* .product-matrix-and-scene {
  727. padding: 60px 30px 0;
  728. }
  729. .product-matrix-and-scene .product-title {
  730. width: 680px;
  731. margin-left: auto;
  732. margin-right: auto;
  733. }
  734. .product-matrix-and-scene .product-subtitle {
  735. margin-bottom: 30px;
  736. }
  737. .product-matrix-and-scene .product-matrix-card {
  738. width: 365px;
  739. height: 240px;
  740. margin-right: 10px;
  741. padding: 34px 15px;
  742. }
  743. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img {
  744. width: 121px;
  745. height: 126px;
  746. margin-top: 8px;
  747. }
  748. .product-matrix-and-scene .product-matrix-card .product-matrix-card-img img {
  749. height: 100%;
  750. width: 100%;
  751. object-fit: contain;
  752. }
  753. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content {
  754. width: 194px;
  755. margin-left: 15px;
  756. }
  757. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content.center {
  758. margin-top: 0;
  759. }
  760. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-title {
  761. width: 200px;
  762. height: auto;
  763. }
  764. .product-matrix-and-scene .product-matrix-card .product-matrix-card-content .product-matrix-card-intro {
  765. width: auto;
  766. height: auto;
  767. margin-bottom: 20px;
  768. }
  769. .product-matrix-and-scene .product-scene-card {
  770. width: 237px;
  771. height: 207px;
  772. margin-right: 14px;
  773. margin-bottom: 35px;
  774. vertical-align: top;
  775. }
  776. .product-matrix-and-scene .product-scene-card .product-scene-card-intro {
  777. margin-right: 20px;
  778. }
  779. .product-matrix-and-scene .product-scene-card .product-scene-card-img {
  780. width: 59.2px;
  781. height: 75.2px;
  782. }
  783. .product-matrix-and-scene .product-scene-card .product-scene-card-img img {
  784. height: 100%;
  785. width: 100%;
  786. image-rendering: -webkit-optimize-contrast;
  787. }
  788. .product-footer-price {
  789. padding: 60px 0;
  790. }
  791. .product-footer-price .product-footer-price-title {
  792. margin-bottom: 30px;
  793. }
  794. .product-plan .product-matrix-and-scene {
  795. padding-bottom: 61px;
  796. }
  797. .product-plan .product-matrix-card {
  798. padding: 50px 15px;
  799. }
  800. .product-pipeline #left li,
  801. .product-pipeline #right li {
  802. height: 233px;
  803. vertical-align: top;
  804. }
  805. .product-pipeline .product-pipeline-content {
  806. padding: 60px 0;
  807. }
  808. .product-pipeline .product-pipeline-content .product-pipeline-content-img {
  809. height: 100%;
  810. width: 100%;
  811. margin-top: 50px;
  812. }
  813. .product-pipeline .product-pipeline-content .product-pipeline-content-img img {
  814. height: 100%;
  815. width: 100%;
  816. }
  817. .product-wiki #right li {
  818. height: 200px;
  819. vertical-align: top;
  820. }
  821. .product-wiki .product-title.scene {
  822. margin-bottom: 30px;
  823. }
  824. .product-account {
  825. display: block;
  826. }
  827. .product-account .product-page-main-content {
  828. background-color: #fafbfc;
  829. }
  830. .product-account .product-title.scene {
  831. margin-bottom: 50px;
  832. }
  833. .product-account .product-content-intro {
  834. margin-bottom: 10px;
  835. }
  836. .product-account .product-content {
  837. width: 800px;
  838. margin-left: auto;
  839. margin-right: auto;
  840. padding: 0 30px;
  841. }
  842. .product-account .product-content-account {
  843. display: block;
  844. margin-bottom: 0;
  845. padding-bottom: 56px;
  846. }
  847. .product-account .product-content-account-card {
  848. display: block;
  849. height: auto;
  850. width: 100%;
  851. margin-bottom: 20px;
  852. }
  853. .product-account .product-content-account-info {
  854. position: relative;
  855. margin: 0;
  856. width: 100%;
  857. height: auto;
  858. }
  859. .product-account .product-content-account-info.first,
  860. .product-account .product-content-account-info.second,
  861. .product-account .product-content-account-info.third {
  862. height: auto;
  863. }
  864. .product-account .product-content-account-img {
  865. width: 100%;
  866. height: 449px;
  867. }
  868. .product-account .product-content-account-img img {
  869. height: 100%;
  870. width: 100%;
  871. }
  872. .product-account .product-content-single-intro {
  873. width: 100%;
  874. font-size: 14px;
  875. }
  876. .product-testcase .product-title.scene {
  877. margin-bottom: 30px;
  878. }
  879. .product-testcase .product-matrix-and-scene .product-scene-card:nth-child(5) .product-scene-card-content {
  880. width: 212px;
  881. }
  882. .product-desk .product-matrix-and-scene {
  883. padding-bottom: 50px;
  884. }
  885. .product-desk .product-matrix-and-scene .product-title {
  886. margin-bottom: 30px;
  887. }
  888. .product-desk .product-matrix-and-scene .product-matrix-card:nth-child(2n) {
  889. margin-right: 8px;
  890. }
  891. .product-desk #left li,
  892. .product-desk #right li {
  893. height: 233px;
  894. vertical-align: top;
  895. }
  896. .product-performance .product-page-main-content .product-content .product-subtitle {
  897. width: auto;
  898. }
  899. .product-performance .product-page-main-content .product-content .project-slide-component .slide-component .slide-component-ul li {
  900. vertical-align: top;
  901. height: 195px;
  902. }
  903. .product-performance .divide-line {
  904. width: 740px;
  905. }
  906. .product-performance .performance-content-img {
  907. width: 740px;
  908. height: 419px;
  909. }
  910. .product-performance .product-matrix-and-scene {
  911. padding: 60px 30px;
  912. }
  913. .product-performance .product-matrix-and-scene .product-subtitle {
  914. line-height: 28px;
  915. }
  916. .product-performance .perform-scene-card {
  917. width: 740px;
  918. }
  919. .product-performance .perform-scene-card .product-scene-card {
  920. margin-right: 10px;
  921. width: 240px;
  922. }
  923. .product-performance .perform-scene-card .product-scene-card .product-scene-card-intro {
  924. width: 225px;
  925. }
  926. .product-tower .product-page-main-content {
  927. background-color: #fafbfc;
  928. }
  929. .product-tower .product-title.scene {
  930. margin-bottom: 50px;
  931. }
  932. .product-tower .product-content-intro {
  933. margin-bottom: 10px;
  934. }
  935. .product-tower .product-content {
  936. width: 800px;
  937. margin-left: auto;
  938. margin-right: auto;
  939. padding: 0 30px;
  940. }
  941. .product-tower .product-content-tower {
  942. display: block;
  943. margin-bottom: 0;
  944. padding-bottom: 56px;
  945. height: auto;
  946. }
  947. .product-tower .product-content-tower-card {
  948. display: block;
  949. height: auto;
  950. width: 100%;
  951. margin-bottom: 20px;
  952. }
  953. .product-tower .product-content-tower-info {
  954. position: relative;
  955. margin: 0;
  956. width: 100%;
  957. height: auto;
  958. }
  959. .product-tower .product-content-tower-info.first,
  960. .product-tower .product-content-tower-info.second,
  961. .product-tower .product-content-tower-info.third {
  962. height: auto;
  963. }
  964. .product-tower .product-content-tower-img {
  965. width: 100%;
  966. height: 449px;
  967. }
  968. .product-tower .product-content-tower-img img {
  969. height: 100%;
  970. width: 100%;
  971. }
  972. .product-tower .product-content-single-intro {
  973. width: 100%;
  974. font-size: 14px;
  975. }
  976. .product-tower .tower-client-solution {
  977. height: 542px;
  978. padding: 60px 0;
  979. }
  980. .product-tower .tower-client-solution_content-wrapper {
  981. width: 740px;
  982. }
  983. .product-tower .tower-client-solution .client-solutions .title {
  984. margin-bottom: 30px;
  985. }
  986. .product-tower .tower-client-solution .client-solutions #wrapper {
  987. width: 740px;
  988. height: 250px;
  989. }
  990. .product-tower .tower-client-solution .client-solutions #cards {
  991. width: 4440px;
  992. }
  993. .product-tower .tower-client-solution .client-solutions #cards li:nth-child(1) {
  994. left: 0;
  995. }
  996. .product-tower .tower-client-solution .client-solutions #cards li:nth-child(2) {
  997. left: 740px;
  998. }
  999. .product-tower .tower-client-solution .client-solutions #cards li:nth-child(3) {
  1000. left: 1480px;
  1001. }
  1002. .product-tower .tower-client-solution .client-solutions #cards li:nth-child(4) {
  1003. left: 2220px;
  1004. }
  1005. .product-tower .tower-client-solution .client-solutions #cards li:nth-child(5) {
  1006. left: 2960px;
  1007. }
  1008. .product-tower .tower-client-solution .client-solutions .client-tab-card {
  1009. width: 740px;
  1010. height: 250px;
  1011. }
  1012. .product-tower .tower-client-solution .client-solutions .client-tab-card .client-img {
  1013. width: 406px;
  1014. height: 250px;
  1015. }
  1016. .product-tower .tower-client-solution .client-solutions .client-tab-card .client-img img {
  1017. width: 406px;
  1018. height: 250px;
  1019. object-fit: cover;
  1020. }
  1021. .product-tower .tower-client-solution .client-solutions .client-tab-card .client-content {
  1022. padding: 20px;
  1023. width: 334px;
  1024. height: 250px;
  1025. }
  1026. .product-tower .tower-client-solution .client-solutions .client-tab-card .divider-line {
  1027. margin: 20px 0;
  1028. width: 294px;
  1029. }
  1030. .product-tower .tower-client-solution .client-solutions .client-tab-card .client-more-details {
  1031. right: 40px;
  1032. bottom: 20px;
  1033. }
  1034. .product-tower .tower-client-solution .client-solutions .client-tab {
  1035. width: 115px;
  1036. height: 70px;
  1037. }
  1038. .product-tower .tower-client-solution .client-solutions .client-tab img {
  1039. width: 140px;
  1040. height: 52px;
  1041. }
  1042. .product-tower .tower-client-solution .client-solutions .client-tab img.on {
  1043. border-radius: 3px;
  1044. }
  1045. .product-tower .who-use {
  1046. padding: 60px 0 40px 0;
  1047. }
  1048. .product-tower .who-use.project-who-use .who-use-title {
  1049. border-top: none;
  1050. color: #6c6f75;
  1051. font-weight: 600;
  1052. padding-top: 0;
  1053. }
  1054. .product-tower .who-use.project-who-use .who-use-list .who-using img {
  1055. transform: scale(1);
  1056. }
  1057. .product-tower .who-use.project-who-use .who-use-list .who-using.wangyi img {
  1058. width: 107px;
  1059. height: 30px;
  1060. }
  1061. .product-tower .who-use.project-who-use .who-use-list .who-using.nanfangzhoumo img {
  1062. width: 44px;
  1063. height: 44px;
  1064. }
  1065. .product-tower .who-use.project-who-use .who-use-list .who-using.huodongxing img {
  1066. width: 86px;
  1067. height: 25px;
  1068. }
  1069. .product-tower .who-use.project-who-use .who-use-list .who-using.qinghuadaxue img {
  1070. width: 99px;
  1071. height: 34px;
  1072. }
  1073. .product-tower .who-use.project-who-use .who-use-list .who-using.zhongguozhiwang img {
  1074. width: 96px;
  1075. height: 34px;
  1076. }
  1077. .product-tower .who-use.project-who-use .who-use-list .who-using.kuwoyinyue img {
  1078. width: 108px;
  1079. height: 29px;
  1080. }
  1081. .product-tower .who-use.project-who-use .who-use-list .who-using.xiachufang img {
  1082. width: 74px;
  1083. height: 24px;
  1084. }
  1085. .product-tower .who-use.project-who-use .who-use-list .who-using.zhongguoyidong img {
  1086. width: 104px;
  1087. height: 32px;
  1088. }
  1089. .product-tower .who-use.project-who-use .who-use-list .who-using.shangqijituan img {
  1090. width: 105px;
  1091. height: 36px;
  1092. }
  1093. .product-tower .who-use.project-who-use .who-use-list .who-using.qichezhijia img {
  1094. width: 79px;
  1095. height: 28px;
  1096. }
  1097. .product-tower .who-use.project-who-use .who-use-list .who-using.sanqihuyu img {
  1098. width: 108px;
  1099. height: 26px;
  1100. }
  1101. .product-tower .who-use.project-who-use .who-use-list .who-using.yuanfudao img {
  1102. width: 92px;
  1103. height: 24px;
  1104. }
  1105. .product-tower .who-use.project-who-use .who-use-list .who-using.wanxiekeji img {
  1106. width: 94px;
  1107. height: 36px;
  1108. }
  1109. .product-tower .who-use.project-who-use .who-use-list .who-using.guoke img {
  1110. width: 51px;
  1111. height: 24px;
  1112. }
  1113. .product-tower .who-use.project-who-use .who-use-list .who-using.huxiu img {
  1114. width: 42px;
  1115. height: 30px;
  1116. }
  1117. .product-tower .who-use.project-who-use .who-use-list .who-using.diezhi img {
  1118. width: 101px;
  1119. height: 28px;
  1120. }
  1121. .product-tower .who-use.project-who-use .who-use-list .who-using.sanyizhugong img {
  1122. width: 66px;
  1123. height: 30px;
  1124. }
  1125. .product-tower .who-use.project-who-use .who-use-list .who-using.xiecheng img {
  1126. width: 80px;
  1127. height: 30px;
  1128. }
  1129. .product-tower .who-use.project-who-use .who-use-list .who-using.jikebang img {
  1130. width: 99px;
  1131. height: 26px;
  1132. }
  1133. .product-tower .who-use.project-who-use .who-use-list .who-using.wenxuan img {
  1134. width: 120px;
  1135. height: 14px;
  1136. }
  1137. .product-tower .try-use.tower-page {
  1138. background-size: 244px, 216px, 100%, 122px, 76px, 100%;
  1139. background-position-y: 100%, 70%, 0%;
  1140. } */