要写成图1这样的,但是实际上选框是图二这样的,该怎么调整呢
图一
图二
<div class="fdsyrcheckcrs">
<span @click=crsRadio('1')>
<span id="is_crs_renewal" :class="iscrs === '1' ? 'option_icon_true' : 'option_icon_false'"></span>
<span>全部是仅为中国税收居民</span>
</span>
</div>
<div class="fdsyrcheckcrs">
<span @click=crsRadio('2')>
<span id="is_crs_renewal" :class="iscrs === '2' ? 'option_icon_true' : 'option_icon_false'"></span>
<span>部分是非居民或既是中国税收居民又是其他国家(地区)税收居民</span>
</span>
</div>
<div class="fdsyrcheckcrs">
<span @click=crsRadio('3')>
<span id="is_crs_renewal" :class="iscrs === '3' ? 'option_icon_true' : 'option_icon_false'"></span>
<span>全部是非居民或既是中国税收居民又是其他国家(地区)税收居民</span>
</span>
</div>
<div class="fdsyrcheckcrs">
<span @click=istabcrs('crsRadio4')>
<span id="crsRadio4" class="faoption_icon_false"></span>
<span class="option_title">本人确认上述信息的真实、准确和完整,且当这些信息发生变更时,将在30日内通知贵机构,否则本人承担由此造成的不利后果</span>
</span>
</div>
crsRadio:function(value){
this.iscrs = value;
},
.fdsyrzdcrs{
background: #fff;
line-height:1rem;
padding:0.4rem 0;
box-sizing: border-box;
}
.fdsyrcheckcrs{
margin-top: 0.5rem;
margin-left: 0.4rem;
width: 95%;
height: 100%;
display: flex;
position: Static;
padding-bottom: 0.5rem;
border-width:0.1px;
}
.option_icon_true {
display: inline-block;
width: 0.84rem;
height: 0.84rem;
background: url(../images/icon_check.png) no-repeat 0 100%;
background-size:cover;
vertical-align: text-top;
}
.option_icon_false {
display: inline-block;
width: 0.84rem;
height: 0.84rem;
/*margin-right: 0.2rem;*/
background: url(../images/icon_check.png) no-repeat;
background-size: cover;
vertical-align: text-top;
}
.faoption_icon_false {
display: inline-block;
top: 50%;
left: -1rem;
width: 0.8rem;
height: 0.8rem;
margin-top: -0.4rem;
background: url(../images/icon_checked.png) no-repeat;
background-size: 100% 100%;
}
.faoption_icon_false {
background: url(../images/icon_unchecked.png) no-repeat;
background-size: 100% 100%;
}