您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

685 行
12 KiB

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