index.wxss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  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 .selectBtn {
  17. position: absolute;
  18. bottom: 10rpx;
  19. right: 10rpx;
  20. width: 52rpx;
  21. height: 50rpx;
  22. line-height: 50rpx;
  23. text-align: center;
  24. border-radius: 50%;
  25. color: white;
  26. font-size: 34rpx;
  27. background-color: white;
  28. }
  29. .commodity .cardBox .checked {
  30. background-color: #30C866;
  31. }
  32. .commodity .introduce {
  33. margin: 20rpx 0;
  34. position: relative;
  35. z-index: 2;
  36. width: 100%;
  37. padding: 0rpx 20rpx 30rpx;
  38. background-color: white;
  39. box-shadow: 0 -31rpx 30rpx #ffffff;
  40. }
  41. .commodity .introduce .title {
  42. margin-bottom: 20rpx;
  43. font-size: 32rpx;
  44. font-weight: bold;
  45. }
  46. .commodity .introduce .price {
  47. font-size: 34rpx;
  48. font-weight: bold;
  49. color: #FF3B00;
  50. }
  51. .commodity .entry {
  52. margin-top: 10rpx;
  53. padding: 36rpx 0rpx;
  54. display: flex;
  55. align-items: center;
  56. background-color: white;
  57. font-size: 30rpx;
  58. }
  59. .commodity .entry .title {
  60. width: 140rpx;
  61. text-align: center;
  62. color: #666666;
  63. }
  64. .commodity .entry .detaild {
  65. font-weight: bold;
  66. }
  67. .commodity .remind {
  68. padding: 25rpx 36rpx;
  69. }
  70. .commodity .remind .title {
  71. font-weight: bold;
  72. color: #212122;
  73. }
  74. .commodity .remind .li {
  75. margin-top: 20rpx;
  76. font-size: 28rpx;
  77. }
  78. .commodity .payBox {
  79. position: fixed;
  80. width: 100%;
  81. bottom: 0px;
  82. left: 0;
  83. display: flex;
  84. align-items: center;
  85. justify-content: space-between;
  86. padding: 22rpx 36rpx 30rpx;
  87. box-sizing: border-box;
  88. background-color: white;
  89. box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
  90. }
  91. .commodity .payBox .left {
  92. font-size: 32rpx;
  93. }
  94. .commodity .payBox .left text {
  95. font-size: 36rpx;
  96. color: #FF3B00;
  97. }
  98. .commodity .payBox .buyBtn {
  99. padding: 14rpx 100rpx;
  100. background-color: #FF8E20;
  101. border-radius: 50rpx;
  102. color: white;
  103. font-size: 36rpx;
  104. }
  105. .commodity .activationModal {
  106. position: fixed;
  107. z-index: 2;
  108. left: 0rpx;
  109. top: 0rpx;
  110. width: 100vw;
  111. height: 100vh;
  112. background: rgba(0, 0, 0, 0.7);
  113. }
  114. .commodity .activationModal .box {
  115. position: absolute;
  116. left: 0;
  117. right: 0;
  118. top: 30%;
  119. margin: auto;
  120. width: 660rpx;
  121. height: 550rpx;
  122. background-color: white;
  123. border-radius: 20rpx;
  124. text-align: center;
  125. }
  126. .commodity .activationModal .box .sLcon {
  127. margin-top: 164rpx;
  128. width: 580rpx;
  129. height: 326rpx;
  130. }
  131. .commodity .activationModal .box .close {
  132. position: absolute;
  133. padding: 40rpx;
  134. width: 54rpx;
  135. height: 54rpx;
  136. left: 0;
  137. right: 0;
  138. bottom: -140rpx;
  139. margin: auto;
  140. }