popover.wxss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /* myComponents/popover2/popover.wxss */
  2. .myPopover{
  3. position: relative;
  4. /* width: auto;
  5. height: auto; */
  6. }
  7. .popoverView{
  8. width: auto;
  9. height: auto;
  10. padding: 10px;
  11. top: 35px;
  12. right: calc(100% - 20px);
  13. /* background-color: red; */
  14. position: absolute;
  15. background-color: white;
  16. box-shadow: 0 0 2px 2px #ddd;
  17. border-radius: 6rpx;
  18. z-index: 999999;
  19. }
  20. .popoverView::before{
  21. position: absolute;
  22. display: inline-block;
  23. width: 0;
  24. height: 0px;
  25. content: '';
  26. border-style: solid;
  27. border-width: 6px;
  28. border-color: #fff #fff transparent transparent;
  29. box-shadow: 2px -2px 2px #ddd;
  30. border-top-style: solid;
  31. border-right-style: solid;
  32. border-bottom-style: solid;
  33. border-left-style: solid;
  34. border-top-width: 6px;
  35. border-right-width: 6px;
  36. border-bottom-width: 6px;
  37. border-left-width: 6px;
  38. border-top-color: rgb(255, 255, 255);
  39. border-right-color: rgb(255, 255, 255);
  40. border-bottom-color: transparent;
  41. border-left-color: transparent;
  42. }
  43. .popoverView.bottom::before {
  44. top: -6px;
  45. right: 10px;
  46. transform: rotate(-45deg);
  47. }
  48. .popoverView.left::before {
  49. right: 20px;
  50. }