<template>
  <div>
    <header-nav :issearch="true" :needgetuser="true">
      <template slot="header-title">寄托天下论坛</template>
    </header-nav>
    <nav>
      <router-link to="/recommend">推荐阅读</router-link>
      <router-link to="/collect">收藏的版块</router-link>
      <router-link to="/allSections">全部版块</router-link>
    </nav>
    <!-- 发帖子 -->
    <div class="publish flexcolumn flexcenter">
      <svg-icon icon-class="add" class-name="icon-publish"></svg-icon>
      发帖
    </div>
    <router-view />
  </div>
</template>

<script>
import HeaderNav from "@/components/HeaderNav";
export default {
  name: "Index",
  data() {
    return {
      favorite: [],  // 收藏
      recommend: [], // 推荐
    };
  },
  mounted() {
    this.init()
  },
  components: {
    HeaderNav,
  },
  methods: {
    init() {
      this.$http.post("/api/home").then(res => {
        let data = res.data
        this.favorite = data.favorite
        this.recommend = data.recommend
        
      })
    },
  }
};
</script>

<style lang="scss">
// 导航
nav {
  display: flex;
  justify-content: center;
  align-self: center;
  border-radius: 2.56rem;
  height: 1.28rem;
  line-height: 1.28rem;
  flex-direction: row;
  background-color: rgba(235, 235, 235, 1);
  margin: 1.5rem 0.35rem 0.2rem;

  a {
    flex: 1;
    font-size: 0.4rem;
    border-radius: 2.56rem;
    text-align: center;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    color: #555;

    &.router-link-exact-active {
      color: #000;
      font-weight: bolder;
      background-color: rgba(80, 227, 194, 1);
    }
  }
}

// 发帖按钮
.publish {
  background-color: rgba(253, 223, 109, 1);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 2.56rem;
  position: fixed;
  right: 0.4rem;
  bottom: 20%;
  font-size: 0.32rem;
  z-index: 6;
  color: #000;

  .icon-publish {
    width: 0.4rem;
    height: 0.4rem;
    margin-bottom: 0.1rem;
  }
}
</style>