生字展示

src/components/Adult/preview/NewWordShow.vue

@@ -11,7 +11,7 @@
                                 :key="conindex"
                                 class="strockplay"
                                 v-for="(conItem, conindex) in item.con"
-                                @click="handleShow(conItem)"
+                                @click="writeWord(conItem,item.pinyin)"
                             >
                                 <Strockplayredline
                                     :Book_text="conItem"
@@ -25,7 +25,9 @@
                             </div>
                       </template>
                       <template v-else>
-                          <div class="">111</div>
+                          <div class="blank-item">
+
+                          </div>
                       </template>
                 </template>
                 <template v-else>
@@ -44,17 +46,22 @@
               </div>
           </div>
       </div>
+      <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
+        <Practice :changePraShow="changePraShow" :cur="curData" />
+      </div>
   </div>
 </template>
 
 <script>
 import Strockplayredline from "../preview/components/Strockplayredline.vue";
+import Practice from "../preview/components/Practice.vue";
 export default {
-  components: {Strockplayredline},
+  components: {Strockplayredline,Practice},
   props: ["curQue"],
   data() {
     return {
-        
+        isPraShow: false,
+        curData: null,
     };
   },
   computed: {},
@@ -66,9 +73,21 @@ export default {
         let _this = this
         
     },
-    handleShow(item){
-        alert('11')
-    }
+    changePraShow() {
+      this.isPraShow = false;
+    },
+    writeWord(words, pinyin) {
+      this.isPraShow = true;
+      this.curData = {
+        stem: [
+          {
+            con: words ? words : "",
+            pinyin: pinyin && pinyin ? pinyin : "",
+            mp3_url: "",
+          },
+        ],
+      };
+    },
     
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -103,6 +122,9 @@ export default {
             justify-content: center;
             flex-flow: wrap;
             margin: 9px 20px;
+            box-sizing: border-box;
+            width: 66px;
+            cursor: pointer;
             >p{
                 color: #2C2C2C;
                 font-size: 14px;
@@ -143,6 +165,29 @@ export default {
                     height: 64px;
                 }
             }
+            .blank-item{
+                width: 64px;
+                height: 64px;
+            }
+        }
+    }
+    .practiceBox {
+        position: fixed;
+        left: 0;
+        top: 0;
+        z-index: 999;
+        width: 100%;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.19);
+        padding-top: 32px;
+        box-sizing: border-box;
+        overflow: hidden;
+        overflow-y: auto;
+        &.practiceBoxStrock {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: 0px;
         }
     }
 }
@@ -156,5 +201,8 @@ export default {
         background: url('../../../assets/NPC/strock-play-yellow-click.png') center no-repeat;
         background-size: cover;
     }
+    .character-target-div{
+        background-color: initial;
+    }
 }
 </style>

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

@@ -0,0 +1,410 @@
+<!--  -->
+<template>
+  <div class="practice practiceSingle">
+    <div
+      :key="item.con + index"
+      class="Book_content"
+      v-for="(item, index) in cur.stem"
+    >
+      <img
+        @click="changePraShow()"
+        class="close-icon"
+        src="../../../../assets/NPC/close-icon-red.png"
+      />
+      <el-tabs type="border-card">
+        <el-tab-pane label="简体">
+            <div class="right-content">
+              <div class="right-strockred">
+                  <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>
+              </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>
+        </el-tab-pane>
+        <el-tab-pane label="繁体"> </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+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"],
+  data() {
+    return {
+      //   learn_mode: "",
+      playStorkes: false,
+      navIndex: 0,
+      colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
+      weightList: [6, 10],
+      colorIndex: 0,
+      penIndex: 0,
+      hanzicolor: "",
+      hanziweight: "",
+      thinpen: require("../../../../assets/common/thin-pen.png"), //细笔
+      thinpenActive: require("../../../../assets/common/thin-pen-active.png"),
+      thickpen: require("../../../../assets/common/thick-pen.png"),
+      thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
+      collectFlag: false, // 是否收藏
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    changeNav(index) {
+      this.navIndex = index;
+    },
+    changeColor(index) {
+      let _this = this;
+      _this.colorIndex = index;
+      let color = _this.colorsList[index];
+      _this.hanzicolor = color;
+    },
+    changePen(index) {
+      let _this = this;
+      _this.penIndex = index;
+      _this.hanziweight = _this.weightList[_this.penIndex];
+    },
+    changeLearnMode(mode) {
+      this.learn_mode = mode;
+    },
+    resetHuahua(index) {
+      console.log(this.$refs.freewrite);
+      this.$refs.freewrite[index].handelReset();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // console.log(this.cur);
+    let _this = this;
+    let color = _this.colorsList[_this.colorIndex];
+    _this.hanzicolor = color;
+    _this.hanziweight = 6;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+.practice {
+  width: 504px;
+  max-height: 434px;
+  overflow: auto;
+  margin: 0 auto;
+  background: #f3f3f3;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  .clean-btn {
+    width: 16px;
+    height: 16px;
+    margin: 0 4px;
+    cursor: pointer;
+    background: url('../../../../assets/icon/Undo-16-disable-Black.png') center no-repeat;
+    background-size: cover;
+    display: block;
+    &:hover{
+        background: url('../../../../assets/icon/Undo-16-normal-Black.png') center no-repeat;
+        background-size: cover;
+    }
+  }
+  .close-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    z-index: 2;
+  }
+  .Book_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    align-items: flex-start;
+  }
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 144px;
+    .left-content-pra {
+      height: 162px;
+    }
+  }
+  .right-content {
+    position: relative;
+    width: 288px;
+    height: 338px;
+    background: #f3f3f3;
+    border-radius: 16px;
+    box-sizing: border-box;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 24px;
+    .nav-list {
+      width: 100%;
+      height: 34px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0;
+      list-style: none;
+      margin-top: 16px;
+      > li {
+        height: 34px;
+        width: 124px;
+        text-align: center;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 34px;
+        color: #ff5757;
+        cursor: pointer;
+        background: #ffe6e6;
+        border-radius: 8px;
+        &.active {
+          background: #ff5757;
+          color: #ffffff;
+        }
+      }
+    }
+    .right-strockred {
+      width: 256px;
+      height: 256px;
+    }
+    .footer {
+      position: absolute;
+      bottom: 80px;
+      width: 100%;
+      padding-right: 40px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .pen-colors {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .write-icon-3 {
+          width: 20px;
+          height: 20px;
+          margin-right: 12px;
+        }
+        .colors-list {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+          > li {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #fff;
+            box-sizing: border-box;
+            background: #fff;
+            margin: 0 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50%;
+            cursor: pointer;
+            > span {
+              width: 14px;
+              height: 14px;
+              border-radius: 100%;
+              &.color-item0 {
+                background: #404040;
+              }
+              &.color-item1 {
+                background: #f65d4d;
+              }
+              &.color-item2 {
+                background: #19b068;
+              }
+              &.color-item3 {
+                background: #52a1ea;
+              }
+              &.color-item4 {
+                background: #ff8c49;
+              }
+            }
+
+            &.color-item-active0 {
+              border: 2px solid #404040;
+            }
+            &.color-item-active1 {
+              border: 2px solid #f65d4d;
+            }
+            &.color-item-active2 {
+              border: 2px solid #19b068;
+            }
+            &.color-item-active3 {
+              border: 2px solid #52a1ea;
+            }
+            &.color-item-active4 {
+              border: 2px solid #ff8c49;
+            }
+          }
+        }
+      }
+      .pen {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        > img {
+          width: 21px;
+          height: 19px;
+          margin-left: 4px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.strockplay {
+  width: 144px;
+  height: 144px;
+  border: 2px solid #de4444;
+  border-radius: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  .strockplayRedInner {
+    width: 100%;
+    height: 100%;
+  }
+}
+.left-content .footer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .bg-box {
+    width: 76px;
+    height: 32px;
+    text-align: center;
+    padding: 4px 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 150%;
+    color: #000;
+    // &:nth-child(2) {
+    //   margin: 0 24px;
+    // }
+    img {
+      width: 24px;
+      height: 24px;
+      margin: 0;
+    }
+  }
+  .practice-icon {
+    height: 36px;
+    margin-top: 12px;
+  }
+  > span {
+    margin-bottom: 9px;
+    font-weight: 600;
+    font-family: "FZJCGFKTK";
+    font-size: 24px;
+    line-height: 34px;
+    /* identical to box height */
+
+    text-align: center;
+
+    color: #ba7d21;
+  }
+}
+.el-tabs {
+  width: 100%;
+}
+</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/Practice.vue

@@ -61,7 +61,7 @@
                                         class="write-icon-3"
                                         src="../../assets/common/write-icon-3.png"
                                     /> -->
-                      <ul class="colors-list">
+                      <!-- <ul class="colors-list">
                         <li
                           :class="
                             colorIndex == index
@@ -74,14 +74,10 @@
                         >
                           <span :class="'color-item' + index"></span>
                         </li>
-                      </ul>
-                      <img
-                        @click="resetHuahua(index)"
-                        class="clean-btn"
-                        src="../../../../assets/common/icon-clean.png"
-                      />
+                      </ul> -->
+                      <a @click="resetHuahua(index)" class="clean-btn"></a>
                     </div>
-                    <div class="pen" v-if="navIndex == 1">
+                    <!-- <div class="pen" v-if="navIndex == 1">
                       <img
                         :src="penIndex == 0 ? thinpenActive : thinpen"
                         @click="changePen(0)"
@@ -92,7 +88,7 @@
                         @click="changePen(1)"
                         class="pen-img"
                       />
-                    </div>
+                    </div> -->
                   </div>
                 </template>
               </div>
@@ -102,13 +98,13 @@
                   :class="navIndex == 0 ? 'active' : ''"
                   @click="changeNav(0)"
                 >
-                  描红模式
+                  描红
                 </li>
                 <li
                   :class="navIndex == 1 ? 'active' : ''"
                   @click="changeNav(1)"
                 >
-                  自由书写
+                  默写
                 </li>
               </ul>
             </div>
@@ -208,9 +204,17 @@ export default {
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
   .clean-btn {
-    width: 24px;
+    width: 16px;
+    height: 16px;
     margin: 0 4px;
     cursor: pointer;
+    background: url('../../../../assets/icon/Undo-16-disable-Black.png') center no-repeat;
+    background-size: cover;
+    display: block;
+    &:hover{
+        background: url('../../../../assets/icon/Undo-16-normal-Black.png') center no-repeat;
+        background-size: cover;
+    }
   }
   .close-icon {
     position: absolute;
@@ -288,7 +292,7 @@ export default {
       width: 100%;
       padding-right: 40px;
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-end;
       align-items: center;
       .pen-colors {
         display: flex;