assess-app/components/en-from/en-radio/en-radio.vue

<template>
	<view class="row-justify-sb center p-tb30 bor-bottom-1 size-28">
		<view class="wh-text"><text>{{name}}</text></view>
		<view class="row-c">
			<view class="row-c radiu-item m-l20" :class="{'active-radiu':radioValue === item.value}"
				v-for="(item,index) in list" :key="index" @click="onSelect(item.value)">
				<image class="wh-30 m-r20"
					:src="radioValue == item.value?'/static/img/information/correct.png':'/static/img/information/error.png'"
					mode="aspectFill"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			value: {
				type: Number,
				default: 0
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			value: {
				handler(value) {
					this.radioValue = value
				},
				immediate: true
			},
		},
		data() {
			return {
				radioValue: 0
			}
		},
		methods: {
			onSelect(value) {
				this.radioValue = value
				this.$emit('onSelect', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wh-text {
		width: 110rpx;
		text-align: justify;
		text-align-last: justify;
		vertical-align: top;
		height: 38rpx;
	}

	.wh-text:after {
		content: '';
		width: 110rpx;
		height: 0;
		display: inline-block;
		overflow: hidden;
	}

	.radiu-item {
		width: 140rpx;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
		border: 1rpx solid #CCCCCC;
	}

	.active-radiu {
		color: #0FB160;
		border: 1rpx solid #0FB160;
	}
</style>