12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- .dragBom {
- width: 100%;
- height: 10px;
- display: flex;
- justify-content: space-between;
- // border-radius: 0 0 8px 8px;
- //overflow: hidden;
- position: absolute;
- bottom: 0;
- // .box {
- // position: relative;
- // bottom: 10px;
- // width: 20px;
- // height: 20px;
- // background: url('./img/left.png') no-repeat;
- // background-size: 100% 100%;
- // border-bottom-left-radius: 16Px;
- // &.right {
- // background: url('./img/right.png') no-repeat;
- // background-size: 100% 100%;
- // border-bottom-right-radius: 16Px;
- // }
- // }
- }
- .guide {
- position: absolute;
- left: 0;
- top: calc(100% - 10px);
- &::before {
- content: "";
- display: block;
- position: fixed;
- left: -100vw;
- top: -100vh;
- z-index: 9;
- width: 200vw;
- height: 200vh;
- background: rgba(0,0,0,0.2);
- }
- .guideBg {
- position: relative;
- z-index: 99;
- width: 200px;
- height: 102px;
- background: url('./img/modalDragBg.png') no-repeat;
- background-size: 100% 100%;
- }
- .guideDone {
- position: absolute;
- z-index: 99;
- left: 34.6%;
- top: 72.2%;
- width: 50px;
- height: 20px;
- background: url('./img/modalDragDone.png') no-repeat;
- background-size: 100% 100%;
- cursor: pointer;
- }
- &.guideTop {
- top: initial;
- bottom: 2px;
- .guideBg {
- background: url('./img/modalDragBg2.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- &.guideLeft {
- top: initial;
- left: -180px;
- bottom: -5px;
- .guideBg {
- background: url('./img/modalDragBgLeft.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- &.guideRight {
- top: initial;
- left: calc(100% - 12px);
- bottom: -5px;
- .guideBg {
- background: url('./img/modalDragBgRight.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- }
|