index.rpx.scss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. /*scroll-view外层*/
  2. .skill-sequence-panel-content-wrapper {
  3. position: relative;
  4. white-space: nowrap;
  5. // padding: 10rpx 0 10rpx 10rpx;
  6. margin-top: 10px;
  7. }
  8. /*左右渐变遮罩*/
  9. .hide-content-box {
  10. position: absolute;
  11. top: 0;
  12. height: 100%;
  13. width: 10px;
  14. z-index: 2;
  15. }
  16. .hide-content-box-left {
  17. left: 0;
  18. background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
  19. }
  20. .hide-content-box-right {
  21. right: 0;
  22. background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
  23. }
  24. .kite-classify-scroll {
  25. width: 100%;
  26. // height: 380rpx;
  27. overflow: hidden;
  28. white-space: nowrap;
  29. }
  30. .kite-classify-cell {
  31. display: inline-block;
  32. width: 266rpx;
  33. // height: 370rpx;
  34. margin-right: 20rpx;
  35. background-color: #ffffff;
  36. border-radius: 10rpx;
  37. overflow: hidden;
  38. box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
  39. position: relative;
  40. .h-bg-img{
  41. image{
  42. height: 80px;
  43. }
  44. }
  45. .content{
  46. position: absolute;
  47. bottom: 20%;
  48. left:12px;
  49. .money{
  50. color: #333333;
  51. .v{
  52. font-size: 18px;
  53. font-weight: bold;
  54. }
  55. }
  56. .desc{
  57. margin-top: 6px;
  58. font-size: 12px;
  59. color: #333333;
  60. line-height: 22px;
  61. }
  62. }
  63. .active{
  64. display: block;
  65. }
  66. }
  67. // 余额
  68. .recharge-me{
  69. position: relative;
  70. .bg-img{
  71. height: 160px;
  72. background: #FFE05C;
  73. }
  74. .wallet-content{
  75. position: absolute;
  76. top: 0;
  77. left: 0;
  78. right: 0;
  79. padding: 12px;
  80. .h-balance-wrap{
  81. background: #FFFCF1 ;
  82. border-radius: 6px;
  83. text-align: center;
  84. padding-left: 20px;
  85. padding-right: 20px;
  86. .h-balance{
  87. display: flex;
  88. justify-content: space-between;
  89. align-items: center;
  90. height: 118px;
  91. .recharge-balance{
  92. font-family: PingFangSC-Regular, PingFang SC;
  93. .h-nav-img {
  94. image{
  95. height: 18px;
  96. width: 18px;
  97. }
  98. }
  99. .name{
  100. font-size: 14px;
  101. font-weight: 400;
  102. color: #666666;
  103. line-height: 22px;
  104. }
  105. .balance-value{
  106. font-size: 18px;
  107. font-weight: bold;
  108. color: #333333;
  109. line-height: 26px;
  110. }
  111. }
  112. }
  113. .btn{
  114. display: flex;
  115. font-size: 14px;
  116. justify-content: space-between;
  117. height: 60px;
  118. align-items: center;
  119. color: #999999;
  120. .item-btn{
  121. width: 50%;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. // 充值金额选择
  128. .recharge-content-wrap{
  129. width: 100%;
  130. display: flex;
  131. flex-wrap: wrap;
  132. justify-content: space-between;
  133. margin-top: 12px;
  134. position: relative;
  135. .recharge-content{
  136. width: calc(50% - 6px);
  137. margin-bottom: 12px;
  138. position: relative;
  139. .h-bg-img{
  140. image{
  141. height: 80px;
  142. }
  143. }
  144. .content{
  145. position: absolute;
  146. bottom: 25%;
  147. left:12px;
  148. .money{
  149. color: #333333;
  150. .v{
  151. font-size: 18px;
  152. font-weight: bold;
  153. }
  154. }
  155. .desc{
  156. font-size: 12px;
  157. color: #333333;
  158. line-height: 22px;
  159. }
  160. }
  161. .choose-status{
  162. display: none;
  163. position: absolute;
  164. left: 0px;
  165. top: 0px;
  166. .active{
  167. width: 0;
  168. height: 0;
  169. border-left: 0px solid transparent;
  170. border-right: 30px solid transparent;
  171. border-top: 30px solid green;
  172. }
  173. image{
  174. height: 40px;
  175. width: 40px;
  176. }
  177. }
  178. .active{
  179. display: block;
  180. }
  181. }
  182. }
  183. .h-custom{
  184. background: #FFFCF1;
  185. display: flex;
  186. padding: 12px;
  187. border-radius: 10px;
  188. margin-top: 8px;
  189. .h-money{
  190. margin-left: 6px;
  191. }
  192. }
  193. // 协议
  194. .recharge-agreement{
  195. margin-top: 12px;
  196. margin-bottom: 12px;
  197. margin-left: 12px;
  198. text-align: center;
  199. .radio-group{
  200. .v-text{
  201. // color:green;
  202. }
  203. .h-btn{
  204. color:green;
  205. }
  206. }
  207. }
  208. // 提交按钮
  209. .h-submit-btn{
  210. margin-top: 12px;
  211. width: 343px;
  212. height: 42px;
  213. background: #FFE05C;
  214. border-radius: 27px;
  215. text-align: center;
  216. line-height: 42px;
  217. }
  218. // 使用说明
  219. .h-desc{
  220. font-family: PingFangSC-Regular, PingFang SC;
  221. .title{
  222. height: 24px;
  223. font-size: 14px;
  224. font-family: PingFangSC-Regular, PingFang SC;
  225. font-weight: 400;
  226. color: #333333;
  227. line-height: 24px;
  228. }
  229. .h-content{
  230. height: 40px;
  231. font-size: 12px;
  232. font-weight: 400;
  233. color: #999999;
  234. line-height: 20px;
  235. }
  236. }