Merge branch 'NPC-lhd'

src/components/Adult/preview/InputHasRecord.vue

@@ -2,19 +2,16 @@
 <template>
   <div class="Big-Book-prev-Textdes InputHasRecord NPC-zhedie" v-if="curQue">
     <template v-if="curQue.guide">
-      <el-collapse v-model="wordShow">
-        <el-collapse-item name="1">
-          <template #title>
             <div class="topTitle">
               <div class="NPC-top-left">
                 <span class="NPC-topTitle-text">{{ curQue.guide }}</span>
               </div>
               <div class="NPC-top-right">
-                <span class="NPC-top-right-text">{{
-                  wordShow.indexOf("1") != -1 ? "收起" : "展开"
+                <span class="NPC-top-right-text" @click="handleChangeTab">{{
+                  wordShow ? "收起" : "展开"
                 }}</span>
                 <img
-                  v-if="wordShow.indexOf('1') != -1"
+                  v-if="wordShow"
                   src="../../../assets/NPC/down.png"
                   alt=""
                 />
@@ -26,108 +23,108 @@
                 />
               </div>
             </div>
-          </template>
-          <div
-            class="NPC-word-list"
-            v-if="curQue.option && curQue.option.length > 0"
-          >
-            <h2 v-if="curQue.title">{{ curQue.title }}</h2>
-            <div v-for="(items, indexs) in curQue.option" :key="indexs">
-              <div class="item-content">
-                <b class="xuhao" v-if="items.number">{{ items.number }}</b>
-                <template v-if="items.detail.wordsList.length == 0">
-                  <p
-                    :class="['content-con', items.font]"
-                    v-if="items.detail.sentence"
-                  >
-                    {{ items.detail.sentence }}
-                  </p>
-                </template>
-                <template v-else>
-                  <div class="con-box">
-                    <div
-                      :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
-                      v-for="(itemCon, indexCon) in items.detail.resArr"
-                      :key="indexCon"
-                      v-show="itemCon.isShow"
-                    >
-                      <template
-                        v-if="
-                          items.detail.wordsList[indexCon + 1] &&
-                          items.detail.wordsList[indexCon + 1].chs &&
-                          chsFhList.indexOf(
-                            items.detail.wordsList[indexCon + 1].chs
-                          ) > -1
-                        "
-                      >
-                        <div class="synthesis-box">
-                          <div>
-                            <span
-                              class="pinyin"
-                              :class="[
-                                noFont.indexOf(itemCon.pinyin) > -1
-                                  ? 'noFont'
-                                  : '',
-                              ]"
-                              >{{ itemCon.pinyin }}</span
+            <el-collapse-transition>
+                <div
+                    class="NPC-word-list"
+                    v-if="curQue.option && curQue.option.length > 0"
+                    v-show="wordShow"
+                >
+                    <h2 v-if="curQue.title">{{ curQue.title }}</h2>
+                    <div v-for="(items, indexs) in curQue.option" :key="indexs">
+                    <div class="item-content">
+                        <b class="xuhao" v-if="items.number">{{ items.number }}</b>
+                        <template v-if="items.detail.wordsList.length == 0">
+                        <p
+                            :class="['content-con', items.font]"
+                            v-if="items.detail.sentence"
+                        >
+                            {{ items.detail.sentence }}
+                        </p>
+                        </template>
+                        <template v-else>
+                        <div class="con-box">
+                            <div
+                            :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
+                            v-for="(itemCon, indexCon) in items.detail.resArr"
+                            :key="indexCon"
+                            v-show="itemCon.isShow"
                             >
-                            <span class="hanzi content-con">{{
-                              itemCon.chs
-                            }}</span>
-                          </div>
-                          <div style="text-align: left">
-                            <span
-                              class="pinyin"
-                              :class="[
-                                noFont.indexOf(
-                                  items.detail.wordsList[indexCon + 1].pinyin
+                            <template
+                                v-if="
+                                items.detail.wordsList[indexCon + 1] &&
+                                items.detail.wordsList[indexCon + 1].chs &&
+                                chsFhList.indexOf(
+                                    items.detail.wordsList[indexCon + 1].chs
                                 ) > -1
-                                  ? 'noFont'
-                                  : '',
-                              ]"
-                              >{{
-                                items.detail.wordsList[indexCon + 1].pinyin
-                              }}</span
+                                "
                             >
-                            <span class="hanzi content-con">{{
-                              items.detail.wordsList[indexCon + 1].chs
-                            }}</span>
-                          </div>
+                                <div class="synthesis-box">
+                                <div>
+                                    <span
+                                    class="pinyin"
+                                    :class="[
+                                        noFont.indexOf(itemCon.pinyin) > -1
+                                        ? 'noFont'
+                                        : '',
+                                    ]"
+                                    >{{ itemCon.pinyin }}</span
+                                    >
+                                    <span class="hanzi content-con">{{
+                                    itemCon.chs
+                                    }}</span>
+                                </div>
+                                <div style="text-align: left">
+                                    <span
+                                    class="pinyin"
+                                    :class="[
+                                        noFont.indexOf(
+                                        items.detail.wordsList[indexCon + 1].pinyin
+                                        ) > -1
+                                        ? 'noFont'
+                                        : '',
+                                    ]"
+                                    >{{
+                                        items.detail.wordsList[indexCon + 1].pinyin
+                                    }}</span
+                                    >
+                                    <span class="hanzi content-con">{{
+                                    items.detail.wordsList[indexCon + 1].chs
+                                    }}</span>
+                                </div>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <span
+                                class="pinyin"
+                                :class="[
+                                    noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                                ]"
+                                >{{ itemCon.pinyin }}</span
+                                >
+                                <span class="hanzi content-con">{{ itemCon.chs }}</span>
+                            </template>
+                            </div>
                         </div>
-                      </template>
-                      <template v-else>
-                        <span
-                          class="pinyin"
-                          :class="[
-                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
-                          ]"
-                          >{{ itemCon.pinyin }}</span
-                        >
-                        <span class="hanzi content-con">{{ itemCon.chs }}</span>
-                      </template>
+                        </template>
+                    </div>
+                    <div class="inputInner">
+                        <el-input
+                        :class="['textarea', items.record ? '' : 'textareaNoRecord']"
+                        type="textarea"
+                        v-model="textareaCon"
+                        placeholder="输入"
+                        ></el-input>
+                        <div v-if="items.record" class="luyin-inner">
+                        <Soundrecord
+                            @handleWav="handleWav"
+                            type="promax"
+                            class="luyin-box"
+                        />
+                        </div>
+                    </div>
                     </div>
-                  </div>
-                </template>
-              </div>
-              <div class="inputInner">
-                <el-input
-                  :class="['textarea', items.record ? '' : 'textareaNoRecord']"
-                  type="textarea"
-                  v-model="textareaCon"
-                  placeholder="输入"
-                ></el-input>
-                <div v-if="items.record" class="luyin-inner">
-                  <Soundrecord
-                    @handleWav="handleWav"
-                    type="promax"
-                    class="luyin-box"
-                  />
                 </div>
-              </div>
-            </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
+            </el-collapse-transition>
     </template>
     <template v-else>
       <h2 v-if="curQue.title" style="margin-top: 0">{{ curQue.title }}</h2>
@@ -229,7 +226,7 @@ export default {
   props: ["curQue"],
   data() {
     return {
-      wordShow: ["1"],
+      wordShow: true,
       textareaCon: "", // 输入框
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
@@ -269,6 +266,9 @@ export default {
         }
       }
     },
+    handleChangeTab(){
+        this.wordShow = !this.wordShow
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -390,6 +390,9 @@ export default {
 }
 .NPC-zhedie {
   width: 780px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  border-radius: 8px 8px 0px 0px;
   //   margin-top: 16px;
   .topTitle {
     width: 100%;
@@ -397,6 +400,8 @@ export default {
     justify-content: space-between;
     padding-left: 24px;
     padding-right: 16px;
+    height: 48px;
+    background: #e35454;
     .NPC-top-left {
       display: flex;
       justify-content: flex-start;
@@ -420,8 +425,8 @@ export default {
       }
     }
     img {
-      width: 24px;
-      height: 24px;
+      width: 16px;
+      height: 16px;
     }
     .rotate {
       animation-name: firstrotate;