看起来你想把底部的Ionic Segment改成类似Tab Bar的样式（图标+垂直排列的文字），但目前的代码不仅有语法小问题，还没做针对性的样式调整，所以效果不对。我来帮你一步步搞定：

首先修复代码里的语法错误 #

你提供的代码里有两处小问题：

• 第二个<ion-segment-button>的style属性没加引号，应该是style="color:white"
• 第三个按钮的style属性没写完，得补全引号

然后自定义样式让Segment贴近Tab Bar效果 #

默认的Segment按钮是图标和文字横向排列，而且选中状态的样式和Tab Bar差异大，我们需要用CSS调整这些细节：

完整的实现代码

<ion-footer class="tab-bar-segment">
  <ion-segment value="heizol" mode="md">
    <ion-segment-button value="heizol">
      <ion-icon name="home"></ion-icon>
      <ion-label>Heizöl</ion-label>
    </ion-segment-button>
    <ion-segment-button value="diesel_10">
      <ion-icon name="home"></ion-icon>
      <ion-label>Diesel</ion-label>
    </ion-segment-button>
    <ion-segment-button value="benzin_e5">
      <ion-icon name="home"></ion-icon>
      <ion-label>Benzin E5</ion-label>
    </ion-segment-button>
  </ion-segment>
</ion-footer>

然后在对应的SCSS文件（比如页面的.scss或者全局styles.scss）里加这些样式：

.tab-bar-segment {
  ion-segment {
    background-color: #3B6593;
    border: none; // 去掉默认边框
    height: 60px; // 匹配Tab Bar的高度

    ion-segment-button {
      color: white;
      flex-direction: column; // 让图标在上，文字在下，模拟Tab Bar布局
      justify-content: center;
      gap: 4px; // 图标和文字之间的间距

      // 选中状态的样式，你可以自定义成你想要的效果
      &.segment-button-checked {
        color: #ffd700; // 选中时文字图标变金色，类似Tab Bar的高亮
        opacity: 1;
      }
    }
  }
}

关键调整点说明 #

• 用flex-direction: column让图标和文字垂直排列，这是贴近Tab Bar的核心
• 调整Segment的高度和背景色，去掉默认边框，让它更像底部Tab Bar
• 自定义选中状态的样式，替换默认的高亮效果，更贴合Tab Bar的视觉体验
• 把文字放在<ion-label>里，比直接写在按钮里更符合Ionic的组件规范，样式也更好控制

这样调整后，你的Segment就会呈现出类似Tab Bar的图标+垂直文字的样式，而且交互效果也更贴合预期啦。

内容的提问来源于stack exchange，提问作者U rock