<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div id="top"></div>
  </div>
</template>

<script>
// 组件
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
// 工具
import { scrollToID } from "../../utils";

Vue.use(Toast);
export default {
  data() {
    return {
      inPage: false,
    };
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
    }),
  },

  methods: {
    ...mapActions(["setCharacters"]),

    go(url) {
      this.$router.push(url);
    },
  },
  created() {},
  mounted() {
    this.inPage = true;
    scrollToID("top");
  },
};
</script>

<style lang="scss" scoped>
.page {
  transform: translateX(30%);
  opacity: 0;
  transition: all 1s;
  &.active {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
