<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import APP_CONFIG from "../public/config";

export default{
  name: 'App',
  mounted() {
    document.documentElement.style.setProperty('--TABLE_BUTTON_COLOR', APP_CONFIG.TABLE_BUTTON_COLOR);
    document.documentElement.style.setProperty('--BUTTON_THEME_COLOR', APP_CONFIG.BUTTON_THEME_COLOR);
    document.documentElement.style.setProperty('--BUTTON_BORDER_COLOR', APP_CONFIG.BUTTON_BORDER_COLOR);
    document.documentElement.style.setProperty('--BUTTON_FONT_COLOR', APP_CONFIG.BUTTON_FONT_COLOR);

  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-button--primary {
  background-color: var(--BUTTON_THEME_COLOR) !important;
  color: var(--BUTTON_FONT_COLOR) !important;
}
::v-deep .el-button--default {
  border-color: var(--BUTTON_BORDER_COLOR) !important;
}
::v-deep .el-button--default:hover {
  border-color: var(--BUTTON_THEME_COLOR) !important;
  color: var(--BUTTON_THEME_COLOR) !important;
}
::v-deep .el-table__cell {
  position: relative;
  .cell{
    position: relative;
  }
  .el-button--text {
    color: var(--TABLE_BUTTON_COLOR);
  }
  .el-button--text.is-disabled {
    color: #C0C4CC;
  }
  .el-button+.el-button{
    margin-left: 3px;
  }
  .el-button + .el-button::before {
    content: '';
    display: inline-block;
    width: 1px; /* 竖线的宽度 */
    height: 13px; /* 竖线的高度，可以自由调整 */
    background-color: #ccc; /* 竖线的颜色 */
    margin-right: 8px; /* 调整竖线与按钮的间距 */
    vertical-align: top; /* 垂直居中对齐 */
  }
}
</style>
