tmzn-weihe/src/assets/scss/index.scss

// 相对路径
@import '@/assets/scss/reset';
@import '@/assets/scss/variables';
@import '@/assets/scss/mixins';
@import '@/assets/scss/px-to-rem';
@import '@/assets/scss/map';

html,
body {
  font: 14px/1.5 'Microsoft YaHei', tahoma, arial, Hiragino Sans GB, '\5b8b\4f53', sans-serif;
  background-color: #f3f3f3;
  height: 100%;
}

#nprogress {
  position: relative;
  z-index: 3000;
}

.clearfix {
  display: inline-block;
  &::after {
    display: block;
    content: '';
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
  }
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.el-select-dropdown {
  // z-index: 3000 !important;
}

.el-textarea__inner {
  font-family: inherit;
}

.el-table .cell,
.el-table th div {
  // TODO: FIXME: .el-table .cell, th div 均设置了text-overflow: ellipsis, 部分场景（table-column为非文字slot，如按钮，checkbox，且没有设置宽度）在窗口宽度较小时会出现 `...`
  text-overflow: clip !important;
}

input:-ms-input-placeholder {
  color: #c0c4cc;
}

.el-message-box {
  .el-message-box__title {
    font-size: 16px;
  }
}

$spaceamounts: (0, 2, 5, 10, 15, 20);
$sides: (
  '': 'all',
  't': 'top',
  'b': 'bottom',
  'l': 'left',
  'r': 'right'
);

@each $space in $spaceamounts {
  @each $prefix, $value in $sides {
    $property: if($prefix == '', '', -#{$value});
    .m#{$prefix}#{$space} {
      margin#{$property}: #{$space}px !important;
    }
    .p#{$prefix}#{$space} {
      padding#{$property}: #{$space}px !important;
    }
  }
}

.mg-t-20 {
  margin-top: 20px !important;
}
.mg-l-10 {
  margin-left: 10px !important;
}

.el-dialog {
  z-index: 4001 !important;
  .el-dialog__body {
    padding: 10px 15px;
  }
}

html#baidu-map-hack {
  height: auto;
  overflow: auto;
  body {
    height: auto;
    #app {
      height: auto;
      #layout {
        #nav {
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          z-index: 2999;
        }
        .main-wrapper {
          padding-top: 60px;
          height: auto !important;
          #sidebar {
            position: fixed;
            width: $sidebarMainMenuWidth;
            left: 0;
            bottom: 0;
            top: 60px;
            z-index: 10;
            &.expand {
              width: $sidebarWidth;
              & + .main {
                margin-left: $sidebarWidth;
              }
            }
          }
          .main {
            margin-left: $sidebarMainMenuWidth;
          }
        }
      }
    }
  }
}

.BMap_cpyCtrl,
.anchorBL {
  display: none !important;
}

::-webkit-scrollbar {
  width: 4px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.cameras-notification.el-notification {
  width: 300px;
  padding: 8px 25px 8px 10px;
  .el-notification__group {
    margin-left: 8px;
  }
  .el-icon-warning {
    color: #f56c6c;
  }
  .el-notification__closeBtn {
    top: 8px;
    right: 8px;
  }
  .el-notification__icon {
    height: 14px;
    width: 14px;
    font-size: 14px;
    line-height: 21px;
  }
  .el-notification__title {
    font-size: 14px;
    font-weight: normal;
    color: #606266;
  }
  .el-notification__content {
    margin: 0;
    font-size: 14px;
    p {
      // @include ellipsis;
      width: 220px;
      .link {
        padding-left: 8px;
        color: #409eff;
        cursor: pointer;
        &:hover {
          opacity: 0.8;
        }
        &.active {
          opacity: 1;
        }
      }
    }
  }
}

.text-link {
  padding-right: 8px;
  color: #409eff;
  cursor: pointer;
  &.disabled {
    cursor: not-allowed;
    color: #909399;
  }
  &.danger {
    color: $--color-danger;
  }
  &.warning {
    color: $--color-warning;
  }
  &:hover {
    opacity: 0.8;
  }
  &.active {
    opacity: 1;
  }
}

.u-popper-select {
  background-color: rgba(79, 159, 255, 0.3);
  border-color: #4f9fff;
  .el-select-dropdown__item {
    color: #fff;
    padding-left: px-to-rem(10);
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(79, 159, 255, 0.4);
    color: #fff;
  }
}

.f-select .el-select-dropdown__item {
  padding: px-to-rem(0) px-to-rem(12) !important;
  &.selected {
    color: #ff6a6c;
    background-color: #fff0f0;
  }
  &.hover {
    background-color: #fff0f0;
  }
}
.v-date-picker {
  .el-date-table td.end-date span,
  .el-date-table td.start-date span {
    background-color: #ff6a6c;
  }
  .el-date-table td.in-range div,
  .el-date-table td.in-range div:hover,
  .el-date-table.is-week-mode .el-date-table__row.current div,
  .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: #fff0f0;
  }
  .el-date-table td.today span,
  .el-select-dropdown__item.selected {
    color: #ff6a6c;
  }
}
.v-pageination {
  .el-select-dropdown__item.selected {
    color: #ff6a6c;
  }
}

.marsGreenGradientPnl {
  height: 20px;
  background: #172537;
  border-radius: 4px;
  color: #e8f2fe;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.art-video-player {
  width: 100% !important;
}