ChuangHengWx/components/QuestionItem/index2.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_box" v-for="(ua,ui) in item.userAnswer" :key="ui">
			<div class="memo">{{assessmentMethodCfg[ua.assessmentMethod]|''}}</div>
			<div class="lb_answers">
				<u-radio-group
					:value="ua.answer"
					placement="column"
					@change="e=>radioChange(e,ua.assessmentMethod,item.id)"
				>
					<view class="la_item" v-for="(pre,idx) in ua.questionOption" :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>
	</div>
</template>

<script>
	export default {
		name: "QuestionItem",
		props: {
			item: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		},
		data(){
			return {
				assessmentMethodCfg:{
					'1':'您对团队当前在此项陈述上所描述的实际表现的同意程度为：',
					'2':'此项陈述对该团队当前的重要性： '
				}
			}
		},
		methods: {
			radioChange(value,assessmentMethod,id) {
				this.$emit('change', {
					value,
					assessmentMethod,
					id,
					index: this.index
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.li_box{
		width: 100%;
		padding: 32rpx 34rpx;
		box-sizing: border-box;
		&.active{
			border: 2rpx dotted #FD4F66;
			padding: 30rpx 32rpx;
		}
		.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_box{
			width: calc(100% - 40rpx);
			margin: 30rpx 20rpx 0;
			.memo{
				background: rgba(118, 30, 106, .2);
				border-radius: 4rpx;
				padding: 7rpx 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #761E6A;
				line-height: 51rpx;
				margin-top: 40rpx;
			}
			.lb_answers{
				width: 100%;
				box-sizing: border-box;
				border: 1rpx solid #E5E7EB;
				margin-top: 30rpx;
				.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>