更新 问卷 第三层 题号样式

h5/pages/main/question/src/question.vue

@@ -42,6 +42,70 @@
 		$emit('setValue', index, value)
 	}
 
+	const convertToRoman = (num) => {
+		const romanNumerals = [{
+				value: 1000,
+				symbol: 'M'
+			},
+			{
+				value: 900,
+				symbol: 'CM'
+			},
+			{
+				value: 500,
+				symbol: 'D'
+			},
+			{
+				value: 400,
+				symbol: 'CD'
+			},
+			{
+				value: 100,
+				symbol: 'C'
+			},
+			{
+				value: 90,
+				symbol: 'XC'
+			},
+			{
+				value: 50,
+				symbol: 'L'
+			},
+			{
+				value: 40,
+				symbol: 'XL'
+			},
+			{
+				value: 10,
+				symbol: 'X'
+			},
+			{
+				value: 9,
+				symbol: 'IX'
+			},
+			{
+				value: 5,
+				symbol: 'V'
+			},
+			{
+				value: 4,
+				symbol: 'IV'
+			},
+			{
+				value: 1,
+				symbol: 'I'
+			}
+		];
+		let roman = '';
+		for (let i = 0; i < romanNumerals.length; i++) {
+			while (num >= romanNumerals[i].value) {
+				num -= romanNumerals[i].value;
+				roman += romanNumerals[i].symbol;
+			}
+		}
+		return roman;
+	}
+
 	onMounted(() => {
 		mountedAction()
 	})
@@ -53,7 +117,10 @@
 		]">
 			<view class="question_title_wrapper">
 				<text class="must_dot_wrapper">*</text>
-				<text v-if="$props.index.includes('-')" class="question_index_wrapper">({{ $props.index.split('-')[1] }}).</text>
+				<text v-if="$props.index.includes('-')" class="question_index_wrapper">
+					<text v-if="$props.index.split('-').length === 2">({{ $props.index.split('-')[1] }}).</text>
+					<text v-else>{{ convertToRoman(Number($props.index.split('-')[$props.index.split('-').length - 1])) }}.</text>
+				</text>
 				<text v-else class="question_index_wrapper">{{ $props.index }}.</text>
 				<text class="question_question_wrapper">{{ $props.info['question'] }}</text>
 			</view>
@@ -67,12 +134,27 @@
 	</view>
 </template>
 <style scoped>
+	.circle_question_wrapper {
+		display: inline-block;
+		width: 24rpx;
+		height: 24rpx;
+		font-size: 12rpx;
+		border-radius: 999rpx;
+		border: 1rpx #333333 solid;
+		display: flex;
+		align-items: center;
+		line-height: 26rpx;
+		justify-content: center;
+		font-weight: bold;
+	}
+
 	.question_question_wrapper {
 		margin-left: 10rpx;
 	}
 
 	.question_index_wrapper {
 		margin-left: 5rpx;
+		display: flex;
 	}
 
 	.must_dot_wrapper {