uni-app 切换按钮， 橙色的点击按钮

 这个按钮竟然是图片，我开始以为是原生的呢，难受，结果是以判断显示条件来显示哪个

<view class="">
                <view class="zhifu_zf" v-for="(payStypeVal, index) in payStype" :key="index" @click="zhifuChange(index)">
                    <label for=""><image :src="payStypeVal.image" mode="" class="zhifu_image"></image></label>
                    <label for="" class="zhifu_zf_zi">{{ payStypeVal.name }}</label>
                    <label for=""  class=""><image :src="isCheckState==index?iconsel: iconNosel" class="section" :class="isCheckState==index?iconsel: iconNosel" ></image></label>                
                    <view class="xian"></view>
                </view>
            </view>
import weixin from '../../static/kaika_xuanren/jiezhang-icon-wxzf@2x.png'
export default {
    data() {
        return {
            iconsel: "../../static/checkbox_button/jiezhang-icon-anniu-sel.png",
            iconNosel: "../../static/checkbox_button/jiezhang-icon-anniu-nor.png",
            isCheckState: 0,
            payStype:[
                { name:"微信支付", image:weixin},
                { name:"支付宝支付", image:require('@../../static/kaika_xuanren/jiezhang-icon-zfbzf@2x.png')},
                { name:"现金支付", image:'../../static/kaika_xuanren/jiezhang-icon-xjzf@3x.png'}
            ]
        };      
    }

　　　　methods: {
		zhifuChange(index){
			this.isCheckState = index;
		}
	}

　　

｝

css

.zhifu_image {
	height: 40upx;
	width: 40upx;
	margin-left: 10upx;
	margin-top: 30upx;
	position: relative;
	top: 10upx;
}
.zhifu_zf_zi{
	padding-left: 20upx;
	line-height: 60upx;
}
.zhifu_zf {
	margin-left: 30upx;
	position: relative;
	bottom: 10upx;
	width: 610upx;
}

.xian {
　　　　background-color: #e5e5e5;
　　　　width: 100%;
　　　　height: 1upx;
　　　　position: relative;
　　　　top: 10upx;
}

效果图

不要问我为什么第一段代码22行和23行中间多了一块， 我点击的方法忘放上去了， 代码放进去行号就从1开始了， 谁知道代码怎么能接着顺序啊！！！ 求告诉！！！