index.wxss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640
  1. .home-page {
  2. height: 160rpx;
  3. width: 100%;
  4. /* border: 1rpx solid red; */
  5. font-size: 60rpx;
  6. }
  7. .home {
  8. width: 100%;
  9. height: 100%;
  10. /* position: relative; */
  11. /* top: 135rpx; */
  12. }
  13. .home .top {
  14. width: 92%;
  15. height: 300rpx;
  16. margin: 30rpx 30rpx 0 30rpx;
  17. }
  18. .home .top swiper-item {
  19. float: left;
  20. width: 100%;
  21. height: 350rpx;
  22. border-radius: 20rpx;
  23. }
  24. .home .top image {
  25. width: 100%;
  26. height: 270rpx;
  27. border-radius: 20rpx;
  28. }
  29. .home .top swiper {
  30. height: 270rpx;
  31. }
  32. .home .main {
  33. float: left;
  34. width: 100%;
  35. /* margin: 10rpx 0 0 0; */
  36. }
  37. .main .mainOne {
  38. float: left;
  39. width: 92%;
  40. height: 275rpx;
  41. margin: 0 30rpx;
  42. background: rgba(255, 255, 255, 1);
  43. box-shadow: 0px 10px 30px 0px rgba(175, 146, 146, 0.2);
  44. border-radius: 20px;
  45. }
  46. .main .mainOne image {
  47. float: left;
  48. width: 230rpx;
  49. height: 240rpx;
  50. border-radius: 14rpx;
  51. margin-left: 15rpx;
  52. margin-top: 20rpx;
  53. }
  54. .main .mainOne .mainOneInfo {
  55. float: left;
  56. width: 440rpx;
  57. height: 255rpx;
  58. overflow: hidden;
  59. /* border: 1px solid red; */
  60. display: flex;
  61. flex-direction: row;
  62. flex-wrap: wrap;
  63. }
  64. .sbox {
  65. width: 180rpx;
  66. height: 115rpx;
  67. position: relative;
  68. text-align: center;
  69. margin-left: 0rpx;
  70. }
  71. /* .main .mainOne .mainOneInfo .mainOneInfos {
  72. float: left;
  73. width: 49%;
  74. height: 127rpx;
  75. text-align: center;
  76. border-right: 1px solid rgba(229, 229, 229, 1);
  77. border-bottom: 1px solid rgba(229, 229, 229, 1);
  78. position: relative;
  79. }
  80. .main .mainOne .mainOneInfo .mainOneInfos view sub {
  81. font-size: 10px;
  82. vertical-align: text-bottom;
  83. }
  84. .main .mainOne .mainOneInfo .mainOneInfos:nth-child(2n) {
  85. border-right: none;
  86. }
  87. .main .mainOne .mainOneInfo .mainOneInfos:nth-child(1) view:first-child {
  88. color: #3278fc;
  89. }
  90. .main .mainOne .mainOneInfo .mainOneInfos:nth-child(2) view:first-child {
  91. color: #3278fc;
  92. }
  93. .main .mainOne .mainOneInfo .mainOneInfos:nth-child(3) view:first-child {
  94. color: #3278fc;
  95. }
  96. .main .mainOne .mainOneInfo .mainOneInfos:nth-child(4) view:first-child {
  97. color: #3278fc;
  98. }
  99. .main .mainOne .mainOneInfo .mainOneInfos view:first-child {
  100. float: left;
  101. width: 100%;
  102. font-size: 30rpx;
  103. font-family: Source Han Sans SC;
  104. font-weight: bold;
  105. color: rgba(255, 126, 0, 1);
  106. margin: 20rpx 0 0 0;
  107. }
  108. .main .mainOne .mainOneInfo .mainOneInfos view:last-child {
  109. float: left;
  110. width: 100%;
  111. font-size: 20rpx;
  112. font-family: Source Han Sans SC;
  113. font-weight: 400;
  114. color: rgba(102, 102, 102, 1);
  115. margin: 15rpx 0 0 0;
  116. } */
  117. .main .mainTwo {
  118. float: left;
  119. width: 92%;
  120. margin: 50rpx 30rpx 0rpx 30rpx;
  121. height: 500rpx;
  122. }
  123. .main .mainTwo .title {
  124. /* float: left; */
  125. font-size: 34rpx;
  126. font-family: Source Han Sans SC;
  127. font-weight: bold;
  128. color: rgba(40, 40, 40, 1);
  129. margin: 0 0 30rpx 0;
  130. }
  131. .main .mainTwo .red {
  132. display: inline-block;
  133. width: 4px;
  134. height: 20px;
  135. background: linear-gradient(0deg, rgba(33, 107, 252, 1) 0%, rgba(126, 176, 255, 1) 100%);
  136. vertical-align: text-bottom;
  137. margin-right: 10rpx;
  138. }
  139. .main .mainThree .red {
  140. display: inline-block;
  141. width: 4px;
  142. height: 20px;
  143. background: linear-gradient(0deg, rgba(33, 107, 252, 1) 0%, rgba(126, 176, 255, 1) 100%);
  144. vertical-align: text-bottom;
  145. margin-right: 10rpx;
  146. }
  147. .main .mainFour .red {
  148. display: inline-block;
  149. width: 4px;
  150. height: 20px;
  151. background: linear-gradient(0deg, rgba(33, 107, 252, 1) 0%, rgba(126, 176, 255, 1) 100%);
  152. vertical-align: text-bottom;
  153. margin-right: 10rpx;
  154. }
  155. .main .mainTwo .more {
  156. margin-left: 65%;
  157. font-size: 30rpx;
  158. color: rgba(102, 102, 102, 1);
  159. }
  160. .main .mainTwo .list {
  161. float: left;
  162. width: 335rpx;
  163. height: 108rpx;
  164. margin: 0 20rpx 0 0;
  165. background: rgba(151, 93, 255, 1);
  166. border-radius: 20rpx;
  167. position: relative;
  168. }
  169. .main .mainTwo .list:last-child {
  170. background: rgba(30, 219, 233, 1);
  171. margin: 0;
  172. }
  173. .main .mainTwo .list image {
  174. float: left;
  175. width: 100%;
  176. height: 108rpx;
  177. }
  178. .main .mainTwo .list text {
  179. position: absolute;
  180. top: 0;
  181. width: 100%;
  182. left: 0;
  183. color: #fff;
  184. background: #cccccc5f;
  185. height: 108rpx;
  186. border-radius: 20rpx;
  187. text-align: center;
  188. line-height: 108rpx;
  189. font-weight: bold;
  190. }
  191. .mainThree {
  192. position: relative;
  193. z-index: 9999999;
  194. float: left;
  195. width: 92%;
  196. margin: 0rpx 30rpx 0 30rpx;
  197. }
  198. .mainThree .mainThreeTop {
  199. float: left;
  200. width: 100%;
  201. margin: 0 0 30rpx 0;
  202. height: 35rpx;
  203. line-height: 35rpx;
  204. }
  205. .mainThree .mainThreeTop span {
  206. float: left;
  207. width: 70%;
  208. font-size: 34rpx;
  209. font-family: Source Han Sans SC;
  210. font-weight: bold;
  211. color: rgba(40, 40, 40, 1);
  212. }
  213. .mainThree .mainThreeTop a {
  214. box-sizing: border-box;
  215. float: right;
  216. width: 20%;
  217. font-size: 24rpx;
  218. font-family: Source Han Sans SC;
  219. font-weight: 400;
  220. color: rgba(136, 136, 136, 1);
  221. text-align: right;
  222. border: 10rpx solid transparent;
  223. margin-top: -10rpx;
  224. }
  225. .mainThreeList {
  226. float: left;
  227. width: 100%;
  228. }
  229. .mainThreeList .list {
  230. float: left;
  231. width: 100%;
  232. /* height: 150rpx; */
  233. margin: 0 0 20rpx 0;
  234. }
  235. /* .mainThreeList image {
  236. float: left;
  237. width: 150rpx;
  238. height: 150rpx;
  239. margin: 0 20rpx 0 0;
  240. } */
  241. .mainThreeList .info {
  242. float: left;
  243. width: 100%;
  244. /* height: 150rpx; */
  245. /* border: 1px solid red; */
  246. border-bottom: 1px solid #e8e8e8;
  247. /* border-bottom: 1px solid #f3f3f3; */
  248. }
  249. .mainThreeList .info p:first-child {
  250. float: left;
  251. width: 100%;
  252. font-size: 30rpx;
  253. font-family: Source Han Sans SC;
  254. font-weight: 400;
  255. color: rgba(40, 40, 40, 1);
  256. /* overflow: hidden; */
  257. /* text-overflow: ellipsis; */
  258. /* -webkit-line-clamp: 1; */
  259. /* word-break: break-all; */
  260. /* display: -webkit-box; */
  261. /* -webkit-box-orient: vertical; */
  262. }
  263. .mainThreeList .info .infos {
  264. float: left;
  265. width: 100%;
  266. /* border-bottom: 1px solid #f3f3f3; */
  267. /* margin-bottom: 15px; */
  268. /* border: 1px solid red; */
  269. }
  270. .mainThreeList .info .infos text:first-child {
  271. float: left;
  272. width: 100%;
  273. font-size: 26rpx;
  274. font-family: Source Han Sans SC;
  275. font-weight: 400;
  276. color: #888888;
  277. /* overflow: hidden;
  278. text-overflow: ellipsis;
  279. -webkit-line-clamp: 2;
  280. word-break: break-all;
  281. display: -webkit-box;
  282. -webkit-box-orient: vertical;
  283. margin-left: 10px; */
  284. }
  285. .mainThreeList .info .infos text:last-child {
  286. float: right;
  287. width: 100%;
  288. text-align: right;
  289. font-size: 24rpx;
  290. font-family: Source Han Sans SC;
  291. font-weight: 400;
  292. /* color: #000; */
  293. /* padding-top: 30rpx; */
  294. color: #aaaeb1;
  295. padding-bottom: 10px;
  296. }
  297. /* .mainThreeList .info p:last-child {
  298. float: left;
  299. width: 100%;
  300. margin: 20rpx 0 0 0;
  301. }
  302. .mainThreeList .info p:last-child span {
  303. float: left;
  304. width: 228rpx;
  305. height: 40rpx;
  306. line-height: 40rpx;
  307. text-align: left;
  308. margin: 0 20rpx 0 0;
  309. background: rgba(242, 245, 250, 1);
  310. border-radius: 10px;
  311. font-size: 26rpx;
  312. font-family: Source Han Sans SC;
  313. font-weight: 400;
  314. color: rgba(136, 136, 136, 1);
  315. padding: 0 0 0 20rpx;
  316. }
  317. .mainThreeList .info p:last-child span:last-child {
  318. margin: 0;
  319. } */
  320. .home .down {
  321. margin-top: 44rpx;
  322. float: left;
  323. width: 100%;
  324. position: relative;
  325. z-index: 99999999;
  326. }
  327. .home .down .tabber {
  328. float: left;
  329. width: 100%;
  330. margin: 100rpx 0 0 0;
  331. }
  332. /* 新增效果 */
  333. .container-zhaozhi {
  334. float: left;
  335. height: 430rpx;
  336. padding: 0 10rpx;
  337. border-radius: 20rpx;
  338. white-space: nowrap;
  339. /*不放这个不能横排*/
  340. }
  341. .container-zhaozhi .chaozhilist {
  342. width: 290rpx;
  343. /* height: 240rpx; */
  344. display: inline-block;
  345. margin: 0 30rpx 0 0;
  346. position: relative;
  347. border-radius: 20rpx;
  348. background: rgba(255, 255, 255, 1);
  349. /* background: red; */
  350. box-shadow: 0px 10rpx 30rpx 0px rgba(175, 146, 146, 0.2);
  351. padding: 20rpx;
  352. /*不放这个不能横排*/
  353. }
  354. .container-zhaozhi .chaozhilist .one {
  355. float: left;
  356. /* width: 100%; */
  357. margin: 0 0 10rpx 0;
  358. }
  359. .container-zhaozhi .chaozhilist .one img {
  360. float: left;
  361. }
  362. .container-zhaozhi .chaozhilist .one view {
  363. float: right;
  364. margin: 30rpx 0 10rpx 30rpx;
  365. }
  366. .container-zhaozhi .chaozhilist .two {
  367. float: left;
  368. width: 100%;
  369. text-align: center;
  370. margin: 0 0 10rpx 0;
  371. /* border: #888888 2rpx solid; */
  372. padding: 10rpx 0;
  373. }
  374. .container-zhaozhi .chaozhilist .two view:first-child {
  375. float: left;
  376. width: 100%;
  377. font-size: 34rpx;
  378. font-family: Source Han Sans SC;
  379. font-weight: bold;
  380. color: rgba(233, 2, 29, 1);
  381. margin: 0 0 10rpx 0;
  382. }
  383. .container-zhaozhi .chaozhilist .two view:first-child sub {
  384. font-size: 10px;
  385. vertical-align: text-bottom;
  386. }
  387. .container-zhaozhi .chaozhilist .two view:last-child {
  388. float: left;
  389. width: 100%;
  390. font-size: 24rpx;
  391. font-family: Source Han Sans SC;
  392. font-weight: 400;
  393. color: rgba(102, 102, 102, 1);
  394. }
  395. .container-zhaozhi .chaozhilist .three {
  396. float: left;
  397. width: 100%;
  398. font-size: 24rpx;
  399. text-align: center;
  400. padding: 10rpx 0;
  401. }
  402. .container-zhaozhi .chaozhilist .four {
  403. float: left;
  404. width: 100%;
  405. font-size: 40rpx;
  406. text-align: center;
  407. padding: 10rpx 0;
  408. color: rgba(233, 2, 29, 1);
  409. }
  410. .container-zhaozhi .chaozhilist .five {
  411. float: left;
  412. width: 100%;
  413. font-size: 24rpx;
  414. text-align: center;
  415. padding: 10rpx 0;
  416. }
  417. .container-zhaozhi .chaozhilist .six {
  418. float: left;
  419. width: 100%;
  420. font-size: 24rpx;
  421. text-align: center;
  422. padding: 10rpx 0;
  423. }
  424. button:not([size='mini']) {
  425. margin-left: auto;
  426. margin-right: auto;
  427. width: 200rpx !important;
  428. padding: 0 20rpx;
  429. }
  430. button[size='mini'] {
  431. font-size: 26rpx !important;
  432. }
  433. button[type='primary'] {
  434. background-color: rgba(233, 2, 29, 1) !important;
  435. }
  436. .mainFour {
  437. float: left;
  438. width: 100%;
  439. }
  440. .scroll-unit {
  441. box-sizing: border-box;
  442. white-space: nowrap;
  443. width: 100%;
  444. padding-left: 24rpx;
  445. }
  446. .scroll-unit-item-father {
  447. box-sizing: border-box;
  448. display: inline-block;
  449. width: 50%;
  450. padding-right: 24rpx;
  451. }
  452. .scroll-unit-item {
  453. box-sizing: border-box;
  454. display: inline-block;
  455. width: 100%;
  456. height: 183rpx;
  457. position: relative;
  458. }
  459. .scroll-unit-item-image {
  460. position: absolute;
  461. width: 100%;
  462. height: 100%;
  463. }
  464. .scroll-unit-text {
  465. position: absolute;
  466. top: 50%;
  467. left: 50%;
  468. transform: translate(-50%, -50%);
  469. text-align: center;
  470. width: 100%;
  471. white-space: normal;
  472. color: #FFFFFF;
  473. font-weight: 700;
  474. text-shadow: 5rpx 5rpx 5rpx #000000;
  475. }
  476. .unit-text-last {
  477. margin: 30rpx 30rpx 36rpx 30rpx;
  478. font-size: 34rpx;
  479. font-family: Source Han Sans SC;
  480. font-weight: bold;
  481. color: rgba(40, 40, 40, 1);
  482. }
  483. .forbox {
  484. width: 290rpx;
  485. height: 111rpx;
  486. margin-top: 30rpx;
  487. box-shadow: 0px 0px 10px 0px rgba(99, 156, 254, 0.2);
  488. padding: 5rpx 30rpx;
  489. padding-top: 40rpx;
  490. }
  491. .fontcolor {
  492. color: #5491fd;
  493. font-size: 28rpx;
  494. font-weight: 900;
  495. }
  496. .flex-sp {
  497. display: flex;
  498. justify-content: space-between;
  499. font-size: 26rpx;
  500. color: #A1A9B5;
  501. margin-top: 15rpx;
  502. }
  503. .quputian {
  504. width: 113rpx;
  505. height: 35rpx;
  506. }
  507. .newrow {
  508. display: flex;
  509. width: 100%;
  510. border-bottom: 1rpx solid #EBEBEB;
  511. display: flex;
  512. padding-bottom: 20rpx;
  513. }
  514. .newputian {
  515. width: 400rpx;
  516. height: 140rpx;
  517. }
  518. .zhengcetitle {
  519. color: #333333;
  520. font-size: 28rpx;
  521. font-weight: 400;
  522. margin-left: 30rpx;
  523. font-weight: 900;
  524. }
  525. .minititle {
  526. color: #838181;
  527. font-size: 24rpx;
  528. font-weight: 500;
  529. }
  530. .numbj {
  531. width: 200rpx!important;
  532. height: 115rpx!important;
  533. }
  534. .num1{
  535. position: absolute;
  536. top: 40rpx;
  537. left: 40rpx;
  538. z-index: 999;
  539. font-size: 32rpx;
  540. font-weight: 900;
  541. color: #3278fc;
  542. }
  543. .num1 sub{
  544. font-size: 25rpx;
  545. }
  546. .num2{
  547. position: absolute;
  548. top: 80rpx;
  549. left: 40rpx;
  550. z-index: 999;
  551. font-size: 25rpx;
  552. font-weight: 900;
  553. color: #999999;
  554. }