// 全局scss
$green: #12b085;
$orange: #f6b37f;
$red: #f67f7f;
$color-333: #333;
$color-666: #666;
html {
  &::-webkit-scrollbar {
    // 滚动条整体样式
    width: 0 !important; // 竖向滚动条宽度
    height: 0 !important; // 横向滚动条高度
  }
}
.loading-box {
  width: 100%;
  height: 100%;
}
// 全局混入样式
@mixin triangle {
  // 三角
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 10px solid transparent;
  border-left-color: red; // 上 下 左 右 皆可
}
@mixin half_triangle {
  // 半三角
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-width: 100px 50px 0 0; // 左 或 右
  border-style: solid;
  border-color: transparent red transparent transparent; // 左 或 右
}

@mixin f_c1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin f_c2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin f_ac1 {
  display: flex;
  align-items: center;
}
@mixin f_ac2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@mixin pa_c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@mixin pa_xc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// css in js
:export {
  fontSize: 19;
}

// 公共样式
// ::-webkit-scrollbar {
//   width: 0;
//   height: 0;
// }

.dis_hidden {
  display: none !important;
}
.visi_hidden {
  visibility: hidden !important;
}
.fff {
  color: #fff !important;
}
.webkit-scroll-line {
  &::-webkit-scrollbar {
    // 滚动条整体样式
    width: 6px !important; // 竖向滚动条宽度
    height: 0 !important; // 横向滚动条高度
  }
  &::-webkit-scrollbar-thumb {
    // 滚动条内滑块样式
    background-color: #6d9dbc !important;
    border-radius: 2px !important;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道样式
    background-color: transparent !important;
  }
}

// -------------------------------------------
.is-big {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: url('~@/assets/images/common/is_big.png') no-repeat center / 100%
    100%;
  cursor: pointer;
}

.is-show {
  position: absolute;
  left: 1460px;
  top: 0;
  width: 40px;
  height: 40px;
  background: url('~@/assets/images/flood/is_show.png') no-repeat center / 100%
    100%;
  cursor: pointer;
  &.hidden {
    left: 1870px;
  }
}

#big-chart {
  width: 100%;
  height: 100%;
  background-color: rgba(96, 255, 246, 0.1);
}

.big-panel-btn-box {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 20px;
  margin: 15px 0;
  button {
    height: 20px;
    padding: 0 10px;
    color: #fff;
    font-size: 14px;
    background-color: rgba(96, 255, 246, 0.5);

    &:hover {
      background-color: rgba(227, 133, 0, 0.6);
    }
    &.btnActive {
      background-color: rgba(227, 133, 0, 0.6);
    }
  }
}

.el-select.big-panel-select {
  position: absolute;
  z-index: 8;
  right: 10px;
  top: 10px;
  width: 100px;
  height: 20px;
  // 输入框
  .el-input {
    // input输入框
    input {
      width: 100px;
      height: 20px;
      padding: 0 15px 0 15px;
      background-color: rgba(96, 255, 246, 0.3);
      border-color: rgba(96, 255, 246, 0.3);
      color: #fff;
      font-size: 14px;
      &::placeholder {
        font-size: 14px;
      }
    }
    .el-input__suffix {
      display: flex;
      align-items: center;
    }
  }
  & .el-input.is-focus input {
    border-color: #01fff5;
  }
  // 选择框的下拉弹出框
  .el-select-dropdown {
    background-color: #1f6681;
    border-color: #1f6681;
    // 弹出框的数据列表
    .el-select-dropdown__list {
      // 弹出框的单条数据
      .el-select-dropdown__item {
        display: flex;
        align-items: center;
        height: 24px;
      }
    }
    // 经过选项时选项的背景色
    .el-select-dropdown__item.hover {
      background-color: #39a0bb;
    }
    // 弹出框三角形
    .popper__arrow {
      left: 30px !important;
      &::after {
        top: 0;
        border-bottom-color: #1f6681;
      }
    }
    // 选项文字
    span {
      color: #fff;
      font-size: 14px;
    }
    // 已选中的选项
    &.is-multiple .el-select-dropdown__item.selected {
      background-color: #39a0bb;
      color: #fff;
    }
  }
}

.big-panel-title-btn-box {
  display: flex;
  position: absolute;
  top: 10px;
  right: 0;
  height: 20px;
  button {
    width: 70px;
    height: 100%;
    margin-right: 10px;
    font-size: 14px;
    background-color: rgba(96, 255, 246, 0.5);
    color: #fff;
    &.active {
      background-color: rgba(227, 133, 0, 0.5);
    }
  }
  button:first-child {
    margin-left: 0;
  }
}
