修改情绪stroop为点击按钮--且引导并提示

index.html

@@ -14,6 +14,7 @@
 <style lang="scss">
 
   body{
-    margin:0px
+    margin:0px;
+    user-select:none;
   }
 </style>

src/views/Stroop.vue

@@ -88,7 +88,7 @@ onMounted(() => {
     countdown()
 
     //监听电脑按键
-    document.addEventListener("keydown", listenFun)
+    // document.addEventListener("keydown", listenFun)
 
     getStartTime()
 
@@ -170,18 +170,18 @@ const showFont = () => {
 
         if (list.value[numberFlag.value].color == 'red') {
             needColor.value = '红色'
-            needJ.value = 'F键'
+            needJ.value = 'F'
         } else if (list.value[numberFlag.value].color == 'yellow') {
             needColor.value = '黄色'
-            needJ.value = 'G键'
+            needJ.value = 'G'
 
         } else if (list.value[numberFlag.value].color == 'blue') {
             needColor.value = '蓝色'
-            needJ.value = 'H键'
+            needJ.value = 'H'
 
         } else if (list.value[numberFlag.value].color == 'green') {
             needColor.value = '绿色'
-            needJ.value = 'J键'
+            needJ.value = 'J'
 
         }
     }
@@ -229,28 +229,28 @@ const clickColor = async (val: string) => {
     let currentP = false
     if (list.value[numberFlag.value].color == 'red') {
         needColor.value = '红色'
-        needJ.value = 'F键'
+        needJ.value = 'F'
         if (val == 'f') {
             responseFlag.value = true
             currentP = true
         }
     } else if (list.value[numberFlag.value].color == 'yellow') {
         needColor.value = '黄色'
-        needJ.value = 'G键'
+        needJ.value = 'G'
         if (val == 'g') {
             responseFlag.value = true
             currentP = true
         }
     } else if (list.value[numberFlag.value].color == 'blue') {
         needColor.value = '蓝色'
-        needJ.value = 'H键'
+        needJ.value = 'H'
         if (val == 'h') {
             responseFlag.value = true
             currentP = true
         }
     } else if (list.value[numberFlag.value].color == 'green') {
         needColor.value = '绿色'
-        needJ.value = 'J键'
+        needJ.value = 'J'
         if (val == 'j') {
             responseFlag.value = true
             currentP = true
@@ -298,14 +298,20 @@ const clickColor = async (val: string) => {
             }
             let score = parseInt(((count / recordResult.value.length) * 100).toFixed(2));
 
-            ElMessage({
-                type: 'info',
-                //正确率
-                message: `正确率为${score}%`
-            })
+            // ElMessage({
+            //     type: 'info',
+            //     //正确率
+            //     message: `正确率为${score}%`
+            // })
 
 
             if (score >= 60) {
+                ElMessage({
+                    type: 'success',
+                    //正确率
+                    message: `正确率为${score}%`
+                })
+
                 //正确率大于60  时
                 //设置通过的标志
                 userInfo.saveIspass(flag.value)
@@ -314,6 +320,12 @@ const clickColor = async (val: string) => {
                 }, 1000)
 
             } else {
+                ElMessage({
+                    type: 'info',
+                    //正确率
+                    message: `正确率为${score}%`
+                })
+
                 setTimeout(() => {
                     router.go(-1)
                 }, 1000)
@@ -513,6 +525,12 @@ const formatterData = () => {
     //长度280
 
 }
+const buttonList = ref<any>([
+    { name: 'F', val: 'f' },
+    { name: 'G', val: 'g' },
+    { name: 'H', val: 'h' },
+    { name: 'J', val: 'j' }
+]);
 
 </script>
 
@@ -520,7 +538,7 @@ const formatterData = () => {
 
     <div class="activeTask">
 
-        <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 10">
+        <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 1000">
 
             <el-progress class="main_progress" color="linear-gradient(to right, hwb(17 58% 9%), #99ebee)"
                 :text-inside="true" :stroke-width="48" :percentage="((numberFlagTem + 1) / (allCount)) * 100">
@@ -540,10 +558,62 @@ const formatterData = () => {
         <div v-if="addFlag" style="text-align: center" class="timingBox">
             <img src="../assets/cognize/whiteFlag-new.png" alt="" style="width: 50px; height: 50px; margin-top: 20%" />
         </div>
-        <div class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
-            当前颜色为<span class="font_sub_one sbclass">{{ needColor }}</span>，请按下键盘 <span class="font_sub_two sbclass">{{
-                needJ }}</span>
 
+        <!-- <div class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
+            当前颜色为<span class="font_sub_one sbclass">{{ needColor }}</span>，请按下 <span class="font_sub_two sbclass">{{
+                needJ }}</span>按钮
+
+        </div> -->
+        <div style="margin-top:20px" class="tip_claFun btn-content" v-show="list.length > 0 && !timingShow && !addFlag">
+
+            <el-button @click="clickColor('f')">F</el-button>
+            <el-button @click="clickColor('g')">G</el-button>
+            <el-button @click="clickColor('h')">H</el-button>
+            <el-button @click="clickColor('j')">J</el-button>
+        </div>
+    </div>
+    <div class="activeTaskTest" v-show="formalTest == '0'">
+        <div style="width: 50%; margin-left: 10%; margin-top: 24px; z-index: 1000">
+
+            <el-progress class="main_progress" color="linear-gradient(to right, hwb(17 58% 9%), #99ebee)"
+                :text-inside="true" :stroke-width="48" :percentage="((numberFlagTem + 1) / (allCount)) * 100">
+                <span style="color: #000;font-size: 20px;">{{ numberFlagTem + 1 }}/{{ allCount }}</span>
+            </el-progress>
+        </div>
+        <p class="correct_txt" v-show="formalTest == '0' && isCom">
+            <img src="../assets/cognize/correct.png" alt="" v-show="responseFlag">
+            <img src="../assets/cognize/wrong.png" v-show="!responseFlag" alt=""><span></span>
+        </p>
+        <p v-if="timingShow" class="timingBox">{{ countDownStr }}</p>
+        <div v-if="list.length > 0 && !timingShow" class="timingBox">
+            <div v-if="(formalTest == '0' && numberFlag <= 19 && !addFlag) || (formalTest == '1' && numberFlag <= 89 && !addFlag)"
+                :style="{ color: list[numberFlag].color }">{{
+                    list[numberFlag].name }}</div>
+        </div>
+        <div v-if="addFlag" style="text-align: center" class="timingBox">
+            <img src="../assets/cognize/whiteFlag-new.png" alt="" style="width: 50px; height: 50px; margin-top: 20%" />
+        </div>
+
+        <!-- <div class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
+            当前颜色为<span class="font_sub_one sbclass">{{ needColor }}</span>，请按下 <span class="font_sub_two sbclass">{{
+                needJ }}</span>按钮
+
+        </div> -->
+        <div class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
+            F:代表红色 G:代表黄色 H:代表蓝色 J:代表绿色
+        </div>
+        <!-- <div class="tip_cla" v-show="!timingShow && formalTest == '0' && !addFlag">
+            当前颜色为<span class="font_sub_one sbclass">{{ needColor }}</span>，请按下 <span class="font_sub_two sbclass">{{
+                needJ }}</span>按钮
+
+        </div> -->
+        <div style="margin-top:20px" class="tip_claFun btn-content" v-show="list.length > 0 && !timingShow && !addFlag">
+            <el-button v-for="item in buttonList" :key="item.name" :class="{ active: item.name == needJ }"
+                @click="clickColor(item.val)">{{ item.name }}</el-button>
+            <!-- <el-button @click="clickColor('f')">F</el-button>
+            <el-button @click="clickColor('g')">G</el-button>
+            <el-button @click="clickColor('h')">H</el-button>
+            <el-button @click="clickColor('j')">J</el-button> -->
         </div>
     </div>
     <CpdmMessage ref="cpdmMe" />
@@ -605,17 +675,18 @@ const formatterData = () => {
     margin-left: -75px;
 }
 
-.activeTask {
-    width: 100%;
-    height: 100%;
-    background: url("../assets/cognize/rememberAbilityTask.png") no-repeat center;
-    background-size: cover;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
+// .activeTask {
+//     width: 100%;
+//     height: 100%;
+//     background: url("../assets/cognize/rememberAbilityTask.png") no-repeat center;
+//     background-size: cover;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     right: 0;
+//     bottom: 0;
+//     background-color: #000000
+// }
 
 .timingBox {
     font-size: 50px;
@@ -645,7 +716,7 @@ const formatterData = () => {
     position: absolute;
     width: 60%;
     left: 50%;
-    bottom: 10%;
+    bottom: 150px;
     transform: translate(-50%, 0);
     text-align: center;
     z-index: 1000;
@@ -733,12 +804,12 @@ const formatterData = () => {
 .active:before,
 .active:after {
     content: "";
-    width: 80px;
+    width: 40px;
     height: 40px;
     position: absolute;
     left: 50%;
     top: 50%;
-    margin-left: -40px;
+    margin-left: -20px;
     margin-top: -20px;
     border-radius: 10%;
     animation: warn 1.5s ease-out 0s infinite;
@@ -795,6 +866,22 @@ const formatterData = () => {
     left: 0;
     right: 0;
     bottom: 0;
+
+}
+
+.activeTaskTest {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000000;
+    opacity: 0.4;
+    z-index: 200;
+
 }
 
 .correct_txt {
@@ -806,11 +893,25 @@ const formatterData = () => {
 }
 
 .tip_cla {
+    width: 200px;
     letter-spacing: 3px;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 200px;
     text-align: center;
+    z-index: 1000;
+    color: #ffffff;
+    border: 2px solid rgb(47, 197, 165);
+    overflow-y: hidden;
 }
-</style>
+
+// .tip_claFun {
+//     letter-spacing: 3px;
+//     position: absolute;
+//     left: 50%;
+//     transform: translateX(-50%);
+//     bottom: 150px;
+//     text-align: center;
+
+// }</style>