ihotel-manage/admin/src/layout/index.vue

<template>
  <div class="box">
    <el-container style="height: 100%">
      <el-aside>
        <NavbarItem></NavbarItem>
      </el-aside>
      <el-container>
        <el-header>
          <Navbar></Navbar>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavbarItem from "@/layout/components/NavbarItem";
import Navbar from "@/layout/components/Navbar";
import Cookies from "js-cookie";
export default {
  name: "Layout",
  components: { NavbarItem, Navbar },
  data() {
    return {};
  },
  mounted() {
    this.API.systemnotice.systemnoticeList({ pageSize: 100 }).then((res) => {
      let number = 0;
      res.data.list.forEach((item) => {
        if (item.readFlag == 0) {
          number += 1;
        }
        item.createTime = item.createTime.replace("T", " ");
      });
      this.$store.dispatch("inform/setreadFlag", number);
      if (number == 0) {
        this.$store.dispatch("inform/setreadFlag", "");
      }
    });
  },
  methods: {},
};
</script>


<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;

  .el-header {
    color: #333;
    text-align: center;
    width: 1660px;
    height: 96px !important;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 10px rgba(41, 109, 227, 0.1);
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    height: 100%;
    width: 260px !important;
    background: rgba(41, 109, 227, 1);
  }

  .el-main {
    background: #fff;
    padding: 0;
    margin: 14px 0 0 25px;
  }
}
</style>