Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

677 lignes
12 KiB

  1. .Box{
  2. min-height: 100vh;
  3. }
  4. #BoxBg{
  5. position: relative;
  6. }
  7. #myVideo{
  8. width: 100%;
  9. height: 420rpx;
  10. position: relative;
  11. }
  12. .rich_text{
  13. width: 100%;
  14. height: 100%;
  15. }
  16. .rich_text p{
  17. width: 100%;
  18. }
  19. .coverPay{
  20. /* width: 200rpx; */
  21. padding: 0 20rpx;
  22. height: 90rpx;
  23. line-height: 90rpx;
  24. text-align: center;
  25. border-radius: 40rpx;
  26. background-color: #07E881;
  27. color: #ffffff;
  28. position: absolute;
  29. left: 40%; top: 293rpx;
  30. z-index: 1000000;
  31. }
  32. .noCoverPay{
  33. /* width: 200rpx; */
  34. padding: 0 20rpx;
  35. height: 90rpx;
  36. line-height: 90rpx;
  37. text-align: center;
  38. border-radius: 40rpx;
  39. background-color: rgba(255, 255, 255, 0.3);
  40. color: #ffffff;
  41. position: absolute;
  42. left: 40%; top: 293rpx;
  43. z-index: 1000000;
  44. }
  45. .showContBox {
  46. margin: 20rpx ;
  47. }
  48. .titleBox{
  49. float: left;
  50. width: 80%;
  51. }
  52. .title{
  53. color: #ffffff;
  54. font-size: 32rpx;
  55. font-family: PingFang SC;
  56. font-weight: bold;
  57. height: 40rpx;
  58. line-height: 40rpx;
  59. overflow:hidden;
  60. text-overflow:ellipsis;
  61. display:-webkit-box;
  62. -webkit-box-orient:vertical;
  63. -webkit-line-clamp:1;
  64. }
  65. .classBox{
  66. margin: 20rpx 0;
  67. color: #ffffff;
  68. }
  69. .courseLogo{
  70. float: left;
  71. width: 40rpx;
  72. height: 40rpx;
  73. }
  74. .classNum{
  75. margin: 0 20rpx;
  76. float: left;
  77. }
  78. .heatLogo{
  79. width: 35rpx;
  80. height: 40rpx;
  81. margin-left: 50rpx;
  82. float: left;
  83. }
  84. .heatNum{
  85. margin-left: 20rpx;
  86. float: left;
  87. }
  88. .collectBox{
  89. float: left;
  90. width: 20%;
  91. height: 120rpx;
  92. text-align: center;
  93. }
  94. .collect{
  95. width: 50rpx;
  96. height: 50rpx;
  97. }
  98. .payBox{
  99. width: 95%;
  100. margin: auto;
  101. background-image: -webkit-linear-gradient(left, #103930, #121620);
  102. }
  103. .payNum{
  104. font-size: 36rpx;
  105. color: #FC4758;
  106. font-family: OPPOSans;
  107. font-weight: 400;
  108. height: 80rpx;
  109. float: left;
  110. line-height: 80rpx;
  111. }
  112. .payF{
  113. height: 80rpx;
  114. float: left;
  115. line-height: 80rpx;
  116. margin-left: 20rpx;
  117. color: #FC4758;
  118. }
  119. .columnBox{
  120. margin: 20rpx 0;
  121. }
  122. .columnB_a{
  123. font-family: OPPOSans;
  124. font-weight: 800;
  125. color: #FFFFFF;
  126. font-size: 32rpx;
  127. margin: 0 20rpx;
  128. border-bottom: 4rpx solid #07E881;
  129. padding-bottom: 6rpx;
  130. }
  131. .introduce{
  132. float: left;
  133. font-family: OPPOSans;
  134. padding: 20rpx 20px;
  135. margin-left: 50rpx;
  136. font-size: 30rpx;
  137. font-weight: 500;
  138. }
  139. .catalogue{
  140. font-family: OPPOSans;
  141. float: left;
  142. padding: 20rpx 20px;
  143. margin: 0 20rpx;
  144. font-size: 30rpx;
  145. font-weight: 500;
  146. }
  147. .userParticularsBox{
  148. border-radius: 20rpx;
  149. background-color: #293145;
  150. }
  151. .userBox{
  152. /* float: left; */
  153. margin: 40rpx 20rpx 20rpx 20rpx;
  154. }
  155. .userDescribe{
  156. float: left;
  157. margin: 20rpx;
  158. color: #9DA8C4;
  159. font-family: OPPOSans;
  160. font-weight: 400;
  161. }
  162. .userLogo{
  163. height: 120rpx;
  164. width: 120rpx;
  165. float: left;
  166. border-radius: 50%;
  167. }
  168. .userNameBox{
  169. margin-left: 40rpx;
  170. float: left;
  171. }
  172. .userName{
  173. float: left;
  174. color: #FFFFFF;
  175. font-family: OPPOSans;
  176. font-weight: 500;
  177. font-size: 30rpx;
  178. padding: 0 20rpx;
  179. }
  180. .attention{
  181. float: left;
  182. border-radius: 20rpx;
  183. line-height: 40rpx;
  184. height: 40rpx;
  185. border: 1rpx solid #07E881;
  186. background: rgba(7, 232, 129, 0.12);
  187. color: #07E881;
  188. padding: 2rpx 20rpx;
  189. }
  190. .classifyItem{
  191. text-align: center;
  192. background: #141825;
  193. border: 1rpx solid #666D80;
  194. border-radius: 18rpx;
  195. float: left;
  196. padding: 6rpx 10rpx;
  197. margin: 10rpx;
  198. }
  199. .extend{
  200. width: 20rpx;
  201. height: 40rpx;
  202. float: right;
  203. margin: 20rpx 40rpx 0 0;
  204. }
  205. .richtextBox{
  206. margin-top: 40rpx;
  207. min-height: 120rpx;
  208. }
  209. .add{
  210. width: 140rpx;
  211. height: 140rpx;
  212. position: fixed;
  213. right: 0;
  214. bottom: 274rpx;
  215. z-index: 100000000000000000;
  216. }
  217. .addBox{
  218. padding: 0 40rpx;
  219. height: 100rpx;
  220. background: linear-gradient(0deg, #2A3042, #464D61);
  221. background-color: #2A3042;
  222. box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.93);
  223. border-radius: 49rpx;
  224. position: fixed;
  225. left: 5%;
  226. bottom: 300rpx;
  227. }
  228. .goruzu{
  229. float: left;
  230. }
  231. .video{
  232. width: 70rpx;
  233. height: 70rpx;
  234. float: left;
  235. margin-left: 40rpx;
  236. margin-top: 15rpx;
  237. }
  238. .checkImg{
  239. width: 70rpx;
  240. height: 70rpx;
  241. float: left;
  242. margin-left: 80rpx;
  243. margin-top: 10rpx;
  244. }
  245. .issue{
  246. float: left;
  247. font-size: 30rpx;
  248. font-family: OPPOSans;
  249. font-weight: bold;
  250. color: #FFFFFF;
  251. line-height: 100rpx;
  252. margin-left: 10rpx;
  253. }
  254. .xian{
  255. height: 70rpx;
  256. width: 2rpx;
  257. background-color: rgba(255, 255, 255, 0.3);
  258. border-radius: 1px;
  259. float: left;
  260. margin-left: 80rpx;
  261. margin-top: 15rpx;
  262. }
  263. .shareBox{
  264. width: 100%;
  265. position: fixed;
  266. left: 0;
  267. bottom: 0;
  268. height: 100rpx;
  269. background: #141928;
  270. }
  271. .shareImg{
  272. margin-top: 5rpx;
  273. float: left;
  274. width: 40rpx;
  275. height: 40rpx;
  276. margin-top: 25rpx;
  277. margin-left: 40rpx;
  278. }
  279. .shareText{
  280. float: left;
  281. margin-top: 20rpx;
  282. margin-left: 20rpx;
  283. color: #ffffff;
  284. width: 70rpx;
  285. height: 50rpx;
  286. font-size: 28rpx;
  287. }
  288. .xuxian{
  289. width: 1rpx;
  290. height: 28rpx;
  291. background: #8790A8;
  292. opacity: 0.4;
  293. float: left;
  294. margin-top: 30rpx;
  295. margin-left: 60rpx;
  296. }
  297. .consult{
  298. float: left;
  299. width: 40rpx;
  300. height: 40rpx;
  301. margin-top: 25rpx;
  302. margin-left: 40rpx;
  303. line-height: 40rpx;
  304. }
  305. .service{
  306. float: left;
  307. margin-top: 25rpx;
  308. margin-left: 10rpx;
  309. color: #ffffff;
  310. width: 100rpx;
  311. padding: 0;
  312. height: 50rpx;
  313. background-color: #141928;
  314. font-size: 28rpx;
  315. }
  316. .service span{
  317. display: block;
  318. width: 100%;
  319. height: 100%;
  320. }
  321. .shopping{
  322. margin-top: 15rpx;
  323. height: 80rpx;
  324. line-height: 80rpx;
  325. text-align: center;
  326. float: left;
  327. padding: 0 60rpx;
  328. background: linear-gradient(-4deg, #4EE09D, #02C96E);
  329. border-radius: 50rpx;
  330. margin-left: 80rpx;
  331. color: #FFFFFF;
  332. font-size: 32rpx;
  333. font-family: OPPOSans;
  334. }
  335. .nOshopping{
  336. margin-top: 15rpx;
  337. height: 80rpx;
  338. line-height: 80rpx;
  339. text-align: center;
  340. float: left;
  341. padding: 0 60rpx;
  342. background-color: rgba(255, 255, 255, 0.1);
  343. border-radius: 50rpx;
  344. margin-left: 80rpx;
  345. color: #FFFFFF;
  346. font-size: 32rpx;
  347. font-family: OPPOSans;
  348. }
  349. .h3Img{
  350. width: 40rpx;
  351. height: 40rpx;
  352. float: left;
  353. margin-left: 20rpx;
  354. }
  355. .h3{
  356. float: left;
  357. margin-left: 20rpx;
  358. font-family: OPPOSans;
  359. font-weight: 500;
  360. color: #FFFFFF;
  361. }
  362. .playLsitBox{
  363. margin: 40rpx 20rpx;
  364. }
  365. .transmitImg{
  366. width: 70rpx;
  367. height: 70rpx;
  368. float: left;
  369. margin: 15rpx auto;
  370. }
  371. .timeBox{
  372. float: left;
  373. width: 400rpx;
  374. margin-left: 20rpx;
  375. color: #FFFFFF;
  376. }
  377. .curriculumBox{
  378. margin-top: 20rpx;
  379. }
  380. .time{
  381. float: left;
  382. width: 30rpx;
  383. height: 30rpx;
  384. margin-top: 20rpx;
  385. }
  386. .timeText{
  387. font-family: OPPOSans;
  388. font-weight: 500;
  389. color: #6E768A;
  390. margin-top: 15rpx;
  391. margin-left: 10rpx;
  392. float: left;
  393. }
  394. .yuan{
  395. float: left;
  396. width: 30rpx;
  397. height: 30rpx;
  398. margin-top: 20rpx;
  399. margin-left: 100rpx;
  400. }
  401. .then{
  402. font-family: OPPOSans;
  403. font-weight: 500;
  404. color: #07E881;
  405. margin-top: 15rpx;
  406. margin-left: 10rpx;
  407. float: left;
  408. }
  409. .timeBoxTitle_a{
  410. color: #07E881;
  411. }
  412. .timeBoxTitle{
  413. color: #ffffff;
  414. }
  415. .try{
  416. float: left;
  417. width: 60rpx;
  418. height: 40rpx;
  419. margin-left: 80rpx;
  420. margin-top: 20rpx;
  421. }
  422. .shuo{
  423. float: left;
  424. width: 30rpx;
  425. height: 30rpx;
  426. margin-left: 80rpx;
  427. margin-top: 15rpx;
  428. }
  429. .hit{
  430. height: 120rpx;
  431. }
  432. /* .shadow{
  433. position: absolute;
  434. right: 0;
  435. top: 20px;
  436. height: 80rpx;
  437. width: 120rpx;
  438. } */
  439. .purchaseBox{
  440. float: left;
  441. width: 96%;
  442. overflow-y: hidden;
  443. overflow-x: auto;
  444. white-space: nowrap;
  445. display:-webkit-box;
  446. -webkit-box-orient:horizontal;
  447. margin-top: 20rpx;
  448. margin-left: 2%;
  449. height: 120rpx;
  450. }
  451. .purchaseBox::-webkit-scrollbar {
  452. display: none;
  453. }
  454. .anthology_a{
  455. width: 220rpx;
  456. height: 70rpx;
  457. padding: 10rpx 10rpx;
  458. border-radius: 20rpx;
  459. border: 1rpx solid #07E881;
  460. color: #07E881;
  461. display: inline-block;
  462. text-align: center;
  463. margin-left: 20rpx;
  464. overflow:hidden;
  465. display: flex;
  466. align-items: center;
  467. justify-content: center;
  468. }
  469. .anthology{
  470. width: 220rpx;
  471. padding: 10rpx 10rpx;
  472. border-radius: 20rpx;
  473. text-align: center;
  474. display: inline-block;
  475. border: 1rpx solid #7A8399;
  476. color: #7A8399;
  477. height: 70rpx;
  478. margin-left: 20rpx;
  479. margin-top: 20rpx 0;
  480. overflow:hidden;
  481. display: flex;
  482. align-items: center;
  483. justify-content: center;
  484. }
  485. .anthologyItem{
  486. text-align: c;
  487. width: 220rpx;
  488. /* height: 70rpx; */
  489. overflow:hidden;
  490. text-overflow:ellipsis;
  491. display:-webkit-box;
  492. -webkit-box-orient:vertical;
  493. -webkit-line-clamp:2;
  494. font-size: 24rpx;
  495. /* text-indent: 0; */
  496. }
  497. .more{
  498. width: 20rpx;
  499. height: 40rpx;
  500. float: left;
  501. margin-top: 30rpx;
  502. margin-left: 40rpx;
  503. }
  504. .compilationsBox{
  505. width: 100%;
  506. height: 60vh;
  507. position: fixed;
  508. background-color: #0E1119;
  509. z-index: 100000;
  510. bottom: 0;
  511. left: 0;
  512. }
  513. .aaClassBox{
  514. width: 88%;
  515. float: left;
  516. }
  517. .pack{
  518. width: 5%;
  519. height: 20rpx;
  520. float: right;
  521. margin-top: 30rpx;
  522. margin-right: 40rpx;
  523. }
  524. .anthologyText{
  525. float: left;
  526. font-family: OPPOSans;
  527. font-weight: 500;
  528. color: #FFFFFF;
  529. font-size: 32rpx;
  530. margin: 20rpx;
  531. }
  532. .xiao{
  533. font-size: 28rpx;
  534. float: left;
  535. margin-top: 20rpx;
  536. }
  537. .Num{
  538. float: 20rpx;
  539. float: left;
  540. font-size: 34rpx;
  541. color: #ffffff;
  542. margin-top: 20rpx;
  543. margin-left: 10rpx;
  544. margin-right: 10rpx;
  545. }
  546. .number_a{
  547. width: 90rpx;
  548. float: left;
  549. padding: 10rpx 20rpx;
  550. border: 1px solid #07E881;;
  551. margin: 0 30rpx;
  552. border-radius: 50rpx;
  553. text-align: center;
  554. color: #07E881;
  555. }
  556. .numberBox{
  557. margin: 30rpx 0;
  558. }
  559. .number{
  560. width: 90rpx;
  561. float: left;
  562. padding: 10rpx 20rpx;
  563. border: 1px solid #7A8399;
  564. margin: 0 30rpx;
  565. border-radius: 50rpx;
  566. text-align: center;
  567. }
  568. .bfLogo{
  569. width: 100rpx;
  570. height: 100rpx;
  571. float: left;
  572. margin: 10rpx 20rpx;
  573. }
  574. .classnameBox{
  575. float: left;
  576. }
  577. .classname{
  578. width: 560rpx;
  579. font-size: 30rpx;
  580. color: #ffffff;
  581. overflow:hidden;
  582. text-overflow:ellipsis;
  583. display:-webkit-box;
  584. -webkit-box-orient:vertical;
  585. -webkit-line-clamp:1;
  586. margin-top: 10rpx;
  587. }
  588. .classname_a{
  589. width: 560rpx;
  590. font-size: 30rpx;
  591. color: #07E881;
  592. overflow:hidden;
  593. text-overflow:ellipsis;
  594. display:-webkit-box;
  595. -webkit-box-orient:vertical;
  596. -webkit-line-clamp:1;
  597. margin-top: 10rpx;
  598. }
  599. .purchaseTitle{
  600. color: #ffffff;
  601. font-size: 32rpx;
  602. font-family: PingFang SC;
  603. font-weight: bold;
  604. padding: 10rpx 0;
  605. }
  606. .purchaseXian{
  607. width: 60rpx;
  608. height: 5rpx;
  609. margin-left: 4rpx;
  610. background-color: #ffffff;
  611. }
  612. .issueBox{
  613. width: 96%;
  614. /* padding: 20rpx; */
  615. background-color: #111827;
  616. margin: 20rpx auto;
  617. overflow: hidden;
  618. border-radius: 20rpx;
  619. }
  620. .issueTitle{
  621. font-size: 30rpx;
  622. color: #ffffff;
  623. font-family: PingFang SC;
  624. margin: 20rpx 20rpx 10rpx 20rpx;
  625. }
  626. .answer{
  627. color: #535E75;
  628. font-size: 24rpx;
  629. margin: 10rpx 20rpx 20rpx 20rpx;
  630. }
  631. .answer::before{
  632. content: "答:";
  633. color: #07E881;
  634. }
  635. button::after {
  636. border: none;
  637. }
  638. button {
  639. background-color: transparent;
  640. padding-left: 0;
  641. padding-right: 0;
  642. line-height:inherit;
  643. }
  644. button {
  645. border-radius:0;
  646. }
  647. .temp{
  648. position: fixed;
  649. width: 100rpx;
  650. height: 100rpx;
  651. background: linear-gradient(0deg, #2A3042, #464D61);
  652. border-radius: 50%;
  653. top: 200px;
  654. left: 0;
  655. }