tab选项卡使用el-radio

 

<div class="tab_container">
  <el-radio-group v-model="tab" size="small">
    <el-radio-button label="行程记录"/>
    <el-radio-button label="订单详情"/>
    <el-radio-button label="操作日志"/>
    <el-radio-button label="优惠券"/>
    <el-radio-button label="退款进度"/>
    <el-radio-button label="月卡用户查询"/>
    <el-radio-button label="用户登陆手机"/>
    <el-radio-button label="钱包余额"/>
    <el-radio-button label="亲密账户"/>
  </el-radio-group>
  <div class="tab_container_line"/>
  <coupon_comp v-if="tab==='优惠券'"/>
  <intimate_account_comp v-if="tab==='亲密账户'"/>
  <itenarty_record_comp v-if="tab==='行程记录'"/>
  <month_user_comp v-if="tab==='月卡用户查询'"/>
  <operation_log_comp v-if="tab==='操作日志'"/>
  <order_detail_comp v-if="tab==='订单详情'"/>
  <refunds_comp v-if="tab==='退款进度'"/>
  <user_login_phone_comp v-if="tab==='用户登陆手机'"/>
  <wallet_surplus_comp v-if="tab==='钱包余额'"/>
</div>

 

.tab_container {
  margin-top: 10px;
  background-color: white;

  &_line {
    border-bottom: 1px solid #DCDFE6;
    height: 1px;
    width: 98%;
    margin: 0 auto;
  }
}

 

/deep/ .el-radio-button, .el-radio-button__inner {
  margin-left: 20px;
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  color: #FFF;
  /*background-color: purple;*/
  /*border-color: purple;*/
  border-radius: 4px 4px 0px 0px;
  -webkit-box-shadow: -1px 0 0 0 #409EFF;
  box-shadow: 0px 0 0 0 #409EFF;
}

/deep/ .el-radio-button--small .el-radio-button__inner {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 0;
  /*border-left:1px solid gray;*/
  /*background: purple;*/
  border-left: 1px solid #DCDFE6;
  border-bottom: 0;
  border-radius: 4px 4px 0px 0px;
}