From 3fb594dc317848107fd7bbb51631cfb763c19f5f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 05 六月 2024 18:47:03 +0800
Subject: [PATCH] 舞蹈分页

---
 src/components/matching/matching.vue |   51 ++++++++++++++++++++++++---------------------------
 1 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/matching/matching.vue b/src/components/matching/matching.vue
index 85cb98d..02fd744 100644
--- a/src/components/matching/matching.vue
+++ b/src/components/matching/matching.vue
@@ -15,7 +15,7 @@
             :key="index"
             ref="left"
             @mousedown="(e) => touchstart(e, item, index)"
-            :style="{backgroundColor:bc}"
+            :style="{backgroundColor:primaryColor}"
           >
             {{ item.label.txt }}
           </div>
@@ -26,7 +26,7 @@
             v-for="(item, index) in rightArr"
             :key="index"
             ref="right"
-            :style="{backgroundColor:bc}"
+            :style="{backgroundColor:primaryColor}"
           >
             {{ item.label.txt }}
           </div>
@@ -48,13 +48,13 @@
     <!-- 鎸夐挳 -->
     <div class="btn-bottom">
       <el-button @click="submitData">鎻愪氦</el-button>
-      <el-button @click="saveData">淇濆瓨</el-button>
-      <el-button @click="redo">閲嶅仛</el-button>
-      <el-button @click="handleAnswer">鏌ョ湅绛旀</el-button>
+      <el-button @click="saveData" :style="{borderColor:primaryColor}">淇濆瓨</el-button>
+      <el-button @click="redo" >閲嶅仛</el-button>
+      <el-button @click="handleAnswer" :style="{borderColor:primaryColor}">鏌ョ湅绛旀</el-button>
     </div>
     <!-- 瑙ｆ瀽 -->
     <ul class="show-answer" v-if="isShowAnswer">
-      <li>绛旀缁撴灉锛�</li>
+      <li v-if="isRight !== null">绛旀缁撴灉锛�<span v-if="isRight" style="color: #83e089;">姝ｇ‘</span> <span v-if="isRight == false" style="color:#d81e06">閿欒</span></li>
       <li class="show-answer-box">
         <div>绛旀:</div>
         <div>
@@ -85,7 +85,7 @@
       checkItemIndex: null,
       isShowAnswer: false,
       isRight: null,
-      value:[{left:0,right:0}],
+      value:[],
       pageNum:null
     };
   },
@@ -105,7 +105,7 @@
         return [];
       },
     },
-    bc:{
+    primaryColor:{
       type:String,
       default:"#0bab87"
     }
@@ -181,7 +181,6 @@
     },
     // 瑙︽懜缁撴潫
     touchend(e, index) {
-      console.log("鎶捣", e, this.checkItem);
       this.isDragging = false;
       if (this.item.showAnswer) {
         return false;
@@ -220,12 +219,11 @@
         .filter((r) => r.right !== undefined);
       this.$emit("input", model);
       this.item.userChoise = model;
-      console.log(JSON.stringify(model));
+      // console.log(JSON.stringify(model));
     },
     // 瑙︽懜寮�濮�
     touchstart(e, item, index) {
       this.isDragging = true;
-      console.log("鎸変笅", e);
       this.checkItem = item;
       this.checkItemIndex = index;
       e.stopPropagation();
@@ -254,7 +252,6 @@
       if (this.item.showAnswer) {
         return false;
       }
-      // console.log('绉诲姩',e);
       this.checkItem.line[2] = e.pageX;
       this.checkItem.line[3] =
         e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -282,8 +279,8 @@
       canvasA.lineWidth = 2;
       for (let i = 0; i < this.leftArr.length; i++) {
         const line = this.leftArr[i].line;
-        console.log(line);
-        console.log(this.leftArr[i]);
+        // console.log(line);
+        // console.log(this.leftArr[i]);
         if (line.length) {
           canvasA.moveTo(line[0], line[1]);
           canvasA.lineTo(line[2], line[3]);
@@ -336,19 +333,19 @@
         const rightIndex = this.item.options.linkValues.findIndex(
           (citem) => citem.oldId == item.oldId
         );
-        debugger;
         answerArr.push({
           left: index,
           right: rightIndex,
         });
       }
       this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
-      console.log(
-        "绛旀",
-        answerArr,
-        this.item.userChoise,
-        this.isRight 
-      );
+      this.item.showAnswer = true
+      // console.log(
+      //   "绛旀",
+      //   answerArr,
+      //   this.item.userChoise,
+      //   this.isRight 
+      // );
     },
     // 鑾峰彇褰撳墠椤电爜
     handlePage() {
@@ -381,10 +378,11 @@
     saveData() {
       if(this.item.userChoise.length)
       localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
-      console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
+      // console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
     },
     // 閲嶅仛
     redo() {
+      this.item.showAnswer = false
       localStorage.removeItem(this.config.activeBook.name + '-matching-' + this.pageNum)
       this.value = []
       for (let index = 0; index < this.leftArr.length; index++) {
@@ -438,7 +436,7 @@
       border-radius: 4px;
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       margin-bottom: 20px;
-      line-height: 40px;
+      line-height: 24px;
       padding: 6px;
     }
 
@@ -460,10 +458,9 @@
   margin: 30px auto;
   width: 100%;
   height: min-content;
-  // background-color: pink;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  .show-answer-box {
-    padding: 10px;
+  li {
+    padding:10px
   }
 }
 .btn-bottom {
@@ -474,7 +471,7 @@
 }
 .el-button {
   height:30px;
-  padding:9px;
+  padding:7px;
   min-width: 78px
 }
 </style>

--
Gitblit v1.9.1