app-myapp/app/tabs/tabs.page.scss

.custom-tab-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 创建五个等宽的列 */
  position: relative;
}

.custom-tab-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.placeholder-tab-button {
  opacity: 0; /* 隐藏占位按钮 */
  pointer-events: none; /* 禁止点击 */
}

.custom-fab {
  position: absolute;
  bottom: 20px; /* 调整底部间距，根据需求修改 */
  left: calc(50% - 25px); /* 计算使按钮水平居中 */
  z-index: 10; /* 确保加号按钮位于其他元素之上 */
}

ion-fab-list {
  position: absolute;
  bottom: 60px; /* 确保拓展选项列表不会与底部标签栏重叠 */
  z-index: 11; /* 确保拓展选项列表位于加号按钮之上 */
}

ion-fab {
  --ion-color-primary: #3880ff; /* 加号按钮的颜色 */
}