字幕打点

src/components/Adult/preview/components/Freewrite.vue

@@ -75,7 +75,7 @@ export default {
   components: {
     FreeWriteQP,
   },
-  props: ["lineColor", "lineWidth", "cur", "wordNum"],
+  props: ["lineColor", "lineWidth", "cur", "wordNum","currentTreeID"],
   data() {
     return {
       width: this.wordNum != "2" ? 256 : 256,

src/components/Adult/preview/components/Practice.vue

@@ -20,188 +20,188 @@
         "
       />
       <el-tabs type="border-card" @tab-click="handleClick">
-        <el-tab-pane label="简体">        
-        </el-tab-pane>
-        <el-tab-pane label="繁体">         
-        </el-tab-pane>
+        <el-tab-pane label="简体"> </el-tab-pane>
+        <el-tab-pane label="繁体"> </el-tab-pane>
       </el-tabs>
       <div class="tab-box">
-          <div class="tab-box_0" :class="[isShow=='0'?'z-top':'']">
-              <div class="left-content">
-                    <div class="strockplay">
-                    <Strockplayredline
-                        :playStorkes="true"
-                        :wordNum="item.con.length"
-                        :Book_text="item.con"
-                        :targetDiv="'pra' + item.con + index"
-                    />
-                    </div>
-                    <div class="left-content-pra"></div>
-                    <div class="footer">
-                    <div @click="collectFlag = !collectFlag" class="bg-box">
-                        <template v-if="collectFlag">
-                        <img
-                            :src="
-                            themeColor
-                                ? themeColor == 'green'
-                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                                : themeColor == 'brown'
-                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                            "
-                            class="practice-icon"
-                        />
-                        </template>
-                        <template v-else>
-                        <img
-                            :src="
-                            themeColor
-                                ? themeColor == 'green'
-                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                                : themeColor == 'brown'
-                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                            "
-                            class="practice-icon"
-                        />
-                        </template>
-                        收藏
-                    </div>
-                    </div>
-                </div>
-                <template>
-                    <div class="right-content">
-                    <div class="right-strockred">
-                        <template v-if="navIndex == 0">
-                        <Strockred
-                            :Book_text="cur.stem[0].con"
-                            :hanzicolor="hanzicolor"
-                            :playStorkes="playStorkes"
-                            :targetDiv="'write-pra' + cur.stem[0].con"
-                        />
-                        </template>
-                        <template v-else>
-                        <Freewrite
-                            :cur="cur"
-                            :lineColor="hanzicolor"
-                            :lineWidth="hanziweight"
-                            ref="freewrite"
-                        />
-                        <div class="footer">
-                            <div class="pen-colors">
-                            <a @click="resetHuahua(index)" class="clean-btn"></a>
-                            </div>
-                        </div>
-                        </template>
-                    </div>
-
-                    <ul class="nav-list">
-                        <li
-                        :class="navIndex == 0 ? 'active' : ''"
-                        @click="changeNav(0)"
-                        >
-                        描红
-                        </li>
-                        <li
-                        :class="navIndex == 1 ? 'active' : ''"
-                        @click="changeNav(1)"
-                        >
-                        默写
-                        </li>
-                    </ul>
-                    </div>
+        <div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
+          <div class="left-content">
+            <div class="strockplay">
+              <Strockplayredline
+                :playStorkes="true"
+                :wordNum="item.con.length"
+                :Book_text="item.con"
+                :targetDiv="'pra' + item.con + index"
+              />
+            </div>
+            <div class="left-content-pra"></div>
+            <div class="footer">
+              <div @click="collectFlag = !collectFlag" class="bg-box">
+                <template v-if="collectFlag">
+                  <img
+                    :src="
+                      themeColor
+                        ? themeColor == 'green'
+                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                          : themeColor == 'brown'
+                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starline-16-normal-red.png')
+                        : require('../../../../assets/icon/starline-16-normal-red.png')
+                    "
+                    class="practice-icon"
+                  />
+                </template>
+                <template v-else>
+                  <img
+                    :src="
+                      themeColor
+                        ? themeColor == 'green'
+                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                          : themeColor == 'brown'
+                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starline-16-normal-red.png')
+                        : require('../../../../assets/icon/starline-16-normal-red.png')
+                    "
+                    class="practice-icon"
+                  />
                 </template>
+                收藏
+              </div>
+            </div>
           </div>
-          <div class="tab-box_1" :class="[isShow=='1'?'z-top':'']">
-              <div class="left-content">
-                    <div class="strockplay">
-                    <Strockplayredline
-                        :playStorkes="true"
-                        :wordNum="item.TChinese.length"
-                        :Book_text="item.TChinese"
-                        :targetDiv="'praT' + item.TChinese + index"
-                    />
-                    </div>
-                    <div class="left-content-pra"></div>
-                    <div class="footer">
-                    <div @click="collectFlag = !collectFlag" class="bg-box">
-                        <template v-if="collectFlag">
-                        <img
-                            :src="
-                            themeColor
-                                ? themeColor == 'green'
-                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                                : themeColor == 'brown'
-                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                            "
-                            class="practice-icon"
-                        />
-                        </template>
-                        <template v-else>
-                        <img
-                            :src="
-                            themeColor
-                                ? themeColor == 'green'
-                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                                : themeColor == 'brown'
-                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                                : require('../../../../assets/icon/starline-16-normal-red.png')
-                            "
-                            class="practice-icon"
-                        />
-                        </template>
-                        收藏
-                    </div>
-                    </div>
-                </div>
-                <template>
-                    <div class="right-content">
-                    <div class="right-strockred">
-                        <template v-if="navIndex == 0">
-                        <Strockred
-                            :Book_text="cur.stem[0].TChinese"
-                            :hanzicolor="hanzicolor"
-                            :playStorkes="playStorkes"
-                            :targetDiv="'write-praT'+cur.stem[0].TChinese"
-                        />
-                        </template>
-                        <template v-else>
-                        <Freewrite
-                            :cur="cur"
-                            :lineColor="hanzicolor"
-                            :lineWidth="hanziweight"
-                            ref="freewrite"
-                        />
-                        <div class="footer">
-                            <div class="pen-colors">
-                            <a @click="resetHuahua(index)" class="clean-btn"></a>
-                            </div>
-                        </div>
-                        </template>
+          <template>
+            <div class="right-content">
+              <div class="right-strockred">
+                <template v-if="navIndex == 0">
+                  <Strockred
+                    :Book_text="cur.stem[0].con"
+                    :hanzicolor="hanzicolor"
+                    :playStorkes="playStorkes"
+                    :targetDiv="'write-pra' + cur.stem[0].con"
+                  />
+                </template>
+                <template v-else>
+                  <Freewrite
+                    :cur="cur"
+                    :lineColor="hanzicolor"
+                    :lineWidth="hanziweight"
+                    :currentTreeID="currentTreeID"
+                    ref="freewrite"
+                  />
+                  <div class="footer">
+                    <div class="pen-colors">
+                      <a @click="resetHuahua(index)" class="clean-btn"></a>
                     </div>
+                  </div>
+                </template>
+              </div>
 
-                    <ul class="nav-list">
-                        <li
-                        :class="navIndex == 0 ? 'active' : ''"
-                        @click="changeNav(0)"
-                        >
-                        描红
-                        </li>
-                        <li
-                        :class="navIndex == 1 ? 'active' : ''"
-                        @click="changeNav(1)"
-                        >
-                        默写
-                        </li>
-                    </ul>
-                    </div>
+              <ul class="nav-list">
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  @click="changeNav(0)"
+                >
+                  描红
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  @click="changeNav(1)"
+                >
+                  默写
+                </li>
+              </ul>
+            </div>
+          </template>
+        </div>
+        <div class="tab-box_1" :class="[isShow == '1' ? 'z-top' : '']">
+          <div class="left-content">
+            <div class="strockplay">
+              <Strockplayredline
+                :playStorkes="true"
+                :wordNum="item.TChinese.length"
+                :Book_text="item.TChinese"
+                :targetDiv="'praT' + item.TChinese + index"
+              />
+            </div>
+            <div class="left-content-pra"></div>
+            <div class="footer">
+              <div @click="collectFlag = !collectFlag" class="bg-box">
+                <template v-if="collectFlag">
+                  <img
+                    :src="
+                      themeColor
+                        ? themeColor == 'green'
+                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                          : themeColor == 'brown'
+                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starline-16-normal-red.png')
+                        : require('../../../../assets/icon/starline-16-normal-red.png')
+                    "
+                    class="practice-icon"
+                  />
                 </template>
+                <template v-else>
+                  <img
+                    :src="
+                      themeColor
+                        ? themeColor == 'green'
+                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                          : themeColor == 'brown'
+                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                          : require('../../../../assets/icon/starline-16-normal-red.png')
+                        : require('../../../../assets/icon/starline-16-normal-red.png')
+                    "
+                    class="practice-icon"
+                  />
+                </template>
+                收藏
+              </div>
+            </div>
           </div>
+          <template>
+            <div class="right-content">
+              <div class="right-strockred">
+                <template v-if="navIndex == 0">
+                  <Strockred
+                    :Book_text="cur.stem[0].TChinese"
+                    :hanzicolor="hanzicolor"
+                    :playStorkes="playStorkes"
+                    :targetDiv="'write-praT' + cur.stem[0].TChinese"
+                  />
+                </template>
+                <template v-else>
+                  <Freewrite
+                    :cur="cur"
+                    :lineColor="hanzicolor"
+                    :lineWidth="hanziweight"
+                    :currentTreeID="currentTreeID"
+                    ref="freewrite"
+                  />
+                  <div class="footer">
+                    <div class="pen-colors">
+                      <a @click="resetHuahua(index)" class="clean-btn"></a>
+                    </div>
+                  </div>
+                </template>
+              </div>
+
+              <ul class="nav-list">
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  @click="changeNav(0)"
+                >
+                  描红
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  @click="changeNav(1)"
+                >
+                  默写
+                </li>
+              </ul>
+            </div>
+          </template>
+        </div>
       </div>
     </div>
   </div>
@@ -217,7 +217,7 @@ export default {
     Strockred,
     Freewrite,
   },
-  props: ["cur", "changePraShow", "themeColor"],
+  props: ["cur", "changePraShow", "themeColor", "currentTreeID"],
   data() {
     return {
       //   learn_mode: "",
@@ -234,7 +234,7 @@ export default {
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       collectFlag: false, // 是否收藏
-      isShow: '0'
+      isShow: "0",
     };
   },
   computed: {},
@@ -261,9 +261,9 @@ export default {
     resetHuahua(index) {
       this.$refs.freewrite[index].handelReset();
     },
-    handleClick(tab, event){
-        this.isShow = tab.index
-    }
+    handleClick(tab, event) {
+      this.isShow = tab.index;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -287,7 +287,7 @@ export default {
 <style lang='scss' scoped>
 .practice {
   width: 504px;
-//   max-height: 434px;
+  //   max-height: 434px;
   overflow: auto;
   margin: 0 auto;
   background: #f3f3f3;
@@ -528,24 +528,24 @@ export default {
 .el-tabs {
   width: 100%;
 }
-.tab-box{
-    background: #fff;
-    padding: 24px;
+.tab-box {
+  background: #fff;
+  padding: 24px;
+  position: relative;
+  height: 428px;
+  > div {
+    display: flex;
+    box-sizing: border-box;
     position: relative;
-    height: 428px;
-    >div{
-        display: flex;
-        box-sizing: border-box;
-        position: relative;
-        align-items: flex-start;
-        position: absolute;
-        left: 24px;
-        top: 24px;
-        z-index: 1;
-        &.z-top{
-            z-index: 2;
-        }
+    align-items: flex-start;
+    position: absolute;
+    left: 24px;
+    top: 24px;
+    z-index: 1;
+    &.z-top {
+      z-index: 2;
     }
+  }
 }
 .NPC-Big-Book-preview-green {
   .practice {

src/components/Adult/preview/components/Wordcard.vue

@@ -117,6 +117,7 @@
         :changePraShow="changePraShow"
         :cur="curData"
         :themeColor="themeColor"
+        :currentTreeID="currentTreeID"
       />
     </div>
     <div class="practiceBox" v-if="isIntpShow">