C端小程序
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

815 строки
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. }
  201. .posi_logo view:nth-child(1) {
  202. /* width: 100rpx; *//* margin-right: 16rpx; */
  203. border-radius: 16rpx;
  204. /* height: 100rpx; */
  205. }
  206. .posi_logo view:nth-child(1) image {
  207. display: block;
  208. width: 100rpx;
  209. height: 100rpx;
  210. border-radius: 16rpx;
  211. margin-right: 16rpx;
  212. border: 1px solid #e5e5e5;
  213. }
  214. .posi_logo view:nth-child(2) {
  215. /* display: flex; *//* flex-direction: column; *//* flex: 8; */
  216. height: 100rpx;
  217. /* padding-left: 30rpx; */
  218. }
  219. .posi_logo view:nth-child(2) text:nth-child(1) {
  220. font-size: 32rpx;
  221. color: #333;
  222. letter-spacing: 0;
  223. white-space: nowrap;
  224. text-overflow: ellipsis;
  225. overflow: hidden;
  226. }
  227. .shopVoList {
  228. display: flex !important;
  229. padding-left: 0 !important;
  230. flex-direction: row !important;
  231. }
  232. .shopVoList text {
  233. font-size: 20rpx !important;
  234. display: inline-block !important;
  235. white-space: nowrap;
  236. text-overflow: ellipsis;
  237. overflow: hidden;
  238. color: #b8b8b8 !important;
  239. }
  240. .notes view:nth-child(1) {
  241. height: 87rpx;
  242. line-height: 87rpx;
  243. background: #fff;
  244. border-top: 1px solid #f9f9f9;
  245. }
  246. .notes {
  247. width: 92%;
  248. margin: 0 auto;
  249. }
  250. .active {
  251. opacity: 0.6;
  252. }
  253. .notes view:nth-child(1) text {
  254. color: #333;
  255. letter-spacing: 0;
  256. font-size: 30rpx;
  257. height: 70rpx;
  258. line-height: 70rpx;
  259. }
  260. .notes view:nth-child(2) {
  261. background: #fff;
  262. display: flex;
  263. flex-direction: column;
  264. }
  265. .notes view:nth-child(2)>text {
  266. font-size: 24rpx;
  267. color: #919191;
  268. letter-spacing: 0;
  269. line-height: 42rpx;
  270. }
  271. .buy-view {
  272. background: #fff;
  273. height: 96rpx;
  274. bottom: 0;
  275. left: 0;
  276. right: 0;
  277. padding-bottom: 22rpx;
  278. padding-top: 22rpx;
  279. }
  280. .buy {
  281. position: relative;
  282. background: #af6e34;
  283. height: 94rpx;
  284. width: 560rpx;
  285. margin: 0 auto 30rpx;
  286. color: #fff;
  287. font-size: 36rpx;
  288. line-height: 94rpx;
  289. border-radius: 61rpx;
  290. }
  291. .goback {
  292. position: relative;
  293. float: left;
  294. width: 122rpx !important;
  295. height: 95rpx;
  296. background: rgba(255, 255, 255, 1);
  297. line-height: 95rpx;
  298. border: 1px solid rgba(227, 227, 227, 1);
  299. border-radius: 48rpx;
  300. margin-left: 25rpx;
  301. }
  302. .goback image {
  303. position: absolute;
  304. width: 70rpx;
  305. left: 0;
  306. right: 0;
  307. top: 0;
  308. bottom: 0;
  309. margin: auto;
  310. }
  311. .tel {
  312. position: absolute;
  313. right: 0;
  314. top: 0;
  315. bottom: 0;
  316. margin: auto;
  317. width: 50rpx;
  318. height: 50rpx;
  319. }
  320. .txt {
  321. margin-right: 30rpx;
  322. }
  323. .distance {
  324. border: none;
  325. border-radius: 16rpx;
  326. width: 600rpx;
  327. padding: 16rpx 6rpx 0 0;
  328. }
  329. .distance .txt01 {
  330. display: block;
  331. font-size: 26rpx;
  332. color: #ff4949;
  333. }
  334. .clock {
  335. width: 116rpx !important;
  336. vertical-align: middle;
  337. margin-right: 10rpx;
  338. margin-top: -4rpx;
  339. }
  340. .qiang {
  341. position: inline-block;
  342. width: 60rpx;
  343. height: 40rpx;
  344. line-height: 40rpx;
  345. color: #ff4949;
  346. text-align: center;
  347. font-size: 28rpx;
  348. margin-right: 10rpx;
  349. }
  350. .times {
  351. display: inline-block;
  352. color: #ff4949;
  353. font-weight: bold;
  354. font-size: 26rpx;
  355. text-align: center;
  356. }
  357. .timess{
  358. color: #af6e34;
  359. }
  360. .times text {
  361. display: inline-block;
  362. margin: 6rpx;
  363. height: 56rpx;
  364. padding: 0 6rpx;
  365. text-align: center;
  366. font-size: 28rpx;
  367. line-height: 60rpx;
  368. border-radius: 12rpx;
  369. color: #fff;
  370. font-weight: bold;
  371. background: #ff4949;
  372. }
  373. .b1 {
  374. position: fixed;
  375. top: 0px;
  376. bottom: 0px;
  377. left: 0px;
  378. right: 0px;
  379. background: rgba(0, 0, 0, 0.8);
  380. overflow: hidden;
  381. z-index: 10;
  382. }
  383. .con {
  384. position: absolute;
  385. top: 35rpx;
  386. right: 0;
  387. bottom: 0;
  388. left: 0;
  389. margin: auto;
  390. width: 587rpx;
  391. }
  392. .con .image {
  393. display: block;
  394. width: 100%;
  395. }
  396. .img {
  397. margin-top: -50rpx;
  398. }
  399. .question {
  400. display: block;
  401. width: 587rpx;
  402. background: #fff;
  403. border-bottom-left-radius: 22rpx;
  404. border-bottom-right-radius: 22rpx;
  405. overflow: hidden;
  406. }
  407. .ques {
  408. display: block;
  409. width: 511rpx;
  410. margin: 0 auto;
  411. height: 95rpx;
  412. line-height: 95rpx;
  413. font-size: 30rpx;
  414. color: #333;
  415. border-bottom: 1rpx solid #eee;
  416. }
  417. .titles {
  418. width: 511rpx;
  419. display: block;
  420. text-align: center;
  421. height: 50rpx;
  422. margin: 0 auto;
  423. padding-top: 10rpx;
  424. padding-bottom: 20rpx;
  425. font-size: 32rpx;
  426. font-weight: bold;
  427. line-height: 41rpx;
  428. border-bottom: 1rpx solid #eee;
  429. }
  430. .quessss >view:last-child {
  431. border-bottom: 0;
  432. }
  433. .wmclose {
  434. position: relative;
  435. z-index: 10000;
  436. display: block;
  437. width: 70rpx;
  438. }
  439. .ques_gou {
  440. position: absolute;
  441. width: 20rpx;
  442. top: 160rpx;
  443. left: 23rpx;
  444. }
  445. .btnss {
  446. color: #f8755b;
  447. font-weight: bold;
  448. font-size: 30rpx !important;
  449. text-align: center !important;
  450. }
  451. .radios {
  452. display: block;
  453. font-size: 28rpx;
  454. height: 95rpx;
  455. line-height: 95rpx;
  456. color: #333;
  457. text-indent: 0.5em;
  458. }
  459. .elecard {
  460. display: inline-block;
  461. margin-left: 6rpx;
  462. color: #af6e34;
  463. border: 1px solid #af6e34;
  464. border-radius: 8rpx;
  465. font-style: normal;
  466. font-size: 30rpx;
  467. line-height: 40rpx;
  468. padding: 0 6rpx;
  469. }
  470. .applyshop {
  471. font-size: 30rpx;
  472. height: 70rpx;
  473. line-height: 70rpx;
  474. color: #333;
  475. text-indent: 1em;
  476. }
  477. .btns {
  478. /* padding: 0 33rpx; */
  479. position: fixed;
  480. left: 0;
  481. right: 0;
  482. bottom: 0;
  483. padding-bottom: 37rpx;
  484. padding-top: 37rpx;
  485. z-index: 100;
  486. background: #fff;
  487. }
  488. .btns .fr,.btns .fl {
  489. width: 277rpx;
  490. height: 95rpx;
  491. border-radius: 48rpx;
  492. text-align: center;
  493. }
  494. .btns .fl {
  495. margin-left: 20rpx;
  496. color: #fff;
  497. background: rgba(255, 169, 2, 1);
  498. box-shadow: 0px 8px 8px 1px rgba(255, 169, 2, 0.32);
  499. }
  500. .btns .fl text {
  501. display: block;
  502. font-size: 30rpx;
  503. line-height: 34rpx;
  504. }
  505. .btns .fl text:nth-of-type(1) {
  506. margin-top: 12rpx;
  507. }
  508. .btns .fr {
  509. font-size: 30rpx;
  510. color: #fff;
  511. margin-right: 20rpx;
  512. line-height: 95rpx;
  513. background: rgba(236, 59, 45, 1);
  514. box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32);
  515. }
  516. .support-tansfer {
  517. width: 60%;
  518. border-radius: 50rpx;
  519. margin-top: 30rpx;
  520. background: #02c0ff !important;
  521. }
  522. .shaddow {
  523. z-index: 100;
  524. position: fixed;
  525. width: 100%;
  526. height: 100%;
  527. top: 0px;
  528. background: rgba(0, 0, 0, 0.8);
  529. overflow: hidden;
  530. }
  531. .alert-box {
  532. position: fixed;
  533. top: 200rpx;
  534. left: 10%;
  535. width: 80%;
  536. height: auto;
  537. padding-bottom: 20rpx;
  538. background: #fff;
  539. z-index: 200;
  540. border-radius: 20rpx;
  541. }
  542. .user-img {
  543. position: absolute;
  544. top: -50rpx;
  545. left: 250rpx;
  546. /* margin-left: -50rpx; */
  547. width: 100rpx;
  548. height: 100rpx;
  549. z-index: 300;
  550. border-radius: 50rpx;
  551. background: #fff;
  552. overflow: hidden;
  553. }
  554. .user-img image {
  555. width: 100rpx;
  556. height: 100rpx;
  557. }
  558. .close {
  559. position: absolute;
  560. z-index: 300;
  561. right: 0;
  562. top: 0;
  563. width: 100rpx;
  564. height: 100rpx;
  565. overflow: hidden;
  566. }
  567. .close image {
  568. display: block;
  569. width: 26rpx;
  570. height: 26rpx;
  571. margin: 20rpx 0 0 52rpx;
  572. }
  573. .a-title {
  574. text-align: center;
  575. margin-top: 76rpx;
  576. font-size: 36rpx;
  577. font-family: PingFang-SC-Medium;
  578. font-weight: 500;
  579. color: rgba(51, 51, 51, 1);
  580. line-height: 44rpx;
  581. }
  582. .a-img {
  583. position: relative;
  584. width: 80%;
  585. border-radius: 20rpx;
  586. height: 294rpx;
  587. overflow: hidden;
  588. text-align: center;
  589. margin: 30rpx auto 0;
  590. }
  591. .a-received {
  592. position: absolute;
  593. width: 100%;
  594. height: 294rpx;
  595. top: 0;
  596. left: 0;
  597. text-align: center;
  598. line-height: 294rpx;
  599. z-index: 320;
  600. background: rgba(255, 255, 255, 1);
  601. border: 0px solid rgba(151, 57, 117, 1);
  602. opacity: 0.91;
  603. font-size: 36rpx;
  604. color: rgba(255, 51, 50, 1);
  605. font-family: PingFang-SC-Medium;
  606. }
  607. .a-img image {
  608. width: 100%;
  609. height: 100%;
  610. }
  611. .bottom {
  612. text-align: center;
  613. height: 70rpx;
  614. line-height: 70rpx;
  615. color: #999;
  616. font-size: 32rpx;
  617. }
  618. .presslimit {
  619. color: red;
  620. font-size: 26rpx;
  621. letter-spacing: 1.16rpx;
  622. overflow: hidden;
  623. white-space: nowrap;
  624. text-overflow: ellipsis;
  625. }
  626. checkbox-group, radio-group {
  627. height: 400rpx;
  628. overflow-y: scroll;
  629. }
  630. .detailImg {
  631. width: 92%;
  632. margin: 10rpx auto 0;
  633. }
  634. .detailImg image {
  635. display: block;
  636. width: 100%;
  637. margin-bottom: 20rpx;
  638. }
  639. .content {
  640. margin: 0;
  641. padding: 0;
  642. width: 100%;
  643. height: 100%;
  644. background: #f3f3f3;
  645. position: relative;
  646. }
  647. .poster{
  648. width: 100%;
  649. height: 100%;
  650. padding: 20rpx;
  651. position: absolute;
  652. top: 0;
  653. left: 0;
  654. }
  655. .bottomsave {
  656. width: 100%;
  657. height: 140rpx;
  658. line-height: 140rpx;
  659. margin: auto 0;
  660. bottom:0;
  661. left: 0;
  662. right: 0;
  663. border-top: 1px solid #ccc;
  664. box-shadow: 0 0rpx 150rpx #ccc;
  665. background: #fff;
  666. }
  667. .saveposter {
  668. color: #fff;
  669. width: 380rpx;
  670. height: 80rpx;
  671. border-radius: 50rpx;
  672. background: #f08f04;
  673. margin-top: 30rpx;
  674. font-size: 32rpx;
  675. }
  676. .modal {
  677. width: 100%;
  678. height: 100%;
  679. position: fixed;
  680. top: 0;
  681. left: 0;
  682. background: rgba(0, 0, 0, 0.5);
  683. overflow: hidden;
  684. z-index: 10;
  685. color: #fff;
  686. }
  687. .modal-content {
  688. width: 540rpx;
  689. height: 233rpx;
  690. line-height: 60rpx;
  691. overflow: hidden;
  692. position: fixed;
  693. top: 50%;
  694. left: 0;
  695. z-index: 11;
  696. background: #f9f9f9;
  697. margin: -130rpx 105rpx;
  698. border-radius: 36rpx;
  699. display: flex;
  700. }
  701. .modal-content view {
  702. display: inline-block;
  703. flex: 1;
  704. text-align: center;
  705. }
  706. .modal-content view>text {
  707. color: #000;
  708. display: block;
  709. font-size: 30rpx;
  710. }
  711. .modal-content view>image {
  712. margin-top: 40rpx;
  713. width: 90rpx;
  714. height: 90rpx;
  715. }
  716. .wx-swiper-dots{
  717. margin-bottom: 30rpx;
  718. }