fe-manage/src/App.vue

<template>
  <a-config-provider :locale="locale">
    <div id="container" v-if="!isLogin">
      <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 v-slot="{ Component }">
                <keep-alive :include="isInclude">
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </a-config-provider>
          </main>
        </div>
      </div>
    </div>
    <div id="container" v-if="isLogin">
      <router-view />
    </div>
  </a-config-provider>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useStore, createStore } 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 api1 from "@/api/index1";
import * as api2 from "@/api/index";
import { request } from "@/api/request";
import { USER_PERMISSION, VALIDATE_TOKEN } from "@/api/apis";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

dayjs.locale("zh-cn");

const store = useStore();
const isLogin = ref(false);
const isInclude = computed(() => store.state.isInclude);
console.log("版本3.3.2------------");

// 监听关闭浏览器
let time1 = ref(0);
let time2 = ref(0);

onMounted(() => {
  window.addEventListener("beforeunload", (e) => beforeunloadHandler(e));
  window.addEventListener("unload", (e) => unloadHandler(e));
});

//添加监听事件
function beforeunloadHandler() {
  time1.value = new Date().getTime();
}

function unloadHandler() {
  time2.value = new Date().getTime() - time1.value;
  if (time2.value <= 5) {
    store.replaceState(createStore({ state: { openpages: null } }).state);
    localStorage.removeItem("openpages");
  }
}
</script>
<style lang="scss">
#app {
  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%;
}

.ant-table-wrapper {
  .ant-table-content {
    .ant-table-thead th {
      background-color: #eff4fc !important;
      text-align: center !important;
    }
  }

  .ant-table-tbody
    > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
    > td {
    background: #f6f9fd;
  }
}

.ant-btn-link {
  padding: 0 !important;
}

#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);
  }

  .cus-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    border: 1px solid #4ea6ff;
    border-radius: 8px;
    background: #4ea6ff;
    cursor: pointer;
    color: #fff;
  }

  .white {
    // background: #fff;
    // color: #4ea6ff;
  }

  .cus-input {
    height: 40px;
    border-radius: 8px;
  }

  .cus-select {
    height: 40px;
    border-radius: 8px;
  }

  // @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>