字词联系卡相关问题

src/components/corpus/Strockplay.vue

@@ -1,12 +1,7 @@
 <!--  -->
 <template>
   <div class="strockplayInner" :class="className">
-    <div
-      @click="playHanzi"
-      class="strock-play-box"
-      :style="{ width: palyWidth, height: palyWidth }"
-      v-if="playStorkes"
-    >
+    <div @click="playHanzi" class="strock-play-box" :style="{ width: palyWidth, height: palyWidth }" v-if="playStorkes">
       <svg-icon
         icon-class="playStorkes"
         className="playStorkes-btn"
@@ -15,43 +10,29 @@
         :style="{ color: strokePlayColor, width: palyWidth, height: palyWidth }"
       />
     </div>
-    <div
-      :class="wordNum == '2' ? 'morewords' : ''"
-      :id="targetDiv"
-      class="character-target-div"
-    >
-      <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' }"
-      />
+    <div :class="wordNum == '2' ? 'morewords' : ''" :id="targetDiv" class="character-target-div">
+      <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' }" />
     </div>
   </div>
 </template>
 
 <script>
-import { getContentFile } from "@/api/api";
-const HanziWriter = require("hanzi-writer");
+import { getContentFile } from '@/api/api';
+const HanziWriter = require('hanzi-writer');
 export default {
   components: {},
   props: [
-    "targetDiv",
-    "Book_text",
-    "playStorkes",
-    "strokeColor",
-    "wordNum",
-    "className",
-    "strokePlayColor",
-    "palyWidth",
-    "BoxbgType",
-    "curItem",
+    'targetDiv',
+    'Book_text',
+    'playStorkes',
+    'strokeColor',
+    'wordNum',
+    'className',
+    'strokePlayColor',
+    'palyWidth',
+    'BoxbgType',
+    'curItem',
   ],
   data() {
     return {
@@ -72,6 +53,18 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    strokeColor: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -82,19 +75,15 @@ export default {
         node.removeChild(node.children[1]);
       }
       //var ren = require("hanzi-writer-data/国");
-      _this.writer = HanziWriter.default.create(
-        _this.targetDiv,
-        _this.Book_text,
-        {
-          charDataLoader: function (char, onComplete) {
-            let charData = _this.handleData();
-            onComplete(charData);
-          },
-          padding: 5,
-          showOutline: true,
-          strokeColor: _this.strokeColor ? _this.strokeColor : "#333",
-        }
-      );
+      _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
+        charDataLoader: function (char, onComplete) {
+          let charData = _this.handleData();
+          onComplete(charData);
+        },
+        padding: 5,
+        showOutline: true,
+        strokeColor: _this.strokeColor ? _this.strokeColor : '#333',
+      });
     },
     playHanzi() {
       let _this = this;
@@ -125,9 +114,9 @@ export default {
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
-@import "../../assets/Scss/_handle.scss";
+@import '../../assets/Scss/_handle.scss';
 .strockplayInner {
   position: relative;
   margin: 0 auto;
@@ -175,4 +164,4 @@ export default {
   top: 0;
   right: 0;
 }
-</style>
+</style>

src/components/corpus/StrockplayredlineTable.vue

@@ -16,27 +16,14 @@
       v-if="playStorkes"
     ></div> -->
     <template v-if="Book_text != '〇'">
-      <div
-        :id="targetDivGray"
-        class="character-target-div character-target-div-gray"
-      ></div>
+      <div :id="targetDivGray" class="character-target-div character-target-div-gray"></div>
       <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' }"
-    />
+    <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' }" />
     <!-- <svg-icon
       icon-class="tian"
       :className="tianColor ? 'tian-bg-red' : 'tian-bg'"
@@ -45,21 +32,21 @@
 </template>
 
 <script>
-import { getContentFile } from "@/api/api";
-const HanziWriter = require("hanzi-writer");
+import { getContentFile } from '@/api/api';
+const HanziWriter = require('hanzi-writer');
 export default {
-  name: "Strockplayredline",
+  name: 'Strockplayredline',
   components: {},
   props: [
-    "targetDiv",
-    "Book_text",
-    "playStorkes",
-    "strokeColor",
-    "strokeColorgray",
-    "curItem",
-    "strokeNumber",
-    "targetDivGray",
-    "BoxbgType",
+    'targetDiv',
+    'Book_text',
+    'playStorkes',
+    'strokeColor',
+    'strokeColorgray',
+    'curItem',
+    'strokeNumber',
+    'targetDivGray',
+    'BoxbgType',
   ],
   data() {
     return {
@@ -80,6 +67,18 @@ export default {
       // 深度观察监听
       deep: true,
     },
+    strokeColor: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
   },
   //方法集合
   methods: {
@@ -91,34 +90,26 @@ export default {
         noe2.removeChild(noe2.children[0]);
         node.removeChild(node.children[0]);
       }
-      if (_this.Book_text == "〇") return false;
+      if (_this.Book_text == '〇') return false;
       _this.writer = null;
       //var ren = require("hanzi-writer-data/国");
-      _this.writer = HanziWriter.default.create(
-        _this.targetDiv,
-        _this.Book_text,
-        {
-          padding: 5,
-          showOutline: true,
-          strokeColor: _this.strokeColor,
-          charDataLoader: function (char, onComplete) {
-            let charData = _this.handleData(Number(_this.strokeNumber));
-            onComplete(charData);
-          },
-        }
-      );
-      _this.writer = HanziWriter.default.create(
-        _this.targetDivGray,
-        _this.Book_text,
-        {
-          padding: 5,
-          showOutline: true,
-          strokeColor: _this.strokeColorgray,
-          charDataLoader: function (char, onComplete) {
-            onComplete(JSON.parse(JSON.stringify(_this.curItem)));
-          },
-        }
-      );
+      _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
+        padding: 5,
+        showOutline: true,
+        strokeColor: _this.strokeColor,
+        charDataLoader: function (char, onComplete) {
+          let charData = _this.handleData(Number(_this.strokeNumber));
+          onComplete(charData);
+        },
+      });
+      _this.writer = HanziWriter.default.create(_this.targetDivGray, _this.Book_text, {
+        padding: 5,
+        showOutline: true,
+        strokeColor: _this.strokeColorgray,
+        charDataLoader: function (char, onComplete) {
+          onComplete(JSON.parse(JSON.stringify(_this.curItem)));
+        },
+      });
     },
     handleData(stroke_num) {
       if (this.curItem) {
@@ -156,7 +147,7 @@ export default {
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 // @import "../common.scss";
 .strockplayRedInner {
@@ -195,4 +186,4 @@ export default {
   text-align: center;
   line-height: 128px;
 }
-</style>
+</style>

src/views/wordcard/table.vue

@@ -9,6 +9,13 @@
           <div class="right" @click="Startcread">开始创建</div>
         </div>
         <div class="table">
+          <div>
+            <div class="number"></div>
+            <div class="dv dv1" style="font-weight: 500">名称</div>
+            <div class="dv" style="font-weight: 500">卡片类型</div>
+            <div class="dv" style="font-weight: 500">创建内容</div>
+            <div class="dv" style="font-weight: 500">创建日期</div>
+          </div>
           <div v-for="(item, i) in data.word_sentence_card_list" :key="i + 'one'">
             <div class="number">{{ item.number }}</div>
             <div
@@ -34,8 +41,9 @@
               <img slot="reference" src="../../assets/teacherdev/delete-one.png" alt="" />
             </el-popconfirm>
           </div>
-          <p v-if="data.total_count == 0">
-            <img src="../../assets/teacherdev/nodata.png" style="width: 1200px" />
+          <p v-if="data.total_count == 0" style="background-color: #fff; text-align: center; line-height: 200px">
+            <!-- <img src="../../assets/teacherdev/nodata.png" style="width: 1200px" /> -->
+            暂无数据
           </p>
         </div>
         <div v-if="data.total_count > 0" class="page">
@@ -205,16 +213,18 @@ export default {
         .number {
           width: 20px;
           text-align: right;
+          flex-shrink: 0;
         }
         .dv1 {
           cursor: pointer;
         }
         .dv {
           margin-left: 24px;
-          width: 400px;
+          width: 250px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          flex-shrink: 0;
         }
         img {
           width: 24px;