带背景色的tab切换

1，hetml部分

<template>
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"@change="agreeChange">
            <el-radio-button label="眼科" class="departments_yanke">眼科</el-radio-button>
            <el-radio-button label="耳鼻喉科" class="departments_rbhk">耳鼻喉科</el-radio-button>
            <el-radio-button label="五楼" class="departments_wl">五楼</el-radio-button>
            <el-radio-button label="急诊" class="departments_jz">急诊</el-radio-button>
            <el-radio-button label="眼耳鼻整型外科" class="departments_yebz">眼耳鼻整型外科</el-radio-button>
          </el-radio-group>
        
          <el-tabs :tab-position="tabPosition" style="height: 200px;">
            <el-tab-pane label="用户管理">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
          </el-tabs>
        </template>

2,样式设置

.departments_yanke .el-radio-button__inner{
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    -webkit-box-shadow: -1px 0 0 0 #409EFF;
    box-shadow: -1px 0 0 0 #409EFF;
      }
      .departments_yanke .el-radio-button__orig-radio:checked+.el-radio-button__inner{
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
        -webkit-box-shadow: -1px 0 0 0 #409EFF;
        box-shadow: -1px 0 0 0 #409EFF;
        width: 150px;
          }
      .departments_rbhk .el-radio-button__inner{
        color: #FFF;
        background-color: #178a13;
        border-color: #178a13;
        -webkit-box-shadow: -1px 0 0 0 #178a13;
        box-shadow: -1px 0 0 0 #178a13;
          }
          .departments_rbhk .el-radio-button__orig-radio:checked+.el-radio-button__inner {
            color: #FFF;
            background-color: #178a13;
            border-color: #178a13;
            -webkit-box-shadow: -1px 0 0 0 #178a13;
            box-shadow: -1px 0 0 0 #178a13;
            width: 150px;
              }
          .departments_wl .el-radio-button__inner{
            color: #FFF;
            background-color: #db4527;
            border-color: #db4527;
            -webkit-box-shadow: -1px 0 0 0 #db4527;
            box-shadow: -1px 0 0 0 #db4527;
              }   
              .departments_wl .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                color: #FFF;
                background-color: #db4527;
                border-color: #db4527;
                -webkit-box-shadow: -1px 0 0 0 #db4527;
                box-shadow: -1px 0 0 0 #db4527;
                width: 150px;
                  }   
              .departments_jz .el-radio-button__inner{
                color: #FFF;
                background-color: #E2AC25;
                border-color: #E2AC25;
                -webkit-box-shadow: -1px 0 0 0 #E2AC25;
                box-shadow: -1px 0 0 0 #E2AC25;
                  }  
                  .departments_jz .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                    color: #FFF;
                    background-color: #E2AC25;
                    border-color: #E2AC25;
                    -webkit-box-shadow: -1px 0 0 0 #E2AC25;
                    box-shadow: -1px 0 0 0 #E2AC25;
                    width: 150px;
                      }        
                  .departments_yebz .el-radio-button__inner{
                    color: #FFF;
                    background-color: #9d2bb3;
                    border-color: #9d2bb3;
                    -webkit-box-shadow: -1px 0 0 0 #9d2bb3;
                    box-shadow: -1px 0 0 0 #9d2bb3;
                      }
                      .departments_yebz .el-radio-button__orig-radio:checked+.el-radio-button__inner{
                        color: #FFF;
                        background-color: #9d2bb3;
                        border-color: #9d2bb3;
                        -webkit-box-shadow: -1px 0 0 0 #9d2bb3;
                        box-shadow: -1px 0 0 0 #9d2bb3;
                        width: 150px;
                          }