<template>
  <div class="navigation-container">
    <div class="navigation-header">沂水县智慧林业防灭火平台</div>
    <div class="navigation-logout" @click="logout">退出</div>
    <div class="navigation-body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
    logout() {
      localStorage.clear()
      this.$router.push('/login')
    },
  },
};
</script>

<style scoped>
.navigation-container {
  width: 100%;
  height: 100vh;
  background: #071216;
  position: relative;
}

.navigation-header {
  width: 100%;
  height: 100px;
  background-image: url(/img/navigation/header.png);
  background-size: 100% 100px;
  text-align: center;
  font-size: 40px;
  line-height: 90px;
  color: #fff;
}

.navigation-body {
  width: 100%;
  height: calc(100vh - 100px);
  padding-top: 100px;
  background-image: url(/img/navigation/container-bg.png);
  background-size: 100% 100%;
  overflow-y: auto;
}
.navigation-logout {
  position: absolute;
  background-image: url("/img/base-layer-button-bg.png");
  width: 80px;
  height: 30px;
  right: 20px;
  top: 30px;
  background-size: 100% 100%;
  text-align: center;
  line-height: 30px;
  color: #d2d2d2;
  cursor: pointer;
}
</style>
