index.module.less 883 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. .container{
  2. max-width: 200px;
  3. }
  4. .bubbleWrapper {
  5. top: calc(100% + 12px);
  6. left: -64px;
  7. z-index: 2;
  8. width: 142px;
  9. position: absolute;
  10. display: inline-block;
  11. filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.15)); /* 🔑 关键:父级统一阴影 */
  12. box-shadow: 0 5px 5px -3px #0000001a, 0 8px 10px 1px #0000000f, 0 3px 14px 2px #0000000d;
  13. }
  14. .bubble {
  15. position: relative;
  16. background: white;
  17. border-radius: 4px;
  18. padding: 12px;
  19. max-width: 142px;
  20. font-size: 14px;
  21. line-height: 22px;
  22. box-shadow: 0 5px 5px -3px #0000001a, 0 8px 10px 1px #0000000f, 0 3px 14px 2px #0000000d;
  23. }
  24. .bubbleArrowWrap{
  25. position: absolute;
  26. top: 0;
  27. margin-left: -5px;
  28. left: 50%;
  29. width: 10px;
  30. height: 10px;
  31. transform: translateY(-50%) scaleX(0.8);
  32. }
  33. .bubbleArrow {
  34. width: 10px;
  35. height: 10px;
  36. background: white;
  37. border-radius: 1px;
  38. transform: rotate(45deg);
  39. }