You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

636 lines
11 KiB

  1. .BoxBg{
  2. background-color: #000033;
  3. overflow: hidden;
  4. font-size: 28rpx;
  5. min-height: 100vh;
  6. }
  7. .Box{
  8. width: 96%;
  9. margin: 0 2%;
  10. }
  11. .topBox{
  12. height: 70rpx;
  13. color: #666666;
  14. margin-top: 10rpx;
  15. }
  16. .TopNavigationBox{
  17. width: 90%;
  18. height: 100%;
  19. overflow: hidden;
  20. overflow-y: hidden;
  21. overflow-x: auto;
  22. white-space: nowrap;
  23. float: left;
  24. }
  25. .TopNavigationBox::-webkit-scrollbar {
  26. display: none;
  27. }
  28. .logo{
  29. width: 33rpx;
  30. float: right;
  31. height: 36rpx;
  32. float: left;
  33. margin-top: 10rpx;
  34. margin-left: 12rpx;
  35. }
  36. .item{
  37. width: 80rpx;
  38. margin: 0 20rpx;
  39. position: relative;
  40. display: inline-block;
  41. text-align: center;
  42. }
  43. .title_a{
  44. font-size: 34rpx;
  45. color: #00cc99;
  46. }
  47. .title{
  48. color: #666666;
  49. }
  50. .wire{
  51. width: 70%;
  52. margin: 10rpx auto;
  53. height: 2rpx;
  54. background-color: #00cc99;
  55. }
  56. .searchBox{
  57. overflow: hidden;
  58. }
  59. .searchF{
  60. width: 96%;
  61. height: 68rpx;
  62. background-color: rgba(51, 51, 51, 0.5);
  63. border-radius: 60rpx;
  64. margin: 20rpx auto;
  65. }
  66. .searchLogo{
  67. width: 30rpx;
  68. height: 30rpx;
  69. float: left;
  70. margin: 20rpx 10rpx 15rpx 60rpx;
  71. }
  72. .searchText{
  73. color: #666666;
  74. line-height: 68rpx;
  75. float: left;
  76. width: 80%;
  77. margin: 0 auto;
  78. height: 100%;
  79. color: #ffffff;
  80. }
  81. .swiperBox{
  82. margin: 20rpx 0;
  83. border-radius: 10rpx;
  84. }
  85. .swiper{
  86. width: 100%;
  87. height: 280rpx;
  88. }
  89. .swiperImg{
  90. width: 100%;
  91. height: 100%;
  92. background-color: chocolate;
  93. border-radius: 10rpx;
  94. }
  95. .columnBox{
  96. display: flex;
  97. justify-content: center;
  98. margin-top: 20rpx;
  99. }
  100. .columnItem{
  101. width: 20%;
  102. margin: 0 auto;
  103. }
  104. .columnImg{
  105. width: 90rpx;
  106. height: 90rpx;
  107. display: block;
  108. margin: 20rpx auto;
  109. }
  110. .columnText{
  111. color: #ffffff;
  112. text-align: center;
  113. line-height: 40rpx;
  114. font-size: 26rpx;
  115. font-family: PingFang SC;
  116. font-weight: 500;
  117. color: #FFFFFF;
  118. }
  119. .deyBox{
  120. overflow: hidden;
  121. }
  122. .deyTitleBox{
  123. /* overflow: hidden; */margin: 60rpx 0 35rpx 0;
  124. }
  125. .deyTitleImg{
  126. width: 48rpx;
  127. height: 50rpx;
  128. float: left;
  129. margin: 0 10rpx ;
  130. display: block;
  131. }
  132. .authorImg{
  133. width: 40rpx;
  134. height:46rpx;
  135. float: left;
  136. margin: 0 10rpx ;
  137. display: block;
  138. }
  139. .deyTitle{
  140. font-size: 36rpx;
  141. font-family: OPPOSans;
  142. font-weight: 500;
  143. color: #FFFFFF;
  144. margin-left: 10rpx;
  145. letter-spacing:4rpx;
  146. }
  147. .authorBox1{
  148. margin-top: 26rpx;
  149. }
  150. .authorImgTop{
  151. width: 110rpx;
  152. height: 110rpx;
  153. border-radius: 50%;
  154. margin: 40rpx auto;
  155. }
  156. .deyImgBox{
  157. display: flex;
  158. /* justify-content: space-around; */
  159. flex-wrap :wrap;
  160. }
  161. /* .authorOutsideBox{
  162. width: 100%;
  163. height: 400rpx;
  164. } */
  165. .authorBox{
  166. height: 380rpx;
  167. overflow: hidden;
  168. display: -webkit-box;
  169. overflow-x: scroll;
  170. -webkit-overflow-scrolling: touch;
  171. }
  172. .authorBox::-webkit-scrollbar {
  173. display: none;
  174. }
  175. .authorItem{
  176. width: 200rpx;
  177. height: 300rpx;
  178. margin: 0 2%;
  179. border-radius: 10rpx 10rpx 10rpx 40rpx;
  180. text-align: center;
  181. background-image: -webkit-linear-gradient(top, #103930, #121620);
  182. }
  183. .imgBox{
  184. width: 44%;
  185. overflow: hidden;
  186. display: inline-block;
  187. text-align: center;
  188. margin: 0 3%;
  189. /* height: 400rpx; */
  190. }
  191. .imgitem{
  192. position: relative;
  193. }
  194. .imgitem .img{
  195. width: 100%;
  196. /* background-color: chartreuse; */
  197. height: 185rpx;
  198. border-radius: 10rpx;
  199. }
  200. .posClass{
  201. position: absolute;
  202. right: 0;
  203. top: 0;
  204. width: 70rpx;
  205. height: 40rpx;
  206. /* background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_bnt_bq.png'); */
  207. /* background-size:74rpx 40rpx; */
  208. color: #ffffff;
  209. font-size: 24rpx;
  210. z-index: 100000;
  211. background-color: rgb(124, 122, 122,0.5);
  212. border-radius: 10rpx ;
  213. }
  214. .imgBox .itemTitle{
  215. height: 60rpx;
  216. line-height: 60rpx;
  217. text-align: center;
  218. color: #ffffff;
  219. font-size: 30rpx;
  220. font-family: PingFang SC;
  221. font-weight: 500;
  222. color: #FCFFFF;
  223. }
  224. .handpickBox{
  225. overflow: hidden;
  226. }
  227. .handpickTop{
  228. overflow: hidden;
  229. margin: 40rpx 0 20rpx 0 ;
  230. }
  231. .handpickImg{
  232. width: 40rpx;
  233. height: 46rpx;
  234. float: left;
  235. margin: 16rpx 10rpx 10rpx 10rpx ;
  236. }
  237. .handpickText{
  238. font-size: 36rpx;
  239. color:#ffffff;
  240. padding: 10rpx 0 30rpx 0 ;
  241. margin-left: 10rpx;
  242. float: left;
  243. letter-spacing:4rpx;
  244. font-family: OPPOSans;
  245. font-weight: 500;
  246. }
  247. .handpickadd{
  248. float: right;
  249. color: #00cc99;
  250. font-size: 30rrpx;
  251. margin: 10rpx 20rpx;
  252. }
  253. .handpickLogo{
  254. width: 50rpx;
  255. height: 50rpx;
  256. float: right;
  257. background-color: #00cc99;
  258. margin-top: 10rpx;
  259. margin-right: 20rpx;
  260. border-radius: 50%;
  261. color: #ffffff;
  262. text-align: center;
  263. line-height: 50rpx;
  264. font-size: 36rpx;
  265. }
  266. .commodityBox{
  267. overflow: hidden;
  268. margin-bottom: 30rpx;
  269. }
  270. .extendBox{
  271. overflow: hidden;
  272. margin: 40rpx 0;
  273. }
  274. .extendMoreBox{
  275. float: left;
  276. width: 45%;
  277. height: 70rpx;
  278. margin-right: 5%;
  279. background-color: #1A1D26;
  280. border-radius: 30rpx;
  281. }
  282. .changeBox {
  283. margin-left: 5%;
  284. float: left;
  285. background-color: #1A1D26;
  286. border-radius: 30rpx;
  287. width: 45%;
  288. height: 70rpx;
  289. }
  290. .commodityImg{
  291. width: 254rpx;
  292. border-radius: 10rpx;
  293. height: 194rpx;
  294. float: left;
  295. margin-left: 10rpx;
  296. }
  297. .newCommodityImg{
  298. width: 254rpx;
  299. border-radius: 10rpx;
  300. height: 194rpx;
  301. float: left;
  302. margin-left: 10rpx;
  303. }
  304. .commodityImage{
  305. width: 100%;
  306. height: 154rpx;
  307. border-radius: 10rpx;
  308. }
  309. .classBoxImg{
  310. width: 100%;
  311. height: 154rpx;
  312. border-radius: 10rpx 10rpx 0 0;
  313. margin: 0;
  314. }
  315. .describeBox{
  316. width: 384rpx;
  317. margin-left: 30rpx;
  318. float: left;
  319. }
  320. .describeBame{
  321. width: 100%;
  322. height: 64rpx;
  323. line-height: 32rpx;
  324. font-size: 30rpx;
  325. color: #ffffff;
  326. font-weight: 500;
  327. overflow:hidden;
  328. text-overflow:ellipsis;
  329. display:-webkit-box;
  330. -webkit-box-orient:vertical;
  331. -webkit-line-clamp:2;
  332. }
  333. .headImgBox{
  334. float: left;
  335. }
  336. .headImg{
  337. position: absolute;
  338. width: 50rpx;
  339. height: 50rpx;
  340. border-radius: 50%;
  341. top: 0;
  342. left: 0;
  343. }
  344. .annotation{
  345. padding-left:70rpx ;
  346. padding-right:50rpx ;
  347. float: left;
  348. border-radius: 50rpx;
  349. height: 50rpx;
  350. background-color: #333;
  351. text-align: center;
  352. line-height: 50rpx;
  353. color: #9999cc;
  354. }
  355. .introduce{
  356. width: 96%;
  357. margin-top: 20rpx;
  358. color: #9999cc;
  359. height: 86rpx;
  360. line-height: 40rpx;
  361. overflow:hidden;
  362. text-overflow:ellipsis;
  363. display:-webkit-box;
  364. -webkit-box-orient:vertical;
  365. -webkit-line-clamp:2;
  366. }
  367. .priceBox{
  368. margin-top: 18rpx;
  369. overflow: hidden;
  370. }
  371. .priceF{
  372. float: left;
  373. color: #ff3366;
  374. font-size: 28rpx;
  375. }
  376. .price{
  377. color: #ff3366;
  378. float: left;
  379. /* line-height: 60rpx; */
  380. font-size: 28rpx;
  381. }
  382. .popularity{
  383. width: 180rpx;
  384. height: 60rpx;
  385. float: right;
  386. margin-right: 60rpx;
  387. margin-top: 10rpx;
  388. background-color: chocolate;
  389. }
  390. .exchangeText{
  391. float: left;
  392. color: #8790A8;
  393. line-height: 70rpx;
  394. margin-left: 20rpx;
  395. font-size: 30rpx;
  396. }
  397. .exchangeBox{
  398. width: 90%;
  399. margin: 20rpx auto;
  400. height: 70rpx;
  401. line-height: 70rpx;
  402. border-radius: 50rpx;
  403. text-align: center;
  404. background: #1A1D26;
  405. }
  406. .exchangeImg{
  407. width: 40rpx;
  408. height: 40rpx;
  409. margin-top: 15rpx ;
  410. margin-left: 260rpx;
  411. float: left;
  412. }
  413. .exchangeBtn{
  414. float: left;
  415. width: 50rpx;
  416. height: 50rpx;
  417. margin: 5rpx 0 0 20rpx;
  418. background-color: cornflowerblue;
  419. }
  420. .authorImgBox{
  421. background-color: rgba(51, 51, 51, 0.5);
  422. height: 360rpx;
  423. border-radius: 40rpx;
  424. overflow: hidden;
  425. }
  426. .nameBox{
  427. height: 120rpx;
  428. background-color: rgba(51, 51, 51,0.6);
  429. border-radius: 0rpx 40rpx 0rpx 40rpx;
  430. }
  431. .authorName{
  432. height: 50rpx;
  433. line-height: 50rpx;
  434. text-align: center;
  435. font-size: 30rpx;
  436. font-family: OPPOSans;
  437. font-weight: 500;
  438. color: #FFFFFF;
  439. }
  440. .authorText{
  441. width: 90%;
  442. margin: 0 auto;
  443. color: #9999cc;
  444. height: 50rpx;
  445. line-height: 50rpx;
  446. text-align: center;
  447. overflow:hidden;
  448. text-overflow:ellipsis;
  449. display:-webkit-box;
  450. -webkit-box-orient:vertical;
  451. -webkit-line-clamp:1;
  452. }
  453. .rankingBox{
  454. margin: 20rpx 0;
  455. }
  456. .sortBox{
  457. overflow: hidden;
  458. display: flex;
  459. flex-wrap: wrap;
  460. justify-content:flex-start;
  461. }
  462. .sortNmu{
  463. width: 18%;
  464. background-color: aqua;
  465. height: 360rpx;
  466. float: left;
  467. }
  468. .articleBox{
  469. width: 82%;
  470. height: 360rpx;
  471. float: left;
  472. }
  473. .articleImg{
  474. width: 40%;
  475. height: 100%;
  476. background-color: blueviolet;
  477. border-radius: 10rpx;
  478. float: left;
  479. }
  480. .articleTextBox{
  481. float: left;
  482. width: 58%;
  483. margin-left: 2%;
  484. height: 100%;
  485. border-radius: 10rpx;
  486. }
  487. .articleTitle{
  488. font-size: 34rpx;
  489. color: #ffffff;
  490. font-weight: 560;
  491. }
  492. .articlePopularity{
  493. width: 180rpx;
  494. height: 60rpx;
  495. float: right;
  496. margin-right: 20rpx;
  497. margin-top: 10rpx;
  498. background-color: chocolate;
  499. }
  500. .sortItemBox{
  501. width: 220rpx;
  502. margin: 10rpx ;
  503. float: left;
  504. }
  505. .sortItemImg{
  506. position: relative;
  507. width: 100%;
  508. height: 134rpx;
  509. border-radius: 10rpx;
  510. }
  511. .sortItemImg image{
  512. width: 100%;
  513. height: 100%;
  514. border-radius: 10rpx;
  515. }
  516. .sortNumBj_0{
  517. position: absolute;
  518. width: 42rpx;
  519. height: 55rpx;
  520. background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_1.png');
  521. background-size:42rpx 55rpx;
  522. background-repeat:no-repeat;
  523. color: #ffffff;
  524. text-align: center;
  525. line-height: 46rpx;
  526. top: 0;
  527. left: 0;
  528. }
  529. .sortNumBj_1{
  530. position: absolute;
  531. width: 42rpx;
  532. height: 55rpx;
  533. background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_2.png');
  534. background-size:42rpx 55rpx;
  535. background-repeat:no-repeat;
  536. color: #ffffff;
  537. text-align: center;
  538. line-height: 46rpx;
  539. top: 0;
  540. left: 0;
  541. }
  542. .sortNumBj_2{
  543. position: absolute;
  544. width: 42rpx;
  545. height: 55rpx;
  546. background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_3.png');
  547. background-size:42rpx 55rpx;
  548. background-repeat:no-repeat;
  549. color: #ffffff;
  550. text-align: center;
  551. line-height: 46rpx;
  552. top: 0;
  553. left: 0;
  554. }
  555. .sortNumBj_3{
  556. position: absolute;
  557. width: 42rpx;
  558. height: 55rpx;
  559. background-image: url('https://formall.oss-accelerate.aliyuncs.com/douyin/drawable-xhdpi/home_rmph_ic_4.png');
  560. background-size:42rpx 55rpx;
  561. background-repeat:no-repeat;
  562. color: #ffffff;
  563. text-align: center;
  564. line-height: 46rpx;
  565. top: 0;
  566. left: 0;
  567. }
  568. .sortTitle{
  569. height: 60rpx;
  570. line-height: 30rpx;
  571. font-size: 24rpx;
  572. color: #FEFEFE;
  573. overflow:hidden;
  574. text-overflow:ellipsis;
  575. display:-webkit-box;
  576. -webkit-box-orient:vertical;
  577. -webkit-line-clamp:2;
  578. margin-top: 10rpx;
  579. }
  580. .popularityBox {
  581. padding-bottom: 10rpx;
  582. }
  583. .popularityImg{
  584. float: left;
  585. width: 23rpx;
  586. height: 26rpx;
  587. margin-top: 8rpx;
  588. margin-left: 5rpx;
  589. }
  590. .popularityText{
  591. float: left;
  592. font-size: 22rpx;
  593. margin: 0 10rpx;
  594. font-family: OPPOSans;
  595. line-height: 40rpx;
  596. font-weight: 500;
  597. }
  598. .popularityNum{
  599. float: left;
  600. color: #07E881;
  601. font-size: 24rpx;
  602. height: 40rpx;
  603. line-height: 40rpx;
  604. }
  605. .newPopularity{
  606. width: 100%;
  607. /* position: absolute; */
  608. /* bottom: 0; */
  609. /* left: 10; */
  610. background-color: #222735;
  611. height: 40rpx;
  612. border-radius: 0 0 10rpx 10rpx ;
  613. margin-top: -8rpx;
  614. }