tabbar.scss 823 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .cl-tabbar {
  2. /* #ifndef MP-TOUTIAO */
  3. display: flex;
  4. /* #endif */
  5. width: 100%;
  6. z-index: 100;
  7. position: relative;
  8. border-top-width: 1rpx;
  9. border-top-style: solid;
  10. padding-bottom: env(safe-area-inset-bottom);
  11. cl-tabbar-item {
  12. flex: 1;
  13. }
  14. &-item {
  15. display: inline-flex;
  16. justify-content: center;
  17. align-items: center;
  18. height: 100%;
  19. width: 100%;
  20. box-sizing: border-box;
  21. position: relative;
  22. float: left;
  23. &__block {
  24. display: flex;
  25. flex-direction: column;
  26. align-items: center;
  27. }
  28. &__label {
  29. font-size: 24rpx;
  30. }
  31. &__image {
  32. &.selected-icon-path {
  33. display: none;
  34. }
  35. }
  36. .cl-badge {
  37. padding: 3rpx 10rpx;
  38. }
  39. &.is-active {
  40. .cl-tabbar-item__image {
  41. &.selected-icon-path {
  42. display: block;
  43. }
  44. &.icon-path {
  45. display: none;
  46. }
  47. }
  48. }
  49. }
  50. }