react+antd Radio单选图片样式

效果

<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版权协议,转载请附上原文出处链接和本声明。