caimei-paycash.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. input::-webkit-inner-spin-button {
  2. -webkit-appearance: none;
  3. }
  4. input::-webkit-outer-spin-button {
  5. -webkit-appearance: none;
  6. }
  7. .page-title {
  8. width: 1190px;
  9. height: 90px;
  10. margin: 0 auto;
  11. line-height: 1;
  12. }
  13. .page-title .page-name {
  14. float: left;
  15. display: block;
  16. height: 30px;
  17. padding: 30px 0;
  18. color: #333;
  19. font-size: 30px;
  20. }
  21. .progress {
  22. float: right;
  23. width: 448px;
  24. padding-top: 32px;
  25. }
  26. .progress-bar {
  27. width: 368px;
  28. height: 12px;
  29. margin: 0 40px;
  30. }
  31. .progress .step-1 {
  32. background: url(/public/3.0/img/order/progress_1.png) no-repeat center center;
  33. }
  34. .progress .step-2 {
  35. background: url(/public/3.0/img/order/progress_2.png) no-repeat center center;
  36. }
  37. .progress .step-3 {
  38. background: url(/public/3.0/img/order/progress_3.png) no-repeat center center;
  39. }
  40. .progress .progress-txt {
  41. padding: 5px 0;
  42. font-size: 12px;
  43. font-family: Arial, "鐎瑰缍�;
  44. }
  45. .progress-txt .item {
  46. float: left;
  47. width: 92px;
  48. text-align: center;
  49. }
  50. .progress-txt .item.middle {
  51. width: 264px;
  52. }
  53. .progress-txt .item.current {
  54. color: #E15616;
  55. }
  56. .pay-container {
  57. width: 100%;
  58. position: relative;
  59. margin-bottom: 20px;
  60. opacity: 0;
  61. }
  62. .pay-container.active{
  63. opacity: 1;
  64. }
  65. .pay-content{
  66. width: 1200px;
  67. margin: 0 auto;
  68. height: auto;
  69. }
  70. .pay-title{
  71. width: 100%;
  72. height: auto;
  73. padding: 15px 20px;
  74. float: left;
  75. background: #ffffff;
  76. margin-bottom: 7px;
  77. }
  78. .pay-title .title-money{
  79. width: 100%;
  80. height: 36px;
  81. float: left;
  82. margin: 7px 0;
  83. line-height: 36px;
  84. }
  85. .pay-title .title-money.big{
  86. height: 88px;
  87. line-height: 88px;
  88. }
  89. .pay-title .title-money p{
  90. font-size: 16px;
  91. color: #333333;
  92. float: left;
  93. margin-right: 80px;
  94. }
  95. .pay-title .title-money p.pay-money-big{
  96. font-size: 30px;
  97. }
  98. .pay-title .title-money .red{
  99. color: #FF2A2A;
  100. }
  101. .pay-title .pay-input{
  102. width: 100%;
  103. height: 36px;
  104. float: left;
  105. line-height: 36px;
  106. }
  107. .pay-title .pay-input p{
  108. font-size: 16px;
  109. color: #333333;
  110. float: left;
  111. }
  112. .pay-title .pay-input .input-text{
  113. font-size: 18px;
  114. color: #333333;
  115. }
  116. .pay-title .pay-input .input-text span{
  117. font-size: 14px;
  118. }
  119. .pay-title .pay-input .input{
  120. width: 215px;
  121. height: 34px;
  122. display: inline-block;
  123. font-size: 14px;
  124. line-height: 34px;
  125. padding: 0 10px;
  126. border: 1px solid #EBEBEB;
  127. border-radius: 5px;
  128. }
  129. .pay-ment{
  130. width: 100%;
  131. height: auto;
  132. float: left;
  133. background: #FFFFFF;
  134. margin-top: 7px;
  135. }
  136. .pay-ment .pay-record{
  137. width: 100%;
  138. height: auto;
  139. float: left;
  140. background: #FFFFFF;
  141. padding: 10px 0;
  142. }
  143. .pay-ment .pay-record .record-title{
  144. width: 100%;
  145. padding: 0 20px;
  146. background: #FFFFFF;
  147. line-height: 44px;
  148. font-size: 20px;
  149. color: #333333;
  150. text-align: left;
  151. }
  152. .pay-ment .pay-record .record-content{
  153. width: 1160px;
  154. height: auto;
  155. padding: 8px 650px 8px 20px;
  156. margin: 0 auto;
  157. background: #F7F7F7;
  158. border-radius: 5px;
  159. }
  160. .pay-ment .pay-record .record-content .record-li{
  161. width: 100%;
  162. height: 30px;
  163. float: left;
  164. }
  165. .pay-ment .pay-record .record-content .record-li.none{
  166. font-size: 14px;
  167. color: #333333;
  168. text-align: left;
  169. line-height: 30px;
  170. }
  171. .pay-ment .pay-record .record-content .record-li .record-tb{
  172. width: 33.33%;
  173. height: 30px;
  174. float: left;
  175. font-size: 14px;
  176. color: #333333;
  177. text-align: left;
  178. line-height: 30px;
  179. }
  180. .pay-ment .pay-record .record-content .record-li .record-tb:last-child{
  181. text-align: right;
  182. color: #999999;
  183. }
  184. .pay-method{
  185. width: 100%;
  186. height: auto;
  187. float: left;
  188. background: #FFFFFF;
  189. margin-top: 20px;
  190. }
  191. .pay-method .method-title{
  192. width: 100%;
  193. padding: 0 20px;
  194. background: #FFFFFF;
  195. line-height: 44px;
  196. font-size: 20px;
  197. color: #333333;
  198. text-align: left;
  199. border-bottom: 1px solid #F7F7F7;
  200. }
  201. .pay-method .pay-method-tab{
  202. width: 100%;
  203. height: 42px;
  204. float: left;
  205. border-bottom: 2px solid #E15616;
  206. }
  207. .pay-method .pay-method-tab .item{
  208. width: 110px;
  209. height: 42px;
  210. display: block;
  211. float: left;
  212. text-align: center;
  213. line-height: 42px;
  214. font-size: 14px;
  215. color: #333333;
  216. }
  217. .pay-method .pay-method-tab .item.active{
  218. background: #E15616;
  219. color: #FFFFFF;
  220. }
  221. .pay-method .method-content{
  222. width: 100%;
  223. height: auto;
  224. padding: 20px 0;
  225. float: left;
  226. }
  227. .pay-method .method-content .payment-title{
  228. font-size: 14px;
  229. line-height: 30px;
  230. color: #FF2A2A;
  231. text-align: left;
  232. padding-left: 20px;
  233. }
  234. .pay-method .method-content .payment{
  235. width: 100%;
  236. height: auto;
  237. }
  238. .pay-bank{
  239. width: 100%;
  240. height: auto;
  241. padding: 0 0 8px 0;
  242. background: #FFFFFF;
  243. float: left;
  244. }
  245. .pay-bank .bank-list{
  246. width: 100%;
  247. height: auto;
  248. padding-left: 8px;
  249. }
  250. .pay-bank .bank-list .bank-text{
  251. line-height: 22px;
  252. height: 22px;
  253. font-size: 16px;
  254. color: #333333;
  255. padding-left: 20px;
  256. margin: 6px 0;
  257. }
  258. .pay-bank .bank-list .bank-text span{
  259. color: #999999;
  260. }
  261. .pay-bank .bank-list .bank-a{
  262. width: 124px;
  263. height: 44px;
  264. display: block;
  265. float: left;
  266. margin: 12px;
  267. border: 2px solid #FFFFFF;
  268. position: relative;
  269. }
  270. .pay-bank .bank-list .bank-b{
  271. width: 124px;
  272. height: 44px;;
  273. display: block;
  274. float: left;
  275. margin: 12px;
  276. border: 2px solid #FFFFFF;
  277. position: relative;
  278. }
  279. .pay-bank .bank-list a img{
  280. width: 100%;
  281. height: 100%;
  282. display: block;
  283. }
  284. .pay-bank .bank-list a.active{
  285. border-color: #FF2A2A;
  286. }
  287. .pay-bank .bank-list a.active:before{
  288. content: '';
  289. width: 34px;
  290. height: 28px;
  291. position: absolute;
  292. bottom: -2px;
  293. right: -2px;
  294. background: url("/web/order/img/iconbank-active@2x.png") no-repeat;
  295. background-size: cover;
  296. }
  297. .pay-link{
  298. width: 100%;
  299. height: 32px;
  300. padding: 0 20px;
  301. float: left;
  302. }
  303. .pay-link p{
  304. float: left;
  305. font-size: 14px;
  306. line-height: 32px;
  307. color: #666;
  308. text-align: left;
  309. }
  310. .pay-link a{
  311. width: 112px;
  312. height: 30px;
  313. border: 1px solid #999;
  314. display: block;
  315. text-align: center;
  316. float: left;
  317. font-size: 12px;
  318. line-height: 30px;
  319. border-radius: 20px;
  320. color: #333;
  321. margin-left: 16px;
  322. }
  323. .pay-link .inviteCode{
  324. width: 112px;
  325. height: 30px;
  326. border: 1px solid #999;
  327. text-align: center;
  328. float: left;
  329. font-size: 12px;
  330. line-height: 30px;
  331. border-radius: 2px;
  332. color: #333;
  333. margin: 0 5px;
  334. }
  335. .pay-button{
  336. width: 100%;
  337. height: 44px;
  338. padding: 0 20px;
  339. margin: 20px 0;
  340. float: left;
  341. }
  342. .pay-button a{
  343. width: 208px;
  344. height: 44px;
  345. display: block;
  346. background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
  347. border-radius: 5px;
  348. font-size: 14px;
  349. line-height: 44px;
  350. text-align: center;
  351. color: #FFF6D9;
  352. float: right;
  353. }
  354. .pay-error{
  355. width: 1200px;
  356. margin: 0 auto;
  357. height: 594px;
  358. margin-top: 20px;
  359. display: none;
  360. background: #FFFFFF;
  361. }
  362. .pay-error .icon-error{
  363. width: 248px;
  364. height: 200px;
  365. margin: 0 auto;
  366. margin-top: 134px;
  367. }
  368. .pay-error .icon-error.again{
  369. background: url("/web/order/img/icon-error--1.png") no-repeat;
  370. background-size:contain ;
  371. }
  372. .pay-error .icon-error.offline{
  373. background: url("/web/order/img/icon-error--2.png") no-repeat;
  374. background-size:contain ;
  375. }
  376. .pay-error .icon-error.fail{
  377. background: url("/web/order/img/icon-error--3.png") no-repeat;
  378. background-size:contain ;
  379. }
  380. .pay-error .icon-error.paid{
  381. background: url("/web/order/img/icon-error-5.png") no-repeat;
  382. background-size:contain ;
  383. }
  384. .pay-error .error-msg{
  385. font-size: 16px;
  386. color: #333333;
  387. text-align: center;
  388. line-height: 22px;
  389. margin-top: 10px;
  390. }
  391. .pay-error .error-msgnone{
  392. font-size: 16px;
  393. color: #999999;
  394. text-align: center;
  395. line-height: 22px;
  396. margin-top: 10px;
  397. }
  398. .pay-alert-content{
  399. width: 100%;
  400. height: 100%;
  401. position: fixed;
  402. top: 0;
  403. left: 0;
  404. background: rgba(0,0,0,0.3);
  405. z-index: 9999;
  406. }
  407. .pay-alert-content .pay-alert{
  408. width: 340px;
  409. height: 208px;
  410. background: #FFFFFF;
  411. border-radius: 2px;
  412. position: absolute;
  413. top: 0;
  414. right: 0;
  415. left: 0;
  416. bottom: 0;
  417. margin: auto;
  418. z-index: 9998;
  419. }
  420. .pay-alert-content .pay-alert .title{
  421. width: 100%;
  422. height: 48px;
  423. font-size: 14px;
  424. line-height: 48px;
  425. text-align: left;
  426. color: #333333;
  427. float: left;
  428. position: relative;
  429. border-bottom: 1px solid #EFEFEF;
  430. background-color: #F8F8F8;
  431. padding: 0 14px;
  432. }
  433. .pay-alert-content .pay-alert .title .icon-close{
  434. width: 24px;
  435. height: 24px;
  436. display: block;
  437. position: absolute;
  438. right:12px;
  439. top: 12px;
  440. background: url("/web/login/img/icon-close.png")no-repeat;
  441. background-size: cover;
  442. cursor: pointer;
  443. }
  444. .pay-alert-content .pay-alert .content{
  445. margin: 30px 0;
  446. width: 100%;
  447. height: auto;
  448. line-height: 24px;
  449. float: left;
  450. padding: 0 14px;
  451. }
  452. .pay-alert-content .pay-alert .content h1{
  453. text-align: left;
  454. font-size: 16px;
  455. color: #333333;
  456. font-weight: normal;
  457. }
  458. .pay-alert-content .pay-alert .content p{
  459. text-align: left;
  460. font-size: 14px;
  461. color: #666666;
  462. font-weight: normal;
  463. }
  464. .pay-alert-content .pay-alert .button{
  465. width: 100%;
  466. height: 32px;
  467. float: left;
  468. padding: 0 14px;
  469. }
  470. .pay-alert-content .pay-alert .button a{
  471. width: 90px;
  472. height: 32px;
  473. display: block;
  474. background: #E15616;
  475. border-radius: 2px;
  476. font-size: 14px;
  477. text-align: center;
  478. line-height: 32px;
  479. color: #FFFFFF;
  480. float: right;
  481. }
  482. .payment-transfer{
  483. width: 100%;
  484. height: auto;
  485. padding: 0 24px;
  486. }
  487. .payment-transfer .payment-transfer-main{
  488. width: 100%;
  489. height: auto;
  490. }
  491. .payment-transfer .payment-transfer-main .label{
  492. width: 100%;
  493. height: 38px;
  494. line-height: 38px;
  495. font-size: 13px;
  496. color: #333;
  497. }
  498. .payment-transfer .payment-transfer-main .label .label-title{
  499. color: #999999;
  500. }
  501. .payment-transfer .payment-transfer-main .label .label-t{
  502. color: #666;
  503. }
  504. .payment-transfer .payment-transfer-main .label .text{
  505. color: #333;
  506. float: left;
  507. width: 25%;
  508. }
  509. .payment-transfer .payment-transfer-main .label .text-p{
  510. color: #333;
  511. float: left;
  512. }
  513. .payment-transfer .payment-transfer-main .label .text-p input{
  514. border: none;
  515. background-color: #FFF;
  516. width: 60px;
  517. font-size: 14px;
  518. color: #333;
  519. }
  520. .payment-transfer .payment-transfer-main .label .text-p .copy{
  521. display: block;
  522. width:42px;
  523. height:18px;
  524. background:linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
  525. opacity:1;
  526. border-radius:3px;
  527. float: left;
  528. line-height: 18px;
  529. font-size: 12px;
  530. margin-top: 10px;
  531. margin-left: 5px;
  532. color: #FFF;
  533. text-align: center;
  534. }
  535. .payment-transfer .payment-transfer-main .label .label-c{
  536. color: #E15616;
  537. }