Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

609 rader
10 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: 36rpx;
  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-left: 20rpx;
  125. border-bottom: 4rpx solid #07E881;
  126. padding-bottom: 6rpx;
  127. }
  128. .introduce{
  129. float: left;
  130. font-family: OPPOSans;
  131. margin: 20rpx 40px;
  132. }
  133. .catalogue{
  134. font-family: OPPOSans;
  135. float: left;
  136. margin: 20rpx 40rpx;
  137. }
  138. .userParticularsBox{
  139. border-radius: 20rpx;
  140. background-color: #293145;
  141. }
  142. .userBox{
  143. /* float: left; */
  144. margin: 40rpx 20rpx 20rpx 20rpx;
  145. }
  146. .userDescribe{
  147. float: left;
  148. margin: 20rpx;
  149. color: #9DA8C4;
  150. font-family: OPPOSans;
  151. font-weight: 400;
  152. }
  153. .userLogo{
  154. height: 120rpx;
  155. width: 120rpx;
  156. float: left;
  157. border-radius: 50%;
  158. }
  159. .userNameBox{
  160. margin-left: 40rpx;
  161. float: left;
  162. }
  163. .userName{
  164. float: left;
  165. color: #FFFFFF;
  166. font-family: OPPOSans;
  167. font-weight: 500;
  168. font-size: 30rpx;
  169. padding: 0 20rpx;
  170. }
  171. .attention{
  172. float: left;
  173. border-radius: 20rpx;
  174. line-height: 40rpx;
  175. height: 40rpx;
  176. border: 1rpx solid #07E881;
  177. background: rgba(7, 232, 129, 0.12);
  178. color: #07E881;
  179. padding: 2rpx 20rpx;
  180. }
  181. .classifyItem{
  182. text-align: center;
  183. background: #141825;
  184. border: 1rpx solid #666D80;
  185. border-radius: 18rpx;
  186. float: left;
  187. padding: 6rpx 10rpx;
  188. margin: 10rpx;
  189. }
  190. .extend{
  191. width: 20rpx;
  192. height: 40rpx;
  193. float: right;
  194. margin: 20rpx 40rpx 0 0;
  195. }
  196. .richtextBox{
  197. margin-top: 40rpx;
  198. min-height: 120rpx;
  199. }
  200. .add{
  201. width: 140rpx;
  202. height: 140rpx;
  203. position: fixed;
  204. right: 0;
  205. bottom: 274rpx;
  206. }
  207. .addBox{
  208. padding: 0 40rpx;
  209. /* width: 90%; */
  210. height: 100rpx;
  211. background: linear-gradient(0deg, #2A3042, #464D61);
  212. box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.93);
  213. border-radius: 49rpx;
  214. position: fixed;
  215. left: 100%;
  216. bottom: 300rpx;
  217. }
  218. .addBox-transition {
  219. transition: all 0.5s;
  220. }
  221. .addBox-moved {
  222. left: 50%;
  223. }
  224. @keyframes addBox-ani {
  225. from {
  226. left: 100%;
  227. }
  228. to {
  229. left: 5%;
  230. }
  231. }
  232. .addBox-animation {
  233. animation: addBox-ani 1s alternate infinite;
  234. }
  235. .goruzu{
  236. float: left;
  237. }
  238. .video{
  239. width: 70rpx;
  240. height: 70rpx;
  241. float: left;
  242. margin-left: 40rpx;
  243. margin-top: 15rpx;
  244. }
  245. .checkImg{
  246. width: 70rpx;
  247. height: 70rpx;
  248. float: left;
  249. /* margin-left: 80rpx; */
  250. margin-left: 10rpx;
  251. margin-top: 10rpx;
  252. }
  253. .issue{
  254. float: left;
  255. font-size: 30rpx;
  256. font-family: OPPOSans;
  257. font-weight: bold;
  258. color: #FFFFFF;
  259. line-height: 100rpx;
  260. margin-left: 10rpx;
  261. }
  262. .xian{
  263. height: 70rpx;
  264. width: 2rpx;
  265. background-color: rgba(255, 255, 255, 0.3);
  266. border-radius: 1px;
  267. float: left;
  268. margin-left: 80rpx;
  269. margin-top: 15rpx;
  270. }
  271. .shareBox{
  272. width: 100%;
  273. position: fixed;
  274. left: 0;
  275. bottom: 0;
  276. height: 120rpx;
  277. background: #141928;
  278. }
  279. .shareImg{
  280. margin-top: 5rpx;
  281. float: left;
  282. width: 40rpx;
  283. height: 40rpx;
  284. margin-top: 20rpx;
  285. margin-left: 40rpx;
  286. }
  287. .shareText{
  288. float: left;
  289. margin-top: 20rpx;
  290. margin-left: 20rpx;
  291. color: #ffffff;
  292. width: 70rpx;
  293. height: 50rpx;
  294. font-size: 28rpx;
  295. }
  296. .xuxian{
  297. width: 1rpx;
  298. height: 28rpx;
  299. background: #8790A8;
  300. opacity: 0.4;
  301. float: left;
  302. margin-top: 30rpx;
  303. margin-left: 60rpx;
  304. }
  305. .consult{
  306. float: left;
  307. width: 40rpx;
  308. height: 40rpx;
  309. margin-top: 20rpx;
  310. margin-left: 40rpx;
  311. line-height: 40rpx;
  312. }
  313. .service{
  314. float: left;
  315. margin-top: 10rpx;
  316. margin-left: 10rpx;
  317. color: #ffffff;
  318. width: 100rpx;
  319. padding: 0;
  320. height: 50rpx;
  321. background-color: #141928;
  322. font-size: 28rpx;
  323. }
  324. .service span{
  325. display: block;
  326. width: 100%;
  327. height: 100%;
  328. }
  329. .shopping{
  330. height: 90rpx;
  331. line-height: 90rpx;
  332. text-align: center;
  333. float: left;
  334. padding: 0 60rpx;
  335. background: linear-gradient(-4deg, #4EE09D, #02C96E);
  336. border-radius: 50rpx;
  337. margin-left: 30rpx;
  338. color: #FFFFFF;
  339. font-size: 36rpx;
  340. font-family: OPPOSans;
  341. }
  342. .nOshopping{
  343. height: 90rpx;
  344. line-height: 90rpx;
  345. text-align: center;
  346. float: left;
  347. padding: 0 60rpx;
  348. background-color: rgba(255, 255, 255, 0.1);
  349. border-radius: 50rpx;
  350. margin-left: 10rpx;
  351. color: #FFFFFF;
  352. font-size: 32rpx;
  353. font-family: OPPOSans;
  354. }
  355. .h3Img{
  356. width: 40rpx;
  357. height: 40rpx;
  358. float: left;
  359. margin-left: 20rpx;
  360. }
  361. .h3{
  362. float: left;
  363. margin-left: 20rpx;
  364. font-family: OPPOSans;
  365. font-weight: 500;
  366. color: #FFFFFF;
  367. }
  368. .playLsitBox{
  369. margin: 40rpx 20rpx;
  370. }
  371. .transmitImg{
  372. width: 100rpx;
  373. height: 100rpx;
  374. float: left;
  375. }
  376. .timeBox{
  377. float: left;
  378. width: 400rpx;
  379. margin-left: 20rpx;
  380. color: #FFFFFF;
  381. }
  382. .curriculumBox{
  383. margin-top: 20rpx;
  384. }
  385. .time{
  386. float: left;
  387. width: 30rpx;
  388. height: 30rpx;
  389. margin-top: 20rpx;
  390. }
  391. .timeText{
  392. font-family: OPPOSans;
  393. font-weight: 500;
  394. color: #6E768A;
  395. margin-top: 15rpx;
  396. margin-left: 10rpx;
  397. float: left;
  398. }
  399. .yuan{
  400. float: left;
  401. width: 30rpx;
  402. height: 30rpx;
  403. margin-top: 20rpx;
  404. margin-left: 100rpx;
  405. }
  406. .then{
  407. font-family: OPPOSans;
  408. font-weight: 500;
  409. color: #07E881;
  410. margin-top: 15rpx;
  411. margin-left: 10rpx;
  412. float: left;
  413. }
  414. .timeBoxTitle_a{
  415. color: #07E881;
  416. }
  417. .timeBoxTitle{
  418. color: #ffffff;
  419. }
  420. .try{
  421. float: left;
  422. width: 60rpx;
  423. height: 40rpx;
  424. margin-left: 80rpx;
  425. margin-top: 20rpx;
  426. }
  427. .shuo{
  428. float: left;
  429. width: 30rpx;
  430. height: 30rpx;
  431. margin-left: 80rpx;
  432. margin-top: 15rpx;
  433. }
  434. .hit{
  435. height: 120rpx;
  436. }
  437. .purchaseBox{
  438. float: left;
  439. width: 90%;
  440. overflow: hidden;
  441. overflow-y: hidden;
  442. overflow-x: auto;
  443. white-space: nowrap;
  444. margin-top: 20rpx;
  445. height: 70rpx;
  446. }
  447. .purchaseBox::-webkit-scrollbar {
  448. display: none;
  449. }
  450. .anthology_a{
  451. width: 220rpx;
  452. padding: 10rpx 20rpx;
  453. border-radius: 50rpx;
  454. text-align: center;
  455. border: 1rpx solid #ffffff;
  456. color: #FFFFFF;
  457. display: inline-block;
  458. text-align: center;
  459. margin-left: 20rpx;
  460. }
  461. .anthology{
  462. width: 220rpx;
  463. padding: 10rpx 20rpx;
  464. border-radius: 50rpx;
  465. text-align: center;
  466. display: inline-block;
  467. border: 1rpx solid #7A8399;
  468. color: #7A8399;;
  469. margin-left: 20rpx;
  470. margin-top: 20rpx 0;
  471. }
  472. .anthology_a{
  473. width: 220rpx;
  474. padding: 10rpx 20rpx;
  475. border-radius: 50rpx;
  476. text-align: center;
  477. display: inline-block;
  478. border: 1rpx solid #7A8399;
  479. color: #ffffff;;
  480. margin-left: 20rpx;
  481. margin-top: 20rpx 0;
  482. }
  483. .anthologyItem{
  484. width: 220rpx;
  485. overflow:hidden;
  486. text-overflow:ellipsis;
  487. display:-webkit-box;
  488. -webkit-box-orient:vertical;
  489. -webkit-line-clamp:1;
  490. }
  491. .more{
  492. width: 20rpx;
  493. height: 40rpx;
  494. float: left;
  495. margin-top: 30rpx;
  496. margin-left: 40rpx;
  497. }
  498. .compilationsBox{
  499. width: 100%;
  500. height: 60vh;
  501. position: fixed;
  502. background-color: #0E1119;
  503. z-index: 100000;
  504. bottom: 0;
  505. left: 0;
  506. }
  507. .aaClassBox{
  508. width: 88%;
  509. float: left;
  510. }
  511. .pack{
  512. width: 5%;
  513. height: 20rpx;
  514. float: right;
  515. margin-top: 30rpx;
  516. margin-right: 40rpx;
  517. }
  518. .anthologyText{
  519. float: left;
  520. font-family: OPPOSans;
  521. font-weight: 500;
  522. color: #FFFFFF;
  523. font-size: 32rpx;
  524. margin: 20rpx;
  525. }
  526. .xiao{
  527. font-size: 28rpx;
  528. float: left;
  529. margin-top: 20rpx;
  530. }
  531. .Num{
  532. float: 20rpx;
  533. float: left;
  534. font-size: 34rpx;
  535. color: #ffffff;
  536. margin-top: 20rpx;
  537. margin-left: 10rpx;
  538. margin-right: 10rpx;
  539. }
  540. .number_a{
  541. width: 90rpx;
  542. float: left;
  543. padding: 10rpx 20rpx;
  544. border: 1px solid #07E881;;
  545. margin: 0 30rpx;
  546. border-radius: 50rpx;
  547. text-align: center;
  548. color: #07E881;
  549. }
  550. .numberBox{
  551. margin: 30rpx 0;
  552. }
  553. .number{
  554. width: 90rpx;
  555. float: left;
  556. padding: 10rpx 20rpx;
  557. border: 1px solid #7A8399;
  558. margin: 0 30rpx;
  559. border-radius: 50rpx;
  560. text-align: center;
  561. }
  562. .bfLogo{
  563. width: 100rpx;
  564. height: 100rpx;
  565. float: left;
  566. margin: 10rpx 20rpx;
  567. }
  568. .classnameBox{
  569. float: left;
  570. }
  571. .classname{
  572. width: 560rpx;
  573. font-size: 30rpx;
  574. color: #ffffff;
  575. overflow:hidden;
  576. text-overflow:ellipsis;
  577. display:-webkit-box;
  578. -webkit-box-orient:vertical;
  579. -webkit-line-clamp:1;
  580. margin-top: 10rpx;
  581. }
  582. .classname_a{
  583. width: 560rpx;
  584. font-size: 30rpx;
  585. color: #07E881;
  586. overflow:hidden;
  587. text-overflow:ellipsis;
  588. display:-webkit-box;
  589. -webkit-box-orient:vertical;
  590. -webkit-line-clamp:1;
  591. margin-top: 10rpx;
  592. }