el-radio-group样式自定义

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tirq7Q04-1687314122585)(/images/essay/essay-0.1.png)]

        <el-form-item class="ai-tab-change" prop="period">
          <el-radio-group v-model="panelQueryParams.period" @change="getPanel()" size="mini">
            <el-radio-button label="全部" />
            <el-radio-button label="近三天" style="margin-left:15px" />
            <el-radio-button label="近一周" style="margin-left:15px" />
            <el-radio-button label="近一月" style="margin-left:15px" />
            <el-radio-button label="近一年" style="margin-left:15px" />
          </el-radio-group>
        </el-form-item>

<style lang="scss">
.ai-tab-change {
    //中部按钮样式
  .el-radio-button__inner {
    // width: 82px;
    // height: 36px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #4b4a4a;

    // font-size: 14px;
    // font-weight: 400;
    color: #1890ff;
    // line-height: 14px;
    outline: none;
    box-shadow: none;
  }
  //左右按钮样式
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 10px;
  }
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 10px;
  }
  //点击后样式变化
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    // background: #e6ecf2;
    // border: 1px solid #98b5ca;
    // color: #0d4376;
    // line-height: 14px;
    border-radius: 10px 10px 10px 10px;
    outline: none;
    box-shadow: none;
  }
}
</style>