数字理解优化

src/views/gameCenter/components/games/DigitalUnderstanding/components/DUMainShow/index.vue

@@ -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;
     }
   }