C端小程序
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

816 řádky
12 KiB

  1. @import "../../../app.wxss";
  2. page {
  3. background: #fff;
  4. }
  5. button::after {
  6. border: none;
  7. }
  8. .coupons {
  9. width: 100%;
  10. position: relative;
  11. overflow: hidden;
  12. padding-bottom: 170rpx;
  13. }
  14. .banner {
  15. position: relative;
  16. width: 750rpx;
  17. height: 454rpx;
  18. }
  19. .banner swiper {
  20. width: 750rpx;
  21. height: 454rpx;
  22. }
  23. .banner image {
  24. width: 100%;
  25. height: 454rpx;
  26. }
  27. .dots {
  28. position: absolute;
  29. left: 0;
  30. right: 0;
  31. bottom: 50rpx;
  32. display: flex;
  33. justify-content: center;
  34. }
  35. .dot {
  36. margin: 0 8rpx;
  37. width: 14rpx;
  38. height: 14rpx;
  39. background: #fff;
  40. border-radius: 8rpx;
  41. transition: all 0.6s;
  42. }
  43. .dot.active {
  44. width: 24rpx;
  45. background: #f80;
  46. }
  47. .refound {
  48. border: 1rpx solid red;
  49. padding: 3rpx 0;
  50. display: block;
  51. width: 130rpx;
  52. text-align: center;
  53. margin-left: 14rpx;
  54. }
  55. .coupons_info {
  56. width: 92%;
  57. padding: 0 4%;
  58. background: #fff;
  59. border-top-left-radius: 20rpx;
  60. border-top-right-radius: 20rpx;
  61. /* margin-top: -25rpx; */
  62. }
  63. .fenxiang {
  64. position: absolute;
  65. right: 28rpx;
  66. top: 27rpx;
  67. width: 108rpx;
  68. }
  69. .fenxiang image {
  70. width: 108rpx;
  71. position: absolute;
  72. top: 0;
  73. right: 0;
  74. }
  75. .user-motto {
  76. width: 270rpx;
  77. border: 0;
  78. background: none;
  79. height: 260rpx;
  80. color: #fff;
  81. position: fixed;
  82. }
  83. .user-motto::after {
  84. border: none;
  85. }
  86. .title {
  87. display: block;
  88. font-weight: bold;
  89. font-size: 32rpx;
  90. color: #000;
  91. letter-spacing: 1.09rpx;
  92. line-height: 45rpx;
  93. width: 542rpx;
  94. overflow: hidden;
  95. white-space: nowrap;
  96. text-overflow: ellipsis;
  97. padding-top: 30rpx;
  98. }
  99. .subTitle {
  100. display: block;
  101. width: 588rpx;
  102. /* height: 37rpx; */
  103. font-size: 26rpx;
  104. color: #999;
  105. letter-spacing: 1.16rpx;
  106. overflow: hidden;
  107. white-space: nowrap;
  108. text-overflow: ellipsis;
  109. padding: 6rpx 0;
  110. }
  111. .rest {
  112. font-size: 24rpx;
  113. color: #919191;
  114. letter-spacing: 0;
  115. height: 70rpx;
  116. line-height: 70rpx;
  117. /* border-bottom: 1px solid #eee; */
  118. border-bottom: 1px solid #f9f9f9;
  119. }
  120. .restNum {
  121. font-size: 24rpx;
  122. color: #999;
  123. letter-spacing: 1.16rpx;
  124. text-align: right;
  125. }
  126. .time {
  127. font-size: 24rpx;
  128. color: #333;
  129. letter-spacing: 0;
  130. line-height: 33rpx;
  131. display: inline-block;
  132. }
  133. .txt01 {
  134. font-size: 24rpx;
  135. color: #919191;
  136. letter-spacing: 0;
  137. }
  138. .price {
  139. font-size: 24rpx;
  140. color: #999;
  141. letter-spacing: 0;
  142. }
  143. .salePriceStr {
  144. font-size: 24rpx;
  145. color: #999;
  146. letter-spacing: 0;
  147. }
  148. .salePriceStr .pri01 {
  149. font-size: 40rpx;
  150. color: #ff4949;
  151. letter-spacing: 0;
  152. line-height: 40rpx;
  153. }
  154. .use {
  155. color: #ff4949;
  156. margin-left: 10rpx;
  157. }
  158. .salePriceStr .yuan {
  159. font-size: 24rpx;
  160. color: #ff4949;
  161. letter-spacing: 0;
  162. }
  163. .price text {
  164. font-size: 24rpx;
  165. color: #333;
  166. letter-spacing: 0;
  167. }
  168. .throgh {
  169. text-decoration: line-through;
  170. margin-left: 10rpx;
  171. color: #999 !important;
  172. }
  173. .fl {
  174. float: left;
  175. color: red;
  176. }
  177. .fr {
  178. float: right;
  179. }
  180. .posi {
  181. position: relative;
  182. width: 92%;
  183. margin: 0 auto;
  184. }
  185. /* .posi>view:nth-child(2) text:nth-child(1) {
  186. font-size: 30rpx;
  187. color: #a9a9a9;
  188. } */
  189. /*
  190. .posi>view:nth-child(2) text:nth-child(2) {
  191. font-size: 30rpx;
  192. color: #a9a9a9;
  193. } */
  194. .posi_logo {
  195. position: relative;
  196. width: 100%;
  197. display: flex;
  198. padding: 20rpx 0;
  199. background: #fff;
  200. z-index: 10;
  201. }
  202. .posi_logo view:nth-child(1) {
  203. /* width: 100rpx; *//* margin-right: 16rpx; */
  204. border-radius: 16rpx;
  205. /* height: 100rpx; */
  206. }
  207. .posi_logo view:nth-child(1) image {
  208. display: block;
  209. width: 100rpx;
  210. height: 100rpx;
  211. border-radius: 16rpx;
  212. margin-right: 16rpx;
  213. border: 1px solid #e5e5e5;
  214. }
  215. .posi_logo view:nth-child(2) {
  216. /* display: flex; *//* flex-direction: column; *//* flex: 8; */
  217. height: 100rpx;
  218. /* padding-left: 30rpx; */
  219. }
  220. .posi_logo view:nth-child(2) text:nth-child(1) {
  221. font-size: 32rpx;
  222. color: #333;
  223. letter-spacing: 0;
  224. white-space: nowrap;
  225. text-overflow: ellipsis;
  226. overflow: hidden;
  227. }
  228. .shopVoList {
  229. display: flex !important;
  230. padding-left: 0 !important;
  231. flex-direction: row !important;
  232. }
  233. .shopVoList text {
  234. font-size: 20rpx !important;
  235. display: inline-block !important;
  236. white-space: nowrap;
  237. text-overflow: ellipsis;
  238. overflow: hidden;
  239. color: #b8b8b8 !important;
  240. }
  241. .notes view:nth-child(1) {
  242. height: 87rpx;
  243. line-height: 87rpx;
  244. background: #fff;
  245. border-top: 1px solid #f9f9f9;
  246. }
  247. .notes {
  248. width: 92%;
  249. margin: 0 auto;
  250. }
  251. .active {
  252. opacity: 0.6;
  253. }
  254. .notes view:nth-child(1) text {
  255. color: #333;
  256. letter-spacing: 0;
  257. font-size: 30rpx;
  258. height: 70rpx;
  259. line-height: 70rpx;
  260. }
  261. .notes view:nth-child(2) {
  262. background: #fff;
  263. display: flex;
  264. flex-direction: column;
  265. }
  266. .notes view:nth-child(2)>text {
  267. font-size: 24rpx;
  268. color: #919191;
  269. letter-spacing: 0;
  270. line-height: 42rpx;
  271. }
  272. .buy-view {
  273. background: #fff;
  274. height: 96rpx;
  275. bottom: 0;
  276. left: 0;
  277. right: 0;
  278. padding-bottom: 22rpx;
  279. padding-top: 22rpx;
  280. }
  281. .buy {
  282. position: relative;
  283. background: #af6e34;
  284. height: 94rpx;
  285. width: 560rpx;
  286. margin: 0 auto 30rpx;
  287. color: #fff;
  288. font-size: 36rpx;
  289. line-height: 94rpx;
  290. border-radius: 61rpx;
  291. }
  292. .goback {
  293. position: relative;
  294. float: left;
  295. width: 122rpx !important;
  296. height: 95rpx;
  297. background: rgba(255, 255, 255, 1);
  298. line-height: 95rpx;
  299. border: 1px solid rgba(227, 227, 227, 1);
  300. border-radius: 48rpx;
  301. margin-left: 25rpx;
  302. }
  303. .goback image {
  304. position: absolute;
  305. width: 70rpx;
  306. left: 0;
  307. right: 0;
  308. top: 0;
  309. bottom: 0;
  310. margin: auto;
  311. }
  312. .tel {
  313. position: absolute;
  314. right: 0;
  315. top: 0;
  316. bottom: 0;
  317. margin: auto;
  318. width: 50rpx;
  319. height: 50rpx;
  320. }
  321. .txt {
  322. margin-right: 30rpx;
  323. }
  324. .distance {
  325. border: none;
  326. border-radius: 16rpx;
  327. width: 600rpx;
  328. padding: 16rpx 6rpx 0 0;
  329. }
  330. .distance .txt01 {
  331. display: block;
  332. font-size: 26rpx;
  333. color: #ff4949;
  334. }
  335. .clock {
  336. width: 116rpx !important;
  337. vertical-align: middle;
  338. margin-right: 10rpx;
  339. margin-top: -4rpx;
  340. }
  341. .qiang {
  342. position: inline-block;
  343. width: 60rpx;
  344. height: 40rpx;
  345. line-height: 40rpx;
  346. color: #ff4949;
  347. text-align: center;
  348. font-size: 28rpx;
  349. margin-right: 10rpx;
  350. }
  351. .times {
  352. display: inline-block;
  353. color: #ff4949;
  354. font-weight: bold;
  355. font-size: 26rpx;
  356. text-align: center;
  357. }
  358. .timess{
  359. color: #af6e34;
  360. }
  361. .times text {
  362. display: inline-block;
  363. margin: 6rpx;
  364. height: 56rpx;
  365. padding: 0 6rpx;
  366. text-align: center;
  367. font-size: 28rpx;
  368. line-height: 60rpx;
  369. border-radius: 12rpx;
  370. color: #fff;
  371. font-weight: bold;
  372. background: #ff4949;
  373. }
  374. .b1 {
  375. position: fixed;
  376. top: 0px;
  377. bottom: 0px;
  378. left: 0px;
  379. right: 0px;
  380. background: rgba(0, 0, 0, 0.8);
  381. overflow: hidden;
  382. z-index: 10;
  383. }
  384. .con {
  385. position: absolute;
  386. top: 35rpx;
  387. right: 0;
  388. bottom: 0;
  389. left: 0;
  390. margin: auto;
  391. width: 587rpx;
  392. }
  393. .con .image {
  394. display: block;
  395. width: 100%;
  396. }
  397. .img {
  398. margin-top: -50rpx;
  399. }
  400. .question {
  401. display: block;
  402. width: 587rpx;
  403. background: #fff;
  404. border-bottom-left-radius: 22rpx;
  405. border-bottom-right-radius: 22rpx;
  406. overflow: hidden;
  407. }
  408. .ques {
  409. display: block;
  410. width: 511rpx;
  411. margin: 0 auto;
  412. height: 95rpx;
  413. line-height: 95rpx;
  414. font-size: 30rpx;
  415. color: #333;
  416. border-bottom: 1rpx solid #eee;
  417. }
  418. .titles {
  419. width: 511rpx;
  420. display: block;
  421. text-align: center;
  422. height: 50rpx;
  423. margin: 0 auto;
  424. padding-top: 10rpx;
  425. padding-bottom: 20rpx;
  426. font-size: 32rpx;
  427. font-weight: bold;
  428. line-height: 41rpx;
  429. border-bottom: 1rpx solid #eee;
  430. }
  431. .quessss >view:last-child {
  432. border-bottom: 0;
  433. }
  434. .wmclose {
  435. position: relative;
  436. z-index: 10000;
  437. display: block;
  438. width: 70rpx;
  439. }
  440. .ques_gou {
  441. position: absolute;
  442. width: 20rpx;
  443. top: 160rpx;
  444. left: 23rpx;
  445. }
  446. .btnss {
  447. color: #f8755b;
  448. font-weight: bold;
  449. font-size: 30rpx !important;
  450. text-align: center !important;
  451. }
  452. .radios {
  453. display: block;
  454. font-size: 28rpx;
  455. height: 95rpx;
  456. line-height: 95rpx;
  457. color: #333;
  458. text-indent: 0.5em;
  459. }
  460. .elecard {
  461. display: inline-block;
  462. margin-left: 6rpx;
  463. color: #af6e34;
  464. border: 1px solid #af6e34;
  465. border-radius: 8rpx;
  466. font-style: normal;
  467. font-size: 30rpx;
  468. line-height: 40rpx;
  469. padding: 0 6rpx;
  470. }
  471. .applyshop {
  472. font-size: 30rpx;
  473. height: 70rpx;
  474. line-height: 70rpx;
  475. color: #333;
  476. text-indent: 1em;
  477. }
  478. .btns {
  479. /* padding: 0 33rpx; */
  480. position: fixed;
  481. left: 0;
  482. right: 0;
  483. bottom: 0;
  484. padding-bottom: 37rpx;
  485. padding-top: 37rpx;
  486. z-index: 100;
  487. background: #fff;
  488. }
  489. .btns .fr,.btns .fl {
  490. width: 277rpx;
  491. height: 95rpx;
  492. border-radius: 48rpx;
  493. text-align: center;
  494. }
  495. .btns .fl {
  496. margin-left: 20rpx;
  497. color: #fff;
  498. background: rgba(255, 169, 2, 1);
  499. box-shadow: 0px 8px 8px 1px rgba(255, 169, 2, 0.32);
  500. }
  501. .btns .fl text {
  502. display: block;
  503. font-size: 30rpx;
  504. line-height: 34rpx;
  505. }
  506. .btns .fl text:nth-of-type(1) {
  507. margin-top: 12rpx;
  508. }
  509. .btns .fr {
  510. font-size: 30rpx;
  511. color: #fff;
  512. margin-right: 20rpx;
  513. line-height: 95rpx;
  514. background: rgba(236, 59, 45, 1);
  515. box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32);
  516. }
  517. .support-tansfer {
  518. width: 60%;
  519. border-radius: 50rpx;
  520. margin-top: 30rpx;
  521. background: #02c0ff !important;
  522. }
  523. .shaddow {
  524. z-index: 100;
  525. position: fixed;
  526. width: 100%;
  527. height: 100%;
  528. top: 0px;
  529. background: rgba(0, 0, 0, 0.8);
  530. overflow: hidden;
  531. }
  532. .alert-box {
  533. position: fixed;
  534. top: 200rpx;
  535. left: 10%;
  536. width: 80%;
  537. height: auto;
  538. padding-bottom: 20rpx;
  539. background: #fff;
  540. z-index: 200;
  541. border-radius: 20rpx;
  542. }
  543. .user-img {
  544. position: absolute;
  545. top: -50rpx;
  546. left: 250rpx;
  547. /* margin-left: -50rpx; */
  548. width: 100rpx;
  549. height: 100rpx;
  550. z-index: 300;
  551. border-radius: 50rpx;
  552. background: #fff;
  553. overflow: hidden;
  554. }
  555. .user-img image {
  556. width: 100rpx;
  557. height: 100rpx;
  558. }
  559. .close {
  560. position: absolute;
  561. z-index: 300;
  562. right: 0;
  563. top: 0;
  564. width: 100rpx;
  565. height: 100rpx;
  566. overflow: hidden;
  567. }
  568. .close image {
  569. display: block;
  570. width: 26rpx;
  571. height: 26rpx;
  572. margin: 20rpx 0 0 52rpx;
  573. }
  574. .a-title {
  575. text-align: center;
  576. margin-top: 76rpx;
  577. font-size: 36rpx;
  578. font-family: PingFang-SC-Medium;
  579. font-weight: 500;
  580. color: rgba(51, 51, 51, 1);
  581. line-height: 44rpx;
  582. }
  583. .a-img {
  584. position: relative;
  585. width: 80%;
  586. border-radius: 20rpx;
  587. height: 294rpx;
  588. overflow: hidden;
  589. text-align: center;
  590. margin: 30rpx auto 0;
  591. }
  592. .a-received {
  593. position: absolute;
  594. width: 100%;
  595. height: 294rpx;
  596. top: 0;
  597. left: 0;
  598. text-align: center;
  599. line-height: 294rpx;
  600. z-index: 320;
  601. background: rgba(255, 255, 255, 1);
  602. border: 0px solid rgba(151, 57, 117, 1);
  603. opacity: 0.91;
  604. font-size: 36rpx;
  605. color: rgba(255, 51, 50, 1);
  606. font-family: PingFang-SC-Medium;
  607. }
  608. .a-img image {
  609. width: 100%;
  610. height: 100%;
  611. }
  612. .bottom {
  613. text-align: center;
  614. height: 70rpx;
  615. line-height: 70rpx;
  616. color: #999;
  617. font-size: 32rpx;
  618. }
  619. .presslimit {
  620. color: red;
  621. font-size: 26rpx;
  622. letter-spacing: 1.16rpx;
  623. overflow: hidden;
  624. white-space: nowrap;
  625. text-overflow: ellipsis;
  626. }
  627. checkbox-group, radio-group {
  628. height: 400rpx;
  629. overflow-y: scroll;
  630. }
  631. .detailImg {
  632. width: 92%;
  633. margin: 10rpx auto 0;
  634. }
  635. .detailImg image {
  636. display: block;
  637. width: 100%;
  638. margin-bottom: 20rpx;
  639. }
  640. .content {
  641. margin: 0;
  642. padding: 0;
  643. width: 100%;
  644. height: 100%;
  645. background: #f3f3f3;
  646. position: relative;
  647. }
  648. .poster{
  649. width: 100%;
  650. height: 100%;
  651. padding: 20rpx;
  652. position: absolute;
  653. top: 0;
  654. left: 0;
  655. }
  656. .bottomsave {
  657. width: 100%;
  658. height: 140rpx;
  659. line-height: 140rpx;
  660. margin: auto 0;
  661. bottom:0;
  662. left: 0;
  663. right: 0;
  664. border-top: 1px solid #ccc;
  665. box-shadow: 0 0rpx 150rpx #ccc;
  666. background: #fff;
  667. }
  668. .saveposter {
  669. color: #fff;
  670. width: 380rpx;
  671. height: 80rpx;
  672. border-radius: 50rpx;
  673. background: #f08f04;
  674. margin-top: 30rpx;
  675. font-size: 32rpx;
  676. }
  677. .modal {
  678. width: 100%;
  679. height: 100%;
  680. position: fixed;
  681. top: 0;
  682. left: 0;
  683. background: rgba(0, 0, 0, 0.5);
  684. overflow: hidden;
  685. z-index: 10000;
  686. color: #fff;
  687. }
  688. .modal-content {
  689. width: 540rpx;
  690. height: 233rpx;
  691. line-height: 60rpx;
  692. overflow: hidden;
  693. position: fixed;
  694. top: 50%;
  695. left: 0;
  696. z-index: 11;
  697. background: #f9f9f9;
  698. margin: -130rpx 105rpx;
  699. border-radius: 36rpx;
  700. display: flex;
  701. }
  702. .modal-content view {
  703. display: inline-block;
  704. flex: 1;
  705. text-align: center;
  706. }
  707. .modal-content view>text {
  708. color: #000;
  709. display: block;
  710. font-size: 30rpx;
  711. }
  712. .modal-content view>image {
  713. margin-top: 40rpx;
  714. width: 90rpx;
  715. height: 90rpx;
  716. }
  717. .wx-swiper-dots{
  718. margin-bottom: 30rpx;
  719. }