文章卡片

src/components/Adult/preview/ArticleViewChs/WordModelChs.vue

@@ -20,7 +20,7 @@
               v-for="(pItem, pIndex) in item.wordsList"
               :key="'wordsList' + pIndex"
               :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-              @click="showWordDetail($event, pItem.chs)"
+              @click="showWordDetail($event, pItem.chs,pItem.pinyin)"
             >
               <template v-if="!pItem.width">
                 <span
@@ -89,6 +89,7 @@ export default {
       isShow: false,
       hz: "",
       oldHz: '',
+      pinyin:'',
       word: null,
       top: 0,
       left: 0,
@@ -207,10 +208,11 @@ export default {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time);
     },
-    showWordDetail(e, word) {
+    showWordDetail(e, word, pinyin) {
       let _this = this;
       this.isShow = true;
       _this.hz = word;
+      _this.pinyin = pinyin
       _this.top = e.clientY + 20;
       let left = e.clientX;
       if (left - this.bodyLeft > this.contentWidth / 2) {
@@ -231,14 +233,22 @@ export default {
     handleNewWords(val, top, left) {
       this.isShow = true;
       this.word = null;
-      for (let i = 0; i < this.NNPENewWordList.length; i++) {
-        let item = this.NNPENewWordList[i];
-        if (item.new_word.trim() == val.trim()) {
-          let wordlist = val.split("");
-          this.word = { list: wordlist, detail: item, top: top, left: left };
-          break;
-        }
+      let wordlist = val.split("");
+      let option = {
+          definition_list: [],
+          mp3_list: [],
+          new_word: val,
+          pinyin: this.pinyin,
       }
+      this.word = {list: wordlist, detail: option, top: top, left: left };
+    //   for (let i = 0; i < this.NNPENewWordList.length; i++) {
+    //     let item = this.NNPENewWordList[i];
+    //     if (item.new_word.trim() == val.trim()) {
+    //       let wordlist = val.split("");
+    //       this.word = { list: wordlist, detail: item, top: top, left: left };
+    //       break;
+    //     }
+    //   }
       this.oldHz = val;
     },
   },

src/components/Adult/preview/components/ChinaDict.vue

@@ -0,0 +1,306 @@
+<template>
+    <!-- 中文汉字 解释 -->
+    <div class="Chineseexplain">
+        <div class="Chineseexplain_top" v-if="wordNum != '2'">
+            <div class="penobey">
+                <span>笔顺：<b style="font-family:none;font-weight:normal;">一 一 一 丿 ㇏ 丨 𠃍 一 一</b></span>
+            </div>
+            <div class="top_conten">
+                <span>部首</span>
+                <div>日</div>
+                <span>笔画</span>
+                <div>9</div>
+                <span>繁体</span>
+                <div>春</div>
+            </div>
+        </div>
+        <div :class="wordNum == '2' ? 'moreMain' : ''" class="main">
+            <ul class="nav-list">
+                <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">基本释义</li>
+                <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">详细释义</li>
+            </ul>
+            <div class="main-content" v-if="navIndex == 0">
+                <p style="color: #19b068;font-famaily:GB-PINYINOK-B">chūn</p>
+                <p>1.春季：～景。温暖如～。</p>
+                <p>2.指一年的时间：一卧东山三十～。</p>
+                <!-- <p class="combine-words">
+                    <span>~校</span>
+                    <span>~局</span>
+                    <span>~公司</span>
+                </p> -->
+                <p>3.指男女情欲：怀～。～心。</p>
+                <p>4.比喻生机：妙手回～。</p>
+                <p>5.姓。</p>
+            </div>
+            <div class="main-content" v-else>
+                <p>
+                    春，chun，会意。甲骨文字形,从艹(木),草木春时生长；中间是“屯”字，似草木破土而出，土上臃肿部分，即刚破土的胚芽形，表示春季万木生长。“屯”亦兼作声符。小篆字形,隶变以后,除“日”之外,其他部分都看不出来了。本义:春。四季的第一季。春，是一年四季之首，俗话说得好：“一年之计在于春，一日之计在于晨”。万物生长的季节。植物萌芽生长、动物繁殖、农夫下地播种。古代把“历史”叫做“春秋”，那是因为庄稼春生秋熟，春生相当于历史之因，秋熟相当于历史之果，春来秋去的循环就是时间，而时间的循环就是历史。春季开始是在立春（2月2日至5日之间），春季结束在立夏（5月5日至7日之间）。在欧美，春季从中国的春分开始，到夏至结束。在爱尔兰，2月、3月和4月被定为春季，在南半球，一般9月、10月和11月被定为春季。另有朱自清的散文《春》和巴金的小说《春》以及其他一些文学艺术作品。
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Chineseexplain",
+    props: ["wordNum"],
+    data () {
+        return {
+            navIndex: 0,
+        };
+    },
+    methods: {
+        changeNav (index) {
+            this.navIndex = index;
+        },
+    },
+};
+</script>
+
+<style lang='scss' scoped>
+.Chineseexplain {
+    margin-left: 80px;
+    overflow: auto;
+    width: 748px;
+}
+.Chineseexplain_top {
+    background: #fff;
+    box-shadow: 4px 4px 0px 4px rgba(44, 136, 69, 0.17);
+    border-radius: 24px;
+    height: 200px;
+    padding-top: 20px;
+    margin-bottom:40px;
+}
+.penobey {
+    width: 85%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+}
+.Chineseexplain_top span {
+    font-family: FZJCGFKTK;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 32px;
+    color: #19b068;
+}
+.top_conten {
+    width: 90%;
+    margin: 30px auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+.top_conten > div {
+    width: 72px;
+    height: 72px;
+    font-family: FZJCGFKTK;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 48px;
+    border-radius: 8px;
+    background: url('../../assets/common/chinaTian.png') no-repeat 100% 100%;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #4d4b51;
+}
+.main {
+    //   margin-top: 30px;
+    // width: 720px;
+    background: #eefff7;
+    box-shadow: 4px 4px 0px 4px rgba(44, 136, 69, 0.17);
+    border-radius: 24px;
+    padding: 40px 0;
+    &.moreMain {
+        width: 100%;
+    }
+}
+.nav-list {
+    width: 312px;
+    height: 44px;
+    margin: 0 auto;
+    background: rgba(49, 212, 134, 0.2);
+    border-radius: 240px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+    margin-bottom: 44px;
+    list-style: none;
+    > li {
+        height: 52px;
+        width: 156px;
+        text-align: center;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 28px;
+        line-height: 52px;
+        color: #19b068;
+        cursor: pointer;
+        &.active {
+            background: #19b068;
+            border-radius: 240px;
+            color: #ffffff;
+        }
+    }
+}
+.main-content {
+    padding: 48px 48px 0 48px;
+    text-align: left;
+    margin: 0 auto;
+    .combine-words {
+        padding-left: 10px;
+        span {
+            margin-left: 20px;
+        }
+    }
+}
+.main-content p {
+    font-size: 36px;
+    font-family: FZJCGFKTK;
+    font-style: normal;
+    font-weight: normal;
+    color: #404040;
+}
+.questionMiddle {
+    .Chineseexplain {
+        margin-left: 53px;
+        width: 513px;
+    }
+    .Chineseexplain_top {
+        background: #fff;
+        box-shadow: 3px 3px 0px 3px rgba(44, 136, 69, 0.17);
+        border-radius: 16px;
+        height: 133px;
+        padding-top: 14px;
+        margin-bottom:30px;
+    }
+    .penobey {
+        width: 85%;
+        margin: 0 auto;
+    }
+    .Chineseexplain_top span {
+        font-size: 22px;
+    }
+    .top_conten {
+        width: 90%;
+        margin: 20px auto;
+    }
+    .top_conten > div {
+        width: 48px;
+        height: 48px;
+        font-size: 32px;
+        border-radius: 6px;
+        background: url('../../assets/common/chinaTian.png') no-repeat 100% 100%;
+        background-size: 100% 100%;
+    }
+    .main {
+        //   margin-top: 30px;
+        // width: 480px;
+        box-shadow: 3px 3px 0px 3px rgba(44, 136, 69, 0.17);
+        border-radius: 16px;
+        padding: 26px 0;
+        &.moreMain {
+            width: 100%;
+        }
+    }
+    .nav-list {
+        width: 208px;
+        height: 30px;
+        border-radius: 160px;
+        margin-bottom: 30px;
+        > li {
+            height: 34px;
+            width: 104px;
+            font-size: 18px;
+            line-height: 34px;
+            &.active {
+                background: #19b068;
+                border-radius: 160px;
+                color: #ffffff;
+            }
+        }
+    }
+    .main-content {
+        padding: 32px 32px 0 32px;
+        .combine-words {
+            padding-left: 6px;
+            span {
+                margin-left: 14px;
+            }
+        }
+    }
+    .main-content p {
+        font-size: 24px;
+    }
+}
+.questionSmall {
+    .Chineseexplain {
+        margin-left: 40px;
+        width: 374px;
+    }
+    .Chineseexplain_top {
+        box-shadow: 2px 2px 0px 2px rgba(44, 136, 69, 0.17);
+        border-radius: 12px;
+        height: 100px;
+        padding-top: 10px;
+        margin-bottom:20px;
+    }
+    .Chineseexplain_top span {
+        font-size: 16px;
+    }
+    .top_conten {
+        margin: 15px auto;
+    }
+    .top_conten > div {
+        width: 36px;
+        height: 36px;
+        font-size: 24px;
+        border-radius: 4px;
+        background: url('../../assets/common/chinaTian.png') no-repeat 100% 100%;
+        background-size: 100% 100%;
+    }
+    .main {
+        //   margin-top: 30px;
+        // width: 360px;
+        box-shadow: 2px 2px 0px 2px rgba(44, 136, 69, 0.17);
+        border-radius: 12px;
+        padding: 20px 0;
+        &.moreMain {
+            width: 100%;
+        }
+    }
+    .nav-list {
+        width: 156px;
+        height: 22px;
+        border-radius: 120px;
+        margin-bottom: 22px;
+        > li {
+            height: 26px;
+            width: 78px;
+            font-size: 14px;
+            line-height: 26px;
+            &.active {
+                background: #19b068;
+                border-radius: 120px;
+                color: #ffffff;
+            }
+        }
+    }
+    .main-content {
+        padding: 24px 24px 0 24px;
+        .combine-words {
+            padding-left: 5px;
+            span {
+                margin-left: 10px;
+            }
+        }
+    }
+    .main-content p {
+        font-size: 18px;
+    }
+}
+</style>

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

@@ -0,0 +1,193 @@
+<!--  -->
+<template>
+    <div class="freewrite">
+        <div class="strockred" :class="wordNum ? '' : 'strockred_single'">
+            <!-- <div class="strock-play-box" @click="handelReset">
+        <img src="@/assets/common/strock-play.png" class="strock-play" />
+            </div>-->
+            <div :class="wordNum ? 'character-target-div_more' : 'character-target-div_single'" class="character-target-div">
+                <vueEsign
+                    :bgColor.sync="bgColor"
+                    :height="height"
+                    :isCrop="isCrop"
+                    :lineColor="lineColor"
+                    :lineWidth="lineWidth"
+                    :width="width"
+                    class="vueEsign"
+                    ref="esign"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import vueEsign from "vue-esign";
+export default {
+    components: {
+        vueEsign,
+    },
+    props: ["lineColor", "lineWidth", "cur", "wordNum"],
+    data () {
+        return {
+            width: this.wordNum != "2" ? 444 : 800,
+            height: 444,
+            bgColor: "",
+            isCrop: false,
+        };
+    },
+    computed: {},
+    watch: {
+        // lineColor(newVal, oldVal) {
+        //   this.updateColor(newVal);
+        // }
+    },
+    //方法集合
+    methods: {
+        handelReset () {
+            this.$refs.esign.reset();
+        },
+        handleGenerate () {
+            this.$refs.esign
+                .generate()
+                .then((res) => {
+                    let Book_img = res.replace("data:image/png;base64,", "");
+                    //console.log(Book_img);
+                    //this.textOcr(res.replace("data:image/png;base64,", ""));
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created () { },
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted () { },
+    beforeCreate () { }, //生命周期 - 创建之前
+    beforeMount () { }, //生命周期 - 挂载之前
+    beforeUpdate () { }, //生命周期 - 更新之前
+    updated () { }, //生命周期 - 更新之后
+    beforeDestroy () { }, //生命周期 - 销毁之前
+    destroyed () { }, //生命周期 - 销毁完成
+    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.freewrite {
+    width: 100%;
+    .strockred {
+        position: relative;
+        margin: 0 auto;
+        width: 100%;
+        height: 448px;
+        .character-target-div {
+            width: 100%;
+            height: 448px;
+            // background: url('../../assets/common/bg-field.png') center no-repeat;
+            // background-size: 100% 100%;
+            border-radius: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 99999;
+            &_more {
+                width: 100%;
+                background: 0 0;
+                background-size: 100% 100%;
+            }
+            .vueEsign {
+                width: 444px;
+                height: 448px;
+            }
+        }
+    }
+}
+.questionMiddle {
+    .freewrite {
+        .strockred {
+            .character-target-div {
+                // background: url('../../assets/common/bg-field.png') center no-repeat;
+                // background-size: 100% 100%;
+                border-radius: 16px;
+                .vueEsign {
+                    width: 296px;
+                    height: 296px;
+                }
+                &.character-target-div_single{
+                    height: 296px;
+                }
+            }
+            &.strockred_single{
+                height: 296px;
+            }
+        }
+    }
+}
+.questionSmall {
+    .freewrite {
+        .strockred {
+            .character-target-div {
+                // background: url('../../assets/common/bg-field.png') center no-repeat;
+                // background-size: 100% 100%;
+                border-radius: 12px;
+                .vueEsign {
+                    width: 222px;
+                    height: 222px;
+                }
+                &.character-target-div_single{
+                    height: 222px;
+                }
+            }
+            &.strockred_single{
+                height: 222px;
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.strock-play-box {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 999;
+    width: 84px;
+    height: 84px;
+    background: url('../../assets/common/strock-play.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/common/strock-play-click.png');
+    background-size: 100%;
+}
+.questionMiddle {
+    .strock-play-box {
+        width: 56px;
+        height: 56px;
+        > img {
+            width: 13px;
+            height: 16px;
+        }
+    }
+}
+.questionSmall {
+    .strock-play-box {
+        width: 42px;
+        height: 42px;
+        > img {
+            width: 10px;
+            height: 12px;
+        }
+    }
+}
+</style>

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

@@ -6,11 +6,11 @@
       class="Book_content"
       v-for="(item, index) in cur.stem"
     >
-      <!-- <img
+      <img
         @click="changePraShow()"
         class="close-icon"
-        src="../../assets/common/close-icon.png"
-      /> -->
+        src="../../../../assets/NPC/close-icon-red.png"
+      />
       <div class="left-content">
         <Audio :mp3="item.mp3_url" :pinyin="item.pinyin" />
 
@@ -123,14 +123,14 @@
 </template>
 
 <script>
-// import Strockplay from "../common/Strockplay";
-// import Strockred from "../common/Strockred";
-// import Freewrite from "../common/Freewrite";
-// import ChinaDict from "../common/ChinaDict";
-// import Audio from "../common/Audio";
+import Strockplay from "./Strockplay.vue";
+// import Strockred from "./Strockred";
+// import Freewrite from "./Freewrite";
+// import ChinaDict from "./ChinaDict";
+// import Audio from "./AudioRed.vue";
 export default {
   components: {
-    // Strockplay,
+    Strockplay,
     // Strockred,
     // Freewrite,
     // ChinaDict,
@@ -204,188 +204,187 @@ export default {
 };
 </script>
 <style lang='scss' scoped>
-//@import url(); 引入公共css类
-// .practice {
-//   width: 1368px;
-//   max-height: 840px;
-//   overflow: auto;
-//   margin: 0 auto;
+.practice {
+  width: 504px;
+  max-height: 434px;
+  overflow: auto;
+  margin: 0 auto;
 //   background: #21ba71;
 //   box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.25);
-//   border-radius: 40px;
-//   .clean-btn {
-//     width: 34px;
-//     margin: 0 16px;
-//     cursor: pointer;
-//   }
-//   .close-icon {
-//     position: absolute;
-//     top: 18px;
-//     right: 18px;
-//     width: 84px;
-//     height: 84px;
-//     cursor: pointer;
-//   }
-//   .Book_content {
-//     width: 100%;
-//     height: 100%;
-//     display: flex;
-//     box-sizing: border-box;
-//     padding: 72px 48px 48px;
-//     position: relative;
-//     align-items: flex-start;
-//   }
-//   .left-content {
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: center;
-//   }
-//   .right-content {
-//     position: relative;
-//     width: 720px;
-//     height: 720px;
-//     background: #ffffff;
-//     box-shadow: 0px 6px 0px rgba(0, 149, 78, 0.4);
-//     border-radius: 24px;
-//     box-sizing: border-box;
-//     padding: 42px 40px 24px 40px;
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: flex-start;
-//     align-items: center;
-//     margin-left: 64px;
-//     .nav-list {
-//       width: 312px;
-//       height: 44px;
-//       background: rgba(49, 212, 134, 0.2);
-//       border-radius: 240px;
-//       display: flex;
-//       justify-content: flex-start;
-//       align-items: center;
-//       padding: 0;
-//       margin-bottom: 44px;
-//       list-style: none;
-//       > li {
-//         height: 52px;
-//         width: 156px;
-//         text-align: center;
-//         font-style: normal;
-//         font-weight: bold;
-//         font-size: 28px;
-//         line-height: 52px;
-//         color: #19b068;
-//         cursor: pointer;
-//         &.active {
-//           background: #19b068;
-//           border-radius: 240px;
-//           color: #ffffff;
-//         }
-//       }
-//     }
-//     .right-strockred {
-//       width: 448px;
-//       height: 448px;
-//     }
-//     .footer {
-//       position: absolute;
-//       bottom: 24px;
-//       width: 640px;
-//       display: flex;
-//       justify-content: space-between;
-//       align-items: center;
-//       .pen-colors {
-//         display: flex;
-//         justify-content: flex-start;
-//         align-items: center;
-//         .write-icon-3 {
-//           width: 25px;
-//           height: 37px;
-//           margin-right: 26px;
-//         }
-//         .colors-list {
-//           display: flex;
-//           justify-content: flex-start;
-//           align-items: center;
-//           margin: 0;
-//           padding: 0;
-//           > li {
-//             width: 34px;
-//             height: 34px;
-//             border: 2px solid #fff;
-//             box-sizing: border-box;
-//             background: #fff;
-//             margin: 0 8px;
-//             display: flex;
-//             justify-content: center;
-//             align-items: center;
-//             border-radius: 100%;
-//             cursor: pointer;
-//             > span {
-//               width: 26px;
-//               height: 26px;
-//               border-radius: 100%;
-//               &.color-item0 {
-//                 background: #404040;
-//               }
-//               &.color-item1 {
-//                 background: #f65d4d;
-//               }
-//               &.color-item2 {
-//                 background: #19b068;
-//               }
-//               &.color-item3 {
-//                 background: #52a1ea;
-//               }
-//               &.color-item4 {
-//                 background: #ff8c49;
-//               }
-//             }
+  border-radius: 40px;
+  .clean-btn {
+    width: 34px;
+    margin: 0 16px;
+    cursor: pointer;
+  }
+  .close-icon {
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    width: 84px;
+    height: 84px;
+    cursor: pointer;
+  }
+  .Book_content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    padding: 72px 48px 48px;
+    position: relative;
+    align-items: flex-start;
+  }
+  .left-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .right-content {
+    position: relative;
+    width: 720px;
+    height: 720px;
+    background: #ffffff;
+    box-shadow: 0px 6px 0px rgba(0, 149, 78, 0.4);
+    border-radius: 24px;
+    box-sizing: border-box;
+    padding: 42px 40px 24px 40px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 64px;
+    .nav-list {
+      width: 312px;
+      height: 44px;
+      background: rgba(49, 212, 134, 0.2);
+      border-radius: 240px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0;
+      margin-bottom: 44px;
+      list-style: none;
+      > li {
+        height: 52px;
+        width: 156px;
+        text-align: center;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 28px;
+        line-height: 52px;
+        color: #19b068;
+        cursor: pointer;
+        &.active {
+          background: #19b068;
+          border-radius: 240px;
+          color: #ffffff;
+        }
+      }
+    }
+    .right-strockred {
+      width: 448px;
+      height: 448px;
+    }
+    .footer {
+      position: absolute;
+      bottom: 24px;
+      width: 640px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .pen-colors {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        .write-icon-3 {
+          width: 25px;
+          height: 37px;
+          margin-right: 26px;
+        }
+        .colors-list {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+          > li {
+            width: 34px;
+            height: 34px;
+            border: 2px solid #fff;
+            box-sizing: border-box;
+            background: #fff;
+            margin: 0 8px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 100%;
+            cursor: pointer;
+            > span {
+              width: 26px;
+              height: 26px;
+              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: 42px;
-//           height: 38px;
-//           margin-left: 9px;
-//           cursor: pointer;
-//         }
-//       }
-//     }
-//   }
-// }
-// .strockplay {
-//   margin-bottom: 41px;
-//   width: 444px;
-//   height: 444px;
-//   border-radius: 24px;
-//   box-shadow: 0px 6px 0px rgba(0, 149, 78, 0.4);
-// }
-// .footer {
-//   width: 100%;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   cursor: pointer;
+            &.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: 42px;
+          height: 38px;
+          margin-left: 9px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.strockplay {
+  margin-bottom: 41px;
+  width: 444px;
+  height: 444px;
+  border-radius: 24px;
+  box-shadow: 0px 6px 0px rgba(0, 149, 78, 0.4);
+}
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 //   .bg-box {
 //     width: 124px;
 //     height: 72px;
@@ -403,23 +402,23 @@ export default {
 //       margin-top: 15px;
 //     }
 //   }
-//   .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 */
+  .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;
+    text-align: center;
 
-//     color: #ba7d21;
-//   }
-// }
+    color: #ba7d21;
+  }
+}
 
 </style>
 <style lang="scss">

src/components/Adult/preview/components/Strockplay.vue

@@ -0,0 +1,130 @@
+<!--  -->
+<template>
+  <div class="strockplayInner" :class="className">
+    <div @click="playHanzi" class="strock-play-box" v-if="playStorkes">
+      <!-- <img class="strock-play" src="../../assets/common/strock-play.png"> -->
+    </div>
+    <div
+      :class="wordNum == '2' ? 'morewords' : ''"
+      :id="targetDiv"
+      class="character-target-div"
+    ></div>
+  </div>
+</template>
+
+<script>
+const HanziWriter = require("hanzi-writer");
+export default {
+  components: {},
+  props: [
+    "targetDiv",
+    "Book_text",
+    "playStorkes",
+    "strokeColor",
+    "wordNum",
+    "className",
+  ],
+  data() {
+    return {
+      writer: null,
+    };
+  },
+  computed: {},
+  watch: {
+    targetDiv: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      //var ren = require("hanzi-writer-data/国");
+      _this.writer = HanziWriter.default.create(
+        _this.targetDiv,
+        _this.Book_text,
+        {
+          padding: 5,
+          showOutline: true,
+          strokeColor: _this.strokeColor ? _this.strokeColor : "#000",
+        }
+      );
+    },
+    playHanzi() {
+      let _this = this;
+      _this.writer.animateCharacter();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.strockplayInner {
+  position: relative;
+  margin: 0 auto;
+  width: 100%; //444px
+  height: 100%; //480px
+}
+.character-target-div {
+  width: 100%; //444px
+  height: 100%; //480px
+  background: #fff url("../../../../assets/NPC/chinaTianRed.png") center no-repeat;
+  background-size: 100% 100%;
+  border-radius: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+  &.morewords {
+    background: url("../../../../assets/NPC/chinaTianRed.png") center no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.animate-butto {
+  width: 240px;
+  height: 160px;
+  font-size: 28px;
+}
+// .adult-strockplay {
+//   .character-target-div {
+//     background: #fff url("../../assets/adult/adult-hz-tian.png") center
+//       no-repeat;
+//     background-size: 100% 100%;
+//   }
+//   .strock-play-box {
+//     position: absolute;
+//     top: 0;
+//     right: 0;
+//     width: 20px;
+//     height: 20px;
+//     background: #fff url("../../assets/adult/adult-play-strock.png") center
+//       no-repeat;
+//     background-size: 100% 100%;
+//   }
+// }
+</style>

src/components/Adult/preview/components/Strockred.vue

@@ -0,0 +1,168 @@
+<!--  -->
+<template>
+    <div class="strockredBox">
+        <div class="strockred">
+            <div @click="resetHanzi" class="strock-play-box" v-if="playStorkes">
+                <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
+            </div>
+            <div
+                :class="wordNum == '2' ? 'character-target-div_220' : ''"
+                :id="targetDiv"
+                class="character-target-div"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script>
+const HanziWriter = require("hanzi-writer");
+export default {
+    name: "Strockred",
+    components: {},
+    props: ["targetDiv", "hanzicolor", "Book_text", "playStorkes", "wordNum"],
+    data () {
+        return {
+            writer: null,
+            colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
+        };
+    },
+    computed: {},
+    watch: {
+        hanzicolor (newVal, oldVal) {
+            this.updateColor(newVal);
+        },
+        Book_text: {
+            handler: function (val, oldVal) {
+                if (val != oldVal) {
+                    let _this = this;
+                    _this.$nextTick(() => {
+                        _this.initHanziwrite();
+                    });
+                }
+            },
+            // 深度观察监听
+            deep: true,
+        },
+    },
+    //方法集合
+    methods: {
+        initHanziwrite () {
+            let _this = this;
+            let options = {
+                padding: 5,
+                showCharacter: false,
+                strokeColor: _this.hanzicolor,
+                drawingColor: _this.hanzicolor,
+                drawingWidth: 6,
+            };
+            _this.writer = HanziWriter.default.create(
+                _this.targetDiv,
+                _this.Book_text,
+                options
+            );
+            _this.writer.quiz();
+        },
+        resetHanzi () {
+            let _this = this;
+            _this.writer.quiz();
+        },
+        updateColor (color) {
+            let _this = this;
+            _this.writer.updateColor("strokeColor", color);
+            _this.writer.updateColor("drawingColor", color);
+        },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）
+    created () { },
+    //生命周期 - 挂载完成（可以访问DOM元素）
+    mounted () {
+        let _this = this;
+        _this.$nextTick(() => {
+            _this.initHanziwrite();
+        });
+    },
+    beforeCreate () { }, //生命周期 - 创建之前
+    beforeMount () { }, //生命周期 - 挂载之前
+    beforeUpdate () { }, //生命周期 - 更新之前
+    updated () { }, //生命周期 - 更新之后
+    beforeDestroy () { }, //生命周期 - 销毁之前
+    destroyed () { }, //生命周期 - 销毁完成
+    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.strockredBox {
+    width: 100%;
+    height: 100%;
+}
+.strockred {
+    position: relative;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    //chinawrite220.png
+    .character-target-div {
+        width: 100%;
+        height: 100%;
+        background: url('../../assets/common/bg-field.png') center no-repeat;
+        background-size: 100% 100%;
+        border-radius: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 99999;
+        &_220 {
+            background: url('../../assets/common/chinawrite220.png') center
+                no-repeat;
+            background-size: 100% 100%;
+            border-radius: 0;
+        }
+    }
+    .animate-butto {
+        width: 240px;
+        height: 160px;
+        font-size: 28px;
+    }
+}
+.questionMiddle {
+    .strockred {
+        .character-target-div {
+            background: url('../../assets/common/bg-field.png') center no-repeat;
+            background-size: 100% 100%;
+            border-radius: 16px;
+            &_220 {
+                background: url('../../assets/common/chinawrite220.png') center
+                    no-repeat;
+                background-size: 100% 100%;
+                border-radius: 0;
+            }
+        }
+        .animate-butto {
+            width: 160px;
+            height: 106px;
+            font-size: 18px;
+        }
+    }
+}
+.questionSmall {
+    .strockred {
+        .character-target-div {
+            background: url('../../assets/common/bg-field.png') center no-repeat;
+            background-size: 100% 100%;
+            border-radius: 12px;
+            &_220 {
+                background: url('../../assets/common/chinawrite220.png') center
+                    no-repeat;
+                background-size: 100% 100%;
+                border-radius: 0;
+            }
+        }
+        .animate-butto {
+            width: 120px;
+            height: 80px;
+            font-size: 14px;
+        }
+    }
+}
+</style>

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

@@ -5,9 +5,10 @@
       <i class="el-icon-close" @click="changeWordCard(false)"></i>
     </div>
     <div class="bwc-top" v-if="word.detail">
+        <span v-if="word.detail.pinyin">{{word.detail.pinyin}}</span>
       <Audio
         :fontSize="20"
-        :mp3="word.detail.mp3_url ? word.detail.mp3_url : ''"
+        :mp3="word.detail.mp3_list.length>0 ? word.detail.mp3_list[0].url : ''"
         :pinyin="word.detail.pinyin"
       />
     </div>
@@ -27,11 +28,21 @@
           :targetDiv="'bwcHanziIntp' + conItem + conindex"
           :wordNum="word.detail.new_word.length"
         />
+        <img
+          src="../../../../assets/NPC/icon-write-red.png"
+          class="collect-icon"
+          v-if="word.detail.new_word.length>1"
+          @click="writeWord(conItem)"
+        />
         <div class="bwc-line" v-if="conindex < word.detail.new_word.length - 1"></div>
       </div>
     </div>
     <p v-else class="bwc-tolength"><span v-for="(item,index) in word.detail.new_word" :key="index">{{item}}</span></p>
-    <div class="bwc-word-en" v-if="word.detail && word.detail.en">spring</div>
+    <div class="bwc-word-en" v-if="word.detail && word.detail.definition_list.length>0">
+        <span v-for="(item,index) in word.detail.definition_list" :key="index">
+            {{item}}{{index==word.detail.definition_list.length-1?'':'；'}}
+        </span>
+    </div>
     <div class="bwc-more-intp" @click="viewIntp">更多释义</div>
     <div class="bwc-footer">
       <button class="bwc-btn">
@@ -41,7 +52,7 @@
         />
         收藏
       </button>
-      <button class="bwc-btn" @click="writeWord">
+      <button class="bwc-btn bwc-btn2" @click="writeWord(word.detail.new_word,word.detail.pinyin)" v-if="word.detail.new_word.length==1">
         <img
           src="../../../../assets/NPC/icon-write-red.png"
           class="collect-icon"
@@ -50,12 +61,7 @@
       </button>
     </div>
     <div class="practiceBox" v-if="isPraShow">
-      <template v-if="word.list.length < 2 && curData">
         <Practice :changePraShow="changePraShow" :cur="curData" />
-      </template>
-      <template v-if="word.list.length > 1 && curData">
-        <Practicewords :changePraShow="changePraShow" :cur="curData" />
-      </template>
     </div>
     <div class="practiceBox" v-if="isIntpShow">
       <Wordintp :changeIntpShow="changeIntpShow" :word="word" />
@@ -67,9 +73,7 @@
 import Audio from "./AudioRed.vue";
 import Strockplayredline from "./Strockplayredline.vue";
 import Practice from "./Practice.vue";
-import Practicewords from "./Practicewords.vue";
 import Wordintp from "./Wordintp.vue";
-import { getHZChineseInfo } from "@/api/ajax";
 
 export default {
   name: "Wordcard",
@@ -77,7 +81,6 @@ export default {
     Strockplayredline,
     Audio,
     Practice,
-    Practicewords,
     Wordintp,
   },
   props: ["word", "changeWordCard"],
@@ -93,15 +96,15 @@ export default {
     word: {
       handler: function (val, oldVal) {
         let _this = this;
-        this.curData = {
-          stem: [
-            {
-              con: val.detail && val.detail.new_word ? val.detail.new_word : "",
-              pinyin: val.detail && val.detail.pinyin ? val.detail.pinyin : "",
-              mp3_url: "",
-            },
-          ],
-        };
+        // this.curData = {
+        //   stem: [
+        //     {
+        //       con: val.detail && val.detail.new_word ? val.detail.new_word : "",
+        //       pinyin: val.detail && val.detail.pinyin ? val.detail.pinyin : "",
+        //       mp3_url: "",
+        //     },
+        //   ],
+        // };
       },
       // 深度观察监听
       deep: true,
@@ -109,8 +112,23 @@ export default {
   },
   //方法集合
   methods: {
-    writeWord() {
+    writeWord(words,pinyin) {
       this.isPraShow = true;
+      this.curData = {
+        stem: [
+          {
+            con:
+              words
+                ? words
+                : "",
+            pinyin:
+              pinyin && pinyin
+                ? pinyin
+                : "",
+            mp3_url: "",
+          },
+        ],
+      };
     },
     changePraShow() {
       this.isPraShow = false;
@@ -121,40 +139,30 @@ export default {
     changeIntpShow() {
       this.isIntpShow = false;
     },
-    getChineseInfo(){
-        let data = {
-            query: this.word.detail.new_word,
-        };
-        debugger
-        getHZChineseInfo(data).then((res) => {
-            
-        });
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
       console.log(this.word)
-    //   this.getChineseInfo()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
     if (this.word) {
-      this.curData = {
-        stem: [
-          {
-            con:
-              _this.word.detail && _this.word.detail.new_word
-                ? _this.word.detail.new_word
-                : "",
-            pinyin:
-              _this.word.detail && _this.word.detail.pinyin
-                ? _this.word.detail.pinyin
-                : "",
-            mp3_url: "",
-          },
-        ],
-      };
+    //   this.curData = {
+    //     stem: [
+    //       {
+    //         con:
+    //           _this.word.detail && _this.word.detail.new_word
+    //             ? _this.word.detail.new_word
+    //             : "",
+    //         pinyin:
+    //           _this.word.detail && _this.word.detail.pinyin
+    //             ? _this.word.detail.pinyin
+    //             : "",
+    //         mp3_url: "",
+    //       },
+    //     ],
+    //   };
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -194,7 +202,8 @@ export default {
     }
   }
   min-width: 304px;
-  min-height: 360px;
+  max-width: 560px;
+//   min-height: 360px;
   background: #ffffff;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
@@ -206,6 +215,16 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    .content-voices{
+        width: 24px;
+    }
+    >span{
+        font-family: 'GB-PINYINOK-B';
+        color: #2C2C2C;
+        font-size: 20px;
+        line-height: 24px;
+        margin-right: 4px;
+    }
   }
   .bwc-Strockplay {
     display: flex;
@@ -223,6 +242,14 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      position: relative;
+      .collect-icon{
+          width: 16px;
+          position: absolute;
+          right: 4px;
+          bottom: 4px;
+          cursor: pointer;
+      }
     }
     .bwc-line {
       width: 2px;
@@ -239,12 +266,11 @@ export default {
   }
   .bwc-word-en {
     font-style: normal;
-    font-weight: 600;
-    font-size: 20px;
+    font-size: 16px;
     line-height: 150%;
     text-align: center;
     color: #2c2c2c;
-    margin-bottom: 8px;
+    margin-bottom: 14px;
   }
   .bwc-more-intp {
     font-weight: normal;
@@ -262,7 +288,8 @@ export default {
     justify-content: space-between;
     align-items: center;
     > button {
-      width: 128px;
+    //   width: 128px;
+      flex: 1;
       height: 40px;
       display: flex;
       justify-content: center;
@@ -275,12 +302,16 @@ export default {
       cursor: pointer;
       border: 1px solid rgba(0, 0, 0, 0.1);
       font-size: 16px;
+      &.bwc-btn2{
+        margin-left: 8px;
+      }
       > img {
         width: 24px;
         height: 24px;
         margin-right: 4px;
       }
     }
+    
   }
 }
 </style>

src/components/Adult/preview/components/Wordintp.vue

@@ -2,19 +2,20 @@
 <template>
   <div class="wordIntp" v-if="word">
     <div class="closeBox">
+      <span>数据来自百度汉语</span>
       <i class="el-icon-close" @click="changeIntpShow(false)"></i>
     </div>
     <div class="bwc-top" v-if="word.detail">
+        <span v-if="word.detail.pinyin">{{word.detail.pinyin}}</span>
       <Audio
         :fontSize="20"
-        :mp3="word.detail.mp3_url ? word.detail.mp3_url : ''"
-        :pinyin="word.detail.pinyin"
+        :mp3="mp3Url ? mp3Url : ''"
       />
     </div>
     <div
       class="bwc-Strockplay"
-      :style="{ width: word.list.length * 126 + 8 + 'px' }"
-      v-if="word.list.length<5"
+      :style="{ width: word.detail.new_word.length * 126 + 8 + 'px' }"
+      v-if="word.detail.new_word.length<5"
     >
       <div
         :key="conindex"
@@ -25,12 +26,12 @@
           :Book_text="conItem"
           :playStorkes="true"
           :targetDiv="'bwcIntp' + conItem + conindex"
-          :wordNum="word.list.length"
+          :wordNum="word.detail.new_word.length"
         />
-        <div class="bwc-line" v-if="conindex < word.list.length - 1"></div>
+        <div class="bwc-line" v-if="conindex < word.detail.new_word.length - 1"></div>
       </div>
     </div>
-    <p v-else class="bwc-tolength"><span v-for="(item,index) in word.list" :key="index">{{item}}</span></p>
+    <p v-else class="bwc-tolength"><span v-for="(item,index) in word.detail.new_word" :key="index">{{item}}</span></p>
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
@@ -38,28 +39,58 @@
       @select="handleSelect"
     >
       <el-menu-item index="1">释义</el-menu-item>
-      <el-menu-item index="2" disabled>近/反义词</el-menu-item>
-      <el-menu-item index="3" disabled>造句</el-menu-item>
+      <el-menu-item index="2">近/反义词</el-menu-item>
+      <el-menu-item index="3">组词</el-menu-item>
     </el-menu>
     <template v-if="activeIndex == '1'">
-      <ul class="bwc-intp" v-if="word.detail">
-        <li v-for="(item, index) in word.detail.definition_list" :key="index">
-          {{ item }}
-        </li>
-      </ul>
+      <div class="bwc-intp">
+        <!-- 基本释义 -->
+        <h1>基本释义</h1>
+        <span v-if="word.detail.pinyin" class="pinyin">{{word.detail.pinyin}}</span>
+        <p v-for="(itemss,indexss) in paraphrase" :key="indexss" class="paraphrase">
+            {{itemss['@value']}}
+        </p>
+        <hr />
+      </div>
+    </template>
+    <template v-if="activeIndex == '2'">
+      <div class="bwc-intp">
+        <h1 v-if="synonymList.length>0">近义词</h1>
+        <ul class="synonym">
+            <li v-for="(itemss,indexss) in synonymList" :key="indexss" class="paraphrase">
+                {{itemss['@value']}}
+            </li>
+        </ul>
+        <h1 v-if="antonymList.length>0">反义词</h1>
+        <ul class="synonym">
+            <li v-for="(itemss,indexss) in antonymList" :key="indexss" class="paraphrase">
+                {{itemss['@value']}}
+            </li>
+        </ul>
+      </div>
+    </template>
+    <template v-if="activeIndex == '3'">
+      <div class="bwc-intp">
+        <ul class="synonym">
+            <li v-for="(itemss,indexss) in termsList" :key="indexss" class="paraphrase">
+                {{itemss['@value']}}
+            </li>
+        </ul>
+      </div>
     </template>
   </div>
 </template>
 
 <script>
-// import Audio from "./Audio.vue";
-// import Strockplayredline from "./Strockplayredline.vue";
+import Audio from "./AudioRed.vue";
+import Strockplayredline from "./Strockplayredline.vue";
+import { getHZChineseInfo } from "@/api/ajax";
 
 export default {
   name: "WordIntp",
   components: {
-    // Strockplayredline,
-    // Audio,
+    Strockplayredline,
+    Audio,
   },
   props: ["word", "changeIntpShow"],
   data() {
@@ -67,6 +98,88 @@ export default {
       isPraShow: false,
       curData: null,
       activeIndex: "1",
+      mp3Url:'', // 音频
+      paraphrase:[], // 释义
+      synonymList:[], // 近义词
+      antonymList:[], // 反义词
+      termsList:[], // 组词
+      dataDetail: [
+            {
+                "request":{
+                    "query":"熊掌",
+                    "queryType":"entity"
+                },
+                "response":{
+                    "voice":"熊掌，意思是：熊的脚掌。",
+                    "sourceUrl":"https://hanyu.baidu.com/zici/s?wd=%E7%86%8A%E6%8E%8C&amp;query=%E7%86%8A%E6%8E%8C&amp;srcid=28243&amp;from=kg2",
+                    "answer":[
+                        "熊掌"
+                    ],
+                    "sourceName":"百度汉语",
+                    "title":"熊掌",
+                    "entity":[
+                        {
+                            "@type":[
+                                "term"
+                            ],
+                            "name":"熊掌",
+                            "attrs":[
+                                {
+                                    "objects":[
+                                        {
+                                            "@value":"https://hanyu.baidu.com/zici/s?wd=%E7%86%8A%E6%8E%8C&amp;query=%E7%86%8A%E6%8E%8C&amp;srcid=28243&amp;from=kg2"
+                                        }
+                                    ],
+                                    "label":"详情页",
+                                    "type":"simple",
+                                    "key":"url"
+                                },
+                                {
+                                    "objects":[
+                                        {
+                                            "@value":"熊的脚掌。"
+                                        }
+                                    ],
+                                    "label":"释义",
+                                    "type":"simple",
+                                    "key":"definition"
+                                },
+                                {
+                                    "objects":[
+                                        {
+                                            "@value":"https://dss0.baidu.com/6KAZsjip0QIZ8tyhnq/text2audio?tex=%E7%86%8A%28xiong2%29%E6%8E%8C%28zhang3%29&amp;cuid=dict&amp;lan=ZH&amp;ctp=1&amp;pdt=30&amp;vol=9&amp;per=4100"
+                                        }
+                                    ],
+                                    "label":"读音",
+                                    "type":"simple",
+                                    "key":"pronunciation"
+                                },
+                                {
+                                    "objects":[
+                                        {
+                                            "@value":"[xióng zhǎng]"
+                                        }
+                                    ],
+                                    "label":"拼音",
+                                    "type":"simple",
+                                    "key":"spell"
+                                },
+                                {
+                                    "objects":[
+                                        {
+                                            "@value":"ceip"
+                                        }
+                                    ],
+                                    "label":"五笔",
+                                    "type":"simple",
+                                    "key":"wubi"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            }
+        ]
     };
   },
   computed: {},
@@ -87,7 +200,51 @@ export default {
     changePraShow() {
       this.isPraShow = false;
     },
-    handleSelect() {},
+    handleSelect(val) {
+        this.activeIndex = val
+    },
+    getChineseInfo(){
+        let _this = this
+        let data = {
+            query: this.word.detail.new_word,
+            //  query: "开心",
+        };
+        debugger
+        getHZChineseInfo(data).then((res) => {
+            _this.dataDetail = res.data.result
+            _this.handleChineseDetail()
+        });
+    },
+    // 处理数据
+    handleChineseDetail(){
+        let _this = this
+        _this.dataDetail.forEach(item=>{
+            if(item.request.queryType=='entity'){
+                // 读音
+                item.response.entity.forEach(items=>{
+                    items.attrs.forEach(itemss=>{
+                        if(itemss.key=="pronunciation"){
+                            // 音频
+                             _this.mp3Url = itemss.objects[0]['@value']?itemss.objects[0]['@value']:''
+                        }else if(itemss.key=="definition"){
+                            // 释义
+                             _this.paraphrase = itemss.objects
+                        }else if(itemss.key=="synonym"){
+                            // 近义词
+                             _this.synonymList = itemss.objects
+                        }else if(itemss.key=="antonym"){
+                            // 反义词
+                             _this.antonymList = itemss.objects
+                        }else if(itemss.key=="terms"){
+                            // 反义词
+                             _this.termsList = itemss.objects
+                        }
+                    })
+                })
+               
+            }
+        })
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -95,6 +252,8 @@ export default {
   mounted() {
     let _this = this;
     console.log(this.word);
+    //   this.getChineseInfo()
+    _this.handleChineseDetail()
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -109,17 +268,59 @@ export default {
 //@import url(); 引入公共css类
 .wordIntp {
   width: 600px;
-  height: 100vh;
+//   height: 100vh;
   overflow: hidden;
   overflow-y: auto;
   margin: 0 auto;
+  position: relative;
   .bwc-intp {
-    > li {
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 150%;
-      color: #2c2c2c;
-    }
+      padding: 16px 0;
+      h1{
+          color: #000000;
+          font-size: 20px;
+          line-height: 150%;
+          font-weight: normal;
+          margin: 8px 0 8px 0;
+      }
+      .pinyin{
+          color: #DE4444;
+          font-size: 24px;
+          line-height: 36px;
+          margin-bottom: 8px;
+          font-family: 'GB-PINYINOK-B';
+          display: block;
+      }
+      .paraphrase{
+          margin-bottom: 8px;
+          margin-top: 0;
+          color: #000000;
+          font-size: 16px;
+          line-height: 150%;
+      }
+      hr{
+          margin: 16px 0 0 0;
+          background: rgba($color: #000000, $alpha: 0.15);
+          height: 1px;
+          border: none;
+      }
+      ul.synonym{
+          display: flex;
+          flex-flow: wrap;
+          margin-left: -4px;
+          padding: 4px 0;
+          li{
+              padding: 4px 8px;
+              background: #FFFFFF;
+              border: 1px solid rgba(0, 0, 0, 0.15);
+              border-radius: 4px;
+              margin: 4px;
+              font-size: 16px;
+              line-height: 150%;
+              color: #000000;
+              text-align: center;
+              min-width: 127px;
+          }
+      }
   }
   .practiceBox {
     position: fixed;
@@ -137,17 +338,29 @@ export default {
   .closeBox {
     width: 100%;
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 12px;
     > i {
+        font-size: 16px;
+        color:#000000;
       cursor: pointer;
     }
+    span{
+        color: #000000;
+        opacity: 0.2;
+        font-size: 14px;
+        line-height: 130%;
+    }
   }
   min-width: 312px;
   min-height: 360px;
   background: #ffffff;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
-  padding: 24px;
+  padding: 52px 32px 32px;
   box-sizing: border-box;
   .bwc-top {
     margin-bottom: 16px;
@@ -155,6 +368,16 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    .content-voices{
+        width: 24px;
+    }
+    >span{
+        font-family: 'GB-PINYINOK-B';
+        color: #2C2C2C;
+        font-size: 20px;
+        line-height: 24px;
+        margin-right: 4px;
+    }
   }
   .bwc-Strockplay {
     display: flex;
@@ -163,19 +386,28 @@ export default {
     min-width: 130px;
     height: 130px;
     margin: 0 auto;
-    margin-bottom: 16px;
-    border: 2px solid #ff5757;
+    margin-bottom: 6px;
+    border: 2px solid #DE4444;
     border-radius: 8px;
     box-sizing: border-box;
+    overflow: hidden;
     .strockplay {
       display: flex;
       justify-content: center;
       align-items: center;
+      position: relative;
+      .collect-icon{
+          width: 16px;
+          position: absolute;
+          right: 4px;
+          bottom: 4px;
+          cursor: pointer;
+      }
     }
     .bwc-line {
       width: 2px;
       height: 126px;
-      background: #ff5757;
+      background: #DE4444;
     }
   }
   .bwc-tolength{
@@ -230,3 +462,21 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.wordIntp{
+    .el-menu--horizontal > .el-menu-item {
+        width: 33.33%;
+        text-align: center;
+        color: #000000;
+        font-size: 18px;
+    }
+    .el-menu.el-menu--horizontal{
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .el-menu--horizontal>.el-menu-item.is-active{
+        color: #DE4444;
+        font-weight: bold;
+        border-bottom: 2px solid #DE4444;
+    }
+}
+</style>