ChuangHengWx/components/QuestionItem/index.vue

<template>
	<div class="li_box" :class="{'active':item.warn}">
		<div class="lb_title adf">
			<span>*</span>
			{{index+1}}. {{item.question}}
		</div>
		<div class="lb_answers">
			<u-radio-group
				:value="item.answer"
				placement="column"
				@change="radioChange"
			>
				<view class="la_item" v-for="(pre,idx) in item.userAnswer" :key="idx">
					<u-radio
						:label="pre.questionOption"
						:name="pre.questionOption"
						activeColor="#833478"
						size="36rpx"
						iconSize="32rpx"
						labelSize="32rpx"
					></u-radio>
				</view>
			</u-radio-group>
		</div>
	</div>
</template>

<script>
	export default {
		name: "QuestionItem",
		props: {
			item: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		},
		methods: {
			radioChange(value) {
				this.$emit('change', {
					value: value,
					index: this.index
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.li_box{
		width: 100%;
		padding: 32rpx 34rpx;
		box-sizing: border-box;
		&.active{
			border: 2rpx dotted #FD4F66;
		}
		.lb_title{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #252525;
			line-height: 48rpx;
			span{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FD4F66;
				line-height: 51rpx;
			}
		}
		.lb_answers{
			width: calc(100% - 40rpx);
			margin: 30rpx 20rpx 0;
			box-sizing: border-box;
			border: 1rpx solid #E5E7EB;
			.la_item{
				padding: 34rpx 24rpx;
				border-bottom: 1rpx solid #E5E7EB;
				&:last-child{
					border-bottom: none;
				}
			}
		}
		.la_inp{
			width: 100%;
			height: 96rpx;
			border-radius: 24rpx;
			border: 1rpx solid #DFCDDC;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
		}
		.la_warn{
			padding: 7rpx 23rpx;
			margin-top: 20rpx;
			background: #FFECEC;
			.lw{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background: #FD4F66;
			}
			span{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FD4F66;
				line-height: 51rpx;
				margin-left: 17rpx;
			}
		}
	}
</style>