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">
//所有删除、设置按钮
.settingBtn {
  cursor: pointer;
  width: 24px;
  height: 24px;
  background: #EBEBED;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;

  > img {
    width: 14px !important;
    height: 14px !important;
  }
}

.deleBtn {
  cursor: pointer;
  margin-left: 10px;
  width: 24px;
  height: 24px;
  background: #EBEBED;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;

  > img {
    width: 14px !important;
    height: 14px !important;
  }
}
//所有单元格字号
.cell{
  font-size: 14px !important;
}
.el-form-item__content {
  display: block !important;
}
//所有按钮加号颜色
.el-button--primary.is-plain {
  color: #fff !important;
}

//所有dialog标题设置下线
.el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}

/* 定义滚动条样式 */
.scrollable-box {
  overflow: auto;
  box-sizing: border-box;
}

.scrollable-box:hover {
  overflow: auto;
}


.el-table__header-wrapper {
  background: #f7f7f7 !important;
}

.el-button--primary {
  background-color: #3877f5 !important;
}

.el-table {
  width: 100%;

  &::before {
    display: none;
  }

  //以下代码是实现边框效果
  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: 0px solid rgba(0, 0, 0, 0.1) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff;

    &:first-child {
      border-left: 0px solid rgba(0, 0, 0, 0.1) !important;
      // border-radius: 5px 0 0 5px;
    }
  }

  .el-table__row > td {
    font-size: 12px;
    color: #333333;

    &:last-child {
      border-right: 0px solid rgba(0, 0, 0, 0.1) !important;
      // border-radius: 0 5px 5px 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>