_mergePage.scss 2.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .mergePage {
  2. position: relative;
  3. width: 100%;
  4. height: 100%;
  5. // display: flex;
  6. // flex-direction: column;
  7. &__header {
  8. position: relative;
  9. padding-top: em(60);
  10. padding-left: em(30);
  11. }
  12. &__body {
  13. flex: 1;
  14. display: flex;
  15. flex-direction: column;
  16. justify-content: center;
  17. align-items: center;
  18. position: relative;
  19. margin-top: em(32);
  20. }
  21. &__footer {
  22. position: absolute;
  23. width: 100%;
  24. height: em(346);
  25. padding-top: em(250);
  26. left: 0;
  27. bottom: 0;
  28. }
  29. &__title {
  30. position: relative;
  31. padding-bottom: em(20);
  32. width: em(500);
  33. }
  34. &__demo {
  35. position: relative;
  36. width: em(500);
  37. height: em(500);
  38. overflow: hidden;
  39. }
  40. &__picture {
  41. position: relative;
  42. width: em(500);
  43. height: em(500);
  44. border-radius: em(20);
  45. border: 1px solid #4B5283;
  46. img {
  47. width: 100%;
  48. height: 100%;
  49. object-fit: cover;
  50. }
  51. }
  52. &__loader {
  53. position: absolute;
  54. width: em(500);
  55. height: em(500);
  56. top: 0;
  57. left: 0;
  58. background-color: rgba(0, 0, 0, 0.8);
  59. display: flex;
  60. flex-direction: column;
  61. justify-content: center;
  62. align-items: center;
  63. .loader__text {
  64. position: relative;
  65. color: #FFEFBE;
  66. font-size: rem(32);
  67. font-weight: 700;
  68. line-height: em(40, 32);
  69. text-align: center;
  70. margin-top: em(60);
  71. }
  72. .loader-46 {
  73. position: relative;
  74. width: em(40);
  75. height: em(40);
  76. border-radius: 50%;
  77. margin-left: auto;
  78. margin-right: auto;
  79. transform: scale3d(1.8, 1.8, 1.8);
  80. &::after {
  81. content: '';
  82. width: em(16);
  83. height: em(16);
  84. border-radius: 50%;
  85. position: absolute;
  86. left: 0;
  87. transform: translate(-50%, 100%);
  88. animation: animloader46 1s linear infinite ;
  89. top: 0;
  90. }
  91. }
  92. }
  93. .btn__back {
  94. cursor: pointer;
  95. position: relative;
  96. width: em(233);
  97. pointer-events: nono;
  98. opacity: 0;
  99. }
  100. }