
<Radio.Group onChange={onChange} value={value}>
{radioArr.map(item => (
<div className={classnames(styles.selectEveryBox, styles[item.img])}>
<Radio value={item.value}/>
</div>
))}
</Radio.Group>
css
:global {
.ant-radio-inner {
width: 320px;
height: 220px;
position: absolute;
border-radius: 8px;40px;
}
.ant-radio-inner::after {
width: 60px;
height: 60px;
top: -28px;
border-radius: 50%;
right: -28px;
left: 288px;
}
.ant-radio-inner::before{
position: absolute;
top: -12px;
right: -15px;
font-family: "iconfont" !important;
font-size: 30px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e60d";//icon 图标 (对勾)
color: #fff;
z-index: 1;
}
}
.xuanduoren {
:global {
.ant-radio-inner {
background: url('../../../../assets/xuanduoren.png') no-repeat 60px 40px;
}
}
}
.allpeople {
:global {
.ant-radio-inner {
background: url('../../../../assets/allpeople.png') no-repeat 60px 40px;
}
}
}
.xuanzewenzhang {
:global {
.ant-radio-inner {
background: url('../../../../assets/xuanwenzhang.png') no-repeat 60px 40px;
}
}
}
版权声明:本文为gd81325原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。