回滚

src/components/corpus/Strockplayredline.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div
-    :class="['strockplayRedInner']"
+    :class="[isHighlight ? 'strockplayRedInner_xiao' : 'strockplayRedInner']"
   >
     <!-- <div
       @click="playHanzi"
@@ -18,23 +18,28 @@
       v-if="playStorkes"
     ></div> -->
     <template v-if="Book_text != '〇'">
-      <div :id="targetDivGray" class="character-target-div character-target-div-gray"></div>
+      <!-- <svg-icon
+        icon-class="play-stroke-icon"
+        :className="tianColor ? 'strock-play-red' : 'strock-play-box'"
+        v-if="playStorkes"
+        @click="playHanzi"
+      /> -->
+      <img
+        v-if="playStorkes"
+        class="strock-play-red"
+        src="../../assets/teacherdev/strock-play-red-click-big.png"
+        alt=""
+        @click="playHanzi"
+      />
       <div :id="targetDiv" class="character-target-div"></div>
     </template>
     <template v-else>
       <span class="book-text">{{ Book_text }}</span>
     </template>
-    <svg-icon
-        icon-class="tian"
-        className="tian-bg"
-        v-if="BoxbgType==0"
-        :style="{color:'#DEDEDE'}"
-    />
-    <svg-icon
-        icon-class="mi"
-        className="tian-bg"
-        v-if="BoxbgType==1"
-        :style="{color:'#DEDEDE'}"
+    <img
+      class="tian-bg"
+      src="../../assets/teacherdev/chinaTianRed.png"
+      alt=""
     />
     <!-- <svg-icon
       icon-class="tian"
@@ -44,7 +49,7 @@
 </template>
 
 <script>
-import { getContentFile } from "@/api/api";
+import { getLogin } from "@/api/api";
 const HanziWriter = require("hanzi-writer");
 export default {
   name: "Strockplayredline",
@@ -54,11 +59,13 @@ export default {
     "Book_text",
     "playStorkes",
     "strokeColor",
-    "strokeColorgray",
+    "wordNum",
+    "themeColor",
+    "tianColor",
     "curItem",
-    "strokeNumber",
-    "targetDivGray",
-    "BoxbgType"
+    "type",
+    "judgeAnswer",
+    "isHighlight",
   ],
   data() {
     return {
@@ -93,46 +100,28 @@ export default {
         {
           padding: 5,
           showOutline: true,
-          strokeColor: _this.strokeColor,
-          charDataLoader: function (char, onComplete) {
-            let charData = _this.handleData(_this.strokeNumber);
-            onComplete(charData);
-          },
-        }
-      );
-      _this.writer = HanziWriter.default.create(
-        _this.targetDivGray,
-        _this.Book_text,
-        {
-          padding: 5,
-          showOutline: true,
-          strokeColor: _this.strokeColorgray,
+          strokeColor: _this.isHighlight ? "#AAAAAA" : "#000000",
+          radicalColor: _this.isHighlight ? "#000000" : "#AAAAAA",
           charDataLoader: function (char, onComplete) {
-            onComplete(JSON.parse(JSON.stringify(_this.curItem)));
+            if (_this.isHighlight) {
+              let charData = _this.handleData();
+              onComplete(charData);
+            } else {
+              let charData = JSON.parse(JSON.stringify(_this.curItem.hz_json));
+              charData.radStrokes = [];
+              onComplete(charData);
+              return;
+            }
           },
         }
       );
     },
-    handleData(stroke_num) {
-      if (this.curItem) {
-        let charData = JSON.parse(JSON.stringify(this.curItem));
-        if (stroke_num) {
-            let stroke_arr = [];
-            for(let i = 0; i<stroke_num;i++){
-                stroke_arr.push(i+1)
-            }
-            stroke_arr = stroke_arr.map((item) => (item = Number(item) - 1));
-            let strokes = [],
-                medians = [];
-            for (let i = 0; i < stroke_arr.length; i++) {
-                let stroke_num = stroke_arr[i];
-                strokes.push(charData.strokes[stroke_num]);
-                medians.push(charData.medians[stroke_num]);
-            }
-            charData.strokes = strokes;
-            charData.medians = medians;
-        } else if (charData) {
-          charData.radStrokes = [];
+    handleData() {
+      if (this.curItem.hz_json) {
+        let charData = JSON.parse(JSON.stringify(this.curItem.hz_json));
+        charData.radStrokes = [];
+        for (let i = 0; i < this.judgeAnswer; i++) {
+          charData.radStrokes.push(i);
         }
         return charData;
       }
@@ -167,18 +156,54 @@ export default {
 .strockplayRedInner {
   position: relative;
 
-  width: 100%; //444px
-  height: 100%; //480px
+  width: 128px; //444px
+  height: 128px; //480px
 }
+.strockplayRedInner_xiao {
+  position: relative;
+  width: 64px; //444px
+  height: 64px; //480px
+}
+
 .character-target-div {
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   z-index: 99999;
+  font-family: "FZJCGFKTK";
+  border: 2px solid #de4444;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+.strock-play-box {
   position: absolute;
+  right: -2px;
+  top: -2px;
+  z-index: 998;
+  width: 22px;
+  height: 22px;
+  // color: #346CDA;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
-.character-target-div-gray{
-    top: 0;
-    left: 0;
+.strock-play-red {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 999;
+  width: 22px;
+  height: 22px;
+  color: #d47064;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 .tian-bg {
   width: 100%;
@@ -186,6 +211,15 @@ export default {
   position: absolute;
   left: 0;
   top: 0;
+  stroke: rgba(157, 202, 255, 0.2);
+}
+.tian-bg-red {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  stroke: rgba(212, 112, 100, 0.2);
 }
 .animate-butto {
   width: 240px;