田字格以及书写

src/components/Adult/Preview.vue

@@ -290,6 +290,7 @@
                   <NewWordShow
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
+                    :indexStr="index+'_'+indexs+'_'+indexss"
                     v-if="refresh"
                   />
                 </template>

src/components/Adult/preview/NewWordShow.vue

@@ -4,10 +4,8 @@
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div class="item-box">
       <div class="item" v-for="(item, index) in curQue.option" :key="index">
-        <p v-if="item.pinyin">
-          <span>
-            {{ item.pinyin }}
-          </span>
+        <p v-if="item.pinyin||item.en ">
+          <span>{{ item.pinyin }}</span>
           <span>{{ item.en }}</span>
         </p>
         <div class="con-box">
@@ -22,7 +20,7 @@
                 <Strockplayredline
                   :Book_text="conItem"
                   :playStorkes="true"
-                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex"
+                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex + indexStr"
                 />
                 <div
                   class="bwc-line"
@@ -77,7 +75,7 @@ import Practice from "../preview/components/Practice.vue";
 import FreePaint from "../preview/components/FreePaint.vue";
 export default {
   components: { Strockplayredline, Practice, FreePaint },
-  props: ["curQue", "themeColor"],
+  props: ["curQue", "themeColor", "indexStr"],
   data() {
     return {
       isPraShow: false,
@@ -156,11 +154,8 @@ export default {
     background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
+    align-items: flex-end;
     .item {
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      flex-flow: wrap;
       margin: 9px 20px;
       box-sizing: border-box;
       // width: 66px;
@@ -176,7 +171,6 @@ export default {
         color: #2c2c2c;
         font-size: 14px;
         line-height: 130%;
-        width: 100%;
         text-align: center;
         margin: 0 0 8px 0;
       }
@@ -204,6 +198,7 @@ export default {
       border: 1px solid #de4444;
       border-radius: 8px;
       overflow: hidden;
+      margin: 0 auto;
       .img-box {
         background: #fff url("../../../assets/NPC/chinaTianRed.png") center
           no-repeat;
@@ -299,9 +294,9 @@ export default {
 .NPC-Big-Book-preview-red {
   .NewWordShow {
     .strock-play-box {
-      width: 16px;
-      height: 16px;
-      right: -2px;
+      width: 22px;
+      height: 22px;
+      right: -1px;
       top: 0;
       background: url("../../../assets/NPC/strock-play-red-click.png") center
         no-repeat;
@@ -315,9 +310,9 @@ export default {
 .NPC-Big-Book-preview-green {
   .NewWordShow {
     .strock-play-box {
-      width: 16px;
-      height: 16px;
-      right: -2px;
+      width: 22px;
+      height: 22px;
+      right: -1px;
       top: 0;
       background: url("../../../assets/NPC/strock-play-green-click.png") center
         no-repeat;
@@ -331,9 +326,9 @@ export default {
 .NPC-Big-Book-preview-brown {
   .NewWordShow {
     .strock-play-box {
-      width: 16px;
-      height: 16px;
-      right: -2px;
+      width: 22px;
+      height: 22px;
+      right: -1px;
       top: 0;
       background: url("../../../assets/NPC/strock-play-yellow-click.png") center
         no-repeat;

src/components/Adult/preview/components/FreePaint.vue

@@ -404,10 +404,6 @@ export default {
 </style>
 <style lang="scss">
 .practiceSingle {
-  .strock-play-box {
-    width: 24px !important;
-    height: 24px !important;
-  }
   .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
     color: #000;
   }
@@ -433,7 +429,7 @@ export default {
     border: none;
   }
   .el-tabs--border-card > .el-tabs__content {
-    padding: 24px;
+    padding: 0px;
   }
   .el-tab-pane {
     display: flex;

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

@@ -131,27 +131,3 @@ export default {
   }
 }
 </style>
-<style lang="scss">
-.strock-play-box {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 999;
-  width: 84px;
-  height: 84px;
-  background: url("../../../../assets/NPC/strock-play-red-click.png");
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  > img {
-    width: 19px;
-    height: 24px;
-  }
-}
-.strock-play-box:active {
-  background: url("../../../../assets/NPC/strock-play-red-click.png");
-  background-size: 100%;
-}
-</style>

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

@@ -19,127 +19,190 @@
             : require('../../../../assets/icon/Cross-16-normal-red.png')
         "
       />
-      <el-tabs type="border-card">
-        <el-tab-pane label="简体">
-          <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"
-                  />
+      <el-tabs type="border-card" @tab-click="handleClick">
+        <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>
                 </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">
-                      <!-- <img
-                                        class="write-icon-3"
-                                        src="../../assets/common/write-icon-3.png"
-                                    /> -->
-                      <!-- <ul class="colors-list">
+          <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>
+                    </div>
+
+                    <ul class="nav-list">
+                        <li
+                        :class="navIndex == 0 ? 'active' : ''"
+                        @click="changeNav(0)"
+                        >
+                        描红
+                        </li>
                         <li
-                          :class="
-                            colorIndex == index
-                              ? 'color-item-active' + index
-                              : ''
-                          "
-                          :key="'color' + index"
-                          @click="changeColor(index)"
-                          v-for="(item, index) in 5"
+                        :class="navIndex == 1 ? 'active' : ''"
+                        @click="changeNav(1)"
                         >
-                          <span :class="'color-item' + index"></span>
+                        默写
                         </li>
-                      </ul> -->
-                      <a @click="resetHuahua(index)" class="clean-btn"></a>
+                    </ul>
                     </div>
-                    <!-- <div class="pen" v-if="navIndex == 1">
-                      <img
-                        :src="penIndex == 0 ? thinpenActive : thinpen"
-                        @click="changePen(0)"
-                        class="pen-img"
-                      />
-                      <img
-                        :src="penIndex == 1 ? thickpenActive : thickpen"
-                        @click="changePen(1)"
-                        class="pen-img"
-                      />
-                    </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>
-        </el-tab-pane>
-        <el-tab-pane label="繁体"> </el-tab-pane>
-      </el-tabs>
+          </div>
+      </div>
     </div>
   </div>
 </template>
@@ -148,15 +211,11 @@
 import Strockplayredline from "./Strockplayredline.vue";
 import Strockred from "./Strockred.vue";
 import Freewrite from "./Freewrite.vue";
-// import ChinaDict from "./ChinaDict";
-// import Audio from "./AudioRed.vue";
 export default {
   components: {
     Strockplayredline,
     Strockred,
     Freewrite,
-    // ChinaDict,
-    // Audio,
   },
   props: ["cur", "changePraShow", "themeColor"],
   data() {
@@ -175,6 +234,7 @@ export default {
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       collectFlag: false, // 是否收藏
+      isShow: '0'
     };
   },
   computed: {},
@@ -199,9 +259,11 @@ export default {
       this.learn_mode = mode;
     },
     resetHuahua(index) {
-      console.log(this.$refs.freewrite);
       this.$refs.freewrite[index].handelReset();
     },
+    handleClick(tab, event){
+        this.isShow = tab.index
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -225,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;
@@ -259,10 +321,10 @@ export default {
   .Book_content {
     width: 100%;
     height: 100%;
-    display: flex;
+    // display: flex;
     box-sizing: border-box;
     position: relative;
-    align-items: flex-start;
+    // align-items: flex-start;
   }
   .left-content {
     display: flex;
@@ -466,6 +528,25 @@ export default {
 .el-tabs {
   width: 100%;
 }
+.tab-box{
+    background: #fff;
+    padding: 24px;
+    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;
+        }
+    }
+}
 .NPC-Big-Book-preview-green {
   .practice {
     .nav-list {
@@ -495,41 +576,3 @@ export default {
   }
 }
 </style>
-<style lang="scss">
-.practiceSingle {
-  .strock-play-box {
-    width: 24px !important;
-    height: 24px !important;
-  }
-  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-    color: #000;
-  }
-  .el-tabs--border-card
-    > .el-tabs__header
-    .el-tabs__item:not(.is-disabled):hover {
-    color: #000;
-  }
-  .el-tabs__item,
-  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
-    color: #000;
-    font-size: 16px;
-    line-height: 150%;
-    line-height: 48px;
-    height: 48px;
-    width: 80px;
-    text-align: center;
-    font-weight: normal;
-    border: none;
-  }
-  .el-tabs--border-card > .el-tabs__header {
-    background: #f3f3f3;
-    border: none;
-  }
-  .el-tabs--border-card > .el-tabs__content {
-    padding: 24px;
-  }
-  .el-tab-pane {
-    display: flex;
-  }
-}
-</style>

src/components/Adult/preview/components/Strockplayredline.vue

@@ -118,8 +118,8 @@ export default {
   // right: -2px;
   // top: 0px;
   z-index: 999;
-  width: 16px;
-  height: 16px;
+  width: 22px;
+  height: 22px;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -20,6 +20,19 @@
         :pinyin="word.detail.pinyin"
         :themeColor="themeColor"
       />
+      <img
+          :src="
+            themeColor
+              ? themeColor == 'green'
+                ? require('../../../../assets/NPC/play-green.png')
+                : themeColor == 'brown'
+                ? require('../../../../assets/NPC/play-brown.png')
+                : require('../../../../assets/NPC/play-red.png')
+              : require('../../../../assets/NPC/play-red.png')
+          "
+          v-if="word.detail.mp3_list.length == 0"
+          style="width: 16px;"
+        />
     </div>
     <div
       class="bwc-Strockplay"
@@ -131,7 +144,7 @@ import Audio from "./AudioRed.vue";
 import Strockplayredline from "./Strockplayredline.vue";
 import Practice from "./Practice.vue";
 import Wordintp from "./Wordintp.vue";
-
+import { getContentFile } from "@/api/ajax";
 export default {
   name: "Wordcard",
   components: {
@@ -169,17 +182,25 @@ export default {
   },
   //方法集合
   methods: {
-    writeWord(words, pinyin) {
-      this.isPraShow = true;
+   async writeWord(words, pinyin) {
+      let _this = this;
+      const MethodName = "tool-ChineseSCConvert";
+      const data = {
+        text: words,
+        swap_mode: 'S-C'
+      };
+      let TChinese = await getContentFile(MethodName,data)
       this.curData = {
         stem: [
           {
             con: words ? words : "",
             pinyin: pinyin && pinyin ? pinyin : "",
             mp3_url: "",
+            TChinese: TChinese.text
           },
         ],
       };
+      this.isPraShow = true;
     },
     changePraShow() {
       this.isPraShow = false;