index.css 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. .page-main-container {
  2. display: flex;
  3. }
  4. .page-main-container.page-main-1 {
  5. margin-top: 20px;
  6. }
  7. .page-main-container:not(:first-of-type) {
  8. margin-top: 20px;
  9. }
  10. .page-main-content {
  11. flex: 1;
  12. max-width: 74.2%;
  13. }
  14. .page-main-aside {
  15. margin-left: 20px;
  16. width: 288px;
  17. }
  18. .page-main-3 {
  19. margin-bottom: 20px;
  20. }
  21. .page-main-4 {
  22. margin-bottom: 120px;
  23. }
  24. .page-main{
  25. margin-top: 48px;
  26. margin-bottom: 140px;
  27. }
  28. .page-main-t72{
  29. margin-top: 72px;
  30. margin-bottom: 140px;
  31. }
  32. .section-card {
  33. width: 100%;
  34. overflow: hidden;
  35. }
  36. .section-card:not(:first-of-type) {
  37. margin-top: 32px;
  38. }
  39. .section-card .section-card-header {
  40. display: flex;
  41. align-items: flex-end;
  42. width: 100%;
  43. margin-bottom: 20px;
  44. }
  45. .section-card .section-card-title {
  46. font-size: 28px;
  47. line-height: 36px;
  48. }
  49. .section-card .section-card-line {
  50. flex: 1;
  51. margin-left: 8px;
  52. color: #e0e0e0;
  53. line-height: 30px;
  54. }
  55. .section-card .section-card-content {
  56. display: flex;
  57. flex-wrap: wrap;
  58. width: 100%;
  59. }
  60. .section-card.column-2 .cms-card {
  61. width: 434px;
  62. margin-bottom: 20px;
  63. }
  64. .section-card.column-2 .cms-card:not(.column-2):nth-of-type(2n) {
  65. margin-left: 22px;
  66. }
  67. .section-card.column-3 .cms-card {
  68. width: 386px;
  69. }
  70. .section-card.column-3 .cms-card:nth-of-type(3n), /* 3n表示3的倍数,即3,6,9... */
  71. .section-card.column-3 .cms-card:nth-of-type(3n-1) { /* 3n-1表示3的倍数减1,即2,5,8... */
  72. margin-left: 20px;
  73. }
  74. /* aside-card */
  75. .aside-card {
  76. overflow: hidden;
  77. border-radius: 8px;
  78. color: #1d1d1d;
  79. border: 1px solid #ECECEC;
  80. background-color: #fff;
  81. }
  82. .aside-card-header {
  83. padding: 12px 20px;
  84. color: #fff;
  85. font-weight: bold;
  86. background-color: #2ABED1;
  87. }
  88. .aside-card-title {
  89. font-size: 18px;
  90. line-height: 24px;
  91. }
  92. .aside-card-content {
  93. padding: 20px 12px;
  94. }
  95. /* 地区广告位 */
  96. .area-ad-container{
  97. width: 342px;
  98. height: 386px;
  99. border-radius: 8px;
  100. background-color: rgba(217, 217, 217, 0.3);
  101. }
  102. .action-ad-right .btn-action {
  103. display: flex;
  104. align-items: center;
  105. }
  106. .btn-action .btn {
  107. display: flex;
  108. justify-content: center;
  109. align-items: center;
  110. flex: 1;
  111. height: 40px;
  112. background: #F56500;
  113. color: #FFF;
  114. font-size: 16px;
  115. border-radius: 4px;
  116. }
  117. .btn-action .btn.color-main {
  118. background: #2ABED1;
  119. }
  120. .action-ad-right .action-words .words-title{
  121. padding: 12px 0 8px;
  122. font-size: 16px;
  123. line-height: 24px;
  124. font-weight: 700;
  125. color: #2ABED1;
  126. font-family: '黑体';
  127. text-align: center;
  128. }
  129. .action-ad-right .action-words .words-text{
  130. margin-bottom: 2px;
  131. padding: 0 14px;
  132. font-size: 13px;
  133. line-height: 20px;
  134. color: #1D1D1D;
  135. }
  136. .action-ad-right .action-words .words-text > span{
  137. color: #686868;
  138. text-align: left;
  139. }
  140. .action-ad-right .action-ad-img {
  141. margin-top: 18px;
  142. width: 288px;
  143. height: 336px;
  144. }
  145. /* 相关网站 */
  146. .related-site{
  147. margin-top: 32px;
  148. }
  149. /* 友情链接 */
  150. .friend-link{
  151. margin-top: 12px;
  152. }
  153. .link-header{
  154. display: flex;
  155. align-items: baseline;
  156. }
  157. .link-header > h2{
  158. color: #2ABED1;
  159. font-size: 28px;
  160. }
  161. .link-header > .slash{
  162. flex: 1;
  163. margin-left: 13px;
  164. display: inline-block;
  165. height: 22px;
  166. background: url(/jybx/images/slash.png) no-repeat center bottom;
  167. background-size: contain;
  168. }
  169. .link-container{
  170. padding: 20px 0;
  171. }
  172. .link-container.link-border{
  173. border-bottom: 1px solid #ececec;
  174. }
  175. .link-container,
  176. .link-container li{
  177. font-style: normal;
  178. }
  179. .link-desc{
  180. margin-top: 8px;
  181. color: #686868;
  182. font-size: 14px;
  183. line-height: 22px;
  184. text-align: justify;
  185. }
  186. .link-title{
  187. font-size: 14px;
  188. line-height: 22px;
  189. color: #1D1D1D;
  190. font-weight: bold;
  191. }
  192. .link-list{
  193. display: flex;
  194. flex-wrap: wrap;
  195. }
  196. .link-item{
  197. flex: 1;
  198. display: inline-block;
  199. margin: 8px 32px 0 0;
  200. color: #686868;
  201. font-size: 14px;
  202. line-height: 22px;
  203. }
  204. .link-item:hover{
  205. color: #2ABED1;
  206. text-decoration: underline;
  207. }
  208. .friend-link .link-item{
  209. width: 144px;
  210. }
  211. .friend-link .link-item:nth-child(7n){
  212. margin-right: 0;
  213. }
  214. .aside-module {
  215. margin-bottom: 20px;
  216. }
  217. .area-aside-item {
  218. position: relative;
  219. display: flex;
  220. align-items: center;
  221. justify-content: space-between;
  222. font-size: 14px;
  223. line-height: 28px;
  224. }
  225. .area-aside-item:not(:last-of-type) {
  226. margin-bottom: 20px;
  227. }
  228. .area-aside-item .area-aside-item-name {
  229. position: absolute;
  230. left: 0;
  231. top: 0;
  232. bottom: 0;
  233. display: flex;
  234. align-items: center;
  235. justify-content: center;
  236. padding: 2px 12px;
  237. border-radius: 8px;
  238. background: linear-gradient(180deg, rgba(42, 190, 209, 0.1) 0%, rgba(42, 190, 209, 0) 100%);
  239. }
  240. .area-aside-item-name a {
  241. color: #2ABED1;
  242. font-size: inherit;
  243. }
  244. .area-aside-item .area-aside-item-children {
  245. padding-left: 58px;
  246. display: flex;
  247. align-items: center;
  248. flex: 1;
  249. flex-wrap: wrap;
  250. }
  251. .area-aside-item .area-aside-item-child {
  252. margin: 0 6px;
  253. }
  254. .industry-aside-item-links {
  255. color: #686868;
  256. font-size: 12px;
  257. line-height: 22px;
  258. }
  259. .industry-aside-list ul li {
  260. margin-top: 10px;
  261. }
  262. .industry-aside-list ul {
  263. list-style: unset;
  264. font-size: 12px;
  265. line-height: 22px;
  266. padding-left: 20px;
  267. }
  268. .industry-aside-list {
  269. color: #1D1D1D;
  270. padding: 0 16px;
  271. }
  272. .industry-aside-item {
  273. padding: 10px 4px;
  274. border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  275. }
  276. .industry-aside-item-name {
  277. font-size: 14px;
  278. font-weight: 700;
  279. line-height: 22px;
  280. }
  281. .industry-aside-item-name::after {
  282. content: '';
  283. display: inline-block;
  284. width: 4px;
  285. height: 14px;
  286. background-image: url(list/image/icon-right-arrow.png);
  287. background-repeat: no-repeat;
  288. background-size: 4px 6px;
  289. vertical-align: middle;
  290. background-position: 0px 3px;
  291. }
  292. /* 底部地区导航 */
  293. .area-group--bottom {
  294. display: flex;
  295. flex-direction: row;
  296. align-items: center;
  297. margin-bottom: 22px;
  298. }
  299. .area-item--bottom .area-aside-item .area-aside-item-name{
  300. max-height: 28px;
  301. }
  302. .area-item--bottom {
  303. width: 25%;
  304. align-self: flex-start;
  305. }
  306. .city-aside-list {
  307. display: flex;
  308. flex-wrap: wrap;
  309. font-size: 14px;
  310. line-height: 22px;
  311. }
  312. .city-aside-item {
  313. /* width: 48%; */
  314. width: auto;
  315. min-width: 42px;
  316. margin: 0 6px 20px;
  317. }
  318. /* .city-aside-item:nth-of-type(2n) {
  319. margin-left: 4px;
  320. }
  321. .city-aside-item:nth-of-type(n+3) {
  322. margin-top: 20px;
  323. } */
  324. .industry-aside-item-content {
  325. font-size: 12px;
  326. line-height: 22px;
  327. }
  328. .industry-aside-item-links a {
  329. margin-right: 6px;
  330. color: #686868;
  331. }
  332. /* 信息类型页面 */
  333. .page-main-stype{
  334. background: #F5F6F7;
  335. }
  336. .page-main-stype .header-nav{
  337. background: rgba(255, 255, 255, 0.8);
  338. }
  339. .page-main-stype .aside-login{
  340. background-color: #fff;
  341. }
  342. .page-main-stype .content-nav{
  343. display: flex;
  344. padding: 16px 17px 8px;
  345. background: #fff;
  346. border-radius: 8px;
  347. }
  348. .page-main-stype .content-nav-label{
  349. padding-top: 2px;
  350. font-size: 14px;
  351. line-height: 18px;
  352. color: #686868;
  353. }
  354. .page-main-stype .content-nav-value{
  355. flex: 1;
  356. display: flex;
  357. align-items: center;
  358. flex-wrap: wrap;
  359. }
  360. .page-main-stype .content-nav-item{
  361. padding: 2px 6px;
  362. margin-left: 8px;
  363. margin-bottom: 8px;
  364. font-size: 14px;
  365. line-height: 18px;
  366. color: #1D1D1D;
  367. border-radius: 2px;
  368. background-color: transparent;
  369. cursor: pointer;
  370. }
  371. .page-main-stype .content-nav-item:hover,
  372. .page-main-stype .content-nav-item.active{
  373. background: #2ABED1;
  374. color: #fff;
  375. }
  376. .page-main-stype .breadcrumb-nav{
  377. padding: 20px 0;
  378. line-height: 22px;
  379. font-size: 14px;
  380. color: #999999;
  381. }
  382. .page-main-stype .breadcrumb-nav .label-tag{
  383. }
  384. .page-main-stype .breadcrumb-nav .current-tag{
  385. color: #1D1D1D;
  386. }
  387. .page-main-stype .page-bidding-container{
  388. padding: 20px;
  389. border-radius: 8px;
  390. background: #fff;
  391. }