展开收起

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -23,7 +23,7 @@
           </div>
         </div>
         <div class="query">
-          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name">
+          <Input :placeholder="'请输入搜索关键词'" v-model:value="queryData.name" @enter="handleQuery">
             <template #prefix>
               <img class="img" src="./imgs/query.png" alt="" />
             </template>
@@ -34,7 +34,7 @@
         </div>
       </div>
       <div class="musicListCon">
-        <div class="queryFrom">
+        <div class="queryFrom" :class="{ isExpandAct: !isExpand }">
           <div v-show="queryData.sourceType === 2" class="queryFromList">
             <div class="tit">教程：</div>
             <div class="queryFromCon">
@@ -97,6 +97,10 @@
             </div>
           </div>
         </div>
+        <div v-show="queryData.sourceType === 2" @click="isExpand = !isExpand" class="isExpand" :class="{ active: isExpand }">
+          <div>{{ isExpand ? "收起" : "展开" }}</div>
+          <img src="./imgs/jiao.png" alt="" />
+        </div>
         <div class="musicListConBox" v-loading="loading">
           <div class="musicList" :class="{ empty: !musicList.length && !loading }">
             <div class="musicListBox" v-if="musicList.length && !loading">
@@ -209,6 +213,7 @@ const queryData = reactive({
 const musicList = ref<any[]>([])
 const loading = ref(true)
 const vLoading = ElLoading.directive
+const isExpand = ref(true)
 
 getQueryList()
 function getQueryList() {
@@ -270,6 +275,7 @@ function clearQueryData() {
 }
 function handleTabChange(sourceType: number) {
   clearQueryData()
+  isExpand.value = true
   queryData.sourceType = sourceType
   handleQuery()
 }
@@ -537,6 +543,11 @@ const highlightedText = (text: string, query: string) => {
       display: flex;
       flex-direction: column;
       .queryFrom {
+        &.isExpandAct {
+          height: 42px;
+          overflow: hidden;
+        }
+        flex-shrink: 0;
         padding: 0 30px;
         .queryFromList {
           display: flex;
@@ -585,6 +596,30 @@ const highlightedText = (text: string, query: string) => {
           }
         }
       }
+      .isExpand {
+        flex-shrink: 0;
+        margin-bottom: 12px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #198cfe;
+        line-height: 20px;
+        align-items: center;
+        &:hover {
+          opacity: 0.8;
+        }
+        &.active > img {
+          transform: rotate(0deg);
+        }
+        & > img {
+          transform: rotate(180deg);
+          margin-left: 4px;
+          width: 10px;
+          height: 10px;
+        }
+      }
       .musicListConBox {
         flex-grow: 1;
         overflow: hidden;