tabs.page.scss 672 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. .custom-tab-bar {
  2. display: grid;
  3. grid-template-columns: repeat(5, 1fr);
  4. position: relative;
  5. }
  6. .custom-tab-button {
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. height: 100%;
  11. }
  12. .placeholder-tab-button {
  13. opacity: 0;
  14. pointer-events: none;
  15. }
  16. .custom-fab {
  17. position: absolute;
  18. bottom: 20px;
  19. left: 50%;
  20. transform: translateX(-180%);
  21. z-index: 10;
  22. }
  23. ion-fab-list {
  24. position: absolute;
  25. bottom: 20px;
  26. z-index: 11;
  27. }
  28. ion-fab-button.rotate {
  29. transition: transform 0.01ms ease; /* 添加过渡效果 */
  30. }
  31. ion-fab-button.rotate.rotate180 {
  32. transform: rotate(45deg); /* 旋转180度 */
  33. }