index.wxss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. .commodity .cardBox {
  2. display: flex;
  3. align-items: center;
  4. justify-content: space-between;
  5. padding: 34rpx 21rpx;
  6. background-color: white;
  7. }
  8. .commodity .cardBox .vipBox {
  9. position: relative;
  10. width: 340rpx;
  11. height: 198rpx;
  12. background-size: cover;
  13. -webkit-box-reflect: below 0rpx linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24));
  14. -webkit-box-reflect: below 4rpx -webkit-linear-gradient(top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.24));
  15. }
  16. .commodity .cardBox .bg1 {
  17. background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/svip.png);
  18. }
  19. .commodity .cardBox .bg2 {
  20. background-image: url(http://reader-wx.ai160.com/images/reader/v3/learn/vip.png);
  21. }
  22. .commodity .cardBox .selectBtn {
  23. position: absolute;
  24. bottom: 10rpx;
  25. right: 10rpx;
  26. width: 48rpx;
  27. height: 46rpx;
  28. line-height: 50rpx;
  29. text-align: center;
  30. border-radius: 50%;
  31. color: white;
  32. font-size: 34rpx;
  33. background-color: white;
  34. }
  35. .commodity .cardBox .checked {
  36. background-color: #30C866;
  37. }
  38. .commodity .introduce {
  39. margin: 20rpx 0;
  40. position: relative;
  41. z-index: 2;
  42. width: 100%;
  43. padding: 0rpx 20rpx 30rpx;
  44. background-color: white;
  45. box-shadow: 0 -31rpx 30rpx #ffffff;
  46. }
  47. .commodity .introduce .title {
  48. margin-bottom: 20rpx;
  49. font-size: 32rpx;
  50. font-weight: bold;
  51. }
  52. .commodity .introduce .price {
  53. font-size: 34rpx;
  54. font-weight: bold;
  55. color: #FF3B00;
  56. }
  57. .commodity .entry {
  58. margin-top: 10rpx;
  59. padding: 36rpx 0rpx;
  60. display: flex;
  61. align-items: center;
  62. background-color: white;
  63. font-size: 30rpx;
  64. }
  65. .commodity .entry .title {
  66. width: 140rpx;
  67. text-align: center;
  68. color: #666666;
  69. }
  70. .commodity .entry .detaild {
  71. font-weight: bold;
  72. }
  73. .commodity .remind {
  74. padding: 25rpx 36rpx;
  75. }
  76. .commodity .remind .title {
  77. font-weight: bold;
  78. color: #212122;
  79. }
  80. .commodity .remind .li {
  81. margin-top: 20rpx;
  82. font-size: 28rpx;
  83. }
  84. .commodity .payBox {
  85. position: fixed;
  86. width: 100%;
  87. bottom: 0px;
  88. left: 0;
  89. display: flex;
  90. align-items: center;
  91. justify-content: space-between;
  92. padding: 22rpx 36rpx 30rpx;
  93. box-sizing: border-box;
  94. background-color: white;
  95. box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
  96. }
  97. .commodity .payBox .left {
  98. font-size: 32rpx;
  99. }
  100. .commodity .payBox .left text {
  101. font-size: 36rpx;
  102. color: #FF3B00;
  103. }
  104. .commodity .payBox .buyBtn {
  105. padding: 14rpx 100rpx;
  106. background-color: #FF8E20;
  107. border-radius: 50rpx;
  108. color: white;
  109. font-size: 36rpx;
  110. }
  111. .commodity .activationModal {
  112. position: fixed;
  113. z-index: 2;
  114. left: 0rpx;
  115. top: 0rpx;
  116. width: 100vw;
  117. height: 100vh;
  118. background: rgba(0, 0, 0, 0.7);
  119. }
  120. .commodity .activationModal .bg {
  121. position: absolute;
  122. width: 100%;
  123. height: 200rpx;
  124. z-index: -1;
  125. border-radius: 0 0 100rpx 100rpx;
  126. background-image: linear-gradient(132deg, #FFF4DB 14%, #FFF4DB 62%, #FEE5B5 100%);
  127. font-size: 40rpx;
  128. font-weight: bold;
  129. padding-top: 60rpx;
  130. box-sizing: border-box;
  131. text-align: center;
  132. }
  133. .commodity .activationModal .box {
  134. position: absolute;
  135. left: 0;
  136. right: 0;
  137. top: 30%;
  138. margin: auto;
  139. width: 660rpx;
  140. height: 550rpx;
  141. background-color: white;
  142. border-radius: 20rpx;
  143. text-align: center;
  144. }
  145. .commodity .activationModal .box .sLcon {
  146. margin-top: 164rpx;
  147. width: 580rpx;
  148. height: 326rpx;
  149. }
  150. .commodity .activationModal .box .close {
  151. position: absolute;
  152. padding: 40rpx;
  153. width: 54rpx;
  154. height: 54rpx;
  155. left: 0;
  156. right: 0;
  157. bottom: -140rpx;
  158. margin: auto;
  159. }