<template>
  <div id="navbar">
    <!-- 导航上面一排 -->
    <div class="navbar-top navnav">
      <div>
        <router-link to="PoiceMessage">
          <img src="../../assets/image/navbar/政策文件.png" alt="" />
          <span>政策文件</span></router-link
        >
      </div>
      <div>
        <router-link to="">
          <img src="../../assets/image/navbar/核酸点分布.png" alt="" />
          <span>核酸点分布</span></router-link
        >
      </div>
      <div>
        <router-link to="">
          <img src="../../assets/image/navbar/隔离点分布.png" alt="" />
          <span>隔离点分布</span></router-link
        >
      </div>
    </div>
    <!-- 导航上面一排结束 -->
    <!-- 导航第二排 -->
    <div class="navbar-bottom navnav">
      <div>
        <router-link to="">
          <img src="../../assets/image/navbar/工作流程.png" alt="" />
          <span>工作流程</span></router-link
        >
      </div>
      <div>
        <router-link to="">
          <img src="../../assets/image/navbar/每日专报.png" alt="" />
          <span>每日专报</span></router-link
        >
      </div>
      <div>
        <router-link to="">
          <img src="../../assets/image/navbar/通报通告.png" alt="" />
          <span>通报通告</span></router-link
        >
      </div>
    </div>
    <!-- 导航第二排结束 -->
  </div>
</template>

<script>
export default {
  name: "NavBar",
  components: {},
  props:{},
  methods:{},
};
</script>


<style scoped>
#navbar {
  display: grid;
  background-color: #fff;
  border-radius: 2vw;
  height: 150px;
  padding-bottom: 3vw;
}
.navnav {
  display: flex;
  justify-content: space-evenly;
  padding-top: 2vw;
}
.navnav div {
  width: 33%;
  height: 60px;
}
.navnav div a {
  display: grid;
  text-align: center;
  height: 60px;
  color: rgb(51, 51, 51);
}
.navnav div a img {
  width: 10vw;
  padding-left: 11vw;
  padding-bottom: 2vw;
}
</style>