custom-tabbar.wxss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .custom-tabbar.data-v-51c48e3c {
  2. position: fixed;
  3. bottom: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 100rpx;
  7. background-color: #FFFFFF;
  8. display: flex;
  9. justify-content: space-around;
  10. align-items: center;
  11. box-shadow: 0 -1rpx 10rpx rgba(0, 0, 0, 0.05);
  12. z-index: 999;
  13. padding-bottom: env(safe-area-inset-bottom);
  14. }
  15. .custom-tabbar .tabbar-item.data-v-51c48e3c {
  16. flex: 1;
  17. display: flex;
  18. flex-direction: column;
  19. justify-content: center;
  20. align-items: center;
  21. height: 100%;
  22. }
  23. .custom-tabbar .tabbar-item .tabbar-icon-container.data-v-51c48e3c {
  24. position: relative;
  25. width: 48rpx;
  26. height: 48rpx;
  27. margin-bottom: 4rpx;
  28. }
  29. .custom-tabbar .tabbar-item .tabbar-icon-container .tabbar-icon.data-v-51c48e3c {
  30. width: 100%;
  31. height: 100%;
  32. }
  33. .custom-tabbar .tabbar-item .tabbar-icon-container .badge.data-v-51c48e3c {
  34. position: absolute;
  35. top: -6rpx;
  36. right: -10rpx;
  37. width: 28rpx;
  38. height: 28rpx;
  39. background-color: #FF3B30;
  40. border-radius: 50%;
  41. border: 2rpx solid #FFF;
  42. z-index: 10;
  43. flex-shrink: 0;
  44. }
  45. .custom-tabbar .tabbar-item .tabbar-icon-container .badge.data-v-51c48e3c::after {
  46. content: "11";
  47. position: absolute;
  48. top: 50%;
  49. left: 50%;
  50. transform: translate(-50%, -50%) scale(0.8);
  51. color: white;
  52. font-size: 20rpx;
  53. font-weight: bold;
  54. }
  55. .custom-tabbar .tabbar-item .tabbar-text.data-v-51c48e3c {
  56. font-size: 20rpx;
  57. line-height: 1;
  58. }
  59. .badge-div.data-v-51c48e3c {
  60. position: absolute;
  61. top: -6rpx;
  62. right: -14rpx;
  63. min-width: 32rpx;
  64. height: 32rpx;
  65. background-color: #FF2B2B;
  66. border-radius: 16rpx;
  67. color: #FFF;
  68. font-size: 20rpx;
  69. font-weight: bold;
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. box-sizing: border-box;
  74. padding: 0 4rpx;
  75. border: 2rpx solid #FFFFFF;
  76. }