u-view radio样式

radio样式写不出 真的想了好久都做不出

<u-form-item :label-position="labelPosition" label="性别" label-width="160" :label-style="labelStyle">
                    <u-radio-group v-model="form.sex">
                        <u-button class="radios" v-for="(item, index) in sexList" :key="index" :custom-style="customStyle" :name="item.name" @click="sexChange(index)">
                            <u-icon :name="item.icon"></u-icon>
                            {{ item.text }}
                        </u-button>
                    </u-radio-group>
    </u-form-item>
data() {
            return {
customStyle:{
                    width: '77px',
                    height: '34px',
                    background: '#F0F0F3',
                    boxShadow: 'inset 1px 1px 1px 1px rgba(174, 174, 192, 0.15), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.7)',
                    borderRadius: '6px 6px 6px 6px',
                    opacity: 1,
                },
sexList: [{
                        name: -1,
                        text: '未知',
                        icon:'plus-people-fill'
                    },
                    {
                        name: 1,
                        text: '男生',
                        icon:'man'
                    },
                    {
                        name: 0,
                        text: '女生',
                        icon:'woman'
                    },
                ],
}}

这是我自己敲出来的结果

一开始用的是uview的radio 发现radio图标更改不了 就换了button 换了button后点击按钮样式又出不来 也没有出现更改效果

我想要达到的结果

class动态绑定，比如选中的v-for里面的索引等于当前索引 class就为true

先看效果：

一、问题分析
uview的单选组件，有图标，是字体图标，换颜色，UI设计师能接收，优先选这个方案
如果一定需要一摸一样，那可以用自定义图片或背景实现。
按我的理解，题主是想自定义选中图标，和选中样式
二、思路如下：
官方组件是u-radio，那就用u-radio，和事件 @change="radioChange"，返回性别对应的name的-1,1,0
遍历层为u-radio，给它加cass（如icon+下标） 先加默认图标，然后改变事件radioChange 将name的值付给active，样式覆盖默认图标即可

图标为题主原图图标，清晰度不高，现用