iot-front-ui/src/views/HomeView.vue

<template>
  <div class="home">
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <HomeHeader :collapse.sync="collapse" :is-login="true" />
      </a-layout-header>
      <a-layout class="main_body">
        <a-layout-sider
          v-model="collapse"
          :trigger="null"
          width="200"
          style="background: #fff"
          :collapsible="true"
          :collapsed-width="60"
        >
          <HomeAside :collapse="collapse" />
        </a-layout-sider>
        <!-- 内容 -->
        <a-layout-content class="home-page">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import "@/style/common.css";

export default {
  name: "HomeView",
  components: {
    HomeHeader: () => import("@/components/home/HomeHeader.vue"),
    HomeAside: () => import("@/components/home/HomeAside.vue"),
  },
  data() {
    return {
      collapse: true, // 侧边栏是否收起
      asideWidth: "16%",
      contentWidth: "84%",
      contentHeight: 450,
    };
  },
  watch: {
    fold(val) {
      let app = this;
      setTimeout(() => {
        app.suitHeight();
      }, 100);
    },
  },
  mounted() {
    this.suitHeight();
  },
  methods: {
    suitHeight() {
      let app = this;
      this.$nextTick(() => {
        const height = document.getElementsByClassName("home")[0].clientHeight;
        app.contentHeight = height - 60 - 24;
        app.$forceUpdate();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;

  .header {
    height: 60px;
    padding: 0;
    line-height: 60px;
  }
  .main_body{
    height:calc(100vh - 60px);
  }

  .home-page {
    display: inline-block;
    background: #fff;
    margin: 0;
    transition: all 1s;
    overflow: hidden;
  }
}
</style>