一、效果如图
二、实现
修改单选样式
//html
<div class="radio-wrap">
<input type="radio" v-model="pointer" :value="item" :id="'selectDoll_'+index" :disabled="item.money > rechargeMoney">
<label :for="'selectDoll_'+index" @click="judgeMoney(item)"></label>
</div> //less
<style type="text/css" scoped lang="less">
@bf: 108rem;
.radio-wrap{
position: absolute;
top:100/@bf;
right:50/@bf;
height: 70/@bf;
width: 70/@bf;
line-height: 50/@bf;
vertical-align: middle;
input[type="radio"] {
width: 55/@bf;
height: 55/@bf;
opacity: 0;
cursor: pointer;
}
label{
position: absolute;
left: 0;
top: 0;
width: .61rem;
height:.6rem;
border-radius: 50%;
border: 1px solid #999999;
}
input:checked+label {
background: #fde117;
border: 1px solid #999999;
}
input:checked+label::after {
position: absolute;
content: "";
width: .13rem;
height: .3rem;
top: .07rem;
left: .2rem;
background: #fde117;
border: 2px solid #333;
border: 1px solid #333;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}
</style>