123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- /* myComponents/popover2/popover.wxss */
- .myPopover{
- position: relative;
- /* width: auto;
- height: auto; */
- }
- .popoverView{
- width: auto;
- height: auto;
- padding: 10px;
- top: 35px;
- right: calc(100% - 20px);
- /* background-color: red; */
- position: absolute;
- background-color: white;
- box-shadow: 0 0 2px 2px #ddd;
- border-radius: 6rpx;
- z-index: 999999;
- }
- .popoverView::before{
- position: absolute;
- display: inline-block;
- width: 0;
- height: 0px;
- content: '';
- border-style: solid;
- border-width: 6px;
- border-color: #fff #fff transparent transparent;
- box-shadow: 2px -2px 2px #ddd;
- border-top-style: solid;
- border-right-style: solid;
- border-bottom-style: solid;
- border-left-style: solid;
- border-top-width: 6px;
- border-right-width: 6px;
- border-bottom-width: 6px;
- border-left-width: 6px;
- border-top-color: rgb(255, 255, 255);
- border-right-color: rgb(255, 255, 255);
- border-bottom-color: transparent;
- border-left-color: transparent;
- }
- .popoverView.bottom::before {
- top: -6px;
- right: 10px;
- transform: rotate(-45deg);
- }
- .popoverView.left::before {
- right: 20px;
- }
|