coupon.wxss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. @charset "UTF-8";
  2. /* 选项卡 */
  3. .swiper-tab {
  4. width: 100%;
  5. text-align: center;
  6. height: 80rpx;
  7. background-color: #fff;
  8. border-bottom: 1px solid #eee;
  9. }
  10. .swiper-tab .swiper-tab-item {
  11. width: 33.333333%;
  12. height: 100%;
  13. font-size: 28rpx;
  14. color: #777;
  15. display: flex;
  16. justify-content: center;
  17. align-items: center;
  18. box-sizing: border-box;
  19. border-bottom: 2px solid #ffffff00;
  20. }
  21. .swiper-tab .on {
  22. color: #f74c45;
  23. border-bottom: 2px solid #f74c45;
  24. }
  25. /* 设置scroll-view容器高度 */
  26. .coupon-list, .yoshop-notcont {
  27. height: 100.1%;
  28. }
  29. /* 评论列表 */
  30. .coupon-list {
  31. padding: 20rpx;
  32. box-sizing: border-box;
  33. }
  34. .coupon-list .coupon-item {
  35. position: relative;
  36. overflow: hidden;
  37. margin-bottom: 22rpx;
  38. }
  39. .coupon-list .coupon-item .item-wrapper {
  40. width: 100%;
  41. display: flex;
  42. background: #fff;
  43. border-radius: 8rpx;
  44. color: #fff;
  45. height: 180rpx;
  46. }
  47. .coupon-list .coupon-item .item-wrapper .coupon-type {
  48. position: absolute;
  49. top: 0;
  50. right: 0;
  51. z-index: 10;
  52. width: 128rpx;
  53. padding: 3px 0;
  54. background: #a771ff;
  55. font-size: 20rpx;
  56. text-align: center;
  57. color: #fff;
  58. transform: rotate(45deg);
  59. transform-origin: 64rpx 64rpx;
  60. }
  61. .coupon-list .coupon-item .item-wrapper.color__blue {
  62. background: linear-gradient(-125deg, #57bdbf, #2f9de2);
  63. }
  64. .coupon-list .coupon-item .item-wrapper.color__red {
  65. background: linear-gradient(-128deg, #ff6d6d, #ff3636);
  66. }
  67. .coupon-list .coupon-item .item-wrapper.color__violet {
  68. background: linear-gradient(-113deg, #ef86ff, #b66ff5);
  69. }
  70. .coupon-list .coupon-item .item-wrapper.color__violet .coupon-type {
  71. background: #55b5ff;
  72. }
  73. .coupon-list .coupon-item .item-wrapper.color__yellow {
  74. background: linear-gradient(-141deg, #f7d059, #fdb054);
  75. }
  76. .coupon-list .coupon-item .item-wrapper.color__gray {
  77. background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
  78. }
  79. .coupon-list .coupon-item .item-wrapper.color__gray .coupon-type {
  80. background: #9e9e9e;
  81. }
  82. .coupon-list .coupon-item .item-wrapper .content {
  83. flex: 1;
  84. padding: 30rpx 20rpx;
  85. border-radius: 8px 0 0 8px;
  86. }
  87. .coupon-list .coupon-item .item-wrapper .content .title {
  88. font-size: 34rpx;
  89. }
  90. .coupon-list .coupon-item .item-wrapper .tip {
  91. position: relative;
  92. flex: 0 0 32%;
  93. text-align: center;
  94. border-radius: 0 8px 8px 0;
  95. }
  96. .coupon-list .coupon-item .item-wrapper .tip .money {
  97. font-weight: bold;
  98. font-size: 52rpx;
  99. }
  100. .coupon-list .coupon-item .item-wrapper .tip .pay-line {
  101. font-size: 22rpx;
  102. }
  103. .coupon-list .coupon-item .item-wrapper .split-line {
  104. position: relative;
  105. flex: 0 0 0;
  106. border-left: 4rpx solid #fff;
  107. margin: 0 5px 0 3px;
  108. background: #fff;
  109. }
  110. .coupon-list .coupon-item .item-wrapper .split-line:before,
  111. .coupon-list .coupon-item .item-wrapper .split-line:after {
  112. content: '';
  113. position: absolute;
  114. width: 12px;
  115. height: 6px;
  116. background: #f7f7f7;
  117. left: -7px;
  118. z-index: 1;
  119. }
  120. .coupon-list .coupon-item .item-wrapper .split-line:before {
  121. border-radius: 0 0 8px 8px;
  122. top: 0;
  123. }
  124. .coupon-list .coupon-item .item-wrapper .split-line:after {
  125. border-radius: 8px 8px 0 0;
  126. bottom: 0;
  127. }
  128. /* 没有更多 */
  129. .no-more {
  130. text-align: center;
  131. color: #737373;
  132. padding: 10px 0;
  133. }