middleground_code_v2/src/App.vue

<template>
  <div id="app">
    <!-- <keep-alive> -->
    <router-view></router-view>
    <!-- </keep-alive> -->
    <!-- // 需要缓存的组件 -->
    <!-- <keep-alive >
		<router-view v-if="$route.meta.keepAlive"></router-view>
	</keep-alive> -->
    <!-- // 不需要缓存的组件 -->
    <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
  </div>
</template>

<script>
import { setTheme } from "@/utils/setTheme";
export default {
  name: "App",
  data() {
    return {
      chalk: "", // content of theme-chalk css
      theme: "",
      routerAlive: true,
    };
  },
  provide() {
    return {
      routerRefresh: this.routerRefresh,
    };
  },
  mounted() {
    setTheme(this.$store.state.settings.theme);
    window.addEventListener(
      "hashchange",
      () => {
        let currentPath = window.location.hash.slice(1);
        if (this.$route.path !== currentPath) {
          this.$router.push(currentPath);
        }
      },
      false
    );
  },
  methods: {
    routerRefresh() {
      this.routerAlive = false;
      this.$nextTick(() => {
        this.routerAlive = true;
      });
    },
  },
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE;
      },
    };
  },
  activated() {
    // 使用 Vue.nextTick 延迟执行代码
    this.$nextTick(() => {
    });
  },
  deactivated() {
    // 使用 Vue.nextTick 延迟执行代码
    this.$nextTick(() => {
    });
  },
};
</script>
<style lang="scss">
 .loadingclass {
  z-index: 9999999 !important;
 }
// 全局滚动条样式调整
::-webkit-scrollbar {
  width: 5px;
  /*滚动条宽度*/
  height: 5px;
  /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: 0px 1px 3px #f1f1f1 inset;
  /*滚动条的背景区域的内阴影*/
  border-radius: 10px;
  /*滚动条的背景区域的圆角*/
  // background-color: #f1f1f1; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  box-shadow: 0px 1px 3px #a8a8a8 inset;
  /*滚动条的内阴影*/
  border-radius: 10px;
  /*滚动条的圆角*/
  background-color: #e0e0e0;
  /*滚动条的背景颜色*/
}
</style>
<style lang="scss">
.el-table__header-wrapper {
  border-radius: 10px !important;
  background: #f7f7f7 !important;
}
.el-table__body-wrapper {
  //   border-radius: 15px !important;
  //   margin-top: 5px;
}
.el-table__body {
  padding-top: 5px;
}
.el-table {
  width: 100%;
  margin-bottom: 20px;
  &::before {
    display: none;
  }
  .el-table__body {
    //-webkit-border-horizontal-spacing: 13px;  // 水平间距
    -webkit-border-vertical-spacing: 7px; // 垂直间距 设置的是行间距
  }
  //以下代码是实现边框效果
  thead th {
    font-size: 14px;
    color: #575757;
    &:nth-last-child(2) {
      border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
      border-radius: 0 5px 5px 0;
      right: 1px;
    }
  }
  thead th,
  .el-table__row td {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    &:first-child {
      border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
      // border-radius: 5px 0 0 5px;
      border-radius: 10px 0 0 10px;
    }
  }
  .el-table__row > td {
    font-size: 12px;
    color: #333333;
    &:last-child {
      border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
      // border-radius: 0 5px 5px 0;
      border-radius: 0 10px 10px 0;
      right: 1px;
    }
  }
  .el-table__body tr:hover > td.el-table__cell {
    background-color: rgba(0, 110, 255, 0.05);
  }
  .el-table__fixed::before {
    display: none;
  }
}
</style>