25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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