桐乡课程资源-资源-新增搜索功能

src/components/CourseType.vue

@@ -13,7 +13,7 @@
         <div class="allDetailCourse">
           <div class="allIn" v-if="transBaseData.kc && transBaseData.kc.length > 0">
               <div class="singlePart" v-for="(item,index) in transBaseData.kc" :key="index" @click="toParentDetail(item,index)">
-              <div class="courseCover"> <img :src="prefixImg+item.kk_img" alt=""></div>
+              <div class="courseCover"> <img :src="item.kk_img" alt=""></div>
               <p>{{item.kk_name}}</p>
               <div class="evalStar">
                 <img src="../assets/kczy/stars.png" v-for="(item,index) in item.kk_star_num" :key="index">
@@ -160,6 +160,10 @@
         box-sizing: border-box;
         padding: 0 6px;
         margin:10px 0;
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow:ellipsis;
       }
       .evalStar{
         box-sizing: border-box;

src/pages/courseResourcesAll.vue

@@ -41,7 +41,7 @@
     <div class="common1280 contentMain">
       <div class="allDetailCourse" v-if="courseDetail && courseDetail.length>0">
           <div class="singlePart" v-for="(item,index) in courseDetail" :key="index" @click="toDetail(item,index)">
-            <div class="courseCover"> <img :src="prefixImg+item.kk_img" alt=""></div>
+            <div class="courseCover"> <img :src="item.kk_img" alt=""></div>
             <p>{{item.kk_name}}</p>
             <div class="evalStar">
               <img src="/kczy/stars.png" v-for="(item,index) in item.kk_star_num" :key="index">

src/pages/courseResourcesChapter.vue

@@ -22,10 +22,16 @@
       <div class="chapterAllIn">
         <div class="chapterAllIn_left">
           <div class="normalT">课程资源</div>
+          <div class="searchValue">
+          <input type="text" placeholder="搜索关键字" v-model="searchKey" >
+          <div class="searchBtn" @click="searchBtn">
+            <img src="/kczy/searchIcon.png" alt="">
+          </div>
+        </div>
           <div class="sourceWidthCoverList">
 
             <div class="singlePart" v-for="(item,index) in sourceListData" :key="index" @click="reviewFile(item)">
-              <div class="courseCover"> <img :src="prefixImg+item.kf_img" alt=""></div>
+              <div class="courseCover"> <img :src="item.kf_img" alt=""></div>
               <p>{{item.kf_name}}</p>
               <div class="evalStar">
                 <img src="../assets/kczy/stars.png" v-for="(item,index) in item.kf_star_num" :key="index">
@@ -80,6 +86,7 @@ import { user } from "@/store/user.js";
       courseDetailData: '',
       sourceListData: [],
       kkID:'',
+      searchKey:'',
 
     }
   },
@@ -109,7 +116,8 @@ import { user } from "@/store/user.js";
       this.kkID = this.$route.query.id;
       let transObj = {
         token:user.token,
-        kk_id:this.kkID
+        kk_id: this.kkID,
+        keyword:this.searchKey,
       }
       courseSourceList(transObj)
         .then(res => {
@@ -132,7 +140,11 @@ import { user } from "@/store/user.js";
       } else {
         this.$router.push({ path:'/resourceFileReview', query:{icon:marklable,kfId:kfId} });
       }
-    }
+    },
+    /***/
+    searchBtn() {
+      this.initSourceData();
+    },
   },
 
   }
@@ -186,6 +198,10 @@ import { user } from "@/store/user.js";
     text-align: left;
     color: #ffffff;
   }
+  .intro{
+    max-height:87px;
+    overflow:hidden;
+  }
 }
 .chapterAll{
   box-sizing: border-box;
@@ -202,12 +218,15 @@ import { user } from "@/store/user.js";
     .chapterAllIn_left{
       width:65%;
       margin-right:10px;
-
+      box-sizing:border-box;
+      padding:10px;
       .sourceWidthCoverList{
         display: flex;
         align-items: center;
         justify-content: flex-start;
         flex-wrap: wrap;
+        max-height: 525px;
+        overflow-y:scroll ;
         .singlePart{
           width:32%;
           height: 234px;
@@ -234,6 +253,10 @@ import { user } from "@/store/user.js";
             box-sizing: border-box;
             padding: 0 6px;
             margin:10px 0;
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow:ellipsis;
           }
           .evalStar{
             box-sizing: border-box;
@@ -277,8 +300,21 @@ import { user } from "@/store/user.js";
           margin-right: 0!important;
         }
       }
-
-
+    }
+    .sourceWidthCoverList::-webkit-scrollbar {
+      width: 10px;
+      // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
+    }
+    .sourceWidthCoverList::-webkit-scrollbar-thumb {
+      background: #C0C0C0; // 滑块颜色
+      border-radius: 5px; // 滑块圆角
+    }
+    .sourceWidthCoverList::-webkit-scrollbar-thumb:hover {
+      background: #7D7D7D; // 鼠标移入滑块变红
+    }
+    .sourceWidthCoverList::-webkit-scrollbar-track {
+      border-radius: 10px; // 轨道圆角
+      background-color: #ffffff // 轨道颜色 
     }
     .chapterAllIn_right{
       width: 35%;
@@ -296,6 +332,41 @@ import { user } from "@/store/user.js";
     }
   }
 }
+.searchValue{
+  width: 497px;
+  height: 50px;
+  background: #ffffff;
+  border: 1px solid #00a3ff;
+  border-radius: 8px;
+  margin: 16px 0 23px 33%;
+  overflow: hidden;
+  position:relative;
+  input{
+    width:100%;
+    height: 100%;
+    outline: 0;
+    box-sizing: border-box;
+    padding-left: 10px;
+  }
+  .searchBtn{
+    width: 26px;
+    height: 26px;
+    background: #00a3ff;
+    border-radius: 6px;
+    position: absolute;
+    right:5px;
+    top:50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    img{
+      display: block;
+      text-align: center;
+      margin: 6px auto 0;
+    }
+  }
+}
 .selectActiveSpan{
   background: #DCF1FF;
   border-radius: 6px;

src/pages/resourceMovReview.vue

@@ -83,11 +83,11 @@
           >
             <video controls>
               <source
-                :src="prefixImg + sourceDetailData.kf_path"
+                :src="sourceDetailData.kf_path"
                 type="video/mp4"
               />
               <source
-                :src="prefixImg + sourceDetailData.kf_path"
+                :src="sourceDetailData.kf_path"
                 type="video/ogg"
               />
             </video>
@@ -98,7 +98,7 @@
           </div>
           <div class="vedioMainContent_left_bottom" v-else>
             <!-- {{prefixImg+sourceDetailData.kf_path}} -->
-            <audio controls :src="prefixImg + sourceDetailData.kf_path">
+            <audio controls :src="sourceDetailData.kf_path">
               <!-- <source :src="prefixImg+sourceDetailData.kf_path" type="audio/mp3"> -->
             </audio>
             <!-- <div class="assi">助教：沈老师</div> -->