<template>
        <div class='flex items-center justify-around pb-3 pt-3  rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' >
            <div class='flex flex-col items-center' @click="setNav('Home')">
                <app-icon name='icon-BOSS-yingyeting-chushi' size='24px' :color='actived==="Home"?"#0078FF":"#FFF"'></app-icon>
                <div class='mt-2' :class='actived==="Home"?" text-font-blue":" text-white"'>大厅</div>
            </div>
            <div class='flex flex-col items-center relative' @click="goNFT">
                <div class=' absolute -top-12 rounded-full p-5  bg-app-red mx-auto  shadow-nav text-center'>
                    <app-icon name='icon-NFTfahang' size='28px' color='#fff' ></app-icon>
                </div>
                <div class='mt-8 text-font-red'>发行NFT</div>
            </div>
            <div class='flex flex-col items-center' @click="setNav('Mine')">
                <app-icon name='icon-wodexuanzhong' size='24px' :color='actived==="Mine"?"#0078FF":"#FFF"'></app-icon>
                <div class='mt-2' :class='actived==="Mine"?" text-font-blue":" text-white"'>我的</div>
            </div>
        </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'layout_one',
  data(){
      return{
          actived:this.$route.name
      }
  },
  components:{
      'app-icon':()=>import('@/components/common/Icon.vue')
  },
  methods:{
      goNFT(){
          this.$store.commit('app/TOGGLE_OVERLAY')
      },
      setNav(item:any){
          if(this.$route.name != item){
              this.actived = item
              this.$router.push(`/${item}`)
          }
      }
  }
});
</script>

<style lang="less">

</style>
