C端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

813 lines
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. .times text {
  358. display: inline-block;
  359. margin: 6rpx;
  360. height: 56rpx;
  361. padding: 0 6rpx;
  362. text-align: center;
  363. font-size: 28rpx;
  364. line-height: 60rpx;
  365. border-radius: 12rpx;
  366. color: #fff;
  367. font-weight: bold;
  368. background: #ff4949;
  369. }
  370. .b1 {
  371. position: fixed;
  372. top: 0px;
  373. bottom: 0px;
  374. left: 0px;
  375. right: 0px;
  376. background: rgba(0, 0, 0, 0.8);
  377. overflow: hidden;
  378. z-index: 10;
  379. }
  380. .con {
  381. position: absolute;
  382. top: 35rpx;
  383. right: 0;
  384. bottom: 0;
  385. left: 0;
  386. margin: auto;
  387. width: 587rpx;
  388. }
  389. .con .image {
  390. display: block;
  391. width: 100%;
  392. }
  393. .img {
  394. margin-top: -50rpx;
  395. }
  396. .question {
  397. display: block;
  398. width: 587rpx;
  399. background: #fff;
  400. border-bottom-left-radius: 22rpx;
  401. border-bottom-right-radius: 22rpx;
  402. overflow: hidden;
  403. }
  404. .ques {
  405. display: block;
  406. width: 511rpx;
  407. margin: 0 auto;
  408. height: 95rpx;
  409. line-height: 95rpx;
  410. font-size: 30rpx;
  411. color: #333;
  412. border-bottom: 1rpx solid #eee;
  413. }
  414. .titles {
  415. width: 511rpx;
  416. display: block;
  417. text-align: center;
  418. height: 50rpx;
  419. margin: 0 auto;
  420. padding-top: 10rpx;
  421. padding-bottom: 20rpx;
  422. font-size: 32rpx;
  423. font-weight: bold;
  424. line-height: 41rpx;
  425. border-bottom: 1rpx solid #eee;
  426. }
  427. .quessss >view:last-child {
  428. border-bottom: 0;
  429. }
  430. .wmclose {
  431. position: relative;
  432. z-index: 10000;
  433. display: block;
  434. width: 70rpx;
  435. }
  436. .ques_gou {
  437. position: absolute;
  438. width: 20rpx;
  439. top: 160rpx;
  440. left: 23rpx;
  441. }
  442. .btnss {
  443. color: #f8755b;
  444. font-weight: bold;
  445. font-size: 30rpx !important;
  446. text-align: center !important;
  447. }
  448. .radios {
  449. display: block;
  450. font-size: 28rpx;
  451. height: 95rpx;
  452. line-height: 95rpx;
  453. color: #333;
  454. text-indent: 0.5em;
  455. }
  456. .elecard {
  457. display: inline-block;
  458. margin-left: 6rpx;
  459. color: #af6e34;
  460. border: 1px solid #af6e34;
  461. border-radius: 8rpx;
  462. font-style: normal;
  463. font-size: 30rpx;
  464. line-height: 40rpx;
  465. padding: 0 6rpx;
  466. }
  467. .applyshop {
  468. font-size: 30rpx;
  469. height: 70rpx;
  470. line-height: 70rpx;
  471. color: #333;
  472. text-indent: 1em;
  473. }
  474. .btns {
  475. /* padding: 0 33rpx; */
  476. position: fixed;
  477. left: 0;
  478. right: 0;
  479. bottom: 0;
  480. padding-bottom: 37rpx;
  481. padding-top: 37rpx;
  482. z-index: 100;
  483. background: #fff;
  484. }
  485. .btns > button,.btns .fl {
  486. width: 277rpx;
  487. height: 95rpx;
  488. border-radius: 48rpx;
  489. text-align: center;
  490. }
  491. .btns .fl {
  492. margin-left: 20rpx;
  493. color: #fff;
  494. background: rgba(255, 169, 2, 1);
  495. box-shadow: 0px 8px 8px 1px rgba(255, 169, 2, 0.32);
  496. }
  497. .btns .fl text {
  498. display: block;
  499. font-size: 30rpx;
  500. line-height: 34rpx;
  501. }
  502. .btns .fl text:nth-of-type(1) {
  503. margin-top: 12rpx;
  504. }
  505. .btns .fr {
  506. font-size: 30rpx;
  507. color: #fff;
  508. margin-right: 20rpx;
  509. line-height: 95rpx;
  510. background: rgba(236, 59, 45, 1);
  511. box-shadow: 0px 8px 8px 1px rgba(246, 93, 51, 0.32);
  512. }
  513. .support-tansfer {
  514. width: 60%;
  515. border-radius: 50rpx;
  516. margin-top: 30rpx;
  517. background: #02c0ff !important;
  518. }
  519. .shaddow {
  520. z-index: 100;
  521. position: fixed;
  522. width: 100%;
  523. height: 100%;
  524. top: 0px;
  525. background: rgba(0, 0, 0, 0.8);
  526. overflow: hidden;
  527. }
  528. .alert-box {
  529. position: fixed;
  530. top: 200rpx;
  531. left: 10%;
  532. width: 80%;
  533. height: auto;
  534. padding-bottom: 20rpx;
  535. background: #fff;
  536. z-index: 200;
  537. border-radius: 20rpx;
  538. }
  539. .user-img {
  540. position: absolute;
  541. top: -50rpx;
  542. left: 250rpx;
  543. /* margin-left: -50rpx; */
  544. width: 100rpx;
  545. height: 100rpx;
  546. z-index: 300;
  547. border-radius: 50rpx;
  548. background: #fff;
  549. overflow: hidden;
  550. }
  551. .user-img image {
  552. width: 100rpx;
  553. height: 100rpx;
  554. }
  555. .close {
  556. position: absolute;
  557. z-index: 300;
  558. right: 0;
  559. top: 0;
  560. width: 100rpx;
  561. height: 100rpx;
  562. overflow: hidden;
  563. }
  564. .close image {
  565. display: block;
  566. width: 26rpx;
  567. height: 26rpx;
  568. margin: 20rpx 0 0 52rpx;
  569. }
  570. .a-title {
  571. text-align: center;
  572. margin-top: 76rpx;
  573. font-size: 36rpx;
  574. font-family: PingFang-SC-Medium;
  575. font-weight: 500;
  576. color: rgba(51, 51, 51, 1);
  577. line-height: 44rpx;
  578. }
  579. .a-img {
  580. position: relative;
  581. width: 80%;
  582. border-radius: 20rpx;
  583. height: 294rpx;
  584. overflow: hidden;
  585. text-align: center;
  586. margin: 30rpx auto 0;
  587. }
  588. .a-received {
  589. position: absolute;
  590. width: 100%;
  591. height: 294rpx;
  592. top: 0;
  593. left: 0;
  594. text-align: center;
  595. line-height: 294rpx;
  596. z-index: 320;
  597. background: rgba(255, 255, 255, 1);
  598. border: 0px solid rgba(151, 57, 117, 1);
  599. opacity: 0.91;
  600. font-size: 36rpx;
  601. color: rgba(255, 51, 50, 1);
  602. font-family: PingFang-SC-Medium;
  603. }
  604. .a-img image {
  605. width: 100%;
  606. height: 100%;
  607. }
  608. .bottom {
  609. text-align: center;
  610. height: 70rpx;
  611. line-height: 70rpx;
  612. color: #999;
  613. font-size: 32rpx;
  614. }
  615. .presslimit {
  616. color: red;
  617. font-size: 26rpx;
  618. letter-spacing: 1.16rpx;
  619. overflow: hidden;
  620. white-space: nowrap;
  621. text-overflow: ellipsis;
  622. }
  623. checkbox-group, radio-group {
  624. height: 400rpx;
  625. overflow-y: scroll;
  626. }
  627. .detailImg {
  628. width: 92%;
  629. margin: 10rpx auto 0;
  630. }
  631. .detailImg image {
  632. display: block;
  633. width: 100%;
  634. margin-bottom: 20rpx;
  635. }
  636. .content {
  637. margin: 0;
  638. padding: 0;
  639. width: 100%;
  640. height: 100%;
  641. background: #f3f3f3;
  642. position: relative;
  643. }
  644. .poster{
  645. width: 100%;
  646. height: 100%;
  647. padding: 20rpx;
  648. position: absolute;
  649. top: 0;
  650. left: 0;
  651. }
  652. .bottomsave {
  653. width: 100%;
  654. height: 140rpx;
  655. line-height: 140rpx;
  656. margin: auto 0;
  657. bottom:0;
  658. left: 0;
  659. right: 0;
  660. border-top: 1px solid #ccc;
  661. box-shadow: 0 0rpx 150rpx #ccc;
  662. background: #fff;
  663. }
  664. .saveposter {
  665. color: #fff;
  666. width: 380rpx;
  667. height: 80rpx;
  668. border-radius: 50rpx;
  669. background: #f08f04;
  670. margin-top: 30rpx;
  671. font-size: 32rpx;
  672. }
  673. .modal {
  674. width: 100%;
  675. height: 100%;
  676. position: fixed;
  677. top: 0;
  678. left: 0;
  679. background: rgba(0, 0, 0, 0.5);
  680. overflow: hidden;
  681. z-index: 10;
  682. color: #fff;
  683. }
  684. .modal-content {
  685. width: 540rpx;
  686. height: 233rpx;
  687. line-height: 60rpx;
  688. overflow: hidden;
  689. position: fixed;
  690. top: 50%;
  691. left: 0;
  692. z-index: 11;
  693. background: #f9f9f9;
  694. margin: -130rpx 105rpx;
  695. border-radius: 36rpx;
  696. display: flex;
  697. }
  698. .modal-content view {
  699. display: inline-block;
  700. flex: 1;
  701. text-align: center;
  702. }
  703. .modal-content view>text {
  704. color: #000;
  705. display: block;
  706. font-size: 30rpx;
  707. }
  708. .modal-content view>image {
  709. margin-top: 40rpx;
  710. width: 90rpx;
  711. height: 90rpx;
  712. }
  713. .wx-swiper-dots{
  714. margin-bottom: 30rpx;
  715. }