修改teambition中的部分问题

src/components/Adult/preview/NewWordShow.vue

@@ -1,58 +1,68 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
-      <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">{{item.pinyin}}</p>
-              <div class="con-box">
-                  <template v-if="item.imgOrText=='text'">
-                      <template v-if="item.con">
-                            <div
-                                :key="conindex"
-                                class="strockplay"
-                                v-for="(conItem, conindex) in item.con"
-                                @click="writeWord(conItem,item.pinyin)"
-                            >
-                                <Strockplayredline
-                                    :Book_text="conItem"
-                                    :playStorkes="true"
-                                    :targetDiv="'bwcHanziIntp' + index + conItem + conindex"
-                                />
-                                <div
-                                    class="bwc-line"
-                                    v-if="conindex < item.con.length - 1"
-                                ></div>
-                            </div>
-                      </template>
-                      <template v-else>
-                          <div class="blank-item" @click="freeWrite('',index)">
-                              <img :src="freeImg[index]" v-if="freeImg[index]">
-                          </div>
-                      </template>
-                </template>
-                <template v-else>
-                    <div class="img-box" v-for="(imgItem,imgIndex) in item.img_list" :key="imgIndex" @click="freeWrite(imgItem.url,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>
+    <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">{{ item.pinyin }}</p>
+        <div class="con-box">
+          <template v-if="item.imgOrText == 'text'">
+            <template v-if="item.con">
+              <div
+                :key="conindex"
+                class="strockplay"
+                v-for="(conItem, conindex) in item.con"
+                @click="writeWord(conItem, item.pinyin)"
+              >
+                <Strockplayredline
+                  :Book_text="conItem"
+                  :playStorkes="true"
+                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex"
+                />
+                <div
+                  class="bwc-line"
+                  v-if="conindex < item.con.length - 1"
+                ></div>
               </div>
-          </div>
-      </div>
-      <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
-        <Practice :changePraShow="changePraShow" :cur="curData" :themeColor="themeColor" />
-      </div>
-      <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
-        <FreePaint :changePraShow="changePraShow" :cur="curDataImg" ref="freePaint" :themeColor="themeColor" />
+            </template>
+            <template v-else>
+              <div class="blank-item" @click="freeWrite('', index)">
+                <img :src="freeImg[index]" v-if="freeImg[index]" />
+              </div>
+            </template>
+          </template>
+          <template v-else>
+            <div
+              class="img-box"
+              v-for="(imgItem, imgIndex) in item.img_list"
+              :key="imgIndex"
+              @click="freeWrite(imgItem.url, 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 class="practiceBox practiceBoxStrock" v-if="isPraShow">
+      <Practice
+        :changePraShow="changePraShow"
+        :cur="curData"
+        :themeColor="themeColor"
+      />
+    </div>
+    <div class="practiceBox practiceBoxStrock" v-if="ifFreeShow">
+      <FreePaint
+        :changePraShow="changePraShow"
+        :cur="curDataImg"
+        ref="freePaint"
+        :themeColor="themeColor"
+      />
+    </div>
   </div>
 </template>
 
@@ -61,15 +71,15 @@ import Strockplayredline from "../preview/components/Strockplayredline.vue";
 import Practice from "../preview/components/Practice.vue";
 import FreePaint from "../preview/components/FreePaint.vue";
 export default {
-  components: {Strockplayredline,Practice,FreePaint},
-  props: ["curQue","themeColor"],
+  components: { Strockplayredline, Practice, FreePaint },
+  props: ["curQue", "themeColor"],
   data() {
     return {
-        isPraShow: false,
-        curData: null,
-        ifFreeShow: false,
-        freeImg: [],
-        activeIndex: null
+      isPraShow: false,
+      curData: null,
+      ifFreeShow: false,
+      freeImg: [],
+      activeIndex: null,
     };
   },
   computed: {},
@@ -77,21 +87,21 @@ export default {
   //方法集合
   methods: {
     // 处理数据
-    handleData(){
-        let _this = this
-        _this.freeImg = []
-        _this.curQue.option.forEach(item => {
-            _this.freeImg.push('')
-        });
+    handleData() {
+      let _this = this;
+      _this.freeImg = [];
+      _this.curQue.option.forEach((item) => {
+        _this.freeImg.push("");
+      });
     },
     changePraShow() {
       this.isPraShow = false;
       this.ifFreeShow = false;
-      this.freeImg[this.activeIndex] = this.$refs.freePaint.imgSrc
+      this.freeImg[this.activeIndex] = this.$refs.freePaint.imgSrc;
     },
     writeWord(words, pinyin) {
       this.isPraShow = true;
-      this.activeIndex = null
+      this.activeIndex = null;
       this.curData = {
         stem: [
           {
@@ -102,15 +112,14 @@ export default {
         ],
       };
     },
-    freeWrite(imgUrl,index){
-        this.ifFreeShow = true
-        this.curDataImg = imgUrl
-        this.activeIndex = imgUrl ? null : index
+    freeWrite(imgUrl, index) {
+      this.ifFreeShow = true;
+      this.curDataImg = imgUrl;
+      this.activeIndex = imgUrl ? null : index;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -124,191 +133,203 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
-.NewWordShow{
-    width: 100%;
-    h2{
-        margin: 16px 0 0;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-        color: #000000;
-        margin-bottom: 16px;
-    }
-    .item-box{
+.NewWordShow {
+  width: 100%;
+  h2 {
+    margin: 16px 0 0;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    color: #000000;
+    margin-bottom: 16px;
+  }
+  .item-box {
+    display: flex;
+    flex-flow: wrap;
+    padding-bottom: 8px;
+    padding: 0 4px;
+    background: #f7f7f7;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    .item {
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      flex-flow: wrap;
+      margin: 9px 20px;
+      box-sizing: border-box;
+      width: 66px;
+      cursor: pointer;
+      > 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;
-        flex-flow: wrap;
-        padding-bottom: 8px;
-        padding: 0 4px;
-        background: #F7F7F7;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        border-radius: 8px;
-        .item{
-            display: flex;
-            align-items: flex-end;
-            justify-content: center;
-            flex-flow: wrap;
-            margin: 9px 20px;
-            box-sizing: border-box;
-            width: 66px;
-            cursor: pointer;
-            >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: #DE4444;
-            }
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 64px;
+        height: 64px;
+      }
+      .strockplayRedInner {
+        width: 64px;
+        height: 64px;
+      }
+      .bwc-line {
+        width: 1px;
+        height: 62px;
+        background: #de4444;
+      }
+    }
+    .con-box {
+      display: flex;
+      border: 1px solid #de4444;
+      border-radius: 8px;
+      overflow: hidden;
+      .img-box {
+        background: #fff url("../../../assets/NPC/chinaTianRed.png") center
+          no-repeat;
+        background-size: cover;
+        .img_url {
+          width: 64px;
+          height: 64px;
         }
-        .con-box{
-            display: flex;
-            border: 1px solid #DE4444;
-            border-radius: 8px;
-            overflow: hidden;
-            .img-box{
-                background: #fff url('../../../assets/NPC/chinaTianRed.png') center no-repeat;
-                background-size: cover;
-                .img_url{
-                    width: 64px;
-                    height: 64px;
-                }
-            }
-            .blank-item{
-                width: 64px;
-                height: 64px;
-                background: #fff url('../../../assets/NPC/chinaTianRed.png') center no-repeat;
-                background-size: cover;
-                img{
-                    width: 100%;
-                    height: 100%;
-                }
-            }
+      }
+      .blank-item {
+        width: 64px;
+        height: 64px;
+        background: #fff url("../../../assets/NPC/chinaTianRed.png") center
+          no-repeat;
+        background-size: cover;
+        img {
+          width: 100%;
+          height: 100%;
         }
+      }
     }
-    .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;
-        }
+  }
+  .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;
     }
+  }
 }
-.NNPE-Big-Book-preview-brown{
-    .NewWordShow{
-        .item-box{
-            .item{
-                .bwc-line {
-                    background: #BF875E;
-                }
-            }
-            .con-box{
-                border: 1px solid #BF875E;
-                .img-box{
-                    background: #fff url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
-                    background-size: cover;
-                }
-                .blank-item{
-                    background: #fff url('../../../assets/NPC/chinaTianYellow.png') center no-repeat;
-                    background-size: cover;
-                }
-            }
+.NNPE-Big-Book-preview-brown {
+  .NewWordShow {
+    .item-box {
+      .item {
+        .bwc-line {
+          background: #bf875e;
+        }
+      }
+      .con-box {
+        border: 1px solid #bf875e;
+        .img-box {
+          background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
+            no-repeat;
+          background-size: cover;
         }
+        .blank-item {
+          background: #fff url("../../../assets/NPC/chinaTianYellow.png") center
+            no-repeat;
+          background-size: cover;
+        }
+      }
     }
+  }
 }
-.NNPE-Big-Book-preview-green{
-    .NewWordShow{
-        .item-box{
-            .item{
-                .bwc-line {
-                    background: #24B99E;
-                }
-            }
-            .con-box{
-                border: 1px solid #24B99E;
-                .img-box{
-                    background: #fff url('../../../assets/NPC/chinaTianGreen.png') center no-repeat;
-                    background-size: cover;
-                }
-                .blank-item{
-                    background: #fff url('../../../assets/NPC/chinaTianGreen.png') center no-repeat;
-                    background-size: cover;
-                }
-            }
+.NNPE-Big-Book-preview-green {
+  .NewWordShow {
+    .item-box {
+      .item {
+        .bwc-line {
+          background: #24b99e;
+        }
+      }
+      .con-box {
+        border: 1px solid #24b99e;
+        .img-box {
+          background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
+            no-repeat;
+          background-size: cover;
+        }
+        .blank-item {
+          background: #fff url("../../../assets/NPC/chinaTianGreen.png") center
+            no-repeat;
+          background-size: cover;
         }
+      }
     }
+  }
 }
 </style>
 <style lang="scss">
-.NNPE-Big-Book-preview-red{
-    .NewWordShow{
-        .strock-play-box{
-            width: 16px;
-            height: 16px;
-            right: -1px;
-            background: url('../../../assets/NPC/strock-play-red-click.png') center no-repeat;
-            background-size: cover;
-        }
-        .character-target-div{
-            // background-color: initial;
-        }
+.NNPE-Big-Book-preview-red {
+  .NewWordShow {
+    .strock-play-box {
+      width: 22px;
+      height: 22px;
+      right: -2px;
+      top: 0;
+      background: url("../../../assets/NPC/strock-play-red-click.png") center
+        no-repeat;
+      background-size: cover;
+    }
+    .character-target-div {
+      // background-color: initial;
     }
+  }
 }
-.NNPE-Big-Book-preview-green{
-    .NewWordShow{
-        .strock-play-box{
-            width: 16px;
-            height: 16px;
-            right: -1px;
-            background: url('../../../assets/NPC/strock-play-green-click.png') center no-repeat;
-            background-size: cover;
-        }
-        .character-target-div{
-            // background-color: initial;
-        }
+.NNPE-Big-Book-preview-green {
+  .NewWordShow {
+    .strock-play-box {
+      width: 22px;
+      height: 22px;
+      right: -2px;
+      top: 0;
+      background: url("../../../assets/NPC/strock-play-green-click.png") center
+        no-repeat;
+      background-size: cover;
+    }
+    .character-target-div {
+      // background-color: initial;
     }
+  }
 }
-.NNPE-Big-Book-preview-brown{
-    .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;
-        }
-        .character-target-div{
-            // background-color: initial;
-        }
+.NNPE-Big-Book-preview-brown {
+  .NewWordShow {
+    .strock-play-box {
+      width: 22px;
+      height: 22px;
+      right: -2px;
+      top: 0;
+      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/PlayRecordView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="PlayRecordView">
+  <div class="PlayRecordView adult-book-preview-sty">
     <AudioLine
       :mp3="curQue.mp3_list[0].url"
       :getCurTime="getCurTime"

src/components/Adult/preview/UploadControlView.vue

@@ -6,7 +6,6 @@
         :changeFillId="changeFillId"
         :accept="accept"
         :filleNumber="1"
-        :fileList="curQue.fileList"
       />
       <div class="uploadBtn" @click="downLoad">
         <img

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -61,7 +61,14 @@
                 :themeColor="themeColor"
               />
               <div
-                class="bwc-line"
+                :class="[
+                  'bwc-line',
+                  themeColor == 'green'
+                    ? 'green-bg'
+                    : themeColor == 'red'
+                    ? 'red-bg'
+                    : 'brown-bg',
+                ]"
                 v-if="conindex < data.new_word.length - 1"
               ></div>
             </div>
@@ -450,8 +457,16 @@ export default {
         .bwc-line {
           width: 2px;
           height: 128px;
+        }
+        .red-bg {
+          background: #ff5757;
+        }
+        .green-bg {
           background: #24b99e;
         }
+        .brown-bg {
+          background: #bd8865;
+        }
       }
       .red-border {
         border: 2px solid #ff5757;