.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; } }