el-tabs的CSS样式修改

两层tab：即政企版/公众版为第一层tab，日活跃用户统计/月活跃用户统计为第二层tab。

原默认效果如下，产品认为没有区分，需要改成不同的样式，没有UI，自己随便改的，记录下：

原效果

修改后

代码

<div>
  <el-tabs type="card" v-model="activeName" :stretch="false">
    <el-tab-pane label="日活跃用户统计" :name="activeType.DAY">
      <activityDateIndex ref="dayRef" v-if="activeName === activeType.DAY" :activeName="activeName" :prepareType="props.prepareType"></activityDateIndex>
    </el-tab-pane>
    <el-tab-pane label="月活跃用户统计" :name="activeType.MONTH">
      <activityDateIndex ref="monthRef" v-if="activeName === activeType.MONTH" :activeName="activeName" :prepareType="props.prepareType"></activityDateIndex>
    </el-tab-pane>
  </el-tabs>
</div>

/* 面板样式 */
::v-deep .el-tabs__header {
  background-color: rgba(240, 239, 239, 0.938) !important;
  padding: 6px 10px !important;
  width: 228px !important;
}

/* 面板内文字区域高度 */
::v-deep .el-tabs {
  --el-tabs-header-height: 40px
}

/* 选中面板的样式 */
::v-deep .el-tabs__item.is-active {
  color: rgb(39, 39, 39) !important;
  background-color: rgb(255, 255, 255) !important; // 会导致card下边框的横线消失
}

/* 去除tab的灰色横条*/
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/*去掉切换tab时底部的蓝色下划线*/
::v-deep .el-tabs__active-bar {
  background-color: transparent !important;
}

/* 内容文字 */
::v-deep .el-tabs__item {
  padding: 10px !important; //内容与padding框的距离
  font-size: 12px !important; //更改选项卡标签的字体大小
}