@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './footer.scss';
@import './searchbar.scss';

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

div:focus {
  outline: none;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
  }
}
.hide {
  display: none !important;
}
.ImportentText {
  font-style: normal;
  color: #ffd200;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-tooltip__popper {
  max-width: 60%;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app {
  .app-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 1280px;
    background-image: radial-gradient(
      ellipse farthest-corner at 0px 0px,
      #6895fe 0%,
      #2362f6 100%
    );
  }
  .topTitle {
    display: flex;
    align-items: center;
    height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
  }
  .body-container {
    display: flex;
    height: calc(100vh - #{$topBar-height});
  }
  // 主体区域
  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - #{$topBar-height});
    transition: margin-left 0.28s;
    background-color: #eee;
    // main-container全局样式
    .app-main {
      width: calc(100vw - #{$sideBar-width});
      height: calc(100vh - #{$topBar-height} - 30px);
    }
    .main-wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      // &::before {
      // content: '';
      // width: 100%;
      // height: 5px;
      // position: absolute;
      // top: 0;
      // left: 0;
      // z-index: 1;
      // box-shadow: inset 0 5px 10px #eee;
      // // background-image: linear-gradient(180deg, #eee, transparent);
      // }
      .main-wrap-inner {
        height: calc(100% - #{$footer-height});
        display: flex;
        flex-direction: column;
        &.noFooter {
          height: 100%;
          .table-wrap {
            margin-bottom: 0;
          }
        }
      }
      .table-wrap {
        flex: 1;
        overflow: auto;
        margin: 12px 12px 22px;
      }
    }
  }
}
@media screen and (min-width: $bigScreenWidth) {
  $sideBar-width: 132px;
  $topBar-height: 72px;
  $footer-height: 48px;
  #app {
    .topTitle {
      display: flex;
      align-items: center;
      height: $topBar-height;
    }
    .body-container {
      height: calc(100vh - #{$topBar-height});
    }
    // 主体区域
    .main-container {
      height: calc(100vh - #{$topBar-height});
      .app-main {
        width: calc(100vw - #{$sideBar-width});
        height: calc(100vh - #{$topBar-height} - 30px);
      }
      .main-wrap {
        .main-wrap-inner {
          height: calc(100% - #{$footer-height});
          overflow: auto;
          &.noFooter {
            height: 100%;
          }
        }
        .table-wrap {
          margin: 16px 20px 22px;
        }
      }
    }
  }
}
