coupon.wxss 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. page {
  2. background: #f4f4f4;
  3. min-height: 100%;
  4. }
  5. .container {
  6. background: #f4f4f4;
  7. min-height: 100%;
  8. padding-top: 30rpx;
  9. }
  10. .coupon-form {
  11. height: 110rpx;
  12. width: 100%;
  13. background: #fff;
  14. padding-left: 30rpx;
  15. padding-right: 30rpx;
  16. padding-top: 20rpx;
  17. display: flex;
  18. }
  19. .input-box {
  20. flex: 1;
  21. height: 70rpx;
  22. color: #333;
  23. font-size: 24rpx;
  24. background: #fff;
  25. position: relative;
  26. border: 1px solid rgba(0, 0, 0, 0.15);
  27. border-radius: 4rpx;
  28. margin-right: 30rpx;
  29. }
  30. .input-box .coupon-sn {
  31. position: absolute;
  32. top: 10rpx;
  33. left: 30rpx;
  34. height: 50rpx;
  35. width: 100%;
  36. color: #000;
  37. line-height: 50rpx;
  38. font-size: 24rpx;
  39. }
  40. .clear-icon {
  41. position: absolute;
  42. top: 21rpx;
  43. right: 30rpx;
  44. width: 28rpx;
  45. height: 28rpx;
  46. z-index:9999;
  47. }
  48. .add-btn {
  49. height: 70rpx;
  50. border: none;
  51. width: 168rpx;
  52. background: #b4282d;
  53. border-radius: 0;
  54. line-height: 70rpx;
  55. color: #fff;
  56. font-size: 28rpx;
  57. }
  58. .add-btn.disabled {
  59. background: #ccc;
  60. }
  61. .help {
  62. height: 72rpx;
  63. line-height: 72rpx;
  64. text-align: right;
  65. padding-right: 30rpx;
  66. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr3hmAFbclAAABsRQzqG8471.png) 590rpx center no-repeat;
  67. background-size: 28rpx;
  68. color: #999;
  69. font-size: 24rpx;
  70. }
  71. .coupon-box {
  72. background-color: #fff;
  73. display: flex;
  74. border-radius: 5px;
  75. flex-direction: row;
  76. position: relative;
  77. }
  78. .coupon-box .coupon-used {
  79. position: absolute;
  80. top: 50%;
  81. right: 10px;
  82. margin-top: -7.5vmin;
  83. height: 15vmin;
  84. width: 15vmin;
  85. background: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2s2AIzXWAAAPHxXo1UI166.png) no-repeat center;
  86. background-size: contain;
  87. }
  88. .coupon-box-g {
  89. background: linear-gradient(to right, #f0f0f0, #fff);
  90. }
  91. .coupon-box1 {
  92. border: 1px solid #fbb025;
  93. border-left: none;
  94. }
  95. .coupon-box2 {
  96. border: 1px solid #ccc;
  97. border-left: none;
  98. }
  99. .coupon-bg {
  100. width: 35%;
  101. background-position: left;
  102. background-size: cover;
  103. color: #fff;
  104. font-size: 2.4rem;
  105. display: flex;
  106. justify-content: center;
  107. flex-direction: column;
  108. align-items: center;
  109. }
  110. .coupon-bg > view{
  111. font-size: inherit;
  112. color: #fff;
  113. }
  114. .coupon-bg .coupon-currency {
  115. font-size: 1rem;
  116. padding-right: 5px;
  117. color: #fff;
  118. }
  119. .coupon-bg .coupon-type {
  120. font-size: 0.8rem;
  121. color: #fff;
  122. }
  123. .coupon-bg1 {
  124. background-image: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2v6AcFmPAAAXWs0DSHQ136.png);
  125. }
  126. .coupon-bg2 {
  127. background-image: url(http://120.76.26.84:80/group1/M00/00/02/rBJEdVvr2x6AEzgOAAAPIKZoCH4265.png);
  128. }
  129. .coupon-info {
  130. width: 50%;
  131. margin-left: 40px;
  132. }
  133. .coupon-info .coupon-title {
  134. font-size: 1.1rem;
  135. padding: 8px 0 4px 0;
  136. }
  137. .coupon-info .coupon-desc {
  138. font-size: 0.9rem;
  139. color: #9b9b9b;
  140. list-style: outside;
  141. padding: 4px 0 8px 0;
  142. }