fe-manage/src/App.vue

<template>
  <div id="container">
    <nav-top />
    <div style="display: flex">
      <nav-left />
      <div style="flex: 1; display: flex; flex-direction: column; width: 0">
        <open-pages />
        <bread-crumb />
        <main>
          <a-config-provider :locale="zhCN">
            <router-view />
          </a-config-provider>
        </main>
      </div>
    </div>
  </div>
</template>
<script>
import { computed, defineComponent } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import NavLeft from "@/components/NavLeft";
import NavTop from "@/components/NavTop";
import OpenPages from "@/components/OpenPages";
import BreadCrumb from "@/components/BreadCrumb";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import * as api from "./api/index1";
export default defineComponent({
  components: {
    NavLeft,
    NavTop,
    OpenPages,
    BreadCrumb,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    // console.log("router", router.getRoutes(), route);
    const routes = computed(() => {
      return router.getRoutes().filter((e) => e.meta?.isLink);
    });

    const currentRouteName = computed(() => route.name);
    //获取组织树
    const orgTree = () => {
      api
        .orgtree()
        .then((res) => {
          console.log("获取集团组织成功", res);
          if (res.status === 200) {
            store.commit("getOrgtreeList", res.data.data);
          }
        })
        .catch((err) => {
          console.log("获取集团组织失败", err);
        });
    };
    orgTree();
    return {
      routes,
      name: currentRouteName,
      zhCN,
    };
  },
});
</script>
<style lang="scss">
#app {
  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
  // sans-serif;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

#container {
  margin: 0;
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 1000px;
  min-height: 100%;
  background-color: rgba(245, 247, 250, 1);

  main {
    height: 0;
    flex: 1 1 auto;
    // flex-shrink: 0;
    display: flex;
    overflow-y: auto;
    // display: flex;
    // flex: 1 1 auto;
    width: calc(100% - 40px);
    // margin-bottom: 20px;
    margin: 0px 20px 20px 20px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
  }
  // @media screen and (max-width: 1366px) {
  //   .cmMain {
  //     width: 750px;
  //   }
  // }
  // @media screen and (min-width: 1367px) and (max-width: 1680px) {
  //   .cmMain {
  //     width: 1010px;
  //   }
  // }
  // @media screen and (min-width: 1681px) and (max-width: 1920px) {
  //   .cmMain {
  //     width: 1270px;
  //   }
  // }
  // @media screen and (min-width: 1921px) {
  //   .cmMain {
  //     width: 1270px;
  //   }
  // }
}
</style>