Quick app bottom navigation bar

The code is as follows ：

<template>
  <div class="wrapper">
    <!-- tab Navigation  -->
    <div class="fix-bar">
      <!--  home page  -->
      <div class="bar index" @click="tabClick('Index')">
        <image
          class="img"
          src="/assets/img/shouye{
    {numIndex}}.png"
          style="object-fit: contain"
        ></image>
        <text class="text-index"> home page </text>
      </div>
      <!--  news  -->
      <div class="bar setting" @click="tabClick('News')">
        <image
          class="img"
          src="/assets/img/news{
    {numNews}}.png"
          style="object-fit: contain"
        ></image>
        <text class="text-index"> information </text>
      </div>
      <!--  my  -->
      <div class="bar setting" @click="tabClick('Mine')">
        <image
          class="img"
          src="/assets/img/wode{
    {numMine}}.png"
          style="object-fit: contain"
        ></image>
        <text class="text-index"> my </text>
      </div>

    </div>
  </div>
</template>

<script>
import router from '@system.router'

export default {
    
  data: {
    
    numIndex: 1,
    numNews: 0,
    numMine: 0,
  },
  onInit() {
    
    let pageName = this.$page.currentPageName || this.$page.name
    if (pageName === "pages/Index") {
    
      this.numIndex = 1
      this.numMine = 0
      this.numNews = 0
    } else if (pageName === "pages/News") {
    
      this.numIndex = 0
      this.numMine = 0
      this.numNews = 1
    } else if (pageName === "pages/Mine" || pageName === "pages/Setting" || pageName === "pages/Login") {
    
      this.numIndex = 0
      this.numMine = 1
      this.numNews = 0
    }
  },
  tabClick(type) {
    
    router.replace({
    
      uri: "pages/" + type
    })
  }
}
</script>

<style lang="less">

.wrapper {
    
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  flex-direction: column; /* Arrange vertically  */
  background: linear-gradient(
    to right,
    rgb(156, 203, 241) 500px,
    rgb(254, 255, 255) 99%
  );
  .fix-bar {
    
    height: 100px;
    position: fixed;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    .bar {
    
      width: 33%;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
    .img {
    
      width: 32px;
      height: 32px;
    }
    .text-index {
    
      color: rgba(54, 54, 54, 1);
      font-size: 20px;
    }
  }
}
</style>