toastTip.wxss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /* components/toastTip/toastTip.wxss */
  2. .toast-tip {
  3. position: fixed;
  4. right: 20rpx;
  5. z-index: 99;
  6. padding: 8rpx 40rpx 8rpx 40rpx;
  7. border-radius: 40rpx;
  8. background-color: #ffffff;
  9. display: flex;
  10. flex-direction: row;
  11. align-items: center;
  12. box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
  13. }
  14. .toast-tip::before {
  15. content: "";
  16. position: absolute;
  17. left: 65%;
  18. top: -10rpx;
  19. transform: translate(-50%, 0);
  20. width: 0;
  21. height: 0;
  22. border-left: 12rpx solid transparent;
  23. border-right: 12rpx solid transparent;
  24. border-bottom: 15rpx solid #ffffff;
  25. }
  26. .toast-tip .tip-txt {
  27. display: flex;
  28. flex-direction: column;
  29. }
  30. .toast-tip .tip-txt .txt {
  31. display: flex;
  32. align-items: center;
  33. font-size: 26rpx;
  34. font-family: PingFangSC-Regular, PingFang SC;
  35. font-weight: 400;
  36. color: rgba(102, 102, 102, 1);
  37. }
  38. .toast-tip .close {
  39. position: absolute;
  40. right: 0;
  41. top: 0;
  42. width: 32rpx;
  43. height: 32rpx;
  44. }
  45. .toast-tip .dot {
  46. display: inline-block;
  47. width: 12rpx;
  48. height: 12rpx;
  49. border-radius: 100%;
  50. background: rgba(0, 0, 0, 1);
  51. margin: 0 2rpx;
  52. }
  53. .toast-tip .mini {
  54. display: inline-block;
  55. width: 8rpx;
  56. height: 8rpx;
  57. border-radius: 100%;
  58. background: rgba(0, 0, 0, 1);
  59. }