<template>
  <div id="app" class="app">
    <div class="body">
      <iframe :src="`./${active}.html`" frameborder="0"></iframe>
    </div>
    <van-tabbar
      v-model="active"
      active-color="#e42417"
      inactive-color="#aab3ba"
      @change="change"
    >
      <van-tabbar-item name="partyAffairs" icon="newspaper-o">
        首页
      </van-tabbar-item>
      <van-tabbar-item name="study" icon="notes-o">推荐</van-tabbar-item>
      <van-tabbar-item name="partyHome" icon="records">
        移动党校
      </van-tabbar-item>
      <van-tabbar-item name="service" icon="orders-o"> 服务 </van-tabbar-item>
      <van-tabbar-item name="myHome" icon="home-o"> 我的 </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar as vanTabbar, TabbarItem as vanTabbarItem } from "vant";
import "vant/lib/tabbar-item/style";
import "vant/lib/tabbar/style";
export default {
  name: "app",
  data: function() {
    return {
      active: "study"
    };
  },
  created() {
    if (sessionStorage.active) this.active = sessionStorage.active;
  },
  methods: {
    change() {
      sessionStorage.active = this.active;
    }
  },
  mounted() {},
  beforeDestroy: function() {},
  components: { vanTabbar, vanTabbarItem }
};
</script>
<style lang="scss">
.app {
  .body {
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
