funeng.wxss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. .f-header .tit {
  11. font-size: 34rpx;
  12. color: #303133;
  13. line-height: 1;
  14. font-weight: bold;
  15. }
  16. .f-header .tit-box {
  17. flex: 1;
  18. display: flex;
  19. flex-direction: column;
  20. }
  21. /*功能栏左侧小图标*/
  22. .f-header .f-left-icon {
  23. height: 34rpx;
  24. width: 8rpx;
  25. background-image: linear-gradient(#5dbc7c, #71d094);
  26. margin-right: 10rpx;
  27. border-radius: 10rpx;
  28. }
  29. .Mask {
  30. width: 100%;
  31. height: 100vh;
  32. position: fixed;
  33. z-index: 99999;
  34. background-color: rgba(0, 0, 0, 0.7);
  35. top: 0;
  36. }
  37. .Mask image {
  38. width: 100%;
  39. height: 100vh;
  40. }
  41. .hot-goods {
  42. margin: 0 25rpx;
  43. padding: 5rpx 25rpx 30rpx 25rpx;
  44. background-color: #fff;
  45. border-radius: 10rpx;
  46. }
  47. .hot-goods .hot-headers {
  48. margin: 25rpx 0;
  49. width: 100%;
  50. display: flex;
  51. }
  52. .hot-goods .hot-headers .img {
  53. width: 32rpx;
  54. height: 32rpx;
  55. margin-right: 10rpx;
  56. }
  57. .hot-goods .hot-headers .hot-title {
  58. font-size: 30rpx;
  59. margin-right: 15rpx;
  60. }
  61. .hot-goods .hot-headers .more {
  62. line-height: 1;
  63. padding: 5rpx 10rpx 5rpx 15rpx;
  64. text-align: center;
  65. font-size: 20rpx;
  66. border-radius: 15rpx;
  67. color: #ffffff;
  68. background: linear-gradient(90deg, #fa3426 0%, #f91e53 100%);
  69. }
  70. .hot-goods .hot-headers .more image {
  71. width: 20rpx;
  72. height: 20rpx;
  73. }
  74. .hot-goods .hot-lists {
  75. line-height: 1;
  76. display: flex;
  77. }
  78. .hot-goods .hot-lists .hot-produce {
  79. width: 100%;
  80. height: 260rpx;
  81. border-top: 1px solid #f0f0f0;
  82. display: flex;
  83. padding-top: 28rpx;
  84. }
  85. .hot-goods .hot-lists .hot-produce .produce-image {
  86. width: 200rpx;
  87. height: 200rpx;
  88. }
  89. .hot-goods .hot-lists .hot-produce .produce-image image {
  90. width: 200rpx;
  91. height: 200rpx;
  92. border: 1px solid #f0f0f0;
  93. }
  94. .hot-goods .hot-lists .hot-produce .produce-content {
  95. margin-left: 30rpx;
  96. height: 200rpx;
  97. position: relative;
  98. width: calc(100% - 200rpx - 30rpx);
  99. }
  100. .hot-goods .hot-lists .hot-produce .produce-content .produce-name {
  101. font-size: 28rpx;
  102. font-weight: bold;
  103. line-height: 35rpx;
  104. color: #343434;
  105. }
  106. .hot-goods .hot-lists .hot-produce .produce-content .produce-info {
  107. font-size: 20rpx;
  108. margin-top: 25rpx;
  109. }
  110. .hot-goods .hot-lists .hot-produce .produce-content .produce-price {
  111. display: flex;
  112. align-items: flex-end;
  113. color: #ff383e;
  114. font-size: 24rpx;
  115. margin-top: 70rpx;
  116. font-weight: bold;
  117. }
  118. .hot-goods .hot-lists .hot-produce .produce-content .produce-price text {
  119. font-size: 36rpx;
  120. }
  121. .hot-goods .hot-lists .hot-produce .produce-content .produce-price .produce-price-1 {
  122. font-size: 22rpx;
  123. font-weight: 500;
  124. text-decoration: line-through;
  125. color: #aaaaaa;
  126. margin-left: 20rpx;
  127. }
  128. .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 {
  129. height: 100%;
  130. letter-spacing: 3rpx;
  131. color: #ff383e;
  132. font-size: 24rpx;
  133. font-weight: bold;
  134. }
  135. .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center {
  136. width: 100%;
  137. position: absolute;
  138. bottom: 0;
  139. display: flex;
  140. justify-content: space-between;
  141. align-items: center;
  142. }
  143. .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center .kanjia_word .word-1 {
  144. font-size: 22rpx;
  145. color: #666666;
  146. }
  147. .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center .kanjia_word .word-2 {
  148. font-size: 28rpx;
  149. color: #ff383e;
  150. margin-top: 10rpx;
  151. }
  152. .hot-goods .hot-lists .hot-produce .produce-content .produce-price1 .produce-center .kanjia_button {
  153. height: 50rpx;
  154. width: 150rpx;
  155. border-radius: 25rpx;
  156. font-size: 26rpx;
  157. font-weight: 500;
  158. color: #ff383e;
  159. border: 1px solid #ff383e;
  160. }
  161. page {
  162. background: #f7f8f7;
  163. }
  164. .m-t {
  165. margin-top: 16rpx;
  166. }
  167. /* 头部 轮播图 */
  168. .carousel-section {
  169. position: relative;
  170. padding-top: 10px;
  171. overflow: hidden;
  172. }
  173. .carousel-section .titleNview-placing {
  174. height: 25px;
  175. padding-top: 44px;
  176. box-sizing: content-box;
  177. }
  178. .carousel-section .titleNview-background {
  179. position: absolute;
  180. top: 0;
  181. left: 0;
  182. width: 100%;
  183. height: 426rpx;
  184. transition: 0.4s;
  185. }
  186. .carousel-section .carousel {
  187. width: 100%;
  188. height: 240rpx;
  189. }
  190. .carousel-section .carousel .carousel-item {
  191. width: 100%;
  192. height: 100%;
  193. padding: 0 28rpx;
  194. overflow: hidden;
  195. }
  196. .carousel-section .carousel image {
  197. width: 100%;
  198. height: 100%;
  199. border-radius: 15rpx;
  200. }
  201. .swiper-dots {
  202. display: flex;
  203. position: absolute;
  204. left: 60rpx;
  205. bottom: 15rpx;
  206. width: 72rpx;
  207. height: 36rpx;
  208. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
  209. background-size: 100% 100%;
  210. }
  211. .swiper-dots .num {
  212. width: 36rpx;
  213. height: 36rpx;
  214. border-radius: 50px;
  215. font-size: 24rpx;
  216. color: #fff;
  217. text-align: center;
  218. line-height: 36rpx;
  219. }
  220. .swiper-dots .sign {
  221. position: absolute;
  222. top: 0;
  223. left: 50%;
  224. line-height: 36rpx;
  225. font-size: 12rpx;
  226. color: #fff;
  227. -webkit-transform: translateX(-50%);
  228. transform: translateX(-50%);
  229. }
  230. /* 分类 */
  231. .cate-section {
  232. display: flex;
  233. justify-content: space-around;
  234. align-items: center;
  235. flex-wrap: wrap;
  236. padding: 30rpx 22rpx;
  237. /* 原图标颜色太深,不想改图了,所以加了透明度 */
  238. }
  239. .cate-section .cate-item {
  240. display: flex;
  241. flex-direction: column;
  242. align-items: center;
  243. font-size: 26rpx;
  244. color: #303133;
  245. }
  246. .cate-section image {
  247. width: 88rpx;
  248. height: 88rpx;
  249. margin-bottom: 14rpx;
  250. border-radius: 50%;
  251. opacity: 0.7;
  252. }
  253. .ad-1 {
  254. width: 100%;
  255. height: 210rpx;
  256. padding: 10rpx 0;
  257. background: #fff;
  258. }
  259. .ad-1 image {
  260. width: 100%;
  261. height: 100%;
  262. }
  263. /*公用边框样式*/
  264. .uservip .detail .icon, .guess-section .icon {
  265. margin-right: 10rpx;
  266. display: inline-block;
  267. padding: 2rpx 10rpx;
  268. border: 1rpx solid #fd5b23;
  269. color: #fd5b23;
  270. line-height: 1;
  271. font-size: 28rpx;
  272. border-radius: 10rpx;
  273. }
  274. .f-header {
  275. display: flex;
  276. align-items: center;
  277. height: 92rpx;
  278. padding: 6rpx 30rpx 8rpx;
  279. }
  280. .f-header image {
  281. flex-shrink: 0;
  282. width: 80rpx;
  283. height: 80rpx;
  284. margin-right: 20rpx;
  285. }
  286. .f-header .iconenter {
  287. font-size: 34rpx;
  288. color: #909399;
  289. }
  290. .f-header .iconfont {
  291. font-size: 22rpx;
  292. }
  293. .uservip {
  294. border-radius: 15rpx;
  295. background-color: white;
  296. box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
  297. height: 300rpx;
  298. margin: 0 30rpx;
  299. }
  300. .uservip image {
  301. height: 100%;
  302. width: 300rpx;
  303. }
  304. .uservip .detail {
  305. position: relative;
  306. padding: 20rpx;
  307. height: 100%;
  308. }
  309. .uservip .detail .price-box {
  310. position: absolute;
  311. bottom: 20rpx;
  312. width: calc(100% - 40rpx);
  313. }
  314. .uservip .detail .price-box .price {
  315. font-size: 34rpx;
  316. font-weight: bold;
  317. color: #606266;
  318. }
  319. .uservip .detail .price-box .text {
  320. color: #999999;
  321. font-size: 24rpx;
  322. }
  323. .uservip .detail .title {
  324. font-size: 32rpx;
  325. font-weight: bold;
  326. }
  327. /* 猜你喜欢 */
  328. .guess-section {
  329. display: flex;
  330. flex-wrap: wrap;
  331. padding: 0 30rpx;
  332. }
  333. .guess-section .guess-item {
  334. overflow: hidden;
  335. display: flex;
  336. flex-direction: column;
  337. width: 48%;
  338. margin-bottom: 4%;
  339. border-radius: 15rpx;
  340. background-color: white;
  341. box-shadow: 0rpx 0rpx 10rpx 10rpx #f3f3f3;
  342. }
  343. .guess-section .guess-item:nth-child(2n + 1) {
  344. margin-right: 4%;
  345. }
  346. .guess-section .image-wrapper {
  347. width: 100%;
  348. height: 330rpx;
  349. border-radius: 3px;
  350. overflow: hidden;
  351. }
  352. .guess-section .image-wrapper image {
  353. width: 100%;
  354. height: 100%;
  355. opacity: 1;
  356. }
  357. .guess-section .title {
  358. font-size: 28rpx;
  359. color: #303133;
  360. font-weight: bold;
  361. line-height: 80rpx;
  362. }
  363. .guess-section .price {
  364. font-size: 32rpx;
  365. color: #606266;
  366. font-weight: bold;
  367. line-height: 1;
  368. line-height: 80rpx;
  369. }
  370. .guess-section .detail {
  371. line-height: 1;
  372. }
  373. .guess-section .tip {
  374. color: white;
  375. background-color: #fd5b23;
  376. line-height: 1.5;
  377. font-size: 24rpx;
  378. padding-left: 20rpx;
  379. }
  380. .recommend {
  381. width: 95%;
  382. height: 155rpx;
  383. margin: 0rpx auto;
  384. padding-top: 30rpx;
  385. font-size: 26rpx;
  386. text-align: center;
  387. color: #333333;
  388. align-items: flex-start;
  389. }
  390. .recommend .recommend_list {
  391. width: 33%;
  392. }
  393. .recommend .re_title {
  394. font-size: 32rpx;
  395. font-weight: bold;
  396. }
  397. .recommend .re_name {
  398. color: #999999;
  399. padding-top: 10rpx;
  400. }
  401. .recommend .selected_icon {
  402. width: 25rpx;
  403. height: 10rpx;
  404. margin: 0px auto;
  405. display: none;
  406. }
  407. .recommend .selected_icon image {
  408. width: 100%;
  409. height: 100%;
  410. }
  411. .recommend .active {
  412. display: block;
  413. }
  414. .recommend .active_color {
  415. color: #dc4d46 !important;
  416. }
  417. .list-box-h {
  418. height: 1550rpx;
  419. }
  420. .coupon-list {
  421. display: inline-block;
  422. }
  423. .row {
  424. border-radius: 15rpx;
  425. margin: 25rpx;
  426. height: 155rpx;
  427. overflow: hidden;
  428. background-color: #ffffff;
  429. padding-right: 25rpx;
  430. }
  431. .row .list-interval {
  432. border: 1px dashed #ebeef5;
  433. height: 100%;
  434. }
  435. .row .list-interval .top,
  436. .row .list-interval .bottom {
  437. border-radius: 100rpx;
  438. width: 30rpx;
  439. height: 30rpx;
  440. position: absolute;
  441. background-color: #f8f8f8;
  442. right: -15rpx;
  443. }
  444. .row .list-interval .top {
  445. top: -18rpx;
  446. }
  447. .row .list-interval .bottom {
  448. bottom: -18rpx;
  449. }
  450. .row .list-money {
  451. height: 100%;
  452. min-width: 155rpx;
  453. text-align: center;
  454. }
  455. .row .list-money image {
  456. height: 100%;
  457. width: 20rpx;
  458. }
  459. .row .list-money .list-money-text {
  460. flex-grow: 1;
  461. padding: 0 25rpx;
  462. }
  463. .row .list-money .list-money-text .tit {
  464. text-align: center;
  465. padding: 15rpx 0rpx;
  466. font-size: 55rpx;
  467. color: #dd524d;
  468. font-weight: bold;
  469. }
  470. .row .list-money .list-money-text .tit.noAction {
  471. color: #909399;
  472. }
  473. .row .list-money .list-money-text .price {
  474. padding-bottom: 25rpx;
  475. color: #909399;
  476. }
  477. .row .row_list_right {
  478. min-width: 200rpx;
  479. padding-left: 25rpx;
  480. line-height: 1;
  481. }
  482. .row .row_list_right .right_time {
  483. padding: 10rpx 0rpx;
  484. color: #909399;
  485. font-size: 24rpx;
  486. }
  487. .row .row_list_right .right_top {
  488. margin: 15rpx 0;
  489. }
  490. .row .row_list_right .right_top .right_name {
  491. font-size: 28rpx;
  492. color: #bc253a;
  493. font-weight: bold;
  494. }
  495. .row .row_list_right .right_top .right_title {
  496. font-size: 28rpx;
  497. color: 28rpx;
  498. font-weight: bold;
  499. }
  500. .row .row_list_right .right_top .right_title.noAction {
  501. color: #909399;
  502. }
  503. .row .right_use {
  504. margin: 15rpx 0;
  505. padding: 10rpx;
  506. width: 160rpx;
  507. text-align: center;
  508. color: #fff;
  509. background-color: #bc253a;
  510. border-radius: 50rpx;
  511. font-size: 24rpx;
  512. }
  513. .row .right_use.noAction {
  514. background-color: #909399;
  515. }
  516. .row .iconlocation {
  517. font-size: 36rpx;
  518. color: #909399;
  519. }
  520. .navbar {
  521. display: flex;
  522. height: 40px;
  523. padding: 0 5px;
  524. background: #fff;
  525. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  526. position: relative;
  527. z-index: 10;
  528. }
  529. .navbar .nav-item {
  530. flex: 1;
  531. display: flex;
  532. justify-content: center;
  533. align-items: center;
  534. height: 100%;
  535. font-size: 15px;
  536. color: #303133;
  537. position: relative;
  538. }
  539. .navbar .nav-item.current {
  540. color: #000;
  541. font-weight: bold;
  542. }
  543. .navbar .nav-item.current:after {
  544. content: '';
  545. position: absolute;
  546. left: 50%;
  547. bottom: 0;
  548. -webkit-transform: translateX(-50%);
  549. transform: translateX(-50%);
  550. width: 44px;
  551. height: 0;
  552. border-bottom: 2px solid #E60012;
  553. }
  554. .top-swiper {
  555. position: relative;
  556. }
  557. .top-swiper .banner-swiper {
  558. width: 750rpx;
  559. height: 390rpx;
  560. }
  561. .top-swiper .banner-swiper .swiper-img {
  562. display: block;
  563. width: 750rpx;
  564. height: 390rpx;
  565. }
  566. .top-swiper .banner-swiper swiper-item {
  567. width: 750rpx;
  568. height: 390rpx;
  569. }
  570. .top-swiper .input-box {
  571. position: absolute;
  572. top: 0;
  573. left: 0;
  574. width: 100%;
  575. padding: 25rpx;
  576. z-index: 999;
  577. height: 44px;
  578. }
  579. .top-swiper .input-box .iconsearch {
  580. font-size: 50rpx;
  581. }
  582. .top-swiper .input-box .input-content {
  583. border-radius: 99rpx;
  584. flex-grow: 1;
  585. padding: 10rpx 30rpx;
  586. background-color: rgba(255, 255, 255, 0.7);
  587. }
  588. .top-swiper .input-box .input-content .input {
  589. flex-grow: 1;
  590. }
  591. .top-swiper .input-box .input-content .input input {
  592. font-size: 32rpx;
  593. }
  594. .top-swiper .input-box .input-button {
  595. padding-left: 20rpx;
  596. font-size: 32rpx;
  597. height: 100%;
  598. }
  599. .zd-wrap {
  600. width: 750rpx;
  601. height: 203rpx;
  602. background: #FFFFFF;
  603. margin: 20rpx auto;
  604. padding: 30rpx 28rpx;
  605. flex-direction: column;
  606. justify-content: space-between;
  607. align-items: flex-start;
  608. }
  609. .zd-wrap .zd-tip {
  610. color: #FF0018;
  611. }
  612. .hot {
  613. width: 22rpx;
  614. height: 22rpx;
  615. margin-right: 10rpx;
  616. }
  617. .art-time {
  618. display: inline-block;
  619. font-size: 24rpx;
  620. font-weight: 500;
  621. color: #7F8699;
  622. }
  623. .art-time text {
  624. margin-right: 10rpx;
  625. }
  626. .art-list {
  627. background-color: #fff;
  628. width: 750rpx;
  629. font-size: 31rpx;
  630. font-weight: 500;
  631. color: #323232;
  632. }
  633. .art-item {
  634. width: 691rpx;
  635. border-bottom: #E1E1E1 1px solid;
  636. margin: auto;
  637. }
  638. .art-item-zero {
  639. height: 153rpx;
  640. flex-direction: column;
  641. justify-content: space-between;
  642. align-items: flex-start;
  643. padding: 20rpx 0;
  644. border-bottom: #E1E1E1 1px solid;
  645. }
  646. .art-item-one {
  647. height: 195rpx;
  648. margin: auto;
  649. padding: 30rpx 0 20rpx;
  650. }
  651. .art-item-one .art-left {
  652. height: 100%;
  653. flex-direction: column;
  654. justify-content: space-between;
  655. align-items: flex-start;
  656. padding-right: 40rpx;
  657. }
  658. .art-item-one .art-right {
  659. width: 227rpx;
  660. height: 145rpx;
  661. border-radius: 10rpx;
  662. flex-shrink: 0;
  663. }
  664. .art-item-one .art-right image {
  665. width: 100%;
  666. height: 100%;
  667. border-radius: 10rpx;
  668. }
  669. .art-item-three {
  670. height: 345rpx;
  671. flex-direction: column;
  672. justify-content: space-between;
  673. align-items: flex-start;
  674. padding: 30rpx 0;
  675. }
  676. .art-item-three .art-img-list {
  677. width: 100%;
  678. height: 145rpx;
  679. }
  680. .art-item-three .art-img-list image {
  681. width: 220rpx;
  682. height: 145rpx;
  683. border-radius: 10rpx;
  684. margin-right: 15rpx;
  685. }
  686. .art-item-three .art-img-list image:last-child {
  687. margin-right: 0;
  688. }
  689. .class-box {
  690. white-space: nowrap;
  691. height: 40px;
  692. position: relative;
  693. background-color: #fff;
  694. }
  695. .class-box .item {
  696. text-align: center;
  697. display: inline-block;
  698. color: #606266;
  699. height: 100%;
  700. background-color: #ffffff;
  701. line-height: 1;
  702. }
  703. .class-box .item .status {
  704. font-size: 30rpx;
  705. margin: 0 auto;
  706. width: 60px;
  707. height: 100%;
  708. line-height: 40px;
  709. }
  710. .class-box .item .status.action {
  711. color: #000;
  712. font-weight: bold;
  713. position: relative;
  714. }
  715. .class-box .item .status.action:after {
  716. content: '';
  717. position: absolute;
  718. left: 50%;
  719. bottom: 5px;
  720. -webkit-transform: translateX(-50%);
  721. transform: translateX(-50%);
  722. width: 33px;
  723. height: 0;
  724. border-bottom: 2px solid #E60012;
  725. }