|
@@ -12,38 +12,50 @@
|
|
>
|
|
>
|
|
<div v-if="false" class="text-[24px] ml-[20px] w-[110px]">第 {{ index + 1 }} 题:</div>
|
|
<div v-if="false" class="text-[24px] ml-[20px] w-[110px]">第 {{ index + 1 }} 题:</div>
|
|
<template v-if="[0, 1, 2, 3].includes(showData.tempLevel)">
|
|
<template v-if="[0, 1, 2, 3].includes(showData.tempLevel)">
|
|
- <div class="ml-[20px] title-right">
|
|
|
|
- <div class="flex flex-row flex-wrap gap-[32px]">
|
|
|
|
- <div
|
|
|
|
- v-for="(img, imageIndex) in item.titleImages"
|
|
|
|
- :key="imageIndex"
|
|
|
|
- class="height-[125px] flex flex-row items-center"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="w-full">
|
|
|
|
+ <div class="flex-center flex-row flex-wrap gap-[32px]">
|
|
|
|
+ <div v-for="(img, imageIndex) in item.titleImages" :key="imageIndex" class="flex flex-row items-center">
|
|
<div
|
|
<div
|
|
- class="w-[200px] h-[200px] flex-center cursor-pointer pos-relative"
|
|
|
|
|
|
+ class="flex-center cursor-pointer pos-relative"
|
|
:class="{
|
|
:class="{
|
|
|
|
+ 'w-[600px] h-[600px]': item.titleImages!.length <= 2,
|
|
|
|
+ 'w-[520px] h-[520px]': item.titleImages!.length === 3,
|
|
|
|
+ 'w-[400px] h-[400px]': item.titleImages!.length === 4,
|
|
|
|
+ 'w-[320px] h-[320px]': item.titleImages!.length === 5,
|
|
|
|
+ 'w-[260px] h-[260px]': item.titleImages!.length === 6,
|
|
|
|
+ 'w-[270px] h-[270px]': [7, 8, 9].includes(item.titleImages!.length),
|
|
select: parseInt(<string>showData.list[index].answer) === imageIndex,
|
|
select: parseInt(<string>showData.list[index].answer) === imageIndex,
|
|
'icon-outline': showData.tempLevel === 0
|
|
'icon-outline': showData.tempLevel === 0
|
|
}"
|
|
}"
|
|
@click="choiceClick0(index, imageIndex)"
|
|
@click="choiceClick0(index, imageIndex)"
|
|
>
|
|
>
|
|
- <svg-icon :icon-class="img" class="text-[200px]" />
|
|
|
|
|
|
+ <svg-icon
|
|
|
|
+ :icon-class="img"
|
|
|
|
+ :class="{
|
|
|
|
+ 'text-[600px]': item.titleImages!.length <= 2,
|
|
|
|
+ 'text-[520px]': item.titleImages!.length === 3,
|
|
|
|
+ 'text-[400px]': item.titleImages!.length === 4,
|
|
|
|
+ 'text-[320px]': item.titleImages!.length === 5,
|
|
|
|
+ 'text-[260px]': item.titleImages!.length === 6,
|
|
|
|
+ 'text-[280px]': [7, 8, 9].includes(item.titleImages!.length)
|
|
|
|
+ }"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 中间的占位圆圈, 用来表示填写对比符号 -->
|
|
<!-- 中间的占位圆圈, 用来表示填写对比符号 -->
|
|
<div
|
|
<div
|
|
v-if="showData.tempLevel === 1 && item.titleImages && imageIndex < item.titleImages.length - 1"
|
|
v-if="showData.tempLevel === 1 && item.titleImages && imageIndex < item.titleImages.length - 1"
|
|
- class="b-[#D96E7E] b-[6px] w-[60px] h-[60px] border-rd-[50%] ml-[32px]"
|
|
|
|
|
|
+ class="b-[#D96E7E] b-[6px] w-[180px] h-[180px] border-rd-[50%] ml-[32px]"
|
|
></div>
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 图片下方的数字按钮 -->
|
|
<!-- 图片下方的数字按钮 -->
|
|
- <div v-if="item.choices" class="w-[400px] h-[60px] flex-center flex-row text-[32px] mt-[16px]">
|
|
|
|
|
|
+ <div v-if="item.choices" class="w-full h-[110px] flex-center flex-row justify-around text-[32px] mt-[40px]">
|
|
<div
|
|
<div
|
|
v-for="(choice, choiceIndex) in item.choices"
|
|
v-for="(choice, choiceIndex) in item.choices"
|
|
:key="choiceIndex"
|
|
:key="choiceIndex"
|
|
- class="choice-div m-x-[12px] w-[120px] h-[44px] p-x-[16px] p-y-[6px] line-height-[32px] text-center bor-radius-8 b-[#D96E7E59] b-[1px]"
|
|
|
|
|
|
+ class="choice-div m-x-[12px] w-[240px] h-[110px] p-x-[16px] p-y-[6px] line-height-[98px] text-center text-[90px] font-600 bor-radius-8 b-[#D96E7E59] b-[1px]"
|
|
:class="{ select: showData.list[index].answer === choice + '' }"
|
|
:class="{ select: showData.list[index].answer === choice + '' }"
|
|
@click="choiceClick1(index, choice + '')"
|
|
@click="choiceClick1(index, choice + '')"
|
|
>
|
|
>
|
|
@@ -185,7 +197,6 @@ const setData = (data: any) => {
|
|
const endChildLoop = () => {
|
|
const endChildLoop = () => {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
let answeredCount = showData.list.filter((item) => item.choiceClickFlag).length
|
|
let answeredCount = showData.list.filter((item) => item.choiceClickFlag).length
|
|
- console.log('answeredCount === showData.list.length: ', answeredCount === showData.list.length)
|
|
|
|
if (answeredCount === showData.list.length) {
|
|
if (answeredCount === showData.list.length) {
|
|
$emits('endLoop', toRaw(showData.list))
|
|
$emits('endLoop', toRaw(showData.list))
|
|
}
|
|
}
|