achievement.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  1. /*
  2. @update:2018/06/06
  3. */
  4. /* 最新发布 */
  5. .newRelease{
  6. clear: both;
  7. text-align: center;
  8. }
  9. .newRelease>div{
  10. width:270px;
  11. height: 60px;
  12. background: url(../../../img/newMenu/achievement_1.jpg) no-repeat;
  13. background-size: 100% 100%;
  14. margin: 24px auto 30px;
  15. }
  16. .blur{
  17. color: #0289df;
  18. }
  19. .orange{
  20. color: #ff6d0b;
  21. }
  22. .newRelease ul{
  23. display: flex;
  24. display: -webkit-flex;
  25. justify-content: space-between;
  26. }
  27. .newRelease ul li{
  28. transition: all .5s ease-in;
  29. }
  30. .newRelease ul li div{
  31. padding:10px 10px;
  32. background: #f9f9f9;
  33. }
  34. .newRelease ul li div p {
  35. text-align: left;
  36. overflow: hidden;
  37. white-space:nowrap;
  38. text-overflow:ellipsis;
  39. -o-text-overflow:ellipsis;
  40. color: #333;
  41. line-height: 24px;
  42. height: 24px;
  43. }
  44. .newRelease ul li div p span{
  45. font-size: 12px;
  46. }
  47. .newRelease ul li div p .orange{
  48. display: inline-block;
  49. margin-right: 12px;
  50. }
  51. .newRelease>a{
  52. color: #7a7878;
  53. display: inline-block;
  54. padding: 22px 0px 55px;
  55. }
  56. .newRelease>a:hover{
  57. color: #0289df;
  58. }
  59. /* 热门关注 */
  60. .achievementHot>div{
  61. width: 140px;
  62. height:22px;
  63. background: url(../../../img/newMenu/achievement_7.jpg) no-repeat;
  64. background-size:100% 100%;
  65. float: left;
  66. vertical-align: top;
  67. margin-top: -2px;
  68. margin-right: 12px;
  69. }
  70. .achievementHot ol{
  71. float: left;
  72. }
  73. .achievementHot ol li{
  74. color: #393838;
  75. float: left;
  76. margin: 0 7px;
  77. }
  78. .achievementHot{
  79. clear: both;
  80. overflow: hidden;
  81. margin-bottom: 6px;
  82. }
  83. .achievementHot ol li a:hover{
  84. color: #0289df;
  85. }
  86. .achievementHot a{
  87. float: right;
  88. font-size: 14px;
  89. color: #7a7878;
  90. }
  91. .achievementHot a:hover{
  92. color:#0289df;
  93. }
  94. .achievementHot-list{
  95. clear: both;
  96. overflow: hidden;
  97. }
  98. .achievementHot-list .row{
  99. margin: 0;
  100. }
  101. .achievementHot-list ul li div{
  102. overflow: hidden;
  103. }
  104. .achievementHot-list .col-sm-4{
  105. padding: 0
  106. }
  107. .achievementHot-list ul li{
  108. margin-bottom: 18px;
  109. }
  110. .achievementHot-list ul li div img {
  111. float: left;
  112. width: 112px;
  113. height: 112px;
  114. }
  115. .achievementHot-list ul li div div{
  116. width: 273px;
  117. height: 112px;
  118. float: left;
  119. border: 1px solid #ccc;
  120. border-left: none;
  121. }
  122. .achievementHot-list ul li div div h4{
  123. font-weight: normal;
  124. font-size: 14px;
  125. color: #1f1f1f;
  126. overflow: hidden;
  127. white-space:nowrap;
  128. text-overflow:ellipsis;
  129. -o-text-overflow:ellipsis;
  130. border-bottom: 1px double #ccc;
  131. height: 42px;
  132. line-height: 42px;
  133. padding-left: 20px;
  134. }
  135. hr{
  136. clear: both;
  137. margin: 10px 0 18px;
  138. border:2px solid #ff6113;
  139. }
  140. .achievementHot-list ul li div div p{
  141. padding-left: 20px;
  142. margin: 8px 0;
  143. }
  144. .achievementHot-list ul li div div p .orange{
  145. font-size: 12px;margin-right: 30px;
  146. display: inline-block;
  147. }
  148. .achievementHot-list ul li div div p .blur{
  149. font-size: 12px;
  150. display: inline-block;
  151. }
  152. .achievementHot-list ul li div div p .technology{
  153. float: right;
  154. display: inline-block;
  155. width: 70px;
  156. height: 24px;
  157. line-height: 24px;
  158. text-align: center;
  159. border: 1px solid #ff6113;
  160. color: #ff6113;
  161. }
  162. .achievementHot-list ul li div div p .follow{
  163. float: right;
  164. display: inline-block;
  165. width: 50px;
  166. height: 24px;
  167. line-height: 24px;
  168. text-align: center;
  169. background: #ff6113;
  170. color: #ffffff;
  171. border-radius: 12px;
  172. margin:0 12px;
  173. }
  174. .study {
  175. padding: 50px 0 30px;
  176. }
  177. .study h4 {
  178. font-weight: normal;
  179. font-size: 22px;
  180. color: #1f1f1f;
  181. }
  182. .study h4 a {
  183. display: inline-block;
  184. color: #cacaca;
  185. font-size: 12px;
  186. margin-left: 24px;
  187. }
  188. .study h4 a:hover{
  189. color: #0289df;
  190. }
  191. .patent img{
  192. width: 100%;
  193. }
  194. .patentList{
  195. padding-top: 46px;
  196. }
  197. .patentList .col-sm-4>img{
  198. width: 100%;
  199. height: 213px;
  200. }
  201. .patentList .col-sm-4 div>img{
  202. height: 230px;
  203. height: 114px;
  204. }
  205. .patentList>.row>.col-sm-4 img:first-child{
  206. margin-bottom: 14px;
  207. }
  208. .patentList ul li img{
  209. width: 100%;
  210. }
  211. .patentList ul li {
  212. margin-bottom: 5px;
  213. }
  214. .patentList ul li div p{
  215. overflow: hidden;
  216. white-space:nowrap;
  217. text-overflow:ellipsis;
  218. -o-text-overflow:ellipsis;
  219. line-height: 30px;
  220. }
  221. .achieveBj img{
  222. margin-top: 16px;
  223. width: 100%;
  224. height: 90px;
  225. }
  226. /* 实用技术 */
  227. .practical {
  228. clear: both;
  229. }
  230. .practical .practicalLeft{
  231. float: left;
  232. width: 940px;
  233. }
  234. .practicalLeft ul li {
  235. cursor: pointer;
  236. width: 170px;
  237. margin-right: 30px;
  238. float: left;
  239. padding-left: 28px;
  240. border-left: 1px solid #dfdfdf;
  241. }
  242. .practicalLeft ul li .imgBj{
  243. position: relative;
  244. width: 100%;
  245. }
  246. .practicalLeft ul li .imgBj img{
  247. width: 100%;
  248. }
  249. .practicalLeft ul li .imgBj span{
  250. position: absolute;
  251. top: 0;
  252. left: 0;
  253. width: 44px;
  254. height: 40px;
  255. display: inline-block;
  256. background: url(../../../img/newMenu/achievement_26.png) no-repeat;
  257. background-size:100% 100%;
  258. }
  259. .practicalLeft ul li .txts h5,.practicalGrounpTxt .txts h5{
  260. font-weight: normal;
  261. font-size: 14px;
  262. color: #1f1f1f;
  263. overflow: hidden;
  264. white-space:nowrap;
  265. text-overflow:ellipsis;
  266. -o-text-overflow:ellipsis;
  267. padding: 10px 2px;
  268. }
  269. .practicalLeft ul li .txts p span,.practicalGrounpTxt .txts p span {
  270. color: #7a7878;
  271. font-size: 12px;
  272. display: inline-block;
  273. margin-right: 5px;
  274. }
  275. .practicalLeft ul li .txts .hotImg,.practicalGrounpTxt .txts .hotImg{
  276. float: right;
  277. margin-right: 0px;
  278. height: 18px;
  279. width: 32px;
  280. display: inline-block;
  281. background:url(../../../img/newMenu/achievement_hot.jpg) no-repeat;
  282. background-size:100% 100%;
  283. }
  284. .practicalLeft ul li:first-child{
  285. width: 140px;
  286. border: none;
  287. padding-left:0;
  288. }
  289. .practicalLeft ul li:last-child{
  290. margin-right: 0px;
  291. }
  292. .practicalLeft ul li .hr,.practicalGrounpTxt .hr{
  293. width: 100%;
  294. height: 18px;
  295. background: url(../../../img/newMenu/achievement_27.jpg) no-repeat;
  296. background-size:100% 100%;
  297. margin: 4px 0px;
  298. }
  299. .practicalLeft .btnTxt span,.practicalGrounpTxt .btnTxt span {
  300. width: 64px;
  301. height: 24px;
  302. display: inline-block;
  303. text-align: center;
  304. font-size: 14px;
  305. color: #ff6600;
  306. border: 1px solid #ff6600;
  307. line-height: 24px;
  308. margin: 0 3px;
  309. }
  310. .practical .practicalRight{
  311. float: right;
  312. width: 190px;
  313. }
  314. .practicalGrounp {
  315. padding-top: 16px;
  316. clear: both;
  317. overflow: hidden;
  318. }
  319. .practicalGrounp ol li{
  320. float: left;
  321. width: 33.00%;
  322. margin-left: 4px;
  323. cursor: pointer;
  324. }
  325. .practicalGrounp ol li img{
  326. float: left;
  327. }
  328. .practicalGrounp ol li:first-child{
  329. margin-left: 0;
  330. }
  331. .practicalGrounp .practicalGrounpTxt{
  332. float: left;
  333. margin: 10px;
  334. width: 144px;
  335. }
  336. .practicalGrounpTxt .hr{
  337. margin-bottom: 15px;
  338. }
  339. .studyT {
  340. clear: both;
  341. padding: 50px 0 36px;
  342. }
  343. .studyT h4 {
  344. font-weight: normal;
  345. font-size: 22px;
  346. color: #1f1f1f;
  347. }
  348. .studyT h4 a {
  349. display: inline-block;
  350. color: #cacaca;
  351. font-size: 12px;
  352. margin-left: 24px;
  353. }
  354. .studyT h4 a:hover{
  355. color: #0289df;
  356. }
  357. .practicalRight {
  358. margin-top: -20px
  359. }
  360. .practicalRight h4{
  361. text-align: center;
  362. font-size: 18px;
  363. font-weight: normal;
  364. }
  365. .practicalRight ul li{
  366. cursor: pointer;
  367. overflow: hidden;
  368. padding: 10px 0px;
  369. }
  370. .practicalRight ul li img{
  371. float: left;
  372. }
  373. .practicalRight ul li div{
  374. float: left;
  375. padding-left:12px;
  376. width: 110px;
  377. }
  378. .practicalRight ul li div p{
  379. font-size: 12px;
  380. height: 24px;
  381. line-height: 24px;
  382. color: #757575;
  383. margin-top: 10px;
  384. overflow: hidden;
  385. white-space:nowrap;
  386. text-overflow:ellipsis;
  387. -o-text-overflow:ellipsis;
  388. }
  389. .practicalRight ul li div hr{
  390. width: 146px;
  391. border: 0.5px solid #e7e7e7;
  392. }
  393. .practicalRight ul li img{
  394. width: 58px;
  395. height: 58px;
  396. }
  397. .practicalRight a{
  398. color: #7a7878;
  399. }
  400. .practicalRight a:hover{
  401. color: #0289df;
  402. }
  403. /* 知识产权交易政策 */
  404. .transaction .transactionImg{
  405. float: left;
  406. width: 680px;
  407. padding-top: 30px;
  408. }
  409. .transaction .transactionImg .img{
  410. width: 330px;
  411. overflow: hidden;
  412. }
  413. .transaction .transactionImg>img{
  414. float: left;
  415. width: 330px;
  416. }
  417. .transaction .transactionImg div{
  418. float: left;
  419. width: 330px;
  420. padding: 15px 0px 0 20px ;
  421. }
  422. .transaction .transactionImg div address{
  423. color: #8c8c8c;
  424. font-size: 16px;
  425. }
  426. .introduce address{
  427. margin-bottom: 10px!important;
  428. }
  429. .transaction .transactionImg div address span{
  430. margin: 0 10px;
  431. display: inline-block;
  432. }
  433. .transaction .transactionImg div time{
  434. color: #8c8c8c;
  435. font-size: 16px;
  436. }
  437. .transaction .transactionImg div h5{
  438. font-weight: normal;
  439. font-size: 16px;
  440. color: #191919;
  441. padding-bottom: 20px;
  442. }
  443. .transaction .transactionImg div p{
  444. font-size: 14px;
  445. color: #7a7878;
  446. line-height: 24px;
  447. padding-bottom: 16px;
  448. }
  449. .transaction .transactionImg div a{
  450. color: #7a7878;
  451. }
  452. .transaction .transactionImg div a:hover{
  453. color: #0289df;
  454. }
  455. .transaction ul li {
  456. height: 100px;
  457. width: 470px;
  458. margin-bottom: 30px;
  459. }
  460. .transaction ul li .time,.transactionList ol li .time{
  461. width: 84px;
  462. text-align: center;
  463. padding:10px;
  464. background: #f9f9f9;
  465. float: left;
  466. }
  467. .transaction ul li .time p,.transactionList ol li .time p{
  468. font-size: 30px;
  469. color: #1f1f1f;
  470. }
  471. .transaction ul li .time span,.transactionList ol li .time span{
  472. font-size: 12px;
  473. color: #8c8c8c;
  474. }
  475. .transaction ul li .time hr,.transactionList ol li .time hr{
  476. border: 0.5px solid #e7e7e7;
  477. margin: 8px 0px ;
  478. }
  479. .transaction ul li .introduce,.transactionList ol li .introduce{
  480. float: left;
  481. width: 386px;
  482. padding: 12px;
  483. }
  484. .transaction .introduce address,.transactionList .introduce address,{
  485. margin-bottom: 10px;
  486. }
  487. .transaction .introduce img,.transactionList .introduce img{
  488. margin-right: 8px;
  489. }
  490. .transaction .introduce .title,.transactionList .introduce .title{
  491. margin-left: 10px;
  492. font-size: 16px;
  493. color:#191919;
  494. }
  495. .transaction .introduce p,.transactionList .introduce p{
  496. color: #7a7878;
  497. font-size: 14px;
  498. line-height: 24px;
  499. }
  500. .transaction ul{
  501. float: right;
  502. }
  503. .transactionList,.transactionList ol{
  504. clear: both;
  505. overflow: hidden;
  506. }
  507. .transactionList ol li{
  508. overflow: hidden;
  509. width: 50%;
  510. }
  511. .transactionList ol li:first-child{
  512. float: left;
  513. }
  514. .transactionList ol li:last-child{
  515. width: 470px;
  516. float: right;
  517. }
  518. /*特效*/
  519. .transactionList ol li:hover .time,.transaction ul li:hover .time{
  520. background: #2f83ce;
  521. }
  522. .transactionList ol li:hover .introduce .title,.transaction ul li:hover .introduce .title{
  523. color: #0289df;
  524. }
  525. .transactionList ol li:hover .time p,.transactionList ol li:hover .time span,.transaction ul li:hover .time span,.transaction ul li:hover .time p {
  526. color: #ffffff;
  527. }
  528. .transaction .transactionImg:hover div>img{
  529. transform: scale(1.1);
  530. transition: all .5s ease-in;
  531. }
  532. .newRelease ul li:hover{
  533. box-shadow: 0 5px 5px #ccc;
  534. margin-top: -5px;
  535. transition: all .2s ease-in;
  536. cursor: pointer;
  537. }
  538. .achievementHot-list ul li:hover div img{
  539. opacity: .5;
  540. transition: all .5s ease-in;
  541. cursor: pointer;
  542. }
  543. .achievementHot-list ul li:hover h4{
  544. color: #0289df;
  545. }
  546. .patentList ul li:hover img{
  547. transform: scale(1.02);
  548. transition: all .5s ease-out;
  549. cursor: pointer;
  550. border-radius:10px;
  551. }
  552. .patentList ul li:hover p{
  553. color: #0289df;
  554. }
  555. .practicalLeft ul li:hover img,.practicalGrounp ol li:hover img{
  556. opacity: .7;
  557. }
  558. .practicalLeft ul li:hover .txts h5,.practicalGrounp ol li:hover .txts h5{
  559. color: #0289df;
  560. }
  561. .practicalRight ul li:hover{
  562. margin-left: -5px;
  563. transition: all .5s;
  564. }
  565. .practicalRight ul li:hover p{
  566. color: #0289df;
  567. }