折叠和录音

src/components/Adult/preview/NumberSelectHasRecord.vue

@@ -177,7 +177,7 @@ export default {
             .luyin-box{
                 width: 64px;
                 height: 32px;
-                border: 1px solid rgba(0, 0, 0, 0.1);
+                // border: 1px solid rgba(0, 0, 0, 0.1);
                 border-radius: 8px;
                 margin-left: 4px;
             }

src/components/Adult/preview/RecordModule.vue

@@ -61,7 +61,7 @@ export default {
     width: 100%;
     .luyin-box{
         padding:0 12px;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        // border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 8px;
         padding:0 12px;
     }
@@ -70,7 +70,7 @@ export default {
         padding: initial;
     }
     .record_control_normal{
-        width:129px;
+        width:128px;
     }
     .record_control_pro{
         width:200px;

src/components/Adult/preview/SentenceListenRead.vue

@@ -298,9 +298,9 @@ export default {
         }
       }
       .luyin-box {
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        // border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 8px;
-        width: 129px;
+        width: 128px;
         padding: 0 12px;
       }
     }

src/components/Adult/preview/TextInputRecord.vue

@@ -24,7 +24,7 @@
           placeholder="输入"
         />
         <template v-if="items.IsRecord">
-          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
+          <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" />
         </template>
       </li>
     </ul>
@@ -100,7 +100,7 @@ export default {
       border-radius: 8px;
       display: flex;
       align-items: center;
-      padding: 8px 8px 8px 16px;
+      padding: 8px 12px;
       margin-bottom: 8px;
       .audio-play {
         width: 16px;
@@ -147,9 +147,9 @@ export default {
         line-height: 150%;
       }
       .luyin-box {
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        // border: 1px solid rgba(0, 0, 0, 0.1);
         border-radius: 8px;
-        width: 280px;
+        width: 200px;
         height: 40px;
         margin-left: 8px;
         padding: 0 12px;

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

@@ -89,44 +89,37 @@
         </div>
         <div class="zhedie-white">
           <div v-if="data.list1.length > 0">
-            <el-collapse v-model="wordShow">
-              <el-collapse-item name="1">
-                <template #title>
-                  <div class="topTitle">
-                    <span>本课例句</span>
-                    <span
-                      >{{ wordShow.indexOf("1") != -1 ? "收起" : "展开" }}
-                      <img
-                        v-if="wordShow.indexOf('1') != -1"
-                        src="../../../../assets/newImage/common/show-black.png"
-                        alt=""
-                      />
-                      <img
-                        v-else
-                        src="../../../../assets/newImage/common/hide-black.png"
-                        alt=""
-                      />
-                    </span>
-                  </div>
-                </template>
-                <div class="liju">
-                  <div v-for="(item, i) in data.list1" :key="i">
-                    <p v-html="item.res"></p>
-                  </div>
+            <div class="topTitle">
+                <span>本课例句</span>
+                <span @click="handleChangeTab('wordShow')"
+                    >{{ wordShow ? "收起" : "展开" }}
+                    <img
+                    v-if="wordShow"
+                    src="../../../../assets/newImage/common/show-black.png"
+                    alt=""
+                    />
+                    <img
+                    v-else
+                    src="../../../../assets/newImage/common/hide-black.png"
+                    alt=""
+                    />
+                </span>
+            </div>
+            <el-collapse-transition>
+                <div class="liju" v-show="wordShow">
+                    <div v-for="(item, i) in data.list1" :key="i">
+                        <p v-html="item.res"></p>
+                    </div>
                 </div>
-              </el-collapse-item>
-            </el-collapse>
+            </el-collapse-transition>
           </div>
           <div v-if="data.list2.length > 0">
-            <el-collapse v-model="wordShow">
-              <el-collapse-item name="2">
-                <template #title>
-                  <div class="topTitle">
+                <div class="topTitle">
                     <span>本书例句</span>
-                    <span
-                      >{{ wordShow.indexOf("2") != -1 ? "收起" : "展开" }}
+                    <span @click="handleChangeTab('wordShow2')"
+                      >{{ wordShow2 ? "收起" : "展开" }}
                       <img
-                        v-if="wordShow.indexOf('1') != -1"
+                        v-if="wordShow2"
                         src="../../../../assets/newImage/common/show-black.png"
                         alt=""
                       />
@@ -136,9 +129,9 @@
                         alt=""
                       />
                     </span>
-                  </div>
-                </template>
-                <div class="liju">
+            </div>
+            <el-collapse-transition>
+                <div class="liju" v-show="wordShow2">
                   <div v-for="(item, i) in data.list2" :key="i">
                     <div>{{ i + 1 }}.</div>
                     <div>
@@ -149,19 +142,15 @@
                     </div>
                   </div>
                 </div>
-              </el-collapse-item>
-            </el-collapse>
+            </el-collapse-transition>
           </div>
           <div v-if="data.list3.length > 0">
-            <el-collapse v-model="wordShow">
-              <el-collapse-item name="3">
-                <template #title>
                   <div class="topTitle">
                     <span>本套教材例句</span>
-                    <span
-                      >{{ wordShow.indexOf("3") != -1 ? "收起" : "展开" }}
+                    <span @click="handleChangeTab('wordShow3')"
+                      >{{ wordShow3 ? "收起" : "展开" }}
                       <img
-                        v-if="wordShow.indexOf('1') != -1"
+                        v-if="wordShow3"
                         src="../../../../assets/newImage/common/show-black.png"
                         alt=""
                       />
@@ -172,7 +161,7 @@
                       />
                     </span>
                   </div>
-                </template>
+            <el-collapse-transition>
                 <div class="liju">
                   <div v-for="(item, i) in data.list3" :key="i">
                     <div>{{ data.list3.length + i + 1 }}.</div>
@@ -184,8 +173,7 @@
                     </div>
                   </div>
                 </div>
-              </el-collapse-item>
-            </el-collapse>
+            </el-collapse-transition>
           </div>
         </div>
       </div>
@@ -267,7 +255,9 @@ export default {
     return {
       height: "",
       margintop: "",
-      wordShow: "",
+      wordShow: false,
+      wordShow2: false,
+      wordShow3: false,
       list1: [],
       isShow: false,
       old_word: "",
@@ -351,6 +341,9 @@ export default {
         this.margintop = "-" + window.innerHeight / 2 + "px";
       }
     },
+    handleChangeTab(flag){
+        this[flag] = !this[flag]
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -523,6 +516,8 @@ export default {
         display: flex;
         justify-content: space-between;
         padding: 0 12px;
+        align-items: center;
+        background: #fff !important;
         > :nth-child(1) {
           font-weight: 500;
           font-size: 16px;
@@ -536,6 +531,7 @@ export default {
           font-size: 14px;
           line-height: 22px;
           color: rgba(0, 0, 0, 0.85);
+          cursor: pointer;
         }
         img {
           width: 16px;
@@ -551,9 +547,13 @@ export default {
       }
       .liju {
         padding-bottom: 16px;
-        margin-right: 24px;
+        padding-right: 24px;
+        background: #F7F7F7;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-top: none;
+        border-radius: 0 0 4px 4px;
         > div {
-          margin-top: 16px;
+          padding-top: 16px;
           margin-left: 8px;
           display: flex;
 
@@ -657,7 +657,7 @@ export default {
 .NPC-Big-Book-preview-red {
   .wordDetailChs {
     .zhedie-white {
-      .el-collapse-item__header {
+      .topTitle {
         height: 40px;
         background: #fff !important;
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -671,7 +671,7 @@ export default {
 .NPC-Big-Book-preview-green {
   .wordDetailChs {
     .zhedie-white {
-      .el-collapse-item__header {
+      .topTitle {
         height: 40px;
         background: #fff !important;
         border: 1px solid rgba(0, 0, 0, 0.1);
@@ -685,7 +685,7 @@ export default {
 .NPC-Big-Book-preview-brown {
   .wordDetailChs {
     .zhedie-white {
-      .el-collapse-item__header {
+      .topTitle {
         height: 40px;
         background: #fff !important;
         border: 1px solid rgba(0, 0, 0, 0.1);