<template>
  <div>
    <div class="top_header_root">
      <div class="header_html_root">
        <router-link class="header_html_item" :to="{ path: '/users' }"
          >用户信息</router-link
        >
        <router-link class="header_html_item" :to="{ path: '/history' }"
          >发展历程</router-link
        >
        <router-link class="header_html_item" :to="{ path: '/service' }"
          >服务案例</router-link
        >
        <router-link class="header_html_item" :to="{ path: '/school' }"
          >学校图标</router-link
        >
        <router-link class="header_html_item" :to="{ path: '/trial' }"
          >申请试用</router-link
        >
        <router-link class="header_html_item" :to="{ path: '/news' }"
          >新闻资讯</router-link
        >
        <router-link class="header_html_item" :to="{ path: '/log' }"
          >登录日志</router-link
        >
        <div class="log_out" @click="toLogOut()">退出</div>
      </div>
    </div>
    <div class="layout_out">
      <div class="layout_main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    toLogOut() {
      localStorage.setItem("xhWebAdminUser", "");
      this.$router.replace({ path: "/login" });
    }
  }
};
</script>

<style scoped lang="less">
html,
body {
  margin: 0;
  padding: 0;
}
.top_header_root {
  background-color: #2d8cf0;
}
.header_html_root {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 80%;
  font-size: 16px;
  line-height: 50px;
  font-weight: bold;
  box-sizing: border-box;
}
.header_html_root .header_html_item {
  padding: 0 10px;
  color: #fff;
  // border-bottom: 4px solid transparent;
  cursor: pointer;
}
.header_html_root .log_out {
  padding: 0 10px;
  color: #ff001e;
  // border-bottom: 4px solid transparent;
  cursor: pointer;
}
.header_html_root .header_html_item:hover,
.header_html_root .header_html_item.router-link-active {
  background-color: #065fbe;
  // border-bottom: 4px solid #2d8cf0;
}
.layout_out {
  max-height: calc(100vh - 54px);
  overflow: auto;
}
.layout_main {
  margin: 0 auto;
  width: 80%;
}
</style>
