portal.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  1. @headerNavDetaulHeight : 70px;
  2. .wrap {
  3. width: 100%;
  4. margin: 0 auto;
  5. background: #ffffff;
  6. .portal-header {
  7. .portal-top {
  8. line-height: 35px;
  9. font-size: 12px;
  10. color: #999;
  11. background: #F3F3F3;
  12. >div {
  13. width: 1200px;
  14. margin: 0 auto;
  15. }
  16. .top-welcomeText {
  17. float: left;
  18. }
  19. .top-alink {
  20. float: right;
  21. a {
  22. color: #999;
  23. padding: 0 8px;
  24. border-left: 1px solid #999;
  25. }
  26. >a {
  27. &:first-child {
  28. border: none;
  29. }
  30. }
  31. }
  32. >span {
  33. padding-left: 20px;
  34. }
  35. }
  36. .header_nav_detail {
  37. height: @headerNavDetaulHeight;
  38. line-height: 68px;
  39. position: relative;
  40. border-bottom: 1px solid #4466bf;
  41. .container {
  42. width: 1200px;
  43. margin: 0 auto;
  44. padding-right: 0;
  45. padding-left: 0;
  46. .nav_content {
  47. position: relative;
  48. >li {
  49. float: left;
  50. width: 9%;
  51. font-size: 13px;
  52. height: @headerNavDetaulHeight;
  53. padding: 0;
  54. text-align: center;
  55. font-weight: bold;
  56. position: relative;
  57. &.active,
  58. &:hover {
  59. background: #58a3ff;
  60. >a {
  61. color: #fff;
  62. font-weight: bolder;
  63. font-size: 14px;
  64. }
  65. .secondary_navigation_nav {
  66. display: block;
  67. }
  68. &.hideSub .secondary_navigation_nav {
  69. display: none;
  70. }
  71. }
  72. >a {
  73. color: #333333;
  74. display: block;
  75. width: 100%;
  76. padding: 3px 1px; //border-right: 1px solid #ececec;
  77. line-height: 22px;
  78. margin-top: 25px;
  79. margin-bottom: 16px
  80. }
  81. .showSub .secondary_navigation_nav {
  82. display: block;
  83. }
  84. }
  85. }
  86. .secondary_navigation_nav {
  87. position: absolute;
  88. left: auto;
  89. top: @headerNavDetaulHeight;
  90. width: 450px;
  91. z-index: 100;
  92. display: none;
  93. li {
  94. float: left;
  95. width: 75px;
  96. line-height: 45px;
  97. text-align: center;
  98. a {
  99. margin: 15px 0;
  100. line-height: 1.25;
  101. border-right: 1px solid #ececec;
  102. color: #fff;
  103. font-size: 12px;
  104. font-weight: normal;
  105. width: 100%;
  106. display: block;
  107. }
  108. &.active,
  109. &:hover {
  110. a {
  111. font-size: 13px;
  112. font-weight: bolder;
  113. }
  114. }
  115. &:last-child a {
  116. border: none;
  117. }
  118. }
  119. &.show {
  120. display: block;
  121. }
  122. }
  123. }
  124. .secondary_navigation {
  125. position: absolute;
  126. height: 45px;
  127. line-height: 45px;
  128. width: 100%;
  129. background: #58a3ff;
  130. z-index: 99;
  131. display: block;
  132. }
  133. .logo {
  134. height: @headerNavDetaulHeight;
  135. line-height: 68px;
  136. img {
  137. vertical-align: middle;
  138. }
  139. }
  140. .search {
  141. line-height: 68px
  142. }
  143. }
  144. .glyphicon {
  145. font-size: 12px;
  146. font-weight: inherit;
  147. }
  148. .col-md-3 {
  149. width: 25%;
  150. float: left
  151. }
  152. .col-md-6 {
  153. width: 50%;
  154. float: left
  155. }
  156. .col-md-8 {
  157. width: 66.66666667%;
  158. float: left
  159. }
  160. .col-md-9 {
  161. width: 75%;
  162. float: left
  163. }
  164. }
  165. .portal-body {
  166. min-height: 424px;
  167. }
  168. footer {
  169. background: #3c3d43;
  170. text-align: center;
  171. padding-top: 20px;
  172. .container {
  173. width: 1280px;
  174. margin: 0 auto;
  175. padding-right: 0;
  176. padding-left: 0;
  177. .friendship_link {
  178. margin-top: 20px;
  179. font-size: 12px
  180. }
  181. .friendship_link h4 {
  182. text-align: left;
  183. color: #828389
  184. }
  185. .friendship_link h4 span {
  186. display: none;
  187. float: right;
  188. font-size: 12px;
  189. color: #e5e5e6;
  190. padding: 2px 20px 2px 0;
  191. background: url(../../../image/index_more_ico.png) no-repeat right;
  192. }
  193. .friendship_link_tit {
  194. margin-bottom: 30px
  195. }
  196. .friendship_link_content {
  197. text-align: left;
  198. margin-bottom: 10px
  199. }
  200. .friendship_link_content a {
  201. border-right: 1px solid #828389;
  202. padding-right: 10px;
  203. margin-right: 7px;
  204. color: #828389
  205. }
  206. .friendship_link_content a:last-child {
  207. margin-right: 0;
  208. border: none;
  209. padding: 0
  210. }
  211. .footer_contact {
  212. height: 140px;
  213. margin-top: 30px;
  214. margin-bottom: 10px;
  215. }
  216. .footer_contact>div {
  217. width: 33.3%;
  218. height: 100%;
  219. float: left;
  220. color: #ffffff;
  221. border-right: 1px solid #44454a
  222. }
  223. .footer_contact>div:last-child {
  224. border: none
  225. }
  226. .footer_contact>div p {
  227. margin-top: 95px
  228. }
  229. .footer_contact .address {
  230. background: url(../../../image/footer_ico_1.png) no-repeat;
  231. background-position: center 30px;
  232. }
  233. .footer_contact .tel {
  234. background: url(../../../image/footer_ico_2.png) no-repeat;
  235. background-position: center 30px;
  236. }
  237. .footer_contact>div:last-child {
  238. background: url(../../../image/QR_ico.png) no-repeat center
  239. }
  240. }
  241. .company_link {
  242. font-size: 12px;
  243. padding-top: 30px;
  244. border-top: 1px solid #44454a
  245. }
  246. .company_link a:first-child {
  247. border-right: 1px solid #727379;
  248. padding-right: 10px;
  249. margin-right: 7px
  250. }
  251. .support {
  252. margin-top: 10px;
  253. padding-bottom: 30px;
  254. font-size: 12px
  255. }
  256. }
  257. .portal-nav {
  258. width: 1280px;
  259. height: 70px;
  260. margin: 0 auto;
  261. border-bottom: 1px solid #ececec;
  262. .nav-logoBox {
  263. float: left;
  264. width: 154px;
  265. height: 53px;
  266. padding-top: 53px;
  267. margin-top: 8px;
  268. position: relative;
  269. img {
  270. width: 154px;
  271. height: 53px;
  272. position: absolute;
  273. top: 0;
  274. left: 0;
  275. }
  276. }
  277. .nav-list {
  278. float: left;
  279. margin-left: 100px;
  280. li {
  281. float: left;
  282. width: 200px;
  283. height: 70px;
  284. line-height: 70px;
  285. text-align: center;
  286. a {
  287. display: inline-block;
  288. width: 200px;
  289. font-size: 18px;
  290. color: #333;
  291. }
  292. &:hover {
  293. background: #58a3ff;
  294. a {
  295. color: #fff;
  296. }
  297. }
  298. }
  299. .active {
  300. border-bottom: 2px solid #58a3ff;
  301. a {
  302. color: #58a3ff
  303. }
  304. }
  305. }
  306. }
  307. .portal-content {
  308. width: 1280px;
  309. margin: 0 auto; //background: #e0e0e0;
  310. padding-top: 56px;
  311. margin-bottom: 120px;
  312. .nav-search {
  313. float: right;
  314. height: 28px;
  315. width: 250px;
  316. margin-right: 50px;
  317. position: relative;
  318. >input {
  319. position: absolute;
  320. top: 0;
  321. left: 0;
  322. border-right: none;
  323. padding-left: 10px;
  324. width: 200px;
  325. border-top-left-radius: 14px;
  326. border-bottom-left-radius: 14px;
  327. border-top-right-radius: 0;
  328. border-bottom-right-radius: 0;
  329. }
  330. >button {
  331. position: absolute;
  332. right: 0;
  333. vertical-align: middle;
  334. border-top-left-radius: 0;
  335. border-bottom-left-radius: 0;
  336. border-top-right-radius: 14px;
  337. border-bottom-right-radius: 14px;
  338. border: none;
  339. height: 28px;
  340. background: #58a3ff;
  341. >img {
  342. vertical-align: middle;
  343. }
  344. }
  345. }
  346. .search-criteria {
  347. margin-bottom: 10px;
  348. border-bottom: 1px dotted #ccc;
  349. }
  350. .ant-radio-group {
  351. >label {
  352. border-radius: 0px;
  353. border: 1px solid #d9d9d9;
  354. margin-right: 10px;
  355. margin-bottom: 10px;
  356. }
  357. .ant-radio-button-wrapper-checked {
  358. border: 1px solid #58a3ff;
  359. box-shadow: none;
  360. }
  361. }
  362. .search-title {
  363. text-align: center;
  364. span {
  365. line-height: 28px;
  366. }
  367. }
  368. ul {
  369. box-sizing: border-box;
  370. margin-top: 20px;
  371. margin-left: 10px;
  372. >li {
  373. &:hover {
  374. box-shadow: 0px 0px 12px 2px #58a3ff;
  375. cursor: pointer;
  376. }
  377. }
  378. .user-detail {
  379. float: left;
  380. height: auto;
  381. width: 24%;
  382. background: #fff;
  383. border: 1px solid #d9d9d9;
  384. padding: 20px;
  385. margin-right: 12px;
  386. margin-bottom: 20px;
  387. .logo {
  388. height: 120px;
  389. width: 120px;
  390. margin: 0 auto;
  391. line-height: 120px;
  392. text-align: center;
  393. img {
  394. max-width: 120px;
  395. max-height: 120px;
  396. vertical-align: middle;
  397. }
  398. }
  399. >div:not(:first-child) {
  400. font-size: 16px;
  401. height: 24px;
  402. line-height: 24px;
  403. overflow: hidden;
  404. vertical-align: middle;
  405. color: #999;
  406. }
  407. .name {
  408. margin-top: 10px;
  409. text-align: center;
  410. color: #333;
  411. }
  412. .text-address {
  413. font-size: 18px;
  414. }
  415. .text-Number {
  416. color: #ea0862;
  417. font-size: 18px;
  418. }
  419. .text-unit {
  420. color: #333;
  421. font-size: 18px;
  422. }
  423. }
  424. .org-detail {
  425. float: left;
  426. width: 24%;
  427. height: 300px;
  428. background: #fff;
  429. border: 1px solid #d9d9d9;
  430. padding: 14px;
  431. margin-right: 12px;
  432. margin-bottom: 20px;
  433. .logo {
  434. float: left;
  435. height: 120px;
  436. width: 120px;
  437. position: relative;
  438. padding-top: 120px;
  439. margin: 40px 0;
  440. img {
  441. height: 120px;
  442. width: auto;
  443. position: absolute;
  444. top: 0;
  445. left: 0;
  446. }
  447. }
  448. .detail-right {
  449. float: right;
  450. font-size: 16px;
  451. line-height: 24px;
  452. width: 150px;
  453. height: 100%;
  454. overflow: hidden;
  455. vertical-align: middle;
  456. color: #999;
  457. position: relative;
  458. .detail-text {
  459. position: absolute;
  460. left: 0;
  461. bottom: 0;
  462. }
  463. .name {
  464. color: #333;
  465. }
  466. .text-Number {
  467. color: #ea0862;
  468. font-size: 18px;
  469. }
  470. .text-unit {
  471. color: #333;
  472. font-size: 18px;
  473. }
  474. }
  475. }
  476. }
  477. }
  478. .portal-carousel {
  479. margin: 20px 0;
  480. .slide-box {
  481. img {
  482. width: 100%;
  483. }
  484. }
  485. .slick-dots {
  486. >li {
  487. button {
  488. height: 4px;
  489. width: 20px;
  490. }
  491. }
  492. }
  493. }
  494. .portal-rate {
  495. &:hover {
  496. cursor: default;
  497. }
  498. }
  499. }
  500. .portal-desc-content {
  501. .ant-row {
  502. margin-bottom: 16px;
  503. }
  504. .interest {
  505. a,
  506. button {
  507. float: right;
  508. padding-right: 50px;
  509. line-height: 18px;
  510. i {
  511. vertical-align: middle;
  512. }
  513. }
  514. }
  515. }
  516. .detail_sub {
  517. line-height: 27px;
  518. .detail_sub_icon {
  519. vertical-align: middle;
  520. display: inline-block;
  521. height: 20px;
  522. width: 20px;
  523. padding-top: 20px;
  524. position: relative;
  525. img {
  526. position: absolute;
  527. top: 0;
  528. left: 0;
  529. height: 20px;
  530. }
  531. }
  532. .detail_sub_title {
  533. color: #666;
  534. margin-left: 6px;
  535. margin-right: 6px;
  536. }
  537. .detail_sub_text {
  538. color: #333;
  539. i {
  540. background: #ccc;
  541. border-radius: 2px;
  542. padding: 0 6px;
  543. margin-right: 6px;
  544. }
  545. }
  546. .detail_sub_demandDes {
  547. display: inline-block;
  548. width: 480px;
  549. line-height: 20px;
  550. height: 22px;
  551. vertical-align: middle;
  552. color: #333;
  553. overflow: hidden;
  554. text-overflow: ellipsis;
  555. white-space: nowrap;
  556. }
  557. .money_text {
  558. color: #58a3ff;
  559. }
  560. .detail_sub_score {
  561. display: inline-block;
  562. width: 90px;
  563. >span {
  564. overflow: hidden;
  565. display: inline-block;
  566. vertical-align: top;
  567. }
  568. }
  569. }
  570. .detail_interest_sub {
  571. list-style: none;
  572. margin-bottom: 20px;
  573. >li {
  574. float: left;
  575. margin-left: 20px;
  576. width: 48%;
  577. margin-top: 20px;
  578. border: 1px solid #ececec;
  579. padding: 0 20px 20px;
  580. }
  581. .interest_list_title {
  582. line-height: 40px;
  583. padding-left: 60px;
  584. position: relative;
  585. >img {
  586. width: 30px;
  587. position: absolute;
  588. left: -12px;
  589. top: -1px;
  590. }
  591. >p {
  592. font-size: 20px;
  593. color: #58a3ff;
  594. overflow: hidden;
  595. text-overflow: ellipsis;
  596. white-space: nowrap;
  597. }
  598. }
  599. .interest_list_name {
  600. position: relative;
  601. height: 24px;
  602. >p {
  603. font-size: 16px;
  604. text-align: right;
  605. padding-right: 120px;
  606. color: #58a3ff;
  607. }
  608. .interest_list_confirm {
  609. position: absolute;
  610. right: 10px;
  611. top: 2px;
  612. span {
  613. margin-right: 10px;
  614. }
  615. img {
  616. height: 22px;
  617. width: 22px;
  618. vertical-align: middle;
  619. }
  620. }
  621. }
  622. }