portal.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
  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: 1000px;
  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: 1000px;
  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: 10%;
  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. footer {
  166. background: #3c3d43;
  167. text-align: center;
  168. padding-top: 20px;
  169. .container {
  170. width: 1280px;
  171. margin: 0 auto;
  172. padding-right: 0;
  173. padding-left: 0;
  174. .friendship_link {
  175. margin-top: 20px;
  176. font-size: 12px
  177. }
  178. .friendship_link h4 {
  179. text-align: left;
  180. color: #828389
  181. }
  182. .friendship_link h4 span {
  183. display: none;
  184. float: right;
  185. font-size: 12px;
  186. color: #e5e5e6;
  187. padding: 2px 20px 2px 0;
  188. background: url(../../../image/index_more_ico.png) no-repeat right;
  189. }
  190. .friendship_link_tit {
  191. margin-bottom: 30px
  192. }
  193. .friendship_link_content {
  194. text-align: left;
  195. margin-bottom: 10px
  196. }
  197. .friendship_link_content a {
  198. border-right: 1px solid #828389;
  199. padding-right: 10px;
  200. margin-right: 7px;
  201. color: #828389
  202. }
  203. .friendship_link_content a:last-child {
  204. margin-right: 0;
  205. border: none;
  206. padding: 0
  207. }
  208. .footer_contact {
  209. height: 140px;
  210. margin-top: 30px;
  211. margin-bottom: 10px;
  212. }
  213. .footer_contact>div {
  214. width: 33.3%;
  215. height: 100%;
  216. float: left;
  217. color: #ffffff;
  218. border-right: 1px solid #44454a
  219. }
  220. .footer_contact>div:last-child {
  221. border: none
  222. }
  223. .footer_contact>div p {
  224. margin-top: 95px
  225. }
  226. .footer_contact .address {
  227. background: url(../../../image/footer_ico_1.png) no-repeat;
  228. background-position: center 30px;
  229. }
  230. .footer_contact .tel {
  231. background: url(../../../image/footer_ico_2.png) no-repeat;
  232. background-position: center 30px;
  233. }
  234. .footer_contact>div:last-child {
  235. background: url(../../../image/QR_ico.png) no-repeat center
  236. }
  237. }
  238. .company_link {
  239. font-size: 12px;
  240. padding-top: 30px;
  241. border-top: 1px solid #44454a
  242. }
  243. .company_link a:first-child {
  244. border-right: 1px solid #727379;
  245. padding-right: 10px;
  246. margin-right: 7px
  247. }
  248. .support {
  249. margin-top: 10px;
  250. padding-bottom: 30px;
  251. font-size: 12px
  252. }
  253. }
  254. .portal-nav {
  255. width: 1280px;
  256. height: 70px;
  257. margin: 0 auto;
  258. border-bottom: 1px solid #ececec;
  259. .nav-logoBox {
  260. float: left;
  261. width: 154px;
  262. height: 53px;
  263. padding-top: 53px;
  264. margin-top: 8px;
  265. position: relative;
  266. img {
  267. width: 154px;
  268. height: 53px;
  269. position: absolute;
  270. top: 0;
  271. left: 0;
  272. }
  273. }
  274. .nav-list {
  275. float: left;
  276. margin-left: 100px;
  277. li {
  278. float: left;
  279. width: 200px;
  280. height: 70px;
  281. line-height: 70px;
  282. text-align: center;
  283. a {
  284. display: inline-block;
  285. width: 200px;
  286. font-size: 18px;
  287. color: #333;
  288. }
  289. &:hover {
  290. background: #58a3ff;
  291. a {
  292. color: #fff;
  293. }
  294. }
  295. }
  296. .active {
  297. border-bottom: 2px solid #58a3ff;
  298. a {
  299. color: #58a3ff
  300. }
  301. }
  302. }
  303. }
  304. .portal-content {
  305. width: 1280px;
  306. margin: 0 auto; //background: #e0e0e0;
  307. padding-top: 56px;
  308. margin-bottom: 120px;
  309. .nav-search {
  310. float: right;
  311. height: 28px;
  312. width: 250px;
  313. margin-right: 50px;
  314. position: relative;
  315. >input {
  316. position: absolute;
  317. top: 0;
  318. left: 0;
  319. border-right: none;
  320. padding-left: 10px;
  321. width: 200px;
  322. border-top-left-radius: 14px;
  323. border-bottom-left-radius: 14px;
  324. border-top-right-radius: 0;
  325. border-bottom-right-radius: 0;
  326. }
  327. >button {
  328. position: absolute;
  329. right: 0;
  330. vertical-align: middle;
  331. border-top-left-radius: 0;
  332. border-bottom-left-radius: 0;
  333. border-top-right-radius: 14px;
  334. border-bottom-right-radius: 14px;
  335. border: none;
  336. height: 28px;
  337. background: #58a3ff;
  338. >img {
  339. vertical-align: middle;
  340. }
  341. }
  342. }
  343. .search-criteria {
  344. margin-bottom: 10px;
  345. border-bottom: 1px dotted #ccc;
  346. }
  347. .ant-radio-group {
  348. >label {
  349. border-radius: 0px;
  350. border: 1px solid #d9d9d9;
  351. margin-right: 10px;
  352. margin-bottom: 10px;
  353. }
  354. .ant-radio-button-wrapper-checked {
  355. border: 1px solid #58a3ff;
  356. box-shadow: none;
  357. }
  358. }
  359. .search-title {
  360. text-align: center;
  361. span {
  362. line-height: 28px;
  363. }
  364. }
  365. ul {
  366. box-sizing: border-box;
  367. margin-top: 20px;
  368. margin-left: 10px;
  369. >li {
  370. &:hover {
  371. box-shadow: 0px 0px 12px 2px #58a3ff;
  372. }
  373. }
  374. .user-detail {
  375. float: left;
  376. height: auto;
  377. width: 24%;
  378. background: #fff;
  379. border: 1px solid #d9d9d9;
  380. padding: 20px;
  381. margin-right: 12px;
  382. margin-bottom: 20px;
  383. .logo {
  384. height: 120px;
  385. width: 120px;
  386. position: relative;
  387. padding-top: 120px;
  388. margin: 0 auto;
  389. img {
  390. height: 120px;
  391. width: auto;
  392. position: absolute;
  393. top: 0;
  394. left: 0;
  395. }
  396. }
  397. >div:not(:first-child) {
  398. font-size: 16px;
  399. height: 24px;
  400. line-height: 24px;
  401. overflow: hidden;
  402. vertical-align: middle;
  403. color: #999;
  404. }
  405. .name {
  406. margin-top: 10px;
  407. text-align: center;
  408. color: #333;
  409. }
  410. .text-address {
  411. font-size: 18px;
  412. }
  413. .text-Number {
  414. color: #ea0862;
  415. font-size: 18px;
  416. }
  417. .text-unit {
  418. color: #333;
  419. font-size: 18px;
  420. }
  421. }
  422. .org-detail {
  423. float: left;
  424. width: 24%;
  425. height: 300px;
  426. background: #fff;
  427. border: 1px solid #d9d9d9;
  428. padding: 14px;
  429. margin-right: 12px;
  430. margin-bottom: 20px;
  431. .logo {
  432. float: left;
  433. height: 120px;
  434. width: 120px;
  435. position: relative;
  436. padding-top: 120px;
  437. margin: 40px 0;
  438. img {
  439. height: 120px;
  440. width: auto;
  441. position: absolute;
  442. top: 0;
  443. left: 0;
  444. }
  445. }
  446. .detail-right {
  447. float: right;
  448. font-size: 16px;
  449. line-height: 24px;
  450. width: 150px;
  451. height: 100%;
  452. overflow: hidden;
  453. vertical-align: middle;
  454. color: #999;
  455. position: relative;
  456. .detail-text {
  457. position: absolute;
  458. left: 0;
  459. bottom: 0;
  460. }
  461. .name {
  462. color: #333;
  463. }
  464. .text-Number {
  465. color: #ea0862;
  466. font-size: 18px;
  467. }
  468. .text-unit {
  469. color: #333;
  470. font-size: 18px;
  471. }
  472. }
  473. }
  474. }
  475. }
  476. .portal-carousel {
  477. margin: 20px 0;
  478. .slide-box {
  479. img {
  480. width: 100%;
  481. }
  482. }
  483. .slick-dots {
  484. >li {
  485. button {
  486. height: 4px;
  487. width: 20px;
  488. }
  489. }
  490. }
  491. }
  492. .portal-rate {
  493. &:hover {
  494. cursor: default;
  495. }
  496. }
  497. }
  498. .portal-desc-content {
  499. .ant-row {
  500. margin-bottom: 16px;
  501. }
  502. .interest {
  503. a,
  504. button {
  505. float: right;
  506. padding-right: 50px;
  507. line-height: 18px;
  508. i {
  509. vertical-align: middle;
  510. }
  511. }
  512. }
  513. }
  514. .detial_sub {
  515. line-height: 32px;
  516. .detial_sub_icon {
  517. vertical-align: middle;
  518. display: inline-block;
  519. height: 20px;
  520. width: 20px;
  521. padding-top: 20px;
  522. position: relative;
  523. img {
  524. position: absolute;
  525. top: 0;
  526. left: 0;
  527. height: 20px;
  528. }
  529. }
  530. .detial_sub_title {
  531. color: #666;
  532. margin-left: 6px;
  533. margin-right: 6px;
  534. }
  535. .detial_sub_text {
  536. color: #333;
  537. i {
  538. background: #ccc;
  539. border-radius: 2px;
  540. padding: 0 6px;
  541. margin-right: 6px;
  542. }
  543. }
  544. .money_text {
  545. color: #58a3ff;
  546. }
  547. .detial_sub_score {
  548. display: inline-block;
  549. width: 90px;
  550. >span {
  551. overflow: hidden;
  552. display: inline-block;
  553. vertical-align: top;
  554. }
  555. }
  556. }
  557. .detail_interest_sub {
  558. list-style: none;
  559. margin-bottom: 20px;
  560. >li {
  561. float: left;
  562. margin-left: 20px;
  563. width: 48%;
  564. margin-top: 20px;
  565. border: 1px solid #ececec;
  566. padding: 0 20px 20px;
  567. &:hover {
  568. box-shadow: 0px 0px 4px #58a3ff;
  569. }
  570. }
  571. .interest_list_title {
  572. line-height: 40px;
  573. padding-left: 60px;
  574. position: relative;
  575. >img {
  576. width: 30px;
  577. position: absolute;
  578. left: -12px;
  579. top: -1px;
  580. }
  581. >span {
  582. font-size: 20px;
  583. color: #58a3ff;
  584. }
  585. }
  586. .interest_list_name {
  587. position: relative;
  588. height: 24px;
  589. >p {
  590. font-size: 16px;
  591. text-align: right;
  592. padding-right: 120px;
  593. color: #58a3ff;
  594. }
  595. .interest_list_confirm {
  596. position: absolute;
  597. right: 10px;
  598. top: 2px;
  599. span {
  600. margin-right: 10px;
  601. }
  602. img {
  603. height: 22px;
  604. width: 22px;
  605. vertical-align: middle;
  606. }
  607. }
  608. }
  609. }