<template>
  <div>
    <top-bar>
      <div style="flex: 10;display: flex;align-items:center;justify-content:center;height: 50px;font-size: 2rem;">
        <span id="topPageName">首页</span>
      </div>
    </top-bar>
    <div style="position: absolute;right: 5px;top: 2px">
      <van-button icon="home-o" style="background-color: #a5a5a5" @click="routeJump('main')"></van-button>
    </div>
  </div>
</template>

<script>
import TopBar from './TopBar'
// import TopBarItem from './TopBarItem'
export default {
  name:"MainTopBar",
  components:{
    TopBar,
    // TopBarItem
  },
  methods: {
    routeJump(val){
      if (val.indexOf('/') !== -1) {
        val = val.substring(1)
      }
      this.$router.push({
        path: '/' + val
      })
    }
  }
}
</script>

<style>
#top-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e7e7e7;
  border-top: 2px #ccc;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  box-shadow:0px -1px 1px rgba(100,100,100,.2) ;
}
</style>
