App.vue 1.92 KB
<template>
  <div id="appRoot">
    <template v-if="!$route.meta.public">
      <!-- Go to top -->
      <v-app id="inspire" class="app">
        <app-drawer class="app--drawer"></app-drawer>
        <v-content>
          <div class="page-wrapper">
            <!-- Header toolbar with Seacrh -->
            <app-toolbar class="app--toolbar"></app-toolbar>
            <router-view></router-view>
          </div>
          <!-- App Footer -->
          <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer>
        </v-content>
      </v-app>
    </template>
    <template v-else>
      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </template>
    <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
      {{ snackbar.text }}
      <v-btn dark flat @click.native="snackbar.show = false" icon>
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>
  </div>
</template>
<script>
import AppDrawer from "@/components/pageHeader/AppDrawer";
import AppToolbar from "@/components/pageHeader/AppToolbar";
import menu from "@/api/menu";
import AppEvents from "./event";

export default {
  components: {
    AppDrawer,
    AppToolbar
  },
  data: () => ({
    expanded: true,
    rightDrawer: false,
    snackbar: {
      show: false,
      text: "",
      color: ""
    }
  }),

  computed: {},

  created() {
    AppEvents.forEach(item => {
      this.$on(item.name, item.callback);
    });
    window.getApp = this;
  }
};
</script>


<style lang="stylus" scoped>
.setting-fab {
  top: 50% !important;
  right: 0;
  border-radius: 0;
}

.page-wrapper {
  min-height: calc(1200px - 64px - 50px - 81px);
}
</style>
<style>
.application {
  background-color: white !important;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
</style>