el-radio修改样式

要修改 `el-radio` 组件的样式，可以使用以下方法：

1. 使用 CSS 全局样式修改

可以在全局样式文件中添加以下 CSS 代码，来修改 `el-radio` 组件的样式：

/* 选中状态下的圆点颜色 */
.el-radio__input.is-checked .el-radio__inner {
  background-color: #ff0000; /* 修改为红色 */
}

/* 未选中状态下的圆点颜色 */
.el-radio__input:not(.is-checked) .el-radio__inner::after {
  background-color: #00ff00; /* 修改为绿色 */
}

/* 文字颜色 */
.el-radio__label {
  color: #0000ff; /* 修改为蓝色 */
}

2. 使用 `>>>` / `/deep/` / `::v-deep` 选择器修改

可以在组件所在的页面或组件内部的 `<style>` 标签中，使用 `>>>` / `/deep/` / `::v-deep` 选择器来修改 `el-radio` 组件的样式。例如：

<template>
  <div>
    <el-radio v-model="radio" label="1">选项一</el-radio>
    <el-radio v-model="radio" label="2">选项二</el-radio>
  </div>
</template>

<style scoped>
/* 使用 >>> 选择器修改 */
/* 选中状态下的圆点颜色 */
.el-radio__input.is-checked >>> .el-radio__inner {
  background-color: #ff0000; /* 修改为红色 */
}

/* 未选中状态下的圆点颜色 */
.el-radio__input:not(.is-checked) >>> .el-radio__inner::after {
  background-color: #00ff00; /* 修改为绿色 */
}

/* 文字颜色 */
.el-radio__label {
  color: #0000ff; /* 修改为蓝色 */
}

/* 使用 /deep/ 选择器修改 */
/* 选中状态下的圆点颜色 */
.el-radio__input.is-checked /deep/ .el-radio__inner {
  background-color: #ff0000; /* 修改为红色 */
}

/* 未选中状态下的圆点颜色 */
.el-radio__input:not(.is-checked) /deep/ .el-radio__inner::after {
  background-color: #00ff00; /* 修改为绿色 */
}

/* 文字颜色 */
.el-radio__label {
  color: #0000ff; /* 修改为蓝色 */
}

/* 使用 ::v-deep 选择器修改 */
/* 选中状态下的圆点颜色 */
.el-radio__input.is-checked ::v-deep .el-radio__inner {
  background-color: #ff0000; /* 修改为红色 */
}

/* 未选中状态下的圆点颜色 */
.el-radio__input:not(.is-checked) ::v-deep .el-radio__inner::after {
  background-color: #00ff00; /* 修改为绿色 */
}

/* 文字颜色 */
.el-radio__label {
  color: #0000ff; /* 修改为蓝色 */
}
</style>

以上就是两种修改 `el-radio` 组件样式的方法。其中，使用 CSS 全局样式修改的方法会影响到整个项目中所有使用到 `el-radio` 组件的样式，而使用 `>>>` / `/deep/` / `::v-deep` 选择器修改的方法只会影响到当前页面或组件中的 `el-radio` 组件的样式。