html:
<div class="divStart1"><span class="span2"></span><span class="haha">選擇指標:</span></div>
<radio-group class="rg" v-model="selectValue" @on-change="current_selected" type='button'>
<radio class="ha" v-for="list in typeList" :label="list"></radio>
</radio-group>
css:
.ivu-radio-group-button .ivu-radio-wrapper:first-child {
border-radius: 4px 0 0 4px;
border-left: 1px solid #dddee1;
margin-right: 20px;
border-radius: 20px;
}
.ivu-radio-group-button .ivu-radio-wrapper{
border-radius: 4px 0 0 4px;
border-left: 1px solid #dddee1;
margin-right: 20px;
margin-top: 10px;
border-radius: 20px;
font-size: 14px;
}
.ivu-radio-group-button .ivu-radio-wrapper-checked {
background: #34bae8;
border-color: #34bae8;
color: #fff;
-webkit-box-shadow: -1px 0 0 0 #34bae8;
box-shadow: -1px 0 0 0 #34bae8;
z-index: 1;
}
.ivu-radio-group-button .ivu-radio-wrapper:last-child{
border-radius: 4px 0 0 4px;
border-left: 1px solid #dddee1;
margin-right: 20px;
border-radius: 20px;
}
.ivu-radio-group-button .ivu-radio-wrapper:after, .ivu-radio-group-button .ivu-radio-wrapper:before {
content: '';
display: block;
position: absolute;
width: 0px;
height: 0%;
left: -1px;
top: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.rg{
margin-left: 25px;
margin-top: 16px;
}
结果: