<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; }