index.module.less 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. .dragBom {
  2. width: 100%;
  3. height: 20px;
  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. width: 20px;
  12. height: 100%;
  13. background: url('./img/left.png') no-repeat;
  14. background-size: 100% 100%;
  15. border-bottom-left-radius: 16Px;
  16. &.right {
  17. background: url('./img/right.png') no-repeat;
  18. background-size: 100% 100%;
  19. border-bottom-right-radius: 16Px;
  20. }
  21. }
  22. }
  23. .guide {
  24. position: absolute;
  25. left: 0;
  26. top: calc(100% - 10px);
  27. &::before {
  28. content: "";
  29. display: block;
  30. position: fixed;
  31. left: -100vw;
  32. top: -100vh;
  33. z-index: 9;
  34. width: 200vw;
  35. height: 200vh;
  36. background: rgba(0,0,0,0.2);
  37. }
  38. .guideBg {
  39. position: relative;
  40. z-index: 99;
  41. width: 200px;
  42. height: 102px;
  43. background: url('./img/modalDragBg.png') no-repeat;
  44. background-size: 100% 100%;
  45. }
  46. .guideDone {
  47. position: absolute;
  48. z-index: 99;
  49. left: 34.6%;
  50. top: 72.2%;
  51. width: 50px;
  52. height: 20px;
  53. background: url('./img/modalDragDone.png') no-repeat;
  54. background-size: 100% 100%;
  55. cursor: pointer;
  56. }
  57. &.guideTop {
  58. top: initial;
  59. bottom: 2px;
  60. .guideBg {
  61. background: url('./img/modalDragBg2.png') no-repeat;
  62. background-size: 100% 100%;
  63. }
  64. }
  65. }