VUE CSS 模板

提供常用的VUE CSS的模板样式

• 基础样式
• scrollbar

基础样式

<style scope lang="scss">
  $colors: (
      primary: #409EFF,
      success: #67C23A,
      warning: #E6A23C,
      danger: #F56C6C,
      info: #909399
  );

  /**
   *
   *title 标题下划线文字颜色
   *
   */
  @each $name, $color in $colors {
    .title-underline-#{$name}-cus {
      color: $color;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /**
   *
   *text 文字颜色
   *
   */
  @each $name, $color in $colors {
    .text-#{$name}-cus {
      color: $color;

      &:hover {
        color: lighten($color, 10%);
      }

      &:active {
        color: $color;
      }

      &:focus {
        color: $color;
      }
    }
  }


  /**
   *
   *div卡片盒子颜色
   *
   */
  @each $name, $color in $colors {
    .div-#{$name}-cus {
      background-color: lighten($color, 40%);
      border-color: lighten($color, 20%);
      color: $color;
    }
  }


  /**
   *
   *el-tag 换行显示文字
   *
   */
  .tag-auto-cus {
    white-space: normal;
    height: auto;
  }

  /**
   *
   * 水平垂直居中
   *
   */
  .absolute-55 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .flex-center-cus {
    display: flex;
    align-items: center;
    justify-content: center
  }

  /**
   *
   *text 文字省略
   *
   */
  .text-ellipsis-cus {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /**
    *
    *通用的禁用输入样式
    *
    */
  .disabled-input {
    //background-color: #fbfbfb !important;
    color: #606266 !important; /* 更改为与背景色相匹配的文本颜色 */
    cursor: not-allowed;
  }

  /* 应用到不同的输入类型 */
  .el-input.is-disabled .el-input__inner,
  .el-select .el-input.is-disabled .el-input__inner,
  .el-textarea.is-disabled .el-textarea__inner {
    @extend .disabled-input; /* 使用预处理器语法，比如 SASS或 LESS */
  }

  /**
   *
   *el-tree 节点由于滚动条被隐藏
   *
   */
  .el-tree {
    min-width: 100%;
    display: inline-block;
  }

  .el-tree-node__children {
    overflow: visible !important;
  }
</style>

scrollbar

<style scope lang="scss">
  /**
   * 修改滚动条颜色
   * -------------------------------------------------------------------------- */
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  /* 滚动条页面背景颜色*/
  ::-webkit-scrollbar-track {
    background-color: white;
  }

  /* 滚动条颜色*/
  ::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, .3);
    border-radius: 10px;
  }

  /* 鼠标悬停时滚动条颜色 */
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, .8);
  }
</style>