diyapge.css 19 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264
  1. .container {
  2. color: #333;
  3. }
  4. .diybox {
  5. padding-bottom: 186rpx;
  6. }
  7. .topheight {
  8. color: #ffffff;
  9. }
  10. .tui-header-box {
  11. width: 100%;
  12. position: fixed;
  13. left: 0;
  14. top: 0;
  15. z-index: 995;
  16. }
  17. /*居中
  18. .tui-header {
  19. width: 100%;
  20. padding-left: 26rpx;
  21. font-size: 18px;
  22. line-height: 18px;
  23. font-weight: 500;
  24. height: 32px;
  25. display: flex;
  26. align-items: center;
  27. justify-content: left;
  28. }*/
  29. .tui-header {
  30. width: 100%;
  31. font-size: 18px;
  32. line-height: 18px;
  33. font-weight: 500;
  34. height: 32px;
  35. display: flex;
  36. align-items: center;
  37. justify-content: center;
  38. }
  39. .orderplay {
  40. width: 100%;
  41. height: 100rpx;
  42. padding: 0 20rpx;
  43. box-sizing: border-box;
  44. position: fixed;
  45. left: 0;
  46. top: 180rpx;
  47. z-index: 999;
  48. transition: opacity .4s;
  49. }
  50. .housingestate {
  51. font-size: 28rpx;
  52. padding-left: 30rpx;
  53. padding-right: 30rpx;
  54. }
  55. /*banner*/
  56. .bannerbox {
  57. box-sizing: border-box;
  58. }
  59. .bannerbottom {
  60. padding-top: 20rpx;
  61. }
  62. .tui-banner-bg {
  63. display: flex;
  64. position: relative;
  65. }
  66. .tui-banner-box {
  67. width: 100%;
  68. padding: 0 20rpx;
  69. box-sizing: border-box;
  70. position: absolute;
  71. /* overflow: hidden; */
  72. z-index: 99;
  73. left: 0;
  74. }
  75. .tui-banner-swiper {
  76. width: 100%;
  77. border-radius: 20rpx;
  78. overflow: hidden;
  79. transform: translateY(0);
  80. background-color: #f8f8f8;
  81. }
  82. .tui-slide-image {
  83. width: 100%;
  84. display: block;
  85. }
  86. /* #ifdef MP-WEIXIN */
  87. .tui-banner-swiper .wx-swiper-dot {
  88. width: 8rpx;
  89. height: 8rpx;
  90. display: inline-flex;
  91. background: none;
  92. justify-content: space-between;
  93. }
  94. .tui-banner-swiper .wx-swiper-dot::before {
  95. content: '';
  96. flex-grow: 1;
  97. background-color: rgba(255, 255, 255, 0.8);
  98. border-radius: 16rpx;
  99. overflow: hidden;
  100. }
  101. .tui-banner-swiper .wx-swiper-dot-active::before {
  102. background-color: #fff;
  103. }
  104. .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
  105. width: 16rpx;
  106. }
  107. /* #endif */
  108. /* #ifndef MP-WEIXIN */
  109. >>>.tui-banner-swiper .uni-swiper-dot {
  110. width: 8rpx;
  111. height: 8rpx;
  112. display: inline-flex;
  113. background-color: none;
  114. justify-content: space-between;
  115. }
  116. >>>.tui-banner-swiper .uni-swiper-dot::before {
  117. content: '';
  118. flex-grow: 1;
  119. background-color: rgba(255, 255, 255, 0.8);
  120. border-radius: 16rpx;
  121. overflow: hidden;
  122. }
  123. >>>.tui-banner-swiper .uni-swiper-dot-active::before {
  124. background-color: #fff;
  125. }
  126. >>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
  127. width: 16rpx;
  128. }
  129. /* #endif */
  130. .tui-product-category {
  131. padding: 80rpx 20rpx 30rpx 20rpx;
  132. box-sizing: border-box;
  133. display: flex;
  134. align-items: center;
  135. justify-content: space-between;
  136. flex-wrap: wrap;
  137. font-size: 24rpx;
  138. color: #555;
  139. /* margin-bottom: 20rpx; */
  140. }
  141. .tui-category-item {
  142. width: 20%;
  143. height: 118rpx;
  144. display: flex;
  145. align-items: center;
  146. justify-content: space-between;
  147. flex-direction: column;
  148. padding-top: 30rpx;
  149. }
  150. .tui-category-img {
  151. height: 88rpx;
  152. width: 88rpx;
  153. display: block;
  154. }
  155. .tui-category-name {
  156. line-height: 24rpx;
  157. }
  158. .tui-block__box {
  159. width: 100%;
  160. box-sizing: border-box;
  161. background-color: #ffffff;
  162. border-radius: 20rpx;
  163. overflow: hidden;
  164. }
  165. .tui-product-box {
  166. margin-top: 20rpx;
  167. padding: 0 25rpx;
  168. box-sizing: border-box;
  169. }
  170. .tui-img__coupon {
  171. width: 100%;
  172. height: 184rpx;
  173. display: block;
  174. }
  175. .tui-mtop__20 {
  176. margin-top: 20rpx;
  177. }
  178. .tui-bg-white {
  179. background-color: #fff;
  180. }
  181. .group-name-box {
  182. padding-left: 25rpx;
  183. padding-right: 25rpx;
  184. }
  185. .tui-group-name {
  186. width: 100%;
  187. font-size: 34rpx;
  188. line-height: 34rpx;
  189. font-weight: bold;
  190. text-align: center;
  191. padding: 30rpx 0 20rpx;
  192. display: flex;
  193. align-items: center;
  194. justify-content: space-between;
  195. color: #333;
  196. }
  197. .tui-group-list {
  198. padding-left: 10rpx;
  199. padding-right: 10rpx;
  200. justify-content: space-between;
  201. box-sizing: border-box;
  202. /* padding-top: 20rpx; */
  203. }
  204. .tui-sub__desc {
  205. color: #34c7a9;
  206. font-size: 28rpx;
  207. font-weight: 400;
  208. padding-left: 25rpx;
  209. }
  210. .tui-seckill__box {
  211. display: flex;
  212. align-items: center;
  213. }
  214. .tui-seckill__img {
  215. width: 40rpx;
  216. }
  217. .tui-countdown__box {
  218. width: 228rpx;
  219. display: flex;
  220. align-items: center;
  221. color: #fff;
  222. background-color: #fff;
  223. font-weight: 400;
  224. height: 40rpx;
  225. border-radius: 30px;
  226. overflow: hidden;
  227. margin-left: 25rpx;
  228. }
  229. .tui-countdown__title {
  230. width: 100rpx;
  231. height: 100%;
  232. display: flex;
  233. align-items: center;
  234. justify-content: center;
  235. flex-shrink: 0;
  236. font-size: 24rpx;
  237. line-height: 24rpx;
  238. }
  239. .tui-flex__center {
  240. flex: 1;
  241. display: flex;
  242. align-items: center;
  243. justify-content: center;
  244. }
  245. /*秒杀商品*/
  246. .tui-goods__list {
  247. display: flex;
  248. align-items: center;
  249. }
  250. .tui-goods__item {
  251. background-color: #fff;
  252. width: 150rpx;
  253. height: 230rpx;
  254. border-radius: 6rpx;
  255. box-sizing: border-box;
  256. display: flex;
  257. align-items: center;
  258. justify-content: center;
  259. flex-direction: column;
  260. flex-shrink: 0;
  261. margin-right: 18rpx;
  262. }
  263. .tui-goods__imgbox {
  264. width: 150rpx;
  265. height: 150rpx;
  266. display: flex;
  267. align-items: center;
  268. justify-content: center;
  269. box-sizing: border-box;
  270. }
  271. .tui-goods__img {
  272. max-width: 150rpx;
  273. max-height: 150rpx;
  274. display: block;
  275. }
  276. .tui-pri__box {
  277. max-width: 150rpx;
  278. display: flex;
  279. justify-content: center;
  280. align-items: center;
  281. }
  282. .tui-sale-pri {
  283. display: flex;
  284. align-items: flex-end;
  285. padding: 10rpx 0 8rpx;
  286. box-sizing: border-box;
  287. font-size: 28rpx;
  288. line-height: 28rpx;
  289. color: #eb0909;
  290. white-space: nowrap;
  291. text-overflow: ellipsis;
  292. overflow: hidden;
  293. }
  294. .tui-size-sm {
  295. font-size: 24rpx;
  296. line-height: 24rpx;
  297. transform: scale(0.8);
  298. transform-origin: 0 50%;
  299. }
  300. .tui-original__pri {
  301. font-size: 24rpx;
  302. line-height: 24rpx;
  303. color: #999999;
  304. transform-origin: center 10%;
  305. transform: scale(0.8);
  306. display: flex;
  307. align-items: center;
  308. justify-content: center;
  309. text-decoration: line-through;
  310. }
  311. /*秒杀商品*/
  312. .tui-more__box {
  313. display: flex;
  314. align-items: center;
  315. font-weight: 400;
  316. color: #999;
  317. }
  318. .tui-more__box text {
  319. font-size: 24rpx;
  320. line-height: 24rpx;
  321. }
  322. .tui-new-box {
  323. display: flex;
  324. align-items: center;
  325. justify-content: space-between;
  326. flex-wrap: wrap;
  327. }
  328. .tui-new-item {
  329. width: 49%;
  330. height: 180rpx;
  331. padding: 0 20rpx;
  332. box-sizing: border-box;
  333. display: flex;
  334. align-items: center;
  335. background: #f5f2f9;
  336. position: relative;
  337. border-radius: 12rpx;
  338. }
  339. .tui-new-mtop {
  340. margin-top: 2%;
  341. }
  342. .tui-title-box {
  343. font-size: 24rpx;
  344. }
  345. .tui-new-title {
  346. line-height: 32rpx;
  347. word-break: break-all;
  348. overflow: hidden;
  349. text-overflow: ellipsis;
  350. display: -webkit-box;
  351. -webkit-box-orient: vertical;
  352. -webkit-line-clamp: 2;
  353. }
  354. .tui-new-price {
  355. padding-top: 18rpx;
  356. }
  357. .tui-new-present {
  358. color: #ff201f;
  359. font-weight: bold;
  360. }
  361. .tui-new-original {
  362. display: inline-block;
  363. color: #a0a0a0;
  364. text-decoration: line-through;
  365. padding-left: 12rpx;
  366. transform: scale(0.8);
  367. transform-origin: center center;
  368. }
  369. .tui-new-img {
  370. width: 148rpx;
  371. height: 148rpx;
  372. display: block;
  373. flex-shrink: 0;
  374. }
  375. .tui-new-label {
  376. width: 56rpx;
  377. height: 56rpx;
  378. border-top-left-radius: 12rpx;
  379. position: absolute;
  380. left: 0;
  381. top: 0;
  382. }
  383. .tui-title__img {
  384. width: 100%;
  385. padding: 30rpx 0;
  386. display: flex;
  387. justify-content: center;
  388. }
  389. .tui-title__img image {
  390. width: 352rpx;
  391. height: 32rpx;
  392. }
  393. .tui-product-list {
  394. padding-left: 10rpx;
  395. padding-right: 10rpx;
  396. justify-content: space-between;
  397. box-sizing: border-box;
  398. /* padding-top: 20rpx; */
  399. }
  400. .diy-duo-list {
  401. padding-left: 10rpx;
  402. padding-right: 10rpx;
  403. justify-content: space-between;
  404. box-sizing: border-box;
  405. }
  406. .tui-product-container {
  407. display: flex;
  408. flex-direction: row;
  409. flex-wrap: wrap;
  410. }
  411. .tui-pro-item:last-child {
  412. margin-right: 0;
  413. }
  414. .tui-pro-item {
  415. margin-left: 1%;
  416. margin-right: 1%;
  417. width: 48%;
  418. margin-bottom: 2%;
  419. background: #fff;
  420. box-sizing: border-box;
  421. border-radius: 12rpx;
  422. overflow: hidden;
  423. }
  424. .tui-pro-img {
  425. width: 100%;
  426. display: block;
  427. }
  428. .tui-pro-content {
  429. display: flex;
  430. flex-direction: column;
  431. justify-content: space-between;
  432. box-sizing: border-box;
  433. padding: 20rpx;
  434. }
  435. .tui-pro-tit {
  436. color: #2e2e2e;
  437. font-size: 26rpx;
  438. word-break: break-all;
  439. overflow: hidden;
  440. text-overflow: ellipsis;
  441. display: -webkit-box;
  442. -webkit-box-orient: vertical;
  443. -webkit-line-clamp: 2;
  444. }
  445. .tui-pro-price {
  446. padding-top: 18rpx;
  447. }
  448. .tui-sale-price {
  449. font-size: 34rpx;
  450. font-weight: 500;
  451. color: #e41f19;
  452. }
  453. .tui-factory-price {
  454. font-size: 24rpx;
  455. color: #a0a0a0;
  456. text-decoration: line-through;
  457. padding-left: 12rpx;
  458. }
  459. .tui-pro-pay {
  460. padding-top: 10rpx;
  461. font-size: 24rpx;
  462. color: #656565;
  463. }
  464. /* 多图组 */
  465. .diy-duo-box {
  466. padding: 0 25rpx;
  467. box-sizing: border-box;
  468. }
  469. .diy-duo {
  470. /*padding-top: 20rpx;
  471. padding-bottom: 26rpx;*/
  472. }
  473. .diy-duo .duo-list {
  474. box-sizing: border-box;
  475. }
  476. .diy-duo .duo-list .duo-item {
  477. box-sizing: border-box;
  478. padding: 8rpx;
  479. text-align: center;
  480. }
  481. .diy-duo .duo-list.display__slide {
  482. white-space: nowrap;
  483. font-size: 0;
  484. }
  485. .diy-duo .duo-list.display__slide .duo-item {
  486. display: inline-block;
  487. }
  488. .diy-duo .duo-list.display__list .duo-item {
  489. float: left;
  490. }
  491. .diy-duo .duo-list.column__1 .duo-item {
  492. width: 100%;
  493. }
  494. .diy-duo .duo-list.column__2 .duo-item {
  495. width: 50%;
  496. }
  497. .diy-duo .duo-list.column__2 .duo-image image {
  498. width: 100%;
  499. }
  500. .diy-duo .duo-list.column__3 .duo-item {
  501. width: 33.33333%;
  502. }
  503. .diy-duo .duo-list.column__3 .duo-image image {
  504. width: 100%;
  505. }
  506. .diy-duo .duo-list.column__4 .duo-item {
  507. width: 25%;
  508. }
  509. .diy-duo .duo-list.column__4 .duo-image image {
  510. width: 100%;
  511. }
  512. .diy-duo .duo-list.column__5 .duo-item {
  513. width: 20%;
  514. }
  515. .diy-duo .duo-list.column__5 .duo-image image {
  516. width: 100%;
  517. }
  518. /*
  519. .diy-duo .duo-list .duo-item .duo-image image {
  520. display: block;
  521. border-radius: 12rpx 12rpx 0rpx 0rpx;
  522. width: 100%;
  523. }
  524. */
  525. .diy-duo .duo-list .duo-item .duo-name {
  526. font-size: 28rpx;
  527. line-height: 50rpx;
  528. white-space: normal;
  529. word-break: break-all;
  530. overflow: hidden;
  531. text-overflow: ellipsis;
  532. display: -webkit-box;
  533. -webkit-box-orient: vertical;
  534. -webkit-line-clamp: 2;
  535. }
  536. /* 图文组 */
  537. .tui-tuwen-box {
  538. margin-top: 20rpx;
  539. padding: 0 25rpx;
  540. box-sizing: border-box;
  541. }
  542. .item-tuwen-style1 {
  543. width: 100%;
  544. box-sizing: border-box;
  545. background-color: #ffffff;
  546. border-radius: 20rpx;
  547. overflow: hidden;
  548. }
  549. .item-tuwen-style1 .tui-tuwen-title {
  550. padding-left: 25rpx;
  551. padding-right: 25rpx;
  552. width: 100%;
  553. font-size: 34rpx;
  554. line-height: 34rpx;
  555. font-weight: bold;
  556. text-align: left;
  557. padding: 30rpx 20rpx 20rpx 20rpx;
  558. display: flex;
  559. align-items: left;
  560. color: #333;
  561. }
  562. .diy-tuwen {
  563. width: 100%;
  564. }
  565. .diy-tuwen .item-image {
  566. width: 100%;
  567. height: 300rpx;
  568. position: relative;
  569. overflow: hidden;
  570. }
  571. .diy-tuwen .item-image image {
  572. display: block;
  573. height: 150px;
  574. width: 100%;
  575. }
  576. .item-tuwen-style1 .diy-tuwen .item-image .note {
  577. line-height: 18px;
  578. color: #fff;
  579. background: rgba(0, 0, 0, .5);
  580. position: absolute;
  581. bottom: 0;
  582. padding: 12rpx 20rpx;
  583. width: 100%;
  584. }
  585. .item-tuwen-style2 {
  586. width: 100%;
  587. padding-bottom: 20rpx;
  588. box-sizing: border-box;
  589. background-color: #ffffff;
  590. border-radius: 20rpx;
  591. overflow: hidden;
  592. }
  593. .item-tuwen-style2 .tui-tuwen-title {
  594. white-space: nowrap;
  595. padding-left: 20rpx;
  596. font-weight: bold;
  597. padding-top: 10px;
  598. text-align: left;
  599. overflow: hidden;
  600. text-overflow: ellipsis;
  601. }
  602. .item-tuwen-style2 .diy-tuwen .note {
  603. padding-left: 20rpx;
  604. padding-top: 5px;
  605. line-height: 20px;
  606. color: #999;
  607. }
  608. /* 图片橱窗 */
  609. .diy-window .data-list::after {
  610. clear: both;
  611. content: " ";
  612. display: table;
  613. }
  614. .diy-window .data-list .data-item {
  615. float: left;
  616. box-sizing: border-box;
  617. }
  618. .diy-window .data-list image {
  619. display: block;
  620. width: 100%;
  621. }
  622. /* 分列布局 */
  623. .diy-window .avg-sm-2>.data-item {
  624. width: 50%;
  625. }
  626. .diy-window .avg-sm-3>.data-item {
  627. width: 33.33333333%;
  628. }
  629. .diy-window .avg-sm-4>.data-item {
  630. width: 25%;
  631. }
  632. .diy-window .avg-sm-5>.data-item {
  633. width: 20%;
  634. }
  635. /* 橱窗样式 */
  636. .diy-window .display {
  637. height: 0;
  638. width: 100%;
  639. margin: 0;
  640. padding-bottom: 50%;
  641. position: relative;
  642. box-sizing: border-box;
  643. }
  644. .diy-window .display view {
  645. box-sizing: border-box;
  646. }
  647. .diy-window .display image {
  648. width: 100%;
  649. height: 100%;
  650. }
  651. .diy-window .display .display-left {
  652. width: 50%;
  653. height: 100%;
  654. overflow-y: hidden;
  655. position: absolute;
  656. top: 0;
  657. left: 0;
  658. }
  659. .diy-window .display .display-right {
  660. width: 50%;
  661. height: 100%;
  662. overflow-y: hidden;
  663. position: absolute;
  664. top: 0;
  665. left: 50%;
  666. }
  667. .diy-window .display .display-right1 {
  668. width: 100%;
  669. height: 50%;
  670. overflow-y: hidden;
  671. position: absolute;
  672. top: 0;
  673. left: 0;
  674. }
  675. .diy-window .display .display-right2 {
  676. width: 100%;
  677. height: 50%;
  678. overflow-y: hidden;
  679. position: absolute;
  680. top: 50%;
  681. left: 0;
  682. }
  683. .diy-window .display .display-right2 .left {
  684. width: 50%;
  685. height: 100%;
  686. overflow-y: hidden;
  687. position: absolute;
  688. top: 0;
  689. left: 0;
  690. }
  691. .diy-window .display .display-right2 .right {
  692. width: 50%;
  693. height: 100%;
  694. overflow-y: hidden;
  695. position: absolute;
  696. top: 0;
  697. left: 50%;
  698. }
  699. /* 公告组 */
  700. .notice__icon {
  701. font-size: 0;
  702. }
  703. .notice__icon img {
  704. width: 28rpx;
  705. height: 28rpx;
  706. }
  707. .notice__text {
  708. width: 298rpx;
  709. height: 30rpx;
  710. padding-left: 5rpx;
  711. }
  712. /* 优惠券 */
  713. .diy-coupon {
  714. white-space: nowrap;
  715. font-size: 0;
  716. }
  717. .diy-coupon .coupon-item {
  718. width: 350rpx;
  719. height: 130rpx;
  720. position: relative;
  721. color: #fff;
  722. overflow: hidden;
  723. box-sizing: border-box;
  724. }
  725. .diy-coupon .coupon-item i.before {
  726. content: "";
  727. position: absolute;
  728. z-index: 1;
  729. width: 40rpx;
  730. height: 40rpx;
  731. top: 50%;
  732. left: -.8rem;
  733. -webkit-transform: translateY(-50%);
  734. transform: translateY(-50%);
  735. -webkit-border-radius: 80%;
  736. border-radius: 80%;
  737. background-color: #fff;
  738. }
  739. .diy-coupon .coupon-wrapper {
  740. display: inline-block;
  741. padding: 0 12rpx;
  742. }
  743. .diy-coupon .coupon-item .left-content {
  744. position: relative;
  745. width: 70%;
  746. height: 100%;
  747. background-color: #e5004f;
  748. float: left;
  749. }
  750. .diy-coupon .coupon-item .left-content .content-top .price {
  751. font-size: 44rpx;
  752. }
  753. .diy-coupon .coupon-item.color__blue .left-content {
  754. background: linear-gradient(-125deg, #57bdbf, #2f9de2);
  755. }
  756. .diy-coupon .coupon-item.color__red .left-content {
  757. background: linear-gradient(-128deg, #ff6d6d, #ff3636);
  758. }
  759. .diy-coupon .coupon-item.color__violet .left-content {
  760. background: linear-gradient(-113deg, #ef86ff, #b66ff5);
  761. }
  762. .diy-coupon .coupon-item.color__yellow .left-content {
  763. background: linear-gradient(-141deg, #f7d059, #fdb054);
  764. }
  765. .diy-coupon .coupon-item.color__gray .left-content {
  766. background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
  767. }
  768. .diy-coupon .coupon-item.color__gray .right-receive {
  769. background-color: #949494;
  770. }
  771. .diy-coupon .coupon-item .right-receive {
  772. width: 30%;
  773. height: 100%;
  774. background-color: #4e4e4e;
  775. text-align: center;
  776. float: right;
  777. }
  778. .diy-coupon .coupon-item .right-receive text {
  779. font-size: 26rpx;
  780. }
  781. /* 商品组 */
  782. .diy-goods .goods-list {
  783. padding: 4rpx;
  784. box-sizing: border-box;
  785. }
  786. .diy-goods .goods-list .goods-item {
  787. box-sizing: border-box;
  788. padding: 8rpx;
  789. margin-bottom: 3rpx;
  790. }
  791. .diy-goods .goods-list.display__slide {
  792. white-space: nowrap;
  793. font-size: 0;
  794. }
  795. .diy-goods .goods-list.display__slide .goods-item {
  796. display: inline-block;
  797. }
  798. .diy-goods .goods-list.display__list .goods-item {
  799. float: left;
  800. }
  801. .diy-goods .goods-list.column__1 .goods-item {
  802. width: 100%;
  803. }
  804. .diy-goods .goods-list.column__2 .goods-item {
  805. width: 50%;
  806. }
  807. .diy-goods .goods-list.column__2 .goods-image image {
  808. width: 359rpx;
  809. height: 359rpx;
  810. }
  811. .diy-goods .goods-list.column__3 .goods-item {
  812. width: 33.33333%;
  813. }
  814. .diy-goods .goods-list.column__3 .goods-image image {
  815. width: 235.3rpx;
  816. height: 235.3rpx;
  817. }
  818. .diy-goods .goods-list .goods-item .goods-image image {
  819. display: block;
  820. border-radius: 12rpx 12rpx 0rpx 0rpx;
  821. width: 100%;
  822. }
  823. .diy-goods .goods-list .goods-item .detail {
  824. padding: 8rpx;
  825. /*height: 128rpx;*/
  826. background: #fff;
  827. border-radius: 0rpx 0rpx 12rpx 12rpx;
  828. overflow: hidden;
  829. }
  830. .diy-goods .goods-list .goods-item .goods-price {
  831. color: #e41f19;
  832. font-size: 38rpx;
  833. }
  834. .diy-goods .goods-list .goods-item .detail .goods-name {
  835. white-space: normal;
  836. word-break: break-all;
  837. overflow: hidden;
  838. text-overflow: ellipsis;
  839. display: -webkit-box;
  840. -webkit-box-orient: vertical;
  841. -webkit-line-clamp: 2;
  842. }
  843. .diy-goods .goods-list .goods-item .technicaldetail {
  844. padding: 8rpx;
  845. background: #fff;
  846. border-radius: 0rpx 0rpx 12rpx 12rpx;
  847. overflow: hidden;
  848. }
  849. .diy-goods .goods-list .goods-item .technicaldetail .goods-name {
  850. white-space: normal;
  851. word-break: break-all;
  852. overflow: hidden;
  853. text-overflow: ellipsis;
  854. display: -webkit-box;
  855. -webkit-box-orient: vertical;
  856. -webkit-line-clamp: 2;
  857. }
  858. .diy-goods .goods-list .goods-item .groupdetail {
  859. padding: 8rpx;
  860. height: 196rpx;
  861. background: #fff;
  862. border-radius: 0rpx 0rpx 12rpx 12rpx;
  863. overflow: hidden;
  864. }
  865. .diy-goods .goods-list .goods-item .groupdetail .goods-name {
  866. white-space: normal;
  867. word-break: break-all;
  868. overflow: hidden;
  869. text-overflow: ellipsis;
  870. display: -webkit-box;
  871. -webkit-box-orient: vertical;
  872. -webkit-line-clamp: 2;
  873. }
  874. /*商品列表*/
  875. .tui-goodli-box {
  876. display: flex;
  877. align-items: center;
  878. justify-content: space-between;
  879. flex-wrap: wrap;
  880. }
  881. .tui-goodli-item {
  882. width: 100%;
  883. height: 180rpx;
  884. padding: 0 20rpx;
  885. box-sizing: border-box;
  886. display: flex;
  887. background: #fff;
  888. position: relative;
  889. border-radius: 12rpx;
  890. }
  891. .tui-goodli-mtop {
  892. margin-top: 2%;
  893. }
  894. .goodliimgtitle {
  895. width: 71%;
  896. display: flex;
  897. }
  898. .tui-goodli-img {
  899. width: 40%;
  900. display: block;
  901. border-radius: 12rpx;
  902. }
  903. .tui-goodli-title-box {
  904. width: 60%;
  905. padding-left: 20rpx;
  906. font-size: 24rpx;
  907. }
  908. .goodli-butt-box {
  909. margin-top: 30rpx;
  910. padding: 20rpx;
  911. width: 28%;
  912. display: block;
  913. border-radius: 12rpx;
  914. }
  915. .goodli-button {
  916. font-size: 24rpx;
  917. color: #ffffff;
  918. align-items: center;
  919. }
  920. .tui-goodli-title {
  921. font-size: 30rpx;
  922. padding-top: 2rpx;
  923. word-break: break-all;
  924. font-weight: bold;
  925. overflow: hidden;
  926. text-overflow: ellipsis;
  927. display: -webkit-box;
  928. -webkit-box-orient: vertical;
  929. -webkit-line-clamp: 2;
  930. }
  931. .goodli-keyword {
  932. padding-top: 5rpx;
  933. color: #999;
  934. overflow: hidden;
  935. text-overflow: ellipsis;
  936. display: -webkit-box;
  937. -webkit-box-orient: vertical;
  938. -webkit-line-clamp: 1;
  939. }
  940. .tui-goodli-price {
  941. padding-top: 8rpx;
  942. }
  943. .tui-goodli-present {
  944. color: #ff201f;
  945. font-size: 38rpx;
  946. }
  947. .tui-goodli-label {
  948. width: 56rpx;
  949. height: 56rpx;
  950. border-top-left-radius: 12rpx;
  951. position: absolute;
  952. left: 0;
  953. top: 0;
  954. }
  955. /*商品列表end*/
  956. .tui-group-btn {
  957. max-width: 312rpx;
  958. height: 48rpx;
  959. border-radius: 6rpx;
  960. display: flex;
  961. align-items: center;
  962. padding: 4rpx;
  963. margin-top: 10rpx;
  964. box-sizing: border-box;
  965. }
  966. .tui-flex-btn {
  967. height: 100%;
  968. flex: 1;
  969. text-align: center;
  970. font-size: 26rpx;
  971. line-height: 26rpx;
  972. font-weight: 400;
  973. color: #fff;
  974. display: flex;
  975. align-items: center;
  976. justify-content: center;
  977. }
  978. .tui-flex-btn:first-child {
  979. background: #fff;
  980. }
  981. /**客服**/
  982. .img-tel-style {
  983. height: 80rpx;
  984. width: 80rpx;
  985. position: fixed;
  986. bottom: 330rpx;
  987. right: 16rpx;
  988. text-align: center;
  989. border-radius: 50%;
  990. background-color: #fff;
  991. border: 1rpx solid #ddd;
  992. opacity: 0.9
  993. }
  994. .img-plus-style {
  995. height: 80rpx;
  996. width: 80rpx;
  997. position: fixed;
  998. bottom: 230rpx;
  999. right: 16rpx;
  1000. text-align: center;
  1001. border-radius: 50%;
  1002. background-color: #fff;
  1003. border: 1rpx solid #ddd;
  1004. opacity: 0.9
  1005. }
  1006. .zindex100 {
  1007. z-index: 100
  1008. }
  1009. .yc {
  1010. opacity: 0
  1011. }
  1012. /**客服end**/
  1013. /*客服二维modal弹层*/
  1014. .tui-poster__canvas {
  1015. background-color: #fff;
  1016. position: absolute;
  1017. left: -9999px;
  1018. }
  1019. .tui-poster__box {
  1020. width: 100%;
  1021. position: relative;
  1022. display: flex;
  1023. justify-content: center;
  1024. align-items: center;
  1025. flex-direction: column;
  1026. }
  1027. .tui-close__img {
  1028. width: 48rpx;
  1029. height: 48rpx;
  1030. position: absolute;
  1031. right: 0;
  1032. top: -60rpx;
  1033. }
  1034. .tui-poster__img {
  1035. width: 560rpx;
  1036. height: 890rpx;
  1037. border-radius: 20rpx;
  1038. margin-bottom: 40rpx;
  1039. }
  1040. /*客服二维modal弹层end*/
  1041. .tui-modal-custom {
  1042. padding-top: 60rpx;
  1043. padding-bottom: 50rpx;
  1044. text-align: center;
  1045. }
  1046. .tui-prompt-title {
  1047. padding-bottom: 20rpx;
  1048. font-size: 34rpx;
  1049. }
  1050. .tui-modal__btn {
  1051. align-items: center;
  1052. justify-content: space-between;
  1053. }
  1054. .tui-box {
  1055. padding: 15rpx 20rpx;
  1056. box-sizing: border-box;
  1057. }
  1058. .tui-btn-danger {
  1059. height: 80rpx;
  1060. line-height: 80rpx;
  1061. background: #eb0909 !important;
  1062. border-radius: 98rpx;
  1063. color: #fff;
  1064. }