<template>
  <div class="classify">
    <div style="background-color: #FFFFFF;height: 30px;width: 100%;"></div>
    <!-- <van-nav-bar class="bar" left-arrow :title="$route.meta.title" @click-left="onClickLeft" @click-right="onClickRight" /> -->
    <van-nav-bar @click-left="onClickLeft" :title="title">
      <van-icon class="arrow-left" name="arrow-left" slot="left" />
    </van-nav-bar>
    
    <transition name="fade" appear>
      <router-view></router-view>
    </transition>
    <!-- <floatButton></floatButton> -->
  </div>
</template>

<script>
  import floatButton from '@/components/button/button';
  import {
    Icon
  } from 'vant';
  export default {
    name: 'default',
    components: {
      'floatButton':floatButton,
      [Icon.name]: Icon
    },
    data() {
      return {
        title: ''
      }
    },
    watch: {},
    computed: {},
    beforeCreate() {
      if(!localStorage.getItem('loginNum')){
        localStorage.setItem('loginNum', 1);
        window.location.reload();
      }
    },
    created() {
      this.title = this.$route.query.title;
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
        // if(!localStorage.getItem('loginNum')){
        //   localStorage.setItem('loginNum', 1);
        //   this.$router.go(-1);
        //   window.location.reload();
        // }else{
        //   this.$router.go(-1);
        // }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter,
  .fade-leave-to

  /* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0;
  }

  .arrow-left {
    color: #898989;
    font-size: 20px;
  }

  .classify {
    position: absolute;
    width: 100%;
    min-height: 100%;
    background-color: #0189FF;
  }
</style>