<template>
  <div class="layout">
    <div class="content">
      <slot />
    </div>
    <van-tabbar v-model="active" class="tab-bar" fixed active-color="#ee0a24" inactive-color="#000" safe-area-inset-bottom>
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="daily" icon="search">打卡</van-tabbar-item>
      <van-tabbar-item name="profile" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script type="module" lang="ts">
import {defineComponent, ref} from 'vue'
import {Tabbar, TabbarItem} from 'vant'


export default defineComponent({
  name: "layout",
  setup() {
    const active = ref<String>('home');
    return { active }
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
})
</script>

<style scoped lang="less">
.layout {
  width: 100vw;
  height: 100vh;

  .content {

  }
  .tab-bar {

  }
}


</style>
