cash.scss 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. .cash {
  2. width: #{750rpx};
  3. background-color: #f7f7f7;
  4. .no-tip {
  5. position: fixed;
  6. top: #{350rpx};
  7. left: 0;
  8. right: 0;
  9. margin: 0 auto;
  10. color: #666666;
  11. font-size: #{24rpx};
  12. width: #{240rpx};
  13. text-align: center;
  14. >image {
  15. height: #{240rpx};
  16. width: #{240rpx};
  17. margin-bottom: #{20rpx};
  18. }
  19. }
  20. .search {
  21. height: #{88rpx};
  22. box-sizing: border-box;
  23. background-color: #efeff4;
  24. padding: #{15rpx} #{24rpx};
  25. position: fixed;
  26. top: 0;
  27. left: 0;
  28. z-index: 1000;
  29. .search-clear {
  30. position: absolute;
  31. right: #{15rpx};
  32. top: #{14rpx};
  33. width: #{30rpx};
  34. height: #{30rpx};
  35. z-index: 100;
  36. >image {
  37. width: #{20rpx};
  38. height: #{20rpx};
  39. margin-right: #{11rpx};
  40. }
  41. }
  42. .input {
  43. padding: #{0 70rpx 0 30rpx};
  44. box-sizing: border-box;
  45. height: #{58rpx};
  46. width: #{750-48rpx};
  47. border-radius: #{29rpx};
  48. background-color: white;
  49. font-size: #{26rpx};
  50. }
  51. .view {
  52. height: #{58rpx};
  53. width: #{750-48rpx};
  54. border-radius: #{29rpx};
  55. background-color: white;
  56. font-size: #{26rpx};
  57. color: #999999;
  58. >image {
  59. width: #{25rpx};
  60. height: #{25rpx};
  61. margin-right: #{11rpx};
  62. }
  63. }
  64. }
  65. .bar {
  66. width: #{750rpx};
  67. position: fixed;
  68. top: #{88rpx};
  69. z-index: 2;
  70. left: 0;
  71. height: #{100rpx};
  72. border-bottom: #{1rpx} solid #e2e2e2;
  73. background-color: white;
  74. .scroll-view {
  75. white-space: nowrap;
  76. height: #{100rpx};
  77. }
  78. .bar-item {
  79. min-width: #{210rpx};
  80. height: #{100rpx};
  81. text-align: center;
  82. display: inline-block;
  83. .bar-item-tips {
  84. position: absolute;
  85. top: 50%;
  86. left: 100%;
  87. margin-left: #{8rpx};
  88. margin-top: #{-19rpx};
  89. height: #{19rpx};
  90. line-height: #{19rpx};
  91. font-size: #{12rpx};
  92. color: #fff;
  93. padding: 0 #{6rpx};
  94. border-top-left-radius: #{10rpx};
  95. border-bottom-right-radius: #{10rpx};
  96. background-image: linear-gradient(to right, #335aff,#2076e7);
  97. }
  98. .bar-item-text {
  99. display: inline-block;
  100. height: #{98rpx};
  101. font-size: #{28rpx};
  102. color: #666666;
  103. line-height: #{98rpx};
  104. border-bottom: #{2rpx} solid transparent;
  105. position: relative;
  106. width: auto;
  107. }
  108. .text-active {
  109. color: #446dfd;
  110. border-bottom: #{2rpx} solid #446dfd;
  111. }
  112. }
  113. }
  114. .reply-margin-search {
  115. top: #{88rpx};
  116. }
  117. .reply-margin-bar {
  118. top: #{188rpx};
  119. }
  120. .reply {
  121. width: #{750rpx};
  122. box-sizing: border-box;
  123. // margin: #{24upx} 0;
  124. padding: #{24rpx} 0;
  125. background-color: #f7f7f7;
  126. z-index: 2;
  127. position: fixed;
  128. left: 0;
  129. z-index: 10;
  130. background-color: #f7f7f7;
  131. .reply-item {
  132. box-sizing: border-box;
  133. width: #{160rpx};
  134. height: #{56rpx};
  135. line-height: #{54rpx};
  136. border: #{1rpx} solid #446dfd;
  137. font-size: #{24rpx};
  138. color: #666666;
  139. text-align: center;
  140. }
  141. .reply-item-active {
  142. background-color: #446dfd;
  143. color: #ffffff;
  144. }
  145. .unreviewed {
  146. border-top-left-radius: #{28rpx};
  147. border-bottom-left-radius: #{28rpx};
  148. }
  149. .unpaid {
  150. border-top-right-radius: #{28rpx};
  151. border-bottom-right-radius: #{28rpx};
  152. }
  153. }
  154. .content-margin-search {
  155. margin-top: #{104+88rpx};
  156. }
  157. .content-margin-bar {
  158. margin-top: #{104+188rpx};
  159. }
  160. .content {
  161. width: #{750rpx};
  162. padding:0 #{24rpx};
  163. box-sizing: border-box;
  164. .content-item {
  165. width: #{750-48rpx};
  166. padding: #{24rpx};
  167. box-sizing: border-box;
  168. background-color: white;
  169. border-radius: #{16rpx};
  170. margin-bottom: #{24rpx};
  171. .image {
  172. width: #{100rpx};
  173. margin-right: #{24rpx};
  174. image {
  175. width: #{100rpx};
  176. height: #{100rpx};
  177. border-radius: #{4rpx};
  178. }
  179. }
  180. .app-content {
  181. width: #{530rpx};
  182. .name {
  183. font-size: #{32rpx};
  184. color: #353535;
  185. margin-top: #{12rpx};
  186. margin-bottom: #{16rpx};
  187. }
  188. .amount {
  189. font-size: #{28rpx};
  190. color: #999999;
  191. margin-bottom: #{8rpx};
  192. }
  193. .pay {
  194. font-size: #{28rpx};
  195. margin-bottom: #{24rpx};
  196. .pay-price-text {
  197. color: #999999;
  198. }
  199. .pay-price-number {
  200. color: #446dfd;
  201. }
  202. }
  203. .button-men {
  204. height: #{60rpx};
  205. .button {
  206. height: #{60rpx};
  207. line-height: #{60rpx};
  208. padding: 0 #{32rpx};
  209. box-sizing: border-box;
  210. border-radius: #{30rpx};
  211. font-size: #{28rpx};
  212. }
  213. .ordinary {
  214. color: #666666;
  215. border: #{1rpx} solid #bbbbbb;
  216. margin-right: #{16rpx};
  217. }
  218. .can {
  219. color: #446dfd;
  220. border: #{1rpx} solid #446dfd;
  221. }
  222. }
  223. }
  224. }
  225. }
  226. .dialog {
  227. width: 620rpx;
  228. border-radius: 16rpx;
  229. background-color: #fff;
  230. position: absolute;
  231. top: 50%;
  232. left: 50%;
  233. transform: translate(-50%, -50%);
  234. padding-bottom: 120rpx;
  235. .dialog-title {
  236. text-align: center;
  237. font-size: #{32rpx};
  238. margin-top: #{40rpx};
  239. margin-bottom: #{44rpx};
  240. color: #353535;
  241. }
  242. .dialog-item {
  243. font-size: 24rpx;
  244. margin-bottom: 25rpx;
  245. .dialog-label {
  246. width: 200rpx;
  247. text-align: right;
  248. margin-right: 40rpx;
  249. }
  250. }
  251. .dialog-button {
  252. height: 90rpx;
  253. line-height: 90rpx;
  254. color: #446dfd;
  255. width: 100%;
  256. position: absolute;
  257. bottom: 0;
  258. left: 0;
  259. font-size: 30rpx;
  260. border-top: 2rpx solid #e2e2e2;
  261. text-align: center;
  262. }
  263. }
  264. .model {
  265. position: fixed;
  266. top: 0;
  267. left: 0;
  268. width: 100%;
  269. height: 100%;
  270. z-index: 1100;
  271. background-color: rgba(0,0,0,.3);
  272. .model-content {
  273. width: #{620rpx};
  274. border-radius: #{16rpx};
  275. background-color: white;
  276. position: absolute;
  277. top: 50%;
  278. left: 50%;
  279. transform: translate(-50%, -50%);
  280. .header {
  281. text-align: center;
  282. font-size: #{32rpx};
  283. margin-top: #{40rpx};
  284. margin-bottom: #{44rpx};
  285. color: #353535;
  286. }
  287. .center {
  288. width: #{620rpx};
  289. padding: 0 #{32rpx};
  290. box-sizing: border-box;
  291. .free {
  292. max-height: #{1000rpx};
  293. margin-bottom: #{23rpx};
  294. font-size: #{21rpx};
  295. color: #80848f;
  296. height: 100%;
  297. line-height: 1.5;
  298. overflow: auto;
  299. .textarea {
  300. color: #353535;
  301. height: #{252rpx};
  302. width: 100%;
  303. padding: #{24rpx 32rpx};
  304. box-sizing: border-box;
  305. font-size: #{28rpx};
  306. border-radius: #{16rpx};
  307. border: #{1rpx} solid #e2e2e2;
  308. text-align: left;
  309. }
  310. }
  311. .i-modal-body {
  312. margin-bottom: #{23rpx};
  313. font-size: #{26rpx};
  314. color: #80848f;
  315. height: 100%;
  316. line-height: 1.5;
  317. overflow: auto;
  318. >view {
  319. text-align: center;
  320. font-size: #{32rpx};
  321. color: #353535;
  322. padding: #{20rpx} 0 #{40rpx};
  323. }
  324. }
  325. .i-modal-body-free {
  326. padding: #{17rpx 32rpx 32rpx};
  327. box-sizing: border-box;
  328. max-height: #{1000rpx};
  329. margin-bottom: #{30rpx};
  330. font-size: #{28rpx};
  331. color: #80848f;
  332. height: 100%;
  333. line-height: 1.5;
  334. overflow: auto;
  335. .price {
  336. font-size: #{36rpx};
  337. color: #353535;
  338. font-weight: #{blod};
  339. text-align: center;
  340. }
  341. .text {
  342. font-size: #{32rpx};
  343. color: #353535;
  344. text-align: center;
  345. }
  346. }
  347. }
  348. .bottom {
  349. width: #{620rpx};
  350. height: #{88rpx};
  351. border-top: #{1rpx} solid #e2e2e2;
  352. .but {
  353. width: #{309rpx};
  354. height: #{88rpx};
  355. line-height: #{88rpx};
  356. font-size: #{32rpx};
  357. text-align: center;
  358. }
  359. .cancel {
  360. color: #666666;
  361. }
  362. .confirm {
  363. color: #446dfd;
  364. }
  365. .line {
  366. width: #{2rpx};
  367. height: #{32rpx};
  368. background-color: #e2e2e2;
  369. }
  370. }
  371. }
  372. }
  373. }