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.

197 regels
3.7 KiB

  1. /* pages/spellGroup/spellGroup.wxss */
  2. page {
  3. height: auto;
  4. overflow: auto;
  5. background: #f89132;
  6. background-image: url('https://s3.cn-northwest-1.amazonaws.com.cn/iformall-net/cimg/spell-bg.png');
  7. background-size: cover;
  8. background-repeat: no-repeat;
  9. }
  10. .content-box{
  11. height: auto;
  12. padding-bottom: 200rpx;
  13. }
  14. .banner{
  15. margin-bottom: 20rpx;
  16. background: none;
  17. border-radius: 16rpx;
  18. }
  19. .banner .bg {
  20. display: block;
  21. width: 100%;
  22. }
  23. image{
  24. padding: 0;
  25. margin: 0;
  26. }
  27. .banner .bannerbg image{
  28. display: none!important;
  29. height: 0;
  30. overflow: hidden;
  31. }
  32. .bannerimg {
  33. display: block;
  34. width: 710rpx;
  35. height: 260rpx;
  36. border-radius: 15rpx;
  37. margin: -132rpx auto 0;
  38. }
  39. .banner .index-slide-view {
  40. margin: -132rpx auto 0;
  41. }
  42. .top{
  43. position: absolute;
  44. top: 30rpx;
  45. width: 710rpx;
  46. height: 260rpx;
  47. background: #fff;
  48. left: 20rpx;
  49. border-radius: 16rpx;
  50. overflow: hidden;
  51. }
  52. .content{
  53. margin-top: 320rpx;
  54. }
  55. .content .sepll-list{
  56. width: 690rpx;
  57. height: 230rpx;
  58. background: #fff;
  59. border-radius: 30rpx;
  60. margin: 30rpx auto 0;
  61. }
  62. .content .spell-left{
  63. width: 230rpx;
  64. height: 230rpx;
  65. float: left;
  66. }
  67. .content .spell-left image{
  68. width: 180rpx;
  69. height: 180rpx;
  70. margin: 25rpx;
  71. }
  72. .content .spell-center{
  73. float: left;
  74. width: 304rpx;
  75. height: 100%;
  76. }
  77. .content .tilte{
  78. font-size:30rpx;
  79. font-family:PingFang-SC-Bold;
  80. font-weight:bold;
  81. color:rgba(51,51,51,1);
  82. line-height:44rpx;
  83. padding-top: 16rpx;
  84. }
  85. .content .remark{
  86. width:304rpx;
  87. font-size:24rpx;
  88. font-family:PingFang-SC-Medium;
  89. font-weight:500;
  90. color:rgba(140,140,140,1);
  91. line-height:44rpx;
  92. overflow: hidden;
  93. text-overflow:ellipsis;
  94. white-space: nowrap;
  95. }
  96. .content .spell-num{
  97. width: 95rpx;
  98. border:1px solid rgba(255,50,50,1);
  99. border-radius:10rpx;
  100. font-size:24rpx;
  101. font-family:PingFang-SC-Medium;
  102. font-weight:500;
  103. color:rgba(255,50,50,1);
  104. line-height:30rpx;
  105. margin: 10rpx 0;
  106. text-align: center;
  107. }
  108. .content .price{
  109. overflow: hidden;
  110. margin-top: 10rpx;
  111. }
  112. .content .price01{
  113. display: inline;
  114. font-size:50rpx;
  115. font-family:PingFang-SC-Medium;
  116. font-weight:500;
  117. color:rgba(255,50,50,1);
  118. line-height:44rpx;
  119. }
  120. .content .price02{
  121. display: inline;
  122. font-size: 24rpx;
  123. font-family:PingFang-SC-Medium;
  124. font-weight:500;
  125. text-decoration:line-through;
  126. color:rgba(140,140,140,1);
  127. }
  128. .content .price-num{
  129. display: inline;
  130. }
  131. .content .price-unit{
  132. display: inline;
  133. font-size:24rpx;
  134. margin-right: 10rpx;
  135. }
  136. .content .spell-right{
  137. float: left;
  138. width: 156rpx;
  139. }
  140. .right-button{
  141. width:120rpx;
  142. height:48rpx;
  143. font-size:26rpx;
  144. background:linear-gradient(90deg,rgba(236,59,45,1) 0%,rgba(248,98,52,1) 100%);
  145. border-radius:24rpx;
  146. font-family:PingFang-SC-Medium;
  147. font-weight:500;
  148. text-align: center;
  149. color:rgba(255,255,255,1);
  150. line-height:44rpx;
  151. margin: 110rpx auto 0;
  152. margin-top: 110rpx;
  153. }
  154. .right-text{
  155. font-size:22rpx;
  156. font-family:PingFang-SC-Medium;
  157. font-weight:500;
  158. color:rgba(140,140,140,1);
  159. line-height:60rpx;
  160. text-align: center;
  161. }
  162. .bottom{
  163. width: 690rpx;
  164. height: 85rpx;
  165. position: fixed;
  166. bottom: 26rpx;
  167. left: 30rpx;
  168. /* background:rgba(243,69,58,1); */
  169. border:1px solid rgba(255, 222, 67, 1);
  170. border-radius:40px;
  171. color: #fff;
  172. overflow: hidden;
  173. }
  174. .bottom-left{
  175. width: 50%;
  176. float: left;
  177. margin-left: -1rpx;
  178. text-align: center;
  179. line-height: 85rpx;
  180. font-size:30rpx;
  181. font-family:PingFang-SC-Medium;
  182. font-weight:500;
  183. color:rgba(255,253,245,1);
  184. border-right:1px solid rgba(255, 222, 67, 1);
  185. opacity: 1;
  186. }
  187. .bottom-right{
  188. width: 50%;
  189. float: left;
  190. text-align: center;
  191. line-height: 85rpx;
  192. font-size:30rpx;
  193. font-family:PingFang-SC-Medium;
  194. font-weight:500;
  195. color:rgba(255,253,245,1);
  196. opacity: 1;
  197. }