生字展示

src/components/Adult/Preview.vue

@@ -101,6 +101,9 @@
                 <template v-if="itemss.type == 'text_problem_chs'">
                   <TextProblem :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.type == 'newWord_preview_chs'">
+                  <NewWordShow :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -128,6 +131,7 @@ import SelectTone from './preview/SelectTone.vue' // 选择声调
 import Soduko from './preview/Soduko.vue' // 数独
 import Single from './preview/Single.vue' // 单选
 import TextProblem from './preview/TextProblem.vue' // 课文上方的问题 
+import NewWordShow from './preview/NewWordShow.vue' // 生字展示
 export default {
   name: "preview",
   components: {
@@ -148,6 +152,7 @@ export default {
     Soduko,
     Single,
     TextProblem,
+    NewWordShow,
   },
   props: ["context", "fatherName"],
   data() {

src/components/Adult/preview/NewWordShow.vue

@@ -1,13 +1,51 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
-      
+      <div class="item-box">
+          <div class="item" v-for="(item,index) in curQue.option" :key="index">
+              <p v-if="item.pinyin">{{item.pinyin}}</p>
+              <div class="con-box">
+                  <template v-if="item.imgOrText=='text'">
+                    <div
+                        :key="conindex"
+                        class="strockplay"
+                        v-for="(conItem, conindex) in item.con"
+                        @click="handleShow(conItem)"
+                    >
+                        <Strockplayredline
+                            :Book_text="conItem"
+                            :playStorkes="true"
+                            :targetDiv="'bwcHanziIntp' + conItem + conindex"
+                        />
+                        <div
+                            class="bwc-line"
+                            v-if="conindex < item.con.length - 1"
+                        ></div>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="img-box" v-for="(imgItem,imgIndex) in item.img_list" :key="imgIndex">
+                        <el-image
+                            :src="imgItem.url"
+                            fit="scale-down"
+                            class="img_url"
+                        >
+                            <div slot="placeholder" class="image-slot">
+                                <img src="../../../assets/common/icon-imgloading.png" />
+                            </div>
+                        </el-image>
+                    </div>
+                </template>
+              </div>
+          </div>
+      </div>
   </div>
 </template>
 
 <script>
+import Strockplayredline from "../preview/components/Strockplayredline.vue";
 export default {
-  components: {},
+  components: {Strockplayredline},
   props: ["curQue"],
   data() {
     return {
@@ -23,6 +61,9 @@ export default {
         let _this = this
         
     },
+    handleShow(item){
+        alert('11')
+    }
     
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -43,10 +84,72 @@ export default {
 //@import url(); 引入公共css类
 .NewWordShow{
     width: 100%;
-    padding: 8px 24px;
+    padding: 0 4px;
     background: #F7F7F7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
-    
+    .item-box{
+        display: flex;
+        flex-flow: wrap;
+        padding-bottom: 8px;
+        .item{
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            flex-flow: wrap;
+            margin: 9px 20px;
+            >p{
+                color: #2C2C2C;
+                font-size: 14px;
+                line-height: 130%;
+                font-family: 'GB-PINYINOK-B';
+                width: 100%;
+                text-align: center;
+                margin: 0 0 8px 0;
+            }
+            .strockplay {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                width: 64px;
+                height: 64px;
+            }
+            .strockplayRedInner{
+                width: 64px;
+                height: 64px;
+            }
+            .bwc-line {
+                width: 1px;
+                height: 62px;
+                background: #BF875E;
+            }
+        }
+        .con-box{
+            display: flex;
+            border: 1px solid #BF875E;
+            border-radius: 8px;
+            overflow: hidden;
+            .img-box{
+                background: url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
+                background-size: cover;
+                .img_url{
+                    width: 64px;
+                    height: 64px;
+                }
+            }
+        }
+    }
+}
+</style>
+<style lang="scss">
+.NewWordShow{
+    .strock-play-box{
+        width: 16px;
+        height: 16px;
+        right: -1px;
+        background: url('../../../assets/NPC/strock-play-yellow-click.png') center no-repeat;
+        background-size: cover;
+    }
 }
 </style>

src/components/Adult/preview/SelectYinjie.vue

@@ -0,0 +1,40 @@
+<!--  -->
+<template>
+  <div class="Big-Book-prev-Textdes SelectYinjie" v-if="curQue">
+
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue"],
+  data() {
+    return {
+        
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+
+</style>

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

@@ -48,9 +48,10 @@ export default {
         }
       );
     },
-    playHanzi() {
+    playHanzi(event) {
       let _this = this;
       _this.writer.animateCharacter();
+      event.stopPropagation();
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）