:global #tab-bar { background-color: #f0f0f0; } :global #tab-bar .demoName { font-size: 16px; font-weight: bold; height: 40px; line-height: 40px; text-align: center; } .demoContainer { height: 100%; } .newContainer { height: calc(100vh - 84px); } /* 允许 TabBar Item 溢出(防止半圆被裁剪) */ .am-tab-bar-item { overflow: visible !important; } /* 半圆样式 - 默认状态 */ .tabAi { position: relative; } .tabAi::after { content: ""; position: absolute; bottom: -20px; /* 向下突出 8px */ left: 50%; transform: translateX(-50%); width: 75px; /* 半圆宽度 */ height: 75px; /* 半径 = 12px */ background: #f3f3f3 url(../../assets/mobile/AI.png) center / contain no-repeat; /* 使用简写 */ /* 圆形 */ border-radius: 50%; /* 上半圆 */ z-index: 2; } /* 选中状态半圆颜色(可自定义) */ .tabAi.selected::after { background: url(../../assets/mobile/AI.png) center / contain no-repeat; /* 使用简写 */ color: #fff; } :global .tab-title.selected { color: #fff; /* 文本颜色变为白色 */ }