修改形状知觉任务

src/views/shapeIntuition_random.vue

@@ -17,10 +17,17 @@
           style="width:50%;margin-top:10px"></el-progress>
       </div>
       <div class="glass">
+        <p class="correct_txt" v-show="showCorrectTxt && testTypeCode == 0"><img v-show="showCorrectImg" src="../assets/cognize/correct.png" alt=""> <img v-show="showWrongImg" src="../assets/cognize/wrong.png" alt=""><span>{{ correctTxt
+            }}</span></p>
         <p v-show="countDownShow" class="countdownStr">
           {{ countDownStr }}
         </p>
         <img v-show="showDuckEgg" :src="examImgUrl" alt="" class="shapeImg" />
+        <div class="operate_demo">
+          <p v-show="showMouseLeft || showMouseRight">请点鼠标{{ showMouseLeft ? '左键' : '右键' }}</p>
+          <img v-show="showMouseLeft" src="../assets/cognize/mouseL.png" alt="">
+          <img v-show="showMouseRight" src="../assets/cognize/mouseR.png" alt="">
+        </div>
       </div>
       <!-- <img v-show="showWhiteFlag" src='../../assets/congnitiveAblitity/whiteFlag.png' alt="" style="width: 50px; height: 50px; margin-top: 20%"> -->
       <!-- 演示使用 -->
@@ -91,7 +98,13 @@ export default {
       flagName: '',
       formalTest: '',
       beginTime: '',
-      userPlanDetailApi: userPlanDetailApi
+      userPlanDetailApi: userPlanDetailApi,
+      correctTxt: '正确',
+      showCorrectTxt: false,
+      showMouseLeft: false,
+      showMouseRight: false,
+      showWrongImg: false,
+      showCorrectImg: false
     };
   },
   // 页面初始化函数
@@ -141,7 +154,20 @@ export default {
       if (this.userRightClickDirection == clickFlag) {
         this.userRightResponseCount++;
         userResponseStr = "Right";
+        this.correctTxt = '正确';
+        this.showCorrectImg = true;
+        this.showWrongImg = false;
+      } else {
+        this.correctTxt = '错误'
+        this.showCorrectImg = false;
+        this.showWrongImg = true;
       }
+      this.showCorrectTxt = true;
+
+      setTimeout(() => {
+        this.showCorrectTxt = false;
+      }, 500)
+
       //判断是否测试结束
       if (this.imgIndex == this.userTestPicList.length) {
         this.testEndFlag = true;
@@ -213,6 +239,14 @@ export default {
         this.startMilliSeconds = new Date().getTime();
         this.userCanClick = true;
 
+        if (this.userRightClickDirection == 'L') {
+          this.showMouseLeft = true;
+          this.showMouseRight = false;
+        } else {
+          this.showMouseLeft = false;
+          this.showMouseRight = true;
+        }
+
         if (this.imgIndex == this.userTestPicList.length) {
           this.testEndFlag = true;
         }
@@ -520,4 +554,40 @@ export default {
   width: 50%;
   margin-left: 10%;
 }
+
+.correct_txt {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 100px;
+  text-align: center;
+}
+
+.operate_demo {
+  position: absolute;
+  bottom: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+
+}
+
+.operate_demo img {
+  width: 100px;
+}
+
+.operate_demo p {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.correct_txt {
+  display: flex;
+  align-items: center;
+}
+
+.correct_txt span {
+  font-size: 16px;
+  font-weight: 700;
+  margin-left: 8px;
+}
 </style>