css - Vuejs - 添加三分之一后，Svgs 部分丢失

Question

老实说，我不太确定如何问这个问题，但最近我开始使用 VueJS，这太不可思议了！话虽如此，在学习了 Vue 之后，我可能已经失去了一些 CSS 技能；特别是在弹性方面。我不记得以前有过这个问题，但是一旦我在我的页面上添加了第三个 SVG，前两个几乎完全消失了，但最新的完全可见。

关于这里到底会发生什么的任何想法？我没有使用 SVG 加载器或任何东西，而是使用 v-else-if 来根据名称显示 svg；也许这就是问题所在？（如果是这样的话，之前显示的两个都很好，直到我添加了第三个。）

干杯!

注意：我没有添加 SVG 代码，因为我不想在这个问题中显示太多代码，但它是一个简单的汉堡菜单 svg、搜索 svg 和 iphone 的顶部导航内容。

应用程序.vue

<template>
  <div id="app">
    <div class="container">
      <top-nav-bar></top-nav-bar>
    </div>
  </div>
</template>

<script>
import TopNavBar from './components/molecules/TopNavBar.vue'
export default {
  name: 'App',
  components: { TopNavBar },
}
</script>

<style lang="sass">
#app
  font-family: Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-align: center
  color: #2c3e50

.container
  position: relative
  margin: 0 auto
  border: 2px solid black
  background-color: white
  border-radius: 40px
  width: 414px
  height: 896px
</style>

零件：

<template>
  <div class="container">
    <icons name="nav-info" />
    <icons name="hamburger" />
    <icons name="search" />
  </div>
</template>

<script>
import Icons from '../atoms/Icons.vue'

export default {
  components: { Icons },
}
</script>

<style lang="sass" scoped>
.container
  display: flex
  flex-direction: column
  align-items: center

  margin: 0
</style>

标签： cssvue.jssvgflexbox