<template>
  <div id="app" :class="changeBackground">
    <!-- 头部菜单 -->
    <TopMenu1 v-if="isBottom == 1" />
    <TopMenu2 v-if="isBottom == 2" />
    <TopMenu3 v-if="isBottom == 3" />
    <!-- router-view -->
    <transition>
      <router-view class="router-view" />
    </transition>
  </div>
</template>

<script>
import TopMenu from './components/TopMenu'
import TopMenu1 from './components/TopMenu1'
import TopMenu2 from './components/TopMenu2'
import TopMenu3 from './components/TopMenu3'

export default {
  name: 'App',
  data () {
    return {
    }
  },
  components: {
    TopMenu,
    TopMenu1,
    TopMenu2,
    TopMenu3
  },
  computed: {
    showLoading () {
      return this.$store.state.showLoading
    },
    isBottom () {
      if (this.$route.path == '/index1') {
        return 1
      }
      if (this.$route.path == '/index2') {
        return 2
      }
      if (this.$route.path == '/index3') {
        return 3
      }
    },
    changeBackground () {
      if (this.$route.path == '/index1') {
        return 'background1'
      }
      if (this.$route.path == '/index2') {
        return 'background2'
      }
      if (this.$route.path == '/index3') {
        return 'background3'
      }
    }
  },
  methods: {

  }
}
</script>

<style>
/* 路由切换动画 */
.router-view {
  position: absolute;
  left: 0;
  top: 120px;
  bottom: 0;
  width: 100%;
  /* padding-top: 65px; */
  /* transition: all 0.2s ease; */
}
#app {
  width: 100%;
  height: 100%;

  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
  /*-webkit-font-smoothing: antialiased;*/
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  /*color: #2c3e50;*/
}
.background1{
  background: url("./assets/images/background1.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.background2{
  background: url("./assets/images/background2.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.background3{
  background: url("./assets/images/background3.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
</style>