index.module.less 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. .dragBom {
  2. width: 100%;
  3. height: 10px;
  4. display: flex;
  5. justify-content: space-between;
  6. // border-radius: 0 0 8px 8px;
  7. //overflow: hidden;
  8. position: absolute;
  9. bottom: 0;
  10. // .box {
  11. // position: relative;
  12. // bottom: 10px;
  13. // width: 20px;
  14. // height: 20px;
  15. // background: url('./img/left.png') no-repeat;
  16. // background-size: 100% 100%;
  17. // border-bottom-left-radius: 16Px;
  18. // &.right {
  19. // background: url('./img/right.png') no-repeat;
  20. // background-size: 100% 100%;
  21. // border-bottom-right-radius: 16Px;
  22. // }
  23. // }
  24. }
  25. .guide {
  26. position: absolute;
  27. left: 0;
  28. top: calc(100% - 10px);
  29. &::before {
  30. content: "";
  31. display: block;
  32. position: fixed;
  33. left: -100vw;
  34. top: -100vh;
  35. z-index: 9;
  36. width: 200vw;
  37. height: 200vh;
  38. background: rgba(0,0,0,0.2);
  39. }
  40. .guideBg {
  41. position: relative;
  42. z-index: 99;
  43. width: 200px;
  44. height: 102px;
  45. background: url('./img/modalDragBg.png') no-repeat;
  46. background-size: 100% 100%;
  47. }
  48. .guideDone {
  49. position: absolute;
  50. z-index: 99;
  51. left: 34.6%;
  52. top: 72.2%;
  53. width: 50px;
  54. height: 20px;
  55. background: url('./img/modalDragDone.png') no-repeat;
  56. background-size: 100% 100%;
  57. cursor: pointer;
  58. }
  59. &.guideTop {
  60. top: initial;
  61. bottom: 2px;
  62. .guideBg {
  63. background: url('./img/modalDragBg2.png') no-repeat;
  64. background-size: 100% 100%;
  65. }
  66. }
  67. &.guideLeft {
  68. top: initial;
  69. left: -180px;
  70. bottom: -5px;
  71. .guideBg {
  72. background: url('./img/modalDragBgLeft.png') no-repeat;
  73. background-size: 100% 100%;
  74. }
  75. }
  76. &.guideRight {
  77. top: initial;
  78. left: calc(100% - 12px);
  79. bottom: -5px;
  80. .guideBg {
  81. background: url('./img/modalDragBgRight.png') no-repeat;
  82. background-size: 100% 100%;
  83. }
  84. }
  85. }