vitevue32/packages/styles/components/radio.scss

.m-radio{
  color: #606266;
  font-weight: 500;
  line-height: 1;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  font-size: 14px;
  margin-right: 30px;
  cursor: pointer;
  .m-radio__input{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    outline: none;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    .m-radio__inner{
      border: 1px solid #dcdfe6;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      background-color: #fff;
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
      position: relative;
      &::after{
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    }
    .m-radio__original{
      opacity: 0;
      outline: none;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
    }
  }
  .is-checked{
    .m-radio__inner{
      border-color: #409eff;
      background: #409eff;
    }
  }
  .is-checked.is-disabled{
    .m-radio__inner{
      &::after{
        background-color: #c0c4cc;
      }
    }
  }
  // 禁用
  .is-disabled{
    cursor: no-drop;
    color: #c0c4cc;
    .m-radio__inner{
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      cursor: no-drop;
    }
  }
  .m-radio__label{
    padding-left: 8px;
    font-size: 14px;
  }
}

// 禁用
.is-disabled{
  cursor: no-drop;
  color: #c0c4cc;
}
// 边框
.is-bordered{
  padding: 12px 20px 0 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  height: 40px;
}
.is-bordered.is-checked{
  border-color: #409eff;
  color: #409eff;
}
.is-bordered.is-disabled{
  cursor: not-allowed;
  border-color: #ebeef5;
  .m-radio__label{
    color: #c0c4cc;
  }
}