折叠

src/components/Adult/preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

@@ -3,19 +3,16 @@
   <div class="dialogue-answer-view NPC-zhedie">
     <!-- 标题 -->
     <template v-if="curQue.title">
-      <el-collapse v-model="wordShow" @change="handleChange">
-        <el-collapse-item name="1">
-          <template #title>
             <div class="topTitle">
               <div class="NPC-top-left">
                 <span class="NPC-topTitle-text">{{ curQue.title }}</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=""
                 />
@@ -27,59 +24,57 @@
                 />
               </div>
             </div>
-          </template>
-
-          <div :class="['dialogue-answer-content']">
-            <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
-            <div
-              :class="[
-                'dialogue-answer-inner',
-                curQue.option &&
-                curQue.option.length > 0 &&
-                curQue.option[index] &&
-                curQue.option[index].detail &&
-                curQue.option[index].detail.length > 0
-                  ? 'hasoption'
-                  : '',
-                index == curQue.list.length - 1 ? 'haspadding' : '',
-              ]"
-              v-for="(item, index) in curQue.list"
-              :key="'list' + index"
-            >
-              <span class="number" v-if="item.number">{{ item.number }}</span>
-              <div
-                class="dialogue-img"
-                v-if="item.img_list && item.img_list.length > 0"
-              >
-                <el-image
-                  style="width: 196px; height: 164px"
-                  :src="item.img_list[0].id"
-                  fit="scale-down"
-                ></el-image>
-              </div>
+            <el-collapse-transition>
+            <div :class="['dialogue-answer-content']" v-show="wordShow">
+                <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
+                <div
+                :class="[
+                    'dialogue-answer-inner',
+                    curQue.option &&
+                    curQue.option.length > 0 &&
+                    curQue.option[index] &&
+                    curQue.option[index].detail &&
+                    curQue.option[index].detail.length > 0
+                    ? 'hasoption'
+                    : '',
+                    index == curQue.list.length - 1 ? 'haspadding' : '',
+                ]"
+                v-for="(item, index) in curQue.list"
+                :key="'list' + index"
+                >
+                <span class="number" v-if="item.number">{{ item.number }}</span>
+                <div
+                    class="dialogue-img"
+                    v-if="item.img_list && item.img_list.length > 0"
+                >
+                    <el-image
+                    style="width: 196px; height: 164px"
+                    :src="item.img_list[0].id"
+                    fit="scale-down"
+                    ></el-image>
+                </div>
 
-              <div class="dialogue-answer-model">
-                <AnswerModel
-                  :curQue="item"
-                  :pyPosition="curQue.pyPosition"
-                  :colorBox="colorBox"
-                />
-              </div>
-              <template
-                v-if="
-                  curQue.option &&
-                  curQue.option.length > 0 &&
-                  curQue.option[index] &&
-                  curQue.option[index].detail &&
-                  curQue.option[index].detail.length > 0
-                "
-              >
-                <OptionModel :curOption="curQue.option[index]" :index="index" />
-              </template>
+                <div class="dialogue-answer-model">
+                    <AnswerModel
+                    :curQue="item"
+                    :pyPosition="curQue.pyPosition"
+                    :colorBox="colorBox"
+                    />
+                </div>
+                <template
+                    v-if="
+                    curQue.option &&
+                    curQue.option.length > 0 &&
+                    curQue.option[index] &&
+                    curQue.option[index].detail &&
+                    curQue.option[index].detail.length > 0
+                    "
+                >
+                    <OptionModel :curOption="curQue.option[index]" :index="index" />
+                </template>
+                </div>
             </div>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
+            </el-collapse-transition>
     </template>
     <template v-else>
       <div class="dialogue-answer-content">
@@ -147,7 +142,7 @@ export default {
   props: ["curQue", "colorBox"],
   data() {
     return {
-      wordShow: ["1"],
+      wordShow: true,
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
     };
   },
@@ -155,10 +150,12 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleChange() {},
     saveBookanswer(answer, listIndex) {
       this.curQue.Bookanswer[listIndex] = answer;
     },
+    handleChangeTab(){
+        this.wordShow = !this.wordShow
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

src/components/Adult/preview/InputHasRecord.vue

@@ -392,7 +392,7 @@ export default {
   width: 780px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  border-radius: 8px 8px 0px 0px;
+  border-radius: 8px;
   //   margin-top: 16px;
   .topTitle {
     width: 100%;
@@ -417,6 +417,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      cursor: pointer;
       &-text {
         font-weight: normal;
         font-size: 14px;

src/components/Adult/preview/Notes.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="NPC-zhedie">
-    <el-collapse v-model="wordShow" @change="handleChange">
-      <el-collapse-item name="1">
-        <template #title>
           <div class="topTitle">
             <div class="NPC-top-left">
               <span class="NPC-topTitle-text">{{ curQue.title }}</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=""
               />
@@ -24,40 +21,39 @@
               />
             </div>
           </div>
-        </template>
-        <div class="NPC-notes-list">
-          <div
-            class="NPC-notes"
-            v-for="(item, index) in curQue.option"
-            :key="'NPC-notes' + index"
-          >
-            <div class="NPC-notes-con">
-              <span class="NPC-notes-con-number">{{ item.number }}</span>
-              <span class="NPC-notes-con-text">{{ item.con }}</span>
-            </div>
-            <div class="NPC-notes-trans">
-              {{ item.interpret }}
-            </div>
-            <div
-              class="NPC-notes-note"
-              v-if="item.note"
-              v-html="item.note"
-            ></div>
+          <el-collapse-transition>
+            <div class="NPC-notes-list" v-show="wordShow">
             <div
-              class="NPC-notes-note-img"
-              v-if="item.img_list && item.img_list.length > 0"
+                class="NPC-notes"
+                v-for="(item, index) in curQue.option"
+                :key="'NPC-notes' + index"
             >
-              <div
-                v-for="(imgItem, imgIndex) in item.img_list"
-                :key="'imgList' + imgIndex"
-              >
-                <img :src="imgItem.id" class="NPC-notes-img" />
-              </div>
+                <div class="NPC-notes-con">
+                <span class="NPC-notes-con-number">{{ item.number }}</span>
+                <span class="NPC-notes-con-text">{{ item.con }}</span>
+                </div>
+                <div class="NPC-notes-trans">
+                {{ item.interpret }}
+                </div>
+                <div
+                class="NPC-notes-note"
+                v-if="item.note"
+                v-html="item.note"
+                ></div>
+                <div
+                class="NPC-notes-note-img"
+                v-if="item.img_list && item.img_list.length > 0"
+                >
+                <div
+                    v-for="(imgItem, imgIndex) in item.img_list"
+                    :key="'imgList' + imgIndex"
+                >
+                    <img :src="imgItem.id" class="NPC-notes-img" />
+                </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
+            </div>
+          </el-collapse-transition>
   </div>
 </template>
 
@@ -74,7 +70,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      wordShow: ["1"],
+      wordShow: true,
     };
   },
   //计算属性 类似于data概念
@@ -83,7 +79,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleChange() {},
+    handleChangeTab(){
+        this.wordShow = !this.wordShow
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -110,6 +108,9 @@ export default {
 .NPC-zhedie {
   width: 780px;
   margin-bottom: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  border-radius: 8px;
   .topTitle {
     width: 100%;
     display: flex;
@@ -139,6 +140,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      cursor: pointer;
       &-text {
         font-weight: normal;
         font-size: 14px;

src/components/Adult/preview/WordPhrase.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="NPC-zhedie">
-    <el-collapse v-model="wordShow" @change="handleChange">
-      <el-collapse-item name="1">
-        <template #title>
           <div class="topTitle">
             <div class="NPC-top-left">
               <span class="NPC-topTitle-text">{{ curQue.title }}</span>
@@ -12,91 +9,91 @@
               ></span>
             </div>
             <div class="NPC-top-right">
-              <span class="NPC-top-right-text">{{
-                wordShow.indexOf("1") != -1 ? "收起" : "展开"
-              }}</span>
+                <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=""
               />
               <img v-else src="../../../assets/NPC/up.png" alt="" />
             </div>
           </div>
-        </template>
-        <div
-          class="NPC-word-list"
-          v-if="curQue.option && curQue.option.length > 0"
-        >
-          <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
-            <li
-              class="NPC-word-tr"
-              v-for="(item, index) in curQue.option"
-              :key="'curQue.option' + index"
+          <el-collapse-transition>
+            <div
+            class="NPC-word-list"
+            v-if="curQue.option && curQue.option.length > 0"
+            v-show="wordShow"
             >
-              <div
-                :class="['NPC-word-row',mp3_index == sItem.sIndex?'active':'']"
-                v-for="(sItem, sIndex) in item"
-                :key="'curQue.option.child' + sIndex"
-              >
-                <template
-                  v-if="
-                    sItem.mp3_list &&
-                    sItem.mp3_list.length > 0 &&
-                    sItem.mp3_list[0].id
-                  "
+            <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
+                <li
+                class="NPC-word-tr"
+                v-for="(item, index) in curQue.option"
+                :key="'curQue.option' + index"
                 >
-                  <span
-                    :class="[
-                      themeColor == 'green'
-                        ? 'NPC-play-btn-green'
-                        : themeColor == 'red'
-                        ? 'NPC-play-btn-red'
-                        : 'NPC-play-btn-brown',
-                      mp3_index == sItem.sIndex ? 'active' : '',
-                    ]"
-                    @click="palyAudio(sItem.sIndex)"
-                  ></span>
-                  <audio
-                    :id="'word' + indexs + indexss + sItem.sIndex"
-                    :src="sItem.mp3_list[0].id"
-                  ></audio>
-                </template>
-                <template v-else>
-                  <span style="width: 16px; height: 16px"></span>
-                </template>
-                <span class="tabNum"
-                  ><template v-if="sItem.mIndex == 0"
-                    >{{ index + 1 }}.</template
-                  ></span
+                <div
+                    :class="['NPC-word-row',mp3_index == sItem.sIndex?'active':'']"
+                    v-for="(sItem, sIndex) in item"
+                    :key="'curQue.option.child' + sIndex"
                 >
+                    <template
+                    v-if="
+                        sItem.mp3_list &&
+                        sItem.mp3_list.length > 0 &&
+                        sItem.mp3_list[0].id
+                    "
+                    >
+                    <span
+                        :class="[
+                        themeColor == 'green'
+                            ? 'NPC-play-btn-green'
+                            : themeColor == 'red'
+                            ? 'NPC-play-btn-red'
+                            : 'NPC-play-btn-brown',
+                        mp3_index == sItem.sIndex ? 'active' : '',
+                        ]"
+                        @click="palyAudio(sItem.sIndex)"
+                    ></span>
+                    <audio
+                        :id="'word' + indexs + indexss + sItem.sIndex"
+                        :src="sItem.mp3_list[0].id"
+                    ></audio>
+                    </template>
+                    <template v-else>
+                    <span style="width: 16px; height: 16px"></span>
+                    </template>
+                    <span class="tabNum"
+                    ><template v-if="sItem.mIndex == 0"
+                        >{{ index + 1 }}.</template
+                    ></span
+                    >
 
-                <span class="NPC-word-tab-common NPC-word-tab-pinyin">
-                  {{ sItem.pinyin }}
-                </span>
-                <span class="NPC-word-tab-common NPC-word-tab-word">
-                  {{ sItem.new_word }}
-                </span>
-                <span class="NPC-word-tab-common NPC-word-tab-cixing">
-                  {{ sItem.cixing }}
-                </span>
-                <span
-                  class="NPC-word-tab-common NPC-word-tab-def"
-                  v-html="sItem.def_str"
-                ></span>
-                <span>
-                  <img
-                    src="../../../assets/NPC/detail-icon.png"
-                    class="detail-icon"
-                    @click="showDetail(sItem)"
-                  />
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
+                    <span class="NPC-word-tab-common NPC-word-tab-pinyin">
+                    {{ sItem.pinyin }}
+                    </span>
+                    <span class="NPC-word-tab-common NPC-word-tab-word">
+                    {{ sItem.new_word }}
+                    </span>
+                    <span class="NPC-word-tab-common NPC-word-tab-cixing">
+                    {{ sItem.cixing }}
+                    </span>
+                    <span
+                    class="NPC-word-tab-common NPC-word-tab-def"
+                    v-html="sItem.def_str"
+                    ></span>
+                    <span>
+                    <img
+                        src="../../../assets/NPC/detail-icon.png"
+                        class="detail-icon"
+                        @click="showDetail(sItem)"
+                    />
+                    </span>
+                </div>
+                </li>
+            </ul>
+            </div>
+          </el-collapse-transition>
     <div v-if="detailShow">
       <WordPhraseDetail
         v-if="isSuccess"
@@ -127,7 +124,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      wordShow: ["1"],
+      wordShow: true,
       data: null,
       detailShow: false,
       detailIndex: 0,
@@ -324,6 +321,9 @@ export default {
         this.mp3List = mp3List;
       }
     },
+    handleChangeTab(){
+        this.wordShow = !this.wordShow
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -363,6 +363,9 @@ export default {
 .NPC-zhedie {
   width: 780px;
   margin-bottom: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  border-radius: 8px;
   .NPC-word-table {
     width: 100%;
     > .NPC-word-tr {
@@ -490,6 +493,7 @@ export default {
     justify-content: space-between;
     padding-left: 24px;
     padding-right: 16px;
+    height: 48px;
     .NPC-top-left {
       display: flex;
       justify-content: flex-start;
@@ -520,6 +524,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      cursor: pointer;
       &-text {
         font-weight: normal;
         font-size: 14px;
@@ -563,13 +568,6 @@ export default {
     box-sizing: border-box;
     border-radius: 8px;
   }
-  .el-collapse-item__header {
-    height: 48px;
-    background: #e35454;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    border-radius: 8px 8px 0px 0px;
-  }
 
   .el-collapse-item__wrap {
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -586,14 +584,14 @@ export default {
 }
 .NPC-Big-Book-preview-green {
   .NPC-zhedie {
-    .el-collapse-item__header {
+    .topTitle {
       background: #24b99e !important;
     }
   }
 }
 .NPC-Big-Book-preview-brown {
   .NPC-zhedie {
-    .el-collapse-item__header {
+    .topTitle {
       background: #bd8865 !important;
     }
   }