specialpage.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101
  1. body {
  2. padding-bottom: .16rem;
  3. }
  4. div {
  5. -webkit-tap-highlight-color: rgba(0,0,0,0);
  6. -webkit-tap-highlight-color: transparent;
  7. -webkit-touch-callout: none;
  8. -webkit-user-select: none;
  9. }
  10. .clearfix:after {
  11. content: ".";
  12. display: block;
  13. height: 0;
  14. clear: both;
  15. visibility: hidden
  16. }
  17. .ban_s1 .ban_img_s1 {
  18. display: block;
  19. margin-bottom: .175rem;
  20. width: 100%;
  21. }
  22. .card_li1, .card_li2, .card_li3, .card_li4, .card_li5, .group_img_link {
  23. margin-top: 0.08rem;
  24. margin-bottom: 0.08rem;
  25. padding: 0 0 0 0;
  26. }
  27. .card_more {
  28. padding-bottom: 0.08rem;
  29. }
  30. .daoyu, .lanwei {
  31. margin: 0.085rem 0;
  32. }
  33. pre{
  34. white-space: pre-wrap;
  35. word-break: break-word;
  36. }
  37. /* 导语 */
  38. .daoyu {
  39. position: relative;
  40. font-size: .14rem;
  41. color: #333;
  42. font-family: SourceHanSansCN-Regular;
  43. font-weight: 400;
  44. line-height: .19rem;
  45. box-sizing: border-box;
  46. -moz-box-sizing: border-box; /* Firefox */
  47. -webkit-box-sizing: border-box; /* Safari */
  48. white-space: pre-wrap;
  49. word-break: break-word;
  50. box-sizing: border-box;
  51. padding: 0.02rem 0;
  52. }
  53. .daoyu span {
  54. opacity: 0.9;
  55. }
  56. .daoyu1 {
  57. margin-left: .165rem;
  58. margin-right: .165rem; /* padding:0.085rem 0; */
  59. }
  60. .daoyu2 {
  61. margin-left: .165rem;
  62. margin-right: .165rem;
  63. padding: .11rem .165rem .175rem .245rem;
  64. border-radius: .04rem;
  65. background: rgba(51,68,85,0.05);
  66. white-space: pre-wrap;
  67. word-break: break-word;
  68. }
  69. .daoyu2::before, .daoyu2::after {
  70. content: " ";
  71. position: absolute;
  72. width: .24rem;
  73. height: .18rem;
  74. }
  75. .daoyu2::before {
  76. top: .04rem;
  77. left: .04rem;
  78. background: url('../../img/frontend/specialpage/images/ico_p1_l.png') no-repeat;
  79. background-size: 100%;
  80. }
  81. .daoyu2::after {
  82. bottom: .04rem;
  83. right: .04rem;
  84. background: url('../../img/frontend/specialpage/images/ico_p1_r.png') no-repeat;
  85. background-size: 100%;
  86. }
  87. .daoyu3 {
  88. margin-left: .1225rem;
  89. margin-right: .1225rem;
  90. width: 3.355rem;
  91. border-radius: .04rem;
  92. }
  93. .daoyu3::before, .daoyu3::after, .daoyu3 span {
  94. display: block;
  95. width: 3.355rem;
  96. box-sizing: border-box;
  97. -moz-box-sizing: border-box; /* Firefox */
  98. -webkit-box-sizing: border-box; /* Safari */
  99. }
  100. .daoyu3 span {
  101. padding: 0 .12rem 0;
  102. background: url('../../img/frontend/specialpage/images/ico_p3_m.png') repeat-y center .2rem;
  103. background-size: 3.355rem;
  104. opacity: 1;
  105. }
  106. .daoyu3::before, .daoyu3::after {
  107. content: " ";
  108. }
  109. .daoyu3::before {
  110. height: .2rem;
  111. background: url('../../img/frontend/specialpage/images/ico_p3.png') no-repeat center top;
  112. background-size: 3.355rem;
  113. }
  114. .daoyu3::after {
  115. height: .23rem;
  116. background: url('../../img/frontend/specialpage/images/ico_p3.png') no-repeat center bottom;
  117. background-size: 3.355rem;
  118. }
  119. .daoyu4 {
  120. margin-left: .165rem;
  121. margin-right: .165rem;
  122. padding: .12rem .125rem .01rem .125rem;
  123. }
  124. .daoyu4::before, .daoyu4::after {
  125. content: " ";
  126. position: absolute;
  127. width: .16rem;
  128. height: .24rem;
  129. }
  130. .daoyu4::before {
  131. top: 0rem;
  132. left: 0rem;
  133. background: url('../../img/frontend/specialpage/images/ico_p4_l.png') no-repeat;
  134. background-size: 100%;
  135. }
  136. .daoyu4::after {
  137. bottom: 0rem;
  138. right: 0rem;
  139. background: url('../../img/frontend/specialpage/images/ico_p4_r.png') no-repeat;
  140. background-size: 100%;
  141. }
  142. /* 导语 end */
  143. /* 栏位标题 */
  144. .lanwei {
  145. position: relative;
  146. margin: 0.08rem 0;
  147. height: .48rem;
  148. font-size: .18rem;
  149. font-family: SourceHanSansCN-Bold;
  150. font-weight: bold;
  151. color: rgba(0,0,0,1);
  152. box-sizing: border-box;
  153. -moz-box-sizing: border-box; /* Firefox */
  154. -webkit-box-sizing: border-box; /* Safari */
  155. }
  156. .lanwei span {
  157. opacity: 0.9;
  158. display: inline-block;
  159. overflow: hidden;
  160. text-overflow: ellipsis;
  161. white-space: nowrap;
  162. }
  163. .lanwei1 span {
  164. max-width: 2.6rem;
  165. }
  166. .lanwei2 span {
  167. max-width: 3.1rem;
  168. }
  169. .lanwei3 span {
  170. max-width: 3.1rem;
  171. }
  172. .lanwei1 {
  173. padding-top: .2rem;
  174. text-align: center;
  175. }
  176. .lanwei1::before, .lanwei1::after {
  177. content: " ";
  178. display: inline-block;
  179. margin: 0 .06rem;
  180. width: .2rem;
  181. height: .06rem;
  182. vertical-align: .06rem;
  183. ;
  184. }
  185. .lanwei1::before {
  186. background: url('../../img/frontend/specialpage/images/ico_t1_l.png') no-repeat;
  187. background-size: 100%;
  188. }
  189. .lanwei1::after {
  190. background: url('../../img/frontend/specialpage/images/ico_t1_r.png') no-repeat;
  191. background-size: 100%;
  192. }
  193. .lanwei2 {
  194. padding: .2rem 0 0 .24rem;
  195. }
  196. .lanwei2::before {
  197. content: " ";
  198. position: absolute;
  199. top: .08rem;
  200. left: .08rem;
  201. width: .24rem;
  202. height: .18rem;
  203. background: url('../../img/frontend/specialpage/images/ico_p1_l.png') no-repeat;
  204. background-size: 100%
  205. }
  206. .lanwei3 {
  207. padding-left: .155rem;
  208. line-height: .48rem;
  209. }
  210. .lanwei3::before {
  211. content: " ";
  212. position: absolute;
  213. top: .38rem;
  214. left: .155rem;
  215. width: .16rem;
  216. height: .02rem;
  217. background: rgba(51,46,46,1);
  218. border-radius: .01rem;
  219. }
  220. .lanwei4 {
  221. height: auto;
  222. }
  223. .lanwei4 img {
  224. display: block;
  225. margin: 0 auto;
  226. width: 3.2rem;
  227. }
  228. /* */
  229. /* 书籍卡片 */
  230. .card {
  231. position: relative;
  232. box-sizing: border-box;
  233. -moz-box-sizing: border-box; /* Firefox */
  234. -webkit-box-sizing: border-box; /* Safari */
  235. }
  236. /* 卡片一样式 */
  237. .card_li1 .card {
  238. margin: 0rem auto;
  239. width: 3.28rem;
  240. height: 1.52rem;
  241. background: rgba(255,255,255,1);
  242. box-shadow: 0 .03rem .04rem 0 rgba(0, 0, 0, 0.05);
  243. border-radius: .08rem;
  244. }
  245. .card_li1 .card .card_img {
  246. position: absolute;
  247. left: .08rem;
  248. top: .16rem;
  249. width: .88rem;
  250. height: 1.18rem;
  251. background: rgba(255,203,203,1);
  252. border-radius: .04rem;
  253. overflow: hidden;
  254. }
  255. .card_li1 .card_img img {
  256. width: 100%;
  257. height: 100%;
  258. }
  259. .card_li1 .card_img .ico_txt {
  260. position: absolute;
  261. left: -.26rem;
  262. top: .07rem;
  263. width: .8rem;
  264. height: .14rem;
  265. line-height: .14rem;
  266. text-align: center;
  267. letter-spacing: 0;
  268. color: #fff;
  269. font-size: .08rem;
  270. transform: rotate(-45deg);
  271. -ms-transform: rotate(-45deg); /* Internet Explorer */
  272. -moz-transform: rotate(-45deg); /* Firefox */
  273. -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  274. -o-transform: rotate(-45deg); /* Opera */
  275. }
  276. .card_li1 .card {
  277. padding-left: 1.125rem;
  278. padding-right: .085rem;
  279. }
  280. .card_li1 .card_t {
  281. padding-top: .13rem;
  282. font-size: .16rem;
  283. font-family: SourceHanSansCN-Medium;
  284. font-weight: 700;
  285. color: rgba(0,0,0,1);
  286. opacity: 0.9;
  287. overflow: hidden;
  288. text-overflow: ellipsis;
  289. white-space: nowrap;
  290. padding-right: 0.4rem;
  291. }
  292. .card_li1 .card_dt {
  293. padding-top: .045rem;
  294. overflow: hidden;
  295. }
  296. .card_li1 .card_name {
  297. width: 100%;
  298. display: block;
  299. font-size: .13rem;
  300. font-family: SourceHanSansCN-Regular;
  301. font-weight: 400;
  302. color: rgba(51,51,51,1);
  303. opacity: 0.7;
  304. overflow: hidden;
  305. text-overflow: ellipsis;
  306. white-space: nowrap;
  307. }
  308. .card_li1 .card_read {
  309. display: none;
  310. width: 50%;
  311. float: right;
  312. text-align: right;
  313. color: #CD2325;
  314. overflow: hidden;
  315. text-overflow: ellipsis;
  316. white-space: nowrap;
  317. }
  318. .card_li1 .card_read::before {
  319. display: none;
  320. content: " ";
  321. display: inline-block;
  322. margin-top: -.05rem;
  323. width: .15rem;
  324. height: .15rem;
  325. vertical-align: middle;
  326. background: url('../../img/frontend/specialpage/images/ico_fire.png') no-repeat center;
  327. background-size: 100%;
  328. }
  329. .card_li1 .card_des {
  330. padding-top: .045rem;
  331. font-size: .13rem;
  332. font-family: SourceHanSansCN-Regular;
  333. font-weight: 400;
  334. color: rgba(51,51,51,1);
  335. line-height: .18rem;
  336. opacity: 0.7;
  337. overflow: hidden;
  338. text-overflow: ellipsis;
  339. display: -webkit-box;
  340. -webkit-box-orient: vertical;
  341. -webkit-line-clamp: 2;
  342. }
  343. .card_li1 .card_db {
  344. position: absolute;
  345. left: 1.13rem;
  346. top: 1.025rem;
  347. font-family: SourceHanSansCN-Regular;
  348. }
  349. .card_li1 .price {
  350. font-size: .13rem;
  351. color: #CD2325;
  352. }
  353. .card_li1 .price_one {
  354. padding-top: .16rem;
  355. }
  356. .card_li1 .price_original {
  357. font-size: .12rem;
  358. font-weight: 400;
  359. text-decoration: line-through;
  360. color: rgba(51,51,51,1);
  361. opacity: 0.5;
  362. margin-top: -.025rem
  363. }
  364. .card_li1 .card_go_book {
  365. position: absolute;
  366. right: .08rem;
  367. bottom: .16rem;
  368. display: block;
  369. height: .28rem;
  370. padding: 0 0.08rem;
  371. line-height: .29rem;
  372. background: rgba(205,35,37,1);
  373. border-radius: .14rem;
  374. font-size: .13rem;
  375. text-align: center;
  376. font-family: SourceHanSansCN-Medium;
  377. font-weight: 500;
  378. color: rgba(255,255,255,1);
  379. }
  380. /* 卡片二样式 */
  381. .card_li2 .card {
  382. margin: 0rem auto;
  383. padding-left: 1.125rem;
  384. padding-right: .085rem;
  385. width: 3.28rem;
  386. height: 1.6rem;
  387. background: rgba(255,255,255,1);
  388. box-shadow: 0 .03rem .04rem 0 rgba(0, 0, 0, 0.05);
  389. border-radius: .08rem;
  390. }
  391. .card_li2 .card .card_img {
  392. position: absolute;
  393. left: .08rem;
  394. top: .16rem;
  395. width: .92rem;
  396. height: 1.28rem;
  397. background: rgba(255,203,203,1);
  398. border-radius: .04rem;
  399. overflow: hidden;
  400. }
  401. .card_li2 .card_img img {
  402. width: 100%;
  403. height: 100%;
  404. }
  405. .card_li2 .card_img .ico_txt {
  406. position: absolute;
  407. left: -.26rem;
  408. top: .07rem;
  409. width: .8rem;
  410. height: .14rem;
  411. line-height: .14rem;
  412. text-align: center;
  413. letter-spacing: .025rem;
  414. color: #fff;
  415. font-size: .08rem;
  416. transform: rotate(-45deg);
  417. -ms-transform: rotate(-45deg); /* Internet Explorer */
  418. -moz-transform: rotate(-45deg); /* Firefox */
  419. -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  420. -o-transform: rotate(-45deg); /* Opera */
  421. }
  422. .card_li2 .card_t {
  423. padding-top: .15rem;
  424. font-size: .16rem;
  425. font-family: SourceHanSansCN-Medium;
  426. font-weight: 700;
  427. color: rgba(0,0,0,1);
  428. opacity: 0.9;
  429. overflow: hidden;
  430. text-overflow: ellipsis;
  431. white-space: nowrap;
  432. }
  433. .card_li2 .card_dt {
  434. padding-top: .05rem;
  435. overflow: hidden;
  436. }
  437. .card_li2 .card_name {
  438. width: 50%;
  439. float: left;
  440. display: block;
  441. font-size: .13rem;
  442. font-family: SourceHanSansCN-Regular;
  443. font-weight: 400;
  444. color: rgba(51,51,51,1);
  445. opacity: 0.7;
  446. overflow: hidden;
  447. text-overflow: ellipsis;
  448. white-space: nowrap;
  449. }
  450. .card_li2 .card_read {
  451. width: 50%;
  452. float: right;
  453. text-align: right;
  454. color: #CD2325;
  455. font-size: .13rem;
  456. overflow: hidden;
  457. text-overflow: ellipsis;
  458. white-space: nowrap;
  459. }
  460. .card_li2 .card_read::before {
  461. content: " ";
  462. display: inline-block;
  463. margin-top: -.05rem;
  464. width: .15rem;
  465. height: .15rem;
  466. vertical-align: middle;
  467. background: url('../../img/frontend/specialpage/images/ico_fire.png') no-repeat center;
  468. background-size: 92%;
  469. }
  470. .card_li2 .card_des {
  471. padding-top: .05rem;
  472. font-size: .13rem;
  473. font-family: SourceHanSansCN-Regular;
  474. font-weight: 400;
  475. color: rgba(51,51,51,1);
  476. line-height: .18rem;
  477. opacity: 0.7;
  478. overflow: hidden;
  479. text-overflow: ellipsis;
  480. display: -webkit-box;
  481. -webkit-box-orient: vertical;
  482. -webkit-line-clamp: 2;
  483. }
  484. .card_li2 .card_db {
  485. position: absolute;
  486. left: 1.13rem;
  487. top: 1.10rem;
  488. font-family: SourceHanSansCN-Regular;
  489. }
  490. .card_li2 .price {
  491. font-size: .13rem;
  492. color: #CD2325;
  493. }
  494. .card_li2 .price_one {
  495. padding-top: .16rem;
  496. }
  497. .card_li2 .price_original {
  498. font-size: .12rem;
  499. font-weight: 400;
  500. text-decoration: line-through;
  501. color: rgba(51,51,51,1);
  502. opacity: 0.5;
  503. }
  504. .card_li2 .card_go_book {
  505. position: absolute;
  506. right: .08rem;
  507. bottom: .16rem;
  508. display: block;
  509. /* width: .72rem; */
  510. padding: 0 0.1rem;
  511. height: .28rem;
  512. line-height: .29rem;
  513. background: rgba(205,35,37,1);
  514. border-radius: .14rem;
  515. font-size: .13rem;
  516. text-align: center;
  517. font-family: SourceHanSansCN-Medium;
  518. font-weight: 500;
  519. color: rgba(255,255,255,1);
  520. }
  521. /* 卡片三样式 */
  522. .card_li3 .card_li_w, .card_li3 .card {
  523. height: 2.32rem;
  524. }
  525. .card_li3 .card_minh, .card_li3 .card_minh .card {
  526. height: 2.16rem;
  527. }
  528. .card_li3 .card_li_w {
  529. clear: both;
  530. margin: 0 auto;
  531. width: 3.28rem;
  532. background: rgba(255,255,255,1);
  533. box-shadow: 0 .03rem .04rem 0 rgba(0, 0, 0, 0.05);
  534. border-radius: .08rem;
  535. }
  536. .card_li3 .card {
  537. float: left;
  538. margin-left: .12rem;
  539. padding: .08rem 0 0 0;
  540. width: 0.96rem;
  541. }
  542. /* .card_li3 .card:first-of-type {margin-left:.08rem;} */
  543. .card_li3 .card:nth-child(3n+1) {
  544. margin-left: .1rem;
  545. }
  546. .card_li3 .card .card_img {
  547. position: relative;
  548. width: .96rem;
  549. height: 1.28rem;
  550. background: rgba(255,203,203,1);
  551. border-radius: .04rem;
  552. overflow: hidden;
  553. }
  554. .card_li3 .card_img img {
  555. width: 100%;
  556. height: 100%;
  557. }
  558. .card_li3 .card_img .ico_txt {
  559. position: absolute;
  560. left: -.26rem;
  561. top: .07rem;
  562. width: .8rem;
  563. height: .14rem;
  564. line-height: .14rem;
  565. text-align: center;
  566. letter-spacing: .025rem;
  567. color: #fff;
  568. font-size: .08rem;
  569. transform: rotate(-45deg);
  570. -ms-transform: rotate(-45deg); /* Internet Explorer */
  571. -moz-transform: rotate(-45deg); /* Firefox */
  572. -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  573. -o-transform: rotate(-45deg); /* Opera */
  574. }
  575. .card_li3 .card_t {
  576. padding-top: .05rem;
  577. font-size: .13rem;
  578. font-family: SourceHanSansCN-Medium;
  579. font-weight: 700;
  580. color: rgba(0,0,0,1);
  581. opacity: 0.9;
  582. overflow: hidden;
  583. text-overflow: ellipsis;
  584. max-height: .3rem;
  585. line-height: .16rem;
  586. white-space: nowrap;
  587. }
  588. .card_li3 .card_dt {
  589. padding-top: .02rem;
  590. overflow: hidden;
  591. }
  592. .card_li3 .card_name {
  593. display: block;
  594. width: 100%;
  595. font-size: .12rem;
  596. font-family: SourceHanSansCN-Regular;
  597. font-weight: 400;
  598. color: rgba(51,51,51,1);
  599. opacity: 0.5;
  600. overflow: hidden;
  601. text-overflow: ellipsis;
  602. white-space: nowrap;
  603. }
  604. .card_li3 .card_read {
  605. display: none;
  606. }
  607. .card_li3 .card_des {
  608. display: none;
  609. }
  610. .card_li3 .card_db {
  611. position: absolute;
  612. left: 0;
  613. top: 1.915rem;
  614. font-family: SourceHanSansCN-Regular;
  615. }
  616. .card_li3 .price {
  617. font-size: .13rem;
  618. color: #CD2325;
  619. }
  620. .card_li3 .price_original {
  621. font-size: .13rem;
  622. font-weight: 400;
  623. text-decoration: line-through;
  624. color: rgba(51,51,51,1);
  625. opacity: 0.5;
  626. }
  627. .card_li3 .card_go_book {
  628. display: none;
  629. }
  630. /* 卡片四样式 */
  631. .card_li4 .card_li_w, .card_li4 .card {
  632. height: 2.27rem;
  633. }
  634. .card_li4 .card_minh, .card_li4 .card_minh .card {
  635. height: 2.11rem;
  636. }
  637. .card_li4 .card_li_w {
  638. margin: 0 auto;
  639. width: 3.28rem;
  640. }
  641. .card_li4 .card {
  642. float: left;
  643. margin-left: .08rem;
  644. padding: .08rem;
  645. width: 1.04rem;
  646. background: rgba(255,255,255,1);
  647. box-shadow: 0 .03rem .04rem 0 rgba(0, 0, 0, 0.05);
  648. border-radius: .08rem;
  649. }
  650. .card_li4 .card:first-of-type {
  651. margin-left: 0.05rem;
  652. }
  653. .card_li4 .card .card_img {
  654. position: relative;
  655. width: .88rem;
  656. height: 1.18rem;
  657. background: rgba(255,203,203,1);
  658. border-radius: .04rem;
  659. overflow: hidden;
  660. }
  661. .card_li4 .card_img img {
  662. width: 100%;
  663. height: 100%;
  664. }
  665. .card_li4 .card_img .ico_txt {
  666. position: absolute;
  667. left: -.26rem;
  668. top: .07rem;
  669. width: .8rem;
  670. height: .14rem;
  671. line-height: .14rem;
  672. text-align: center;
  673. letter-spacing: .025rem;
  674. color: #fff;
  675. font-size: .08rem;
  676. transform: rotate(-45deg);
  677. -ms-transform: rotate(-45deg);
  678. -moz-transform: rotate(-45deg);
  679. -webkit-transform: rotate(-45deg);
  680. -o-transform: rotate(-45deg);
  681. }
  682. .card_li4 .card_t {
  683. padding-top: .05rem;
  684. font-size: .13rem;
  685. font-family: SourceHanSansCN-Medium;
  686. font-weight: 700;
  687. color: rgba(0,0,0,1);
  688. opacity: 0.9;
  689. overflow: hidden;
  690. text-overflow: ellipsis;
  691. max-height: .315rem;
  692. line-height: .16rem;
  693. white-space: nowrap;
  694. }
  695. .card_li4 .card_dt {
  696. padding-top: .02rem;
  697. overflow: hidden;
  698. }
  699. .card_li4 .card_name {
  700. display: block;
  701. width: 100%;
  702. font-size: .12rem;
  703. font-family: SourceHanSansCN-Regular;
  704. font-weight: 400;
  705. color: rgba(51,51,51,1);
  706. opacity: 0.5;
  707. overflow: hidden;
  708. text-overflow: ellipsis;
  709. white-space: nowrap;
  710. }
  711. .card_li4 .card_read {
  712. display: none;
  713. }
  714. .card_li4 .card_des {
  715. display: none;
  716. }
  717. .card_li4 .card_db {
  718. position: absolute;
  719. left: .08rem;
  720. top: 1.835rem;
  721. font-family: SourceHanSansCN-Regular;
  722. }
  723. .card_li4 .price {
  724. font-size: .12rem;
  725. color: #CD2325;
  726. }
  727. .card_li4 .price_original {
  728. font-size: .12rem;
  729. font-weight: 400;
  730. text-decoration: line-through;
  731. color: rgba(51,51,51,1);
  732. opacity: 0.5;
  733. }
  734. .card_li4 .card_go_book {
  735. display: none;
  736. }
  737. /* 卡片5样式 */
  738. .card_li5 .card {
  739. margin: 0rem auto;
  740. padding-left: 1.125rem;
  741. padding-right: .085rem;
  742. width: 3.28rem;
  743. height: 1.6rem;
  744. background: rgba(255,255,255,1);
  745. box-shadow: 0 .03rem .04rem 0 rgba(0, 0, 0, 0.05);
  746. border-radius: .08rem;
  747. }
  748. .card_li5 .card .card_img {
  749. position: absolute;
  750. left: .08rem;
  751. top: .16rem;
  752. width: .92rem;
  753. height: 1.28rem;
  754. background: rgba(255,203,203,1);
  755. border-radius: .04rem;
  756. overflow: hidden;
  757. }
  758. .card_li5 .card_img img {
  759. width: 100%;
  760. height: 100%;
  761. }
  762. .card_li5 .card_img .ico_txt {
  763. position: absolute;
  764. left: -.26rem;
  765. top: .07rem;
  766. width: .8rem;
  767. height: .14rem;
  768. line-height: .14rem;
  769. text-align: center;
  770. letter-spacing: .025rem;
  771. color: #fff;
  772. font-size: .08rem;
  773. transform: rotate(-45deg);
  774. -ms-transform: rotate(-45deg); /* Internet Explorer */
  775. -moz-transform: rotate(-45deg); /* Firefox */
  776. -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
  777. -o-transform: rotate(-45deg); /* Opera */
  778. }
  779. .card_li5 .card_t {
  780. padding-top: .15rem;
  781. font-size: .16rem;
  782. font-family: SourceHanSansCN-Medium;
  783. font-weight: 700;
  784. color: rgba(0,0,0,1);
  785. opacity: 0.9;
  786. overflow: hidden;
  787. text-overflow: ellipsis;
  788. white-space: nowrap;
  789. }
  790. .card_li5 .card_dt {
  791. padding-top: .05rem;
  792. overflow: hidden;
  793. }
  794. .card_li5 .card_name {
  795. width: 50%;
  796. float: left;
  797. display: block;
  798. font-size: .13rem;
  799. font-family: SourceHanSansCN-Regular;
  800. font-weight: 400;
  801. color: rgba(51,51,51,1);
  802. opacity: 0.7;
  803. overflow: hidden;
  804. text-overflow: ellipsis;
  805. white-space: nowrap;
  806. }
  807. .card_li5 .card_read {
  808. width: 50%;
  809. float: right;
  810. text-align: right;
  811. color: #CD2325;
  812. font-size: .13rem;
  813. overflow: hidden;
  814. text-overflow: ellipsis;
  815. white-space: nowrap;
  816. }
  817. .card_li5 .card_read::before {
  818. content: " ";
  819. display: inline-block;
  820. margin-top: -.05rem;
  821. width: .15rem;
  822. height: .15rem;
  823. vertical-align: middle;
  824. background: url('../../img/frontend/specialpage/images/ico_fire.png') no-repeat center;
  825. background-size: 92%;
  826. }
  827. .card_li5 .card_des {
  828. padding-top: .05rem;
  829. font-size: .13rem;
  830. font-family: SourceHanSansCN-Regular;
  831. font-weight: 400;
  832. color: rgba(51,51,51,1);
  833. line-height: .18rem;
  834. opacity: 0.7;
  835. overflow: hidden;
  836. text-overflow: ellipsis;
  837. display: -webkit-box;
  838. -webkit-box-orient: vertical;
  839. -webkit-line-clamp: 2;
  840. }
  841. .card_li5 .card_db {
  842. position: absolute;
  843. left: 1.13rem;
  844. top: 1.10rem;
  845. font-family: SourceHanSansCN-Regular;
  846. }
  847. .card_li5 .price {
  848. font-size: .13rem;
  849. color: #CD2325;
  850. }
  851. .card_li5 .price_one {
  852. padding-top: .16rem;
  853. }
  854. .card_li5 .price_original {
  855. font-size: .12rem;
  856. font-weight: 400;
  857. text-decoration: line-through;
  858. color: rgba(51,51,51,1);
  859. opacity: 0.5;
  860. }
  861. .card_li5 .card_go_book {
  862. position: absolute;
  863. right: .08rem;
  864. bottom: .16rem;
  865. display: block;
  866. width: .72rem;
  867. height: .28rem;
  868. line-height: .29rem;
  869. background: rgba(205,35,37,1);
  870. border-radius: .14rem;
  871. font-size: .13rem;
  872. text-align: center;
  873. font-family: SourceHanSansCN-Medium;
  874. font-weight: 500;
  875. color: rgba(255,255,255,1);
  876. }
  877. .card_li5 .card_db .price, .card_li5 .card_db .price_original {
  878. display: inline-block;
  879. }
  880. .card_li5 .card_db .price_star, .card_li5 .card_db .price_click_num {
  881. display: inline-block;
  882. font-size: .12rem;
  883. font-weight: 400;
  884. color: rgba(51, 51, 51, 1);
  885. padding-left: 0.13rem;
  886. }
  887. .card_li5 .card_db .price_star {
  888. background: url('../../img/frontend/specialpage/images/star.png') no-repeat 0 center;
  889. background-size: 0.12rem 0.13rem;
  890. }
  891. .card_li5 .card_db .price_click_num {
  892. background: url('../../img/frontend/specialpage/images/prize.png') no-repeat 0 center;
  893. background-size: 0.12rem 0.13rem;
  894. margin-left: 0.1rem;
  895. }
  896. .card_li5 .card_read {
  897. display: none;
  898. }
  899. /* 活动链接 */
  900. .group_img_link img {
  901. border-radius: .08rem;
  902. display: block;
  903. margin: 0 auto;
  904. width: 3.28rem;
  905. }
  906. .group_img_link .group_img_link_txt {
  907. margin-top: .05rem;
  908. text-align: left;
  909. font-size: .12rem;
  910. font-family: SourceHanSansCN-Regular;
  911. font-weight: 400;
  912. color: rgba(51,51,51,1);
  913. line-height: .19rem;
  914. opacity: 0.5;
  915. padding: 0 0.165rem;
  916. box-sizing: border-box;
  917. }
  918. .group_img_link, .card {
  919. cursor: pointer;
  920. }
  921. .richtxt {
  922. margin: .085rem .165rem;
  923. padding: 0.15rem 0.08rem 0;
  924. overflow: hidden;
  925. background:rgba(255,255,255,1);
  926. box-shadow:0px 0.03rem 0.04rem 0px rgba(0, 0, 0, 0.05);
  927. box-sizing: border-box;
  928. border-radius: 0.08rem;
  929. }
  930. .richtxt p,.richtxt div,.richtxt span{
  931. font-size: 0.14rem !important;
  932. font-weight: 400 !important;
  933. color: rgba(51, 51, 51, 0.9);
  934. font-family:SourceHanSansCN-Regular;
  935. line-height: 0.19rem;
  936. margin-bottom: 0.1rem;
  937. }
  938. .richtxt .footer{
  939. text-align: center;
  940. margin: 0.1rem auto;
  941. font-weight: bold !important;
  942. cursor: pointer;
  943. }
  944. .richtxt .footer span{
  945. position: relative;
  946. display: inline-block;
  947. font-family:SourceHanSansCN-Bold;
  948. font-weight:bold;
  949. color:rgba(205,35,37,1);
  950. font-size: 0.15rem;
  951. height: 0.2rem;
  952. line-height: 0.2rem;
  953. }
  954. .richtxt .footer span::after{
  955. content: "";
  956. position: absolute;
  957. background: url('../../img/frontend/specialpage/images/arrow_right.png') no-repeat center center;
  958. background-size: 0.08rem 0.16rem;
  959. width: 0.08rem;
  960. height: 0.14rem;
  961. top: 0.02rem;
  962. right: -0.12rem;
  963. }
  964. .richtxt img{
  965. max-width: 3.1rem;
  966. }
  967. .lazy_img {
  968. background: #f2f2f2;
  969. }
  970. .loading {
  971. width: 280px;
  972. height: 40px;
  973. margin: 0 auto;
  974. margin-top: 150px;
  975. text-align: center;
  976. }
  977. .loading span {
  978. display: inline-block;
  979. width: 8px;
  980. height: 100%;
  981. border-radius: 4px;
  982. background: lightgreen;
  983. -webkit-animation: load 1s ease infinite;
  984. animation: load 1s ease infinite;
  985. }
  986. .loading div {
  987. padding-top: 1rem;
  988. text-align: center;
  989. font-size: .14rem;
  990. color: #999;
  991. width: 100%;
  992. }
  993. @-webkit-keyframes load {
  994. 0%, 100% {
  995. height: 40px;
  996. background: lightgreen;
  997. }
  998. 50% {
  999. height: 70px;
  1000. margin: -15px 0;
  1001. background: lightblue;
  1002. }
  1003. }
  1004. .loading span:nth-child(2) {
  1005. -webkit-animation-delay: 0.2s;
  1006. animation-delay: 0.2s;
  1007. }
  1008. .loading span:nth-child(3) {
  1009. -webkit-animation-delay: 0.4s;
  1010. animation-delay: 0.4s;
  1011. }
  1012. .loading span:nth-child(4) {
  1013. -webkit-animation-delay: 0.6s;
  1014. animation-delay: 0.6s;
  1015. }
  1016. .loading span:nth-child(5) {
  1017. -webkit-animation-delay: 0.8s;
  1018. animation-delay: 0.8s;
  1019. }
  1020. .new-vip-two{
  1021. padding: 0 0.15rem;
  1022. }
  1023. .new-vip-two .group_img_link {
  1024. width: 1.58rem;
  1025. height: 1.58rem;
  1026. display: inline-block;
  1027. }
  1028. .new-vip-two .group_img_link:first-of-type{
  1029. float: left;
  1030. margin-right: 0.1rem;
  1031. }
  1032. .new-vip-two .group_img_link img{
  1033. width: 100%;
  1034. height: 100%;
  1035. }
  1036. .img_footer_icon{
  1037. position: absolute;
  1038. width: 0.445rem;
  1039. height: 0.475rem;
  1040. background: url('../../img/frontend/specialpage/images/foot_icon_bg.png') no-repeat top center;
  1041. background-size: 100% 100%;
  1042. right: 0;
  1043. top: -0.02rem;
  1044. box-sizing: border-box;
  1045. padding: 0 0.08rem;
  1046. font-family:PingFang SC;
  1047. font-weight:600;
  1048. color:rgba(181,98,0,1);
  1049. font-size: 0.1rem;
  1050. display: flex;
  1051. align-items: center;
  1052. justify-content: center;
  1053. text-align: center;
  1054. line-height: 1.1;
  1055. }
  1056. .count_time{
  1057. width: 3.28rem;
  1058. height: 0.4rem;
  1059. margin: 0 auto;
  1060. background: #fff;
  1061. border-radius: 0.08rem;
  1062. display: flex;
  1063. align-items: center;
  1064. justify-content: center;
  1065. font-family:PingFang SC;
  1066. font-weight:400;
  1067. color:rgba(255,62,77,1);
  1068. font-size: 0.11rem;
  1069. }
  1070. .count_time .count_time_title{
  1071. color:rgba(119,119,119,1);
  1072. }
  1073. .count_time .count_time_block{
  1074. color:#fff;
  1075. display: inline-block;
  1076. width: 0.18rem;
  1077. height: 0.2rem;
  1078. background:rgba(255,62,77,1);
  1079. border-radius: 0.03rem;
  1080. line-height: 0.2rem;
  1081. text-align: center;
  1082. margin: 0 0.05rem;
  1083. }
  1084. .special{
  1085. width: 0.41rem;
  1086. height: 0.22rem;
  1087. position: absolute;
  1088. bottom: 0;
  1089. right: 0;
  1090. background: url('../../img/frontend/specialpage/images/tag-unshelf.png') no-repeat top center;
  1091. background-size: 100% 100%;
  1092. }