recharge.component.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. .recharge-content {
  2. background-image: url("https://file-cloud.fmode.cn/uiZD6NisQm/20220831/g1bkbm102855.png");
  3. background-repeat: no-repeat;
  4. background-position: center top;
  5. background-size: 100% 100%;
  6. height: 100%;
  7. padding-top: 10px;
  8. width: 100%;
  9. text-align: center;
  10. .options{
  11. display: grid;
  12. grid-template-columns: repeat(4, 1fr);
  13. grid-gap: 10px;
  14. padding: 6px;
  15. .select{
  16. padding: 10px 0;
  17. border: 1px solid;
  18. }
  19. }
  20. .li {
  21. display: flex;
  22. align-items: center;
  23. width: 93.3333vw;
  24. padding: 2.6667vw;
  25. margin: 0 auto;
  26. margin-top: 20px;
  27. border-radius: 2.6667vw;
  28. font-size: 5.2667vw;
  29. font-family: Source Han Sans CN;
  30. font-weight: 500;
  31. // color: #FFFFFF;
  32. // background: #353C4D;
  33. border: 1px solid #000000;
  34. .input {
  35. margin-left: 10px;
  36. border-radius: 1.6vw;
  37. border: none;
  38. // background: #353c4d;
  39. color: #000000;
  40. font-size: 14px;
  41. flex: 1;
  42. width: 200px;
  43. background: none;
  44. }
  45. }
  46. .confirm {
  47. width: 150px;
  48. background: #92a1ff;
  49. border-radius: 4px;
  50. padding: 10px 0 10px 0;
  51. margin: 0 auto;
  52. margin-top: 70px;
  53. color: #fff;
  54. }
  55. modal {
  56. margin-top: -100px;
  57. .confirm {
  58. margin-top: 10px;
  59. margin-bottom: -10px;
  60. color: #fff;
  61. text-align: center;
  62. background: #d81e06;
  63. &:active {
  64. background: #a11d0b;
  65. }
  66. }
  67. }
  68. }