styles.module.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. .container{
  2. position: fixed;
  3. top: 0;
  4. bottom: 0;
  5. right: 0;
  6. left: 0;
  7. & .content{
  8. width: 100%;
  9. height: 100%;
  10. border: none;
  11. //flex: none;
  12. }
  13. & .dragbox{
  14. display: flex;
  15. position: fixed;
  16. top: 2.5rem;
  17. right: -14.5rem;
  18. width: 17.6875rem;
  19. height: 3.2rem;
  20. z-index: var(--zindex-second);
  21. //overflow: hidden;
  22. }
  23. & .backbox{
  24. display: flex;
  25. //position: fixed;
  26. position: absolute;
  27. //top: 2.5rem;
  28. //right: -14.5rem;
  29. top: 0;
  30. left: 0;
  31. width: 17.6875rem;
  32. height: 3.2rem;
  33. //z-index: var(--zindex-second);
  34. //overflow: hidden;
  35. &.open{
  36. transition: all .3s;
  37. transform: translate(-7.875rem);
  38. }
  39. &.close{
  40. transition: all .3s;
  41. transform: translate(0);
  42. }
  43. & .back_btn{
  44. display: flex;
  45. position: relative;
  46. align-items: center;
  47. justify-content: center;
  48. z-index: 2;
  49. width: 3.1rem;
  50. height: 3.1rem;
  51. & .back_bg{
  52. width: 100%;
  53. height: auto;
  54. }
  55. & .arrow{
  56. position: absolute;
  57. width: 25%;
  58. height: auto;
  59. top: .88rem;
  60. left: 1.1rem;
  61. &.a_open{
  62. transition: all .3s;
  63. transform: rotate(180deg);
  64. }
  65. &.a_close{
  66. transition: all .3s;
  67. transform: rotate(0);
  68. }
  69. }
  70. }
  71. & .close_box{
  72. display: flex;
  73. position: relative;
  74. align-items: center;
  75. justify-content: center;
  76. z-index: 1;
  77. width: 9.5rem;
  78. margin-top: 2rem;
  79. margin-left: -1.2rem;
  80. & .bg{
  81. width: 100%;
  82. }
  83. & .close_info{
  84. position: absolute;
  85. left: 2rem;
  86. right: 1.3rem;
  87. top: -0.3rem;
  88. display: flex;
  89. align-items: center;
  90. justify-content: space-between;
  91. color: #fff;
  92. }
  93. & .line{
  94. transform: rotate(-72deg);
  95. opacity: .3;
  96. background-color: #fff;
  97. width: 1.25rem;
  98. height: .0625rem;
  99. }
  100. & .close{
  101. width: 1.2rem;
  102. height: 1.2rem;
  103. }
  104. }
  105. }
  106. }
  107. .loading{
  108. position: fixed;
  109. top: 0;
  110. left: 0;
  111. right: 0;
  112. bottom: 0;
  113. }