cardList.css 5.6 KB

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