在这个购物标签栏的视图上面再添加点自定义的 css 类，然后用这些类再去设计一个这个标签栏的样式 .. 在这个包装上添加一个 tab-bar ..

下面这个包装标签图标的包装上，加上一个 tab-bar__item--icon ..

然后在这两个按钮的包装上 .. 都添加一个 tab-bar__item .. 表示标签栏上的项目 .. className .. tab-bar__item ..

下面再去创建一个新的样式文件 .. 放在 assets .. styles 的下面 .. 名字是 _tab-bar.scss .. 在这个样式文件里去设计一下标签栏的样式 ..

我们也可以这样 .. 打开 app.scss .. 先把样式放在这个文件里面 ..

添加一个 .tab-bar .. 里面用 padding ，把内边距设置成 0 ..

标签栏上有一条边框 .. 可以把它去掉 .. 样式的选择器是 .tab-bar::after .. 因为这个边框的样式是在在元素的 ::after 伪元素上添加的 .. 把 border-top-width 设置成 0 ..

下面再添加一个 .tab-bar__item .. 先用 height 把高度设置成 100% .. flex 设置成 1 .. margin 是 0 ..

然后是 .tab-bar__item--icon 的样式 .. 用 padding-top 在图标元素的上面添加点内边距 .. 大小是 $spacing-v-lg

再上边再添加一个边框 .. border-top .. 1px solid .. 颜色是 $color-border-lighter ..

下面重新再设计一下在标签栏上的按钮 .. .tab-bar__item 下面的 .at-button .. border-radius ，圆角设置成 0 .. border 是 none .. font-size .. 字号是 $font-size-base ..

然后再修改一下标签栏上的 secondary 类型的按钮的颜色 .. .tab-bar__item 下面的 .at--button-secondary .. 先用 background 设置一下背景颜色 .. $color-grey-1 .. 再用 color 设置一下按钮文字的颜色 .. 设置成白色...

再预览一下这个标签栏 ..

下面把写好的这些样式放在 tab-bar 的样式表里 .. 在 app.scss 里面，导入 tab-bar .. 然后把样式粘贴到 tab-bar 样式表里 ..

再回到 app.scss ... 保存一下 ..