shu-c-view/packages/theme-default/password-check.less

rollup 打包vue组件库框架

.base-password-style {
  .strength-meter-bar {
    position: relative;
    height: 6px;
    margin: 10px auto 6px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 6px;

    // 增加的伪元素样式代码
    &::before,
    &::after {
      position: absolute;
      z-index: 10;
      display: block;
      width: 20%;
      height: inherit;
      content: '';
      background-color: transparent;
      border-color: #fff;
      border-style: solid;
      border-width: 0 5px;
    }

    &::before {
      left: 20%;
    }

    &::after {
      right: 20%;
    }

    // 增加的伪元素样式代码

    &--fill {
      position: absolute;
      width: 0;
      height: inherit;
      background-color: transparent;
      border-radius: inherit;
      transition: width 0.5s ease-in-out, background 0.25s;

      &[data-score='0'] {
        width: 20%;
        background-color: darken(#e74242, 10%);
      }

      &[data-score='1'] {
        width: 40%;
        background-color: #e74242;
      }

      &[data-score='2'] {
        width: 60%;
        background-color: #efbd47;
      }

      &[data-score='3'] {
        width: 80%;
        background-color: fade(#55d187, 50%);
      }

      &[data-score='4'] {
        width: 100%;
        background-color: #55d187;
      }
    }
  }
}