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; //更改选项卡标签的字体大小
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值