|
@@ -4,12 +4,7 @@
|
|
|
>
|
|
|
<div class="title text-[36px]">{{ titles[showData.tempLevel] }}</div>
|
|
|
<div class="w-full h-[800px] pos-relative" :class="{ 'flex-row-div': showData.tempLevel === 4 }">
|
|
|
- <div
|
|
|
- v-for="(item, index) in showData.list"
|
|
|
- :key="index"
|
|
|
- class="flex flex-row items-center mt-[35px]"
|
|
|
- :class="{ 'half-width': showData.tempLevel === 4 }"
|
|
|
- >
|
|
|
+ <div v-for="(item, index) in showData.list" :key="index" class="flex flex-row items-center mt-[35px]">
|
|
|
<div v-if="false" class="text-[24px] ml-[20px] w-[110px]">第 {{ index + 1 }} 题:</div>
|
|
|
<template v-if="[0, 1, 2, 3].includes(showData.tempLevel)">
|
|
|
<div class="w-full">
|
|
@@ -23,7 +18,7 @@
|
|
|
'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),
|
|
|
+ 'w-[270px] h-[270px]': [7, 8, 9, 10].includes(item.titleImages!.length),
|
|
|
select: parseInt(<string>showData.list[index].answer) === imageIndex,
|
|
|
'icon-outline': showData.tempLevel === 0
|
|
|
}"
|
|
@@ -37,7 +32,7 @@
|
|
|
'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)
|
|
|
+ 'text-[280px]': [7, 8, 9, 10].includes(item.titleImages!.length)
|
|
|
}"
|
|
|
/>
|
|
|
</div>
|
|
@@ -83,23 +78,23 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-if="showData.tempLevel === 4">
|
|
|
- <div class="w-full h-full relative title-right">
|
|
|
+ <div class="w-full h-full relative title-right overflow-hidden flex flex-row items-center">
|
|
|
<!-- 苹果树 -->
|
|
|
- <svg-icon icon-class="icon-tree" class="text-[520px] pos-item-0" />
|
|
|
- <div class="w-[212px] float-right mr-[50px]">
|
|
|
+ <svg-icon icon-class="icon-tree" class="text-[1020px] pos-item-0" />
|
|
|
+ <div class="w-[880px] float-right ml-[1080px]">
|
|
|
<!-- 目标数字 -->
|
|
|
- <div class="text-center text-[42px] m-y-[16px]">
|
|
|
+ <div class="text-center text-[120px] m-y-[16px]">
|
|
|
{{ showData.list[index].correctValue }}
|
|
|
</div>
|
|
|
<!-- 苹果位置区域:使用绝对定位让苹果"长"在树上,点击后,去除绝对定位,苹果位置变化,"回到篮子里面" -->
|
|
|
<div
|
|
|
- class="w-full h-[120px] p-y-[13px] p-x-[10px] bor-radius-8 flex flex-row flex-wrap flex-content-start b-[#D96E7E59] b-[1px]"
|
|
|
+ class="w-full h-[280px] p-y-[13px] p-x-[10px] bor-radius-8 flex flex-row flex-wrap flex-content-start b-[#D96E7E59] b-[1px]"
|
|
|
>
|
|
|
<svg-icon
|
|
|
- v-for="(apple, appIndex) in appleItems[index]"
|
|
|
+ v-for="(apple, appIndex) in appleItems"
|
|
|
:key="`pos-item-${appIndex}`"
|
|
|
icon-class="icon-apple"
|
|
|
- class="text-[38px] pos-item cursor-pointer mb-[8px]"
|
|
|
+ class="text-[110px] pos-item cursor-pointer mb-[8px]"
|
|
|
:class="apple ? `pos-item-${appIndex + 1}` : ''"
|
|
|
@click="choiceClick3(index, appIndex)"
|
|
|
/>
|
|
@@ -107,7 +102,14 @@
|
|
|
|
|
|
<!-- 结果标识区域 -->
|
|
|
<div class="w-full h-[80px] flex-center flex-row justify-around">
|
|
|
- <el-button type="danger" size="large" plain @click="choiceClick3Submit(index)">提交</el-button>
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ class="p-x-45px p-y-18px text-34px h-70px"
|
|
|
+ plain
|
|
|
+ @click="choiceClick3Submit(index)"
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
<div class="w-[36px] h-[36px] flex-center">
|
|
|
<transition name="el-fade-in">
|
|
|
<svg-icon
|
|
@@ -192,6 +194,10 @@ const setData = (data: any) => {
|
|
|
item.choiceClickFlag = false // 是否点击过选项 false表示未点击,true表示点击过
|
|
|
return item
|
|
|
})
|
|
|
+
|
|
|
+ if (showData.tempLevel === 4) {
|
|
|
+ appleItems.value = [true, true, true, true, true, true, true, true, true, true]
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const endChildLoop = () => {
|
|
@@ -229,13 +235,9 @@ const choiceClick1 = (index: number, answer: string) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const appleItems = ref([
|
|
|
- [true, true, true, true, true, true, true, true, true, true],
|
|
|
- [true, true, true, true, true, true, true, true, true, true],
|
|
|
- [true, true, true, true, true, true, true, true, true, true]
|
|
|
-])
|
|
|
+const appleItems = ref([true, true, true, true, true, true, true, true, true, true])
|
|
|
const choiceClick3 = (index: number, appleIndex: number) => {
|
|
|
- appleItems.value[index][appleIndex] = !appleItems.value[index][appleIndex]
|
|
|
+ appleItems.value[appleIndex] = !appleItems.value[appleIndex]
|
|
|
}
|
|
|
|
|
|
const choiceClick3Submit = (index: number) => {
|
|
@@ -243,7 +245,7 @@ const choiceClick3Submit = (index: number) => {
|
|
|
setTimeout(() => {
|
|
|
if (!showData.list[index].choiceClickFlag) {
|
|
|
showData.list[index].choiceClickFlag = true
|
|
|
- showData.list[index].answer = appleItems.value[index].filter((item: boolean) => !item).length + ''
|
|
|
+ showData.list[index].answer = appleItems.value.filter((item: boolean) => !item).length + ''
|
|
|
showData.list[index].correct = showData.list[index].answer === showData.list[index].correctValue
|
|
|
}
|
|
|
}, 400)
|
|
@@ -304,68 +306,68 @@ defineExpose({
|
|
|
|
|
|
.pos-item-0 {
|
|
|
position: absolute;
|
|
|
- left: -40px;
|
|
|
+ left: 40px;
|
|
|
top: -80px;
|
|
|
}
|
|
|
|
|
|
.pos-item-1 {
|
|
|
position: absolute;
|
|
|
- left: 10px;
|
|
|
- top: 145px;
|
|
|
+ left: 150px;
|
|
|
+ top: 365px;
|
|
|
}
|
|
|
|
|
|
.pos-item-2 {
|
|
|
position: absolute;
|
|
|
- left: 78px;
|
|
|
- top: 90px;
|
|
|
+ left: 188px;
|
|
|
+ top: 240px;
|
|
|
}
|
|
|
|
|
|
.pos-item-3 {
|
|
|
position: absolute;
|
|
|
- left: 150px;
|
|
|
- top: 60px;
|
|
|
+ left: 330px;
|
|
|
+ top: 340px;
|
|
|
}
|
|
|
|
|
|
.pos-item-4 {
|
|
|
position: absolute;
|
|
|
- left: 128px;
|
|
|
- top: 140px;
|
|
|
+ left: 328px;
|
|
|
+ top: 160px;
|
|
|
}
|
|
|
|
|
|
.pos-item-5 {
|
|
|
position: absolute;
|
|
|
- left: 195px;
|
|
|
- top: 42px;
|
|
|
+ left: 485px;
|
|
|
+ top: 272px;
|
|
|
}
|
|
|
|
|
|
.pos-item-6 {
|
|
|
position: absolute;
|
|
|
- left: 275px;
|
|
|
- top: 82px;
|
|
|
+ left: 445px;
|
|
|
+ top: 162px;
|
|
|
}
|
|
|
|
|
|
.pos-item-7 {
|
|
|
position: absolute;
|
|
|
- left: 255px;
|
|
|
- top: 128px;
|
|
|
+ left: 665px;
|
|
|
+ top: 315px;
|
|
|
}
|
|
|
|
|
|
.pos-item-8 {
|
|
|
position: absolute;
|
|
|
- left: 265px;
|
|
|
- top: 42px;
|
|
|
+ left: 625px;
|
|
|
+ top: 162px;
|
|
|
}
|
|
|
|
|
|
.pos-item-9 {
|
|
|
position: absolute;
|
|
|
- left: 335px;
|
|
|
- top: 105px;
|
|
|
+ left: 765px;
|
|
|
+ top: 205px;
|
|
|
}
|
|
|
|
|
|
.pos-item-10 {
|
|
|
position: absolute;
|
|
|
- left: 325px;
|
|
|
- top: 165px;
|
|
|
+ left: 815px;
|
|
|
+ top: 385px;
|
|
|
}
|
|
|
}
|
|
|
|