payCode.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. .pay-page{min-height: 100vh;background-color: var(--mina);overflow: hidden;}
  2. .card {
  3. margin: 30rpx 30rpx 300rpx;
  4. border-radius: 20rpx;
  5. background-color: #fff;
  6. overflow: hidden;
  7. }
  8. .card .card-header {
  9. border-radius: 30rpx 30rpx 0 0;
  10. background-color: #f5f5f5;
  11. font-size: 30rpx;
  12. color: #333;
  13. padding: 30rpx 40rpx;
  14. }
  15. .card-header image{width: 50rpx;height: 50rpx;margin-right:15rpx;border-radius: 50%;}
  16. .card .card-code {
  17. background-color: #fff;
  18. padding: 30rpx;
  19. }
  20. .card .card-code .code1 {
  21. width: 628rpx;
  22. height: 220rpx;
  23. background-color: #eeeeee;
  24. }
  25. .card .card-code .code2 {
  26. width: 400rpx;
  27. height: 400rpx;
  28. background-color: #eeeeee;
  29. margin: 30rpx auto;
  30. }
  31. .code-image{
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .card .card-code .refresh {
  36. text-align: center;
  37. color: #999999;
  38. font-size: 24rpx;
  39. margin: auto;
  40. justify-content: center;
  41. width: 300rpx;
  42. }
  43. .card .card-bottom {
  44. padding:50rpx 65rpx 50rpx 40rpx;
  45. background-color: #fff;
  46. }
  47. .card .card-bottom .money-number {
  48. font-size: 38rpx;
  49. color: #333;
  50. }
  51. .card .card-bottom .money-text {
  52. font-size: 24rpx;
  53. color: #999;
  54. margin-top: 5rpx;
  55. }
  56. .cz-btn{color: #FF753A;margin-left: 10rpx;}
  57. .cz-btn image{width: 10rpx;height: 15rpx;margin-left: 2rpx;}
  58. .bico{width: 26rpx;height: 17rpx;margin-bottom: 10rpx;}
  59. .money-icon {
  60. width: 50rpx;
  61. height: 50rpx;
  62. margin-right: 30rpx;
  63. }
  64. .refresh-icon {
  65. width: 25rpx;
  66. height: 24rpx;
  67. margin-right: 10rpx;
  68. }
  69. .refresh-icon.active{animation: rote360 .5s linear infinite;}
  70. @keyframes rote360 {
  71. from{}
  72. to{
  73. transform: rotate(360deg);
  74. }
  75. }
  76. .line {
  77. border-bottom: 1px dashed #E9E9E9;
  78. padding: 20rpx 22rpx 29rpx 9rpx;
  79. position: relative;
  80. }
  81. .line::before {
  82. content: '';
  83. display: block;
  84. width: 40rpx;
  85. height: 40rpx;
  86. background: var(--mina);
  87. border-radius: 50%;
  88. position: absolute;
  89. bottom: -20rpx;
  90. left: 0;
  91. transform: translateX(-50%);
  92. }
  93. .line::after {
  94. content: '';
  95. display: block;
  96. width: 40rpx;
  97. height: 40rpx;
  98. background: var(--mina);
  99. border-radius: 50%;
  100. position: absolute;
  101. bottom: -20rpx;
  102. right: 0;
  103. transform: translateX(50%);
  104. }
  105. /* 扣款方式 */
  106. .ceng{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 99;}
  107. .popup{position: fixed;left: 0;right: 0;bottom: 0;background: #fff;border-radius: 12rpx 12rpx 0 0;padding: 45rpx 30rpx 0;z-index: 100;transition: all .3s ease;}
  108. .pop-tit{font-size: 32rpx;text-align: center;}
  109. .pop-tit text{display: block;font-size: 24rpx;color: #999;margin-top: 8rpx;}
  110. .pop-con{border-top: 1rpx solid #DDDDDD;margin-top: 40rpx;}
  111. .pop-con .li{padding: 35rpx 0;border-bottom: 1rpx solid #DDDDDD;font-size: 30rpx;}
  112. .money-ico{width: 36rpx;height: 36rpx;margin-right: 9rpx;}
  113. .money-gou{width: 32rpx;height: 32rpx;margin-right: 10rpx;}
  114. .pop-btn{justify-content: space-between;padding: 40rpx 0;}
  115. .cancel,.confirm{width: 310rpx;height: 80rpx;box-sizing: border-box;font-size: 32rpx;text-align: center;border-radius: 40rpx;}
  116. .cancel{line-height: 78rpx;color: #666;border: 1rpx solid #666;}
  117. .confirm{line-height: 80rpx;color: #fff;background: var(--mina);}