cardList.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. page{
  2. background-color: #f5f5f5;
  3. }
  4. .top-fixed{
  5. position: fixed;
  6. top: 0;
  7. right: 0;
  8. left: 0;
  9. background-color: #fff;
  10. z-index: 101;
  11. }
  12. .search-box{
  13. padding: 30rpx;
  14. background-color: #fff;
  15. }
  16. .search-text{
  17. color: #999999;
  18. }
  19. .search-input{
  20. height: 76rpx;
  21. line-height: 76rpx;;
  22. background: #F5F5F5;
  23. border-radius: 10rpx 10rpx 10rpx 10rpx;
  24. padding: 0 26rpx;
  25. font-size: 24rpx;
  26. }
  27. .search-input input{
  28. font-size: 24rpx;
  29. }
  30. .search-input image{
  31. width: 34rpx;
  32. height: 34rpx;
  33. margin-right: 26rpx;
  34. }
  35. .search-all{
  36. color: #2a82fd;
  37. font-size: 30rpx;
  38. margin-left: 46rpx;
  39. }
  40. .filter{
  41. padding: 0 30rpx 20rpx;
  42. text-align: center;
  43. font-size: 28rpx;
  44. color: #999999;
  45. line-height: 41rpx;
  46. }
  47. .filter-item-icon{
  48. margin-left: 15rpx;
  49. width: 22rpx;
  50. height: 13rpx;
  51. }
  52. .filter-item{
  53. justify-content: center;
  54. }
  55. .f-active{
  56. color: var(--main);
  57. }
  58. /* 弹窗 */
  59. /* 核销弹窗 */
  60. .ceng{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 99;}
  61. .hx-pop{overflow: hidden;position: fixed;left: 0;right: 0;top: 0;background-color: #fff;border-radius: 0rpx 0rpx 0rpx 0rpx;z-index: 100;transition: all .3s ease;}
  62. .default{position: absolute;top: 55rpx;right: 60rpx;font-size: 28rpx;color: #999;}
  63. .default image{width: 36rpx;height: 36rpx;margin-right: 14rpx;}
  64. .pop-tit{font-size: 32rpx;color: #263343;font-weight: bold;margin-top: 60rpx;padding: 0 60rpx;}
  65. .pop-con{padding: 0 60rpx;}
  66. .pop-list{flex-wrap: wrap;}
  67. .pop-list .li{width: 189rpx;height: 70rpx;background: #F3F5F7;border-radius: 35rpx;font-size: 30rpx;color: #333;text-align: center;line-height: 70rpx;align-items: flex-start;margin: 30rpx 30rpx 0 0;}
  68. .pop-list .li:nth-child(3n){margin-right: 0;}
  69. .pop-list .li.active{background: var(--mina);color: #fff;}
  70. .pop-time{margin-top: 30rpx;font-size: 30rpx;color: #333;}
  71. .pop-time text{margin: 0 25rpx;}
  72. .date-ipt{width: 262rpx;height: 70rpx;background: #F3F5F7;border-radius: 35rpx;box-sizing: border-box;padding: 0 30rpx;font-size: 28rpx;color: #A5A5A5;line-height: 70rpx;}
  73. .pop-btn{margin-top: 80rpx;padding: 30rpx;}
  74. .pop-btn view{height: 90rpx;line-height: 90rpx;font-size: 32rpx;text-align: center;box-sizing: border-box;border-radius: 6rpx;}
  75. .pop-btn view:first-child{width: 250rpx; color: #fff;border-top: 1rpx solid #f5f5f5;line-height: 79rpx;background-color: #cccccc;margin-right: 30rpx;}
  76. .pop-btn view:last-child{color: #fff;background: var(--mina);}
  77. /* 列表*/
  78. /* 登记信息 */
  79. .register-box{
  80. background: #FFFFFF;
  81. border-radius:10rpx;
  82. position: relative;
  83. padding: 0 0rpx 30rpx;
  84. margin: 30rpx;
  85. }
  86. .register-title{
  87. font-size: 28rpx;
  88. font-weight: bold;
  89. color: #999999;
  90. padding: 30rpx 30rpx;
  91. padding-bottom: 21rpx;
  92. flex-wrap: nowrap;
  93. }
  94. .card-name{
  95. line-height: 50rpx;
  96. font-size: 36rpx;
  97. font-weight: bold;
  98. color: #333333;
  99. }
  100. .card-tag{
  101. padding: 0 10rpx;
  102. line-height: 32rpx;
  103. border-radius: 5rpx 5rpx 5rpx 5rpx;
  104. opacity: 1;
  105. border: 2rpx solid #FF5700;
  106. font-size: 20rpx;
  107. color: #FF5700;
  108. text-align: center;
  109. margin-right: 10rpx;
  110. }
  111. .card-area{
  112. line-height: 46rpx;
  113. background: #F8F8F8;
  114. border-radius: 10rpx 10rpx 10rpx 10rpx;
  115. padding:0 16rpx ;
  116. font-size: 24rpx;
  117. font-weight: 400;
  118. color: #666666;
  119. margin-top: 35rpx;
  120. }
  121. .card-area image{
  122. width: 20rpx;
  123. height: 24rpx;
  124. margin-right: 10rpx;
  125. }
  126. .card-data{
  127. font-size: 39rpx;
  128. font-family: Arial-Regular, Arial;
  129. font-weight: 400;
  130. color: #333333;
  131. line-height: 47rpx;
  132. text-align: center;
  133. }
  134. .card-label{
  135. line-height: 33rpx;
  136. font-size: 24rpx;
  137. font-family: PingFang SC-Medium, PingFang SC;
  138. font-weight: 500;
  139. color: #A1A1A1;
  140. text-align: center;
  141. }
  142. .card-line{
  143. width: 1rpx;
  144. height: 66rpx;
  145. background: #DEDEDE;
  146. }
  147. .register-state{
  148. font-size: 24rpx;
  149. font-weight: 500;
  150. line-height: 36rpx;
  151. color: #999999;
  152. }
  153. .register-title-icon{
  154. width: 160rpx;
  155. height: 160rpx;
  156. opacity: 1;
  157. margin-right: 20rpx;
  158. border-radius: 10rpx;
  159. }
  160. .register-info-item{
  161. margin-top: 30rpx;
  162. align-items: flex-start;
  163. }
  164. .register-info-label{
  165. line-height: 41rpx;
  166. color: #999999;
  167. font-size: 28rpx;
  168. margin-right: 60rpx;
  169. }
  170. .register-info-data{
  171. font-size: 28rpx;
  172. color: #333333;
  173. line-height: 41rpx;
  174. text-align: right;
  175. }
  176. /* 开通项目 */
  177. .card-pic{
  178. width: 172rpx;
  179. height: 172rpx;
  180. border-radius: 10rpx 10rpx 10rpx 10rpx;
  181. opacity: 1;
  182. margin-right: 15rpx;
  183. }
  184. .card-info{
  185. }
  186. .card-title{
  187. line-height: 54rpx;
  188. font-size: 32rpx;
  189. font-weight: bold;
  190. }
  191. .card-time{
  192. line-height: 36rpx;
  193. font-size: 24rpx;
  194. color: #999999;
  195. }
  196. .card-price{
  197. margin-top: 43rpx;
  198. justify-content: space-between;
  199. }
  200. .card-price text:first-child{
  201. font-size: 32rpx;
  202. font-weight: 500;
  203. color: #FF0000;
  204. }
  205. .card-price text:last-child{
  206. font-size: 24rpx;
  207. font-weight: 500;
  208. color: #999999;
  209. }
  210. .register-option{
  211. border-top: 1px solid #F5F5F5;
  212. justify-content: space-between;
  213. margin-top: 30rpx;
  214. padding: 20rpx 30rpx 0;
  215. }
  216. .order-time{
  217. font-size: 24rpx;
  218. font-weight: 400;
  219. color: #999999;
  220. }
  221. .option-btn{
  222. padding: 0 40rpx;
  223. line-height: 51rpx;
  224. border-radius: 27rpx 27rpx 27rpx 27rpx;
  225. opacity: 1;
  226. border: 2rpx solid #CCCCCC;
  227. font-size: 28rpx;
  228. }
  229. .bottom-btn{
  230. background-color: #fff;
  231. padding: 30rpx 0;
  232. position: fixed;
  233. bottom: 0;
  234. left: 0;
  235. right: 0;
  236. }
  237. .btn-icon{
  238. width: 29rpx;
  239. height: 32rpx;
  240. margin-right: 18rpx;
  241. }
  242. .bottom-btn .btn{
  243. width: 690rpx;
  244. height: 96rpx;
  245. line-height: 96rpx;
  246. background: #2A82FD;
  247. border-radius: 48rpx 48rpx 48rpx 48rpx;
  248. opacity: 1;
  249. text-align: center;
  250. color: #FFFFFF;
  251. margin: auto;
  252. justify-content: center;
  253. font-size: 32rpx;
  254. }