视频课程整合mx-search-group

src/components/MxSearch/mx-search-group.vue

@@ -88,6 +88,7 @@ export default {
   }
   .keyword-ipt {
     flex: 1;
+    border-radius: 10px;
   }
   .search-group-row {
     flex-wrap: wrap;

src/views/career/zhiyuan/yfyd.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="simulation">
-    <el-card   class="mt20 mb20">
+    <el-card class="mt20 mb20">
       <div
         :style="{ 'background-image': backimg }"
         class="back"
@@ -18,31 +18,32 @@
       </div>
     </el-card>
     <el-card>
-      <mx-search-group justify="end" :span="6" v-model="score" placeholder="请输入分数" @search="getList"   ></mx-search-group>
+      <mx-search-group class="mb10" justify="end" :span="6" v-model="score" placeholder="请输入分数" @search="getList"
+      ></mx-search-group>
       <mx-condition ref="condition" :query-params="queryParams" @query="handleQuery"
-                    @invalid="handleInvalidQuery"></mx-condition>
+                    @invalid="handleInvalidQuery"
+      ></mx-condition>
       <div class="content">
         <div class="table-wrap" v-loading="loading">
-          <mx-table :rows="batchData" :propDefines="propDefines"> </mx-table>
+          <mx-table :rows="batchData" :propDefines="propDefines"></mx-table>
         </div>
 
         <pagination :total="pageForm.total" :autoScroll="false" @pagination="onChangePage" :page.sync="pageForm.pageNum"
-                    :limit.sync="pageForm.pageSize"></pagination>
+                    :limit.sync="pageForm.pageSize"
+        ></pagination>
       </div>
     </el-card>
   </div>
 </template>
 
 <script>
-import {
-  yfydList,
-} from "@/api/webApi/career-other";
+import { yfydList } from '@/api/webApi/career-other'
 import MxCondition from '@/components/MxCondition/mx-condition'
 import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import Pagination from '@/components/Pagination'
 
 export default {
-  components:  {
+  components: {
     MxCondition,
     Pagination,
     MxSearchGroup
@@ -53,71 +54,72 @@ export default {
       queryParams: {
         yfydLocation: '',
         yfydYear: '',
-        yfydMode: '',
+        yfydMode: ''
       },
       pageForm: { pageNum: 1, pageSize: 10, total: 0 },
       backimg:
-        "url(" + require("@/assets/images/career/icon_colleges.png") + ")",
+        'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
       batchData: [],
       score: '',
       propDefines: {
         location: {
-          label: "地域",
+          label: '地域'
         },
         year: {
-          label: "年份",
+          label: '年份'
         },
         mode: {
-          label: "科类",
+          label: '科类'
         },
         score: {
-          label: "分数",
+          label: '分数'
         },
         num: {
-          label: "人数",
+          label: '人数'
         },
         numTotal: {
-          label: "累计人数",
-        },
+          label: '累计人数'
+        }
       }
-    };
+    }
   },
   created() {
   },
   methods: {
     getList() {
-      if(this.score == '') return
+      if (this.score == '') return
       this.getYfydList()
     },
     handleInvalidQuery() {
 
     },
-    onChangePage(page){
-      this.pageForm.pageSize = page.limit;
-      this.pageForm.pageNum = page.page;
-      this.getYfydList();
+    onChangePage(page) {
+      this.pageForm.pageSize = page.limit
+      this.pageForm.pageNum = page.page
+      this.getYfydList()
     },
     handleQuery() {
       this.pageForm.pageNum = 1
       this.getYfydList()
     },
     getYfydList() {
-      this.loading =true
+      this.loading = true
       yfydList({
         year: this.queryParams.yfydYear,
         location: this.queryParams.yfydLocation,
         mode: this.queryParams.yfydMode,
         score: this.score,
-        ...this.pageForm}).then((res) => {
-        this.batchData = res.rows;
-        this.pageForm.total = res.total;
-        console.log(res);
+        ...this.pageForm
+      }).then((res) => {
+        this.batchData = res.rows
+        this.pageForm.total = res.total
+        console.log(res)
       }).finally(_ => {
         this.loading = false
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -125,7 +127,8 @@ export default {
   background-color: #47c6a2;
   margin-left: 0;
 }
-.back{
+
+.back {
   padding: 30px;
   margin: 10px 0;
   background-color: white;

src/views/videocourse/video_course.vue

@@ -1,24 +1,26 @@
 <template >
   <div class="video_contianer">
     <el-card>
-      <div slot="header" class="header">
-        <div class="spans">
+      <div slot="header" >
+        <mx-search-group  justify="space-between" :span="6" v-model="form.sectionName" placeholder="请输入搜索内容" @search="searchVideo">
+          <div class="spans">
           <span
             v-for="item in videoType"
             :key="item.code"
             :class="typeActive == item.code ? 'active_text' : ''"
             @click="toggleType(item.code)"
-            >{{ item.label }}</span
+          >{{ item.label }}</span
           >
-        </div>
-        <div class="search_btn" style="float: right; overflow: auto">
-          <input
-            v-model="form.sectionName"
-            @keyup.enter="searchVideo"
-            placeholder="请输入搜索内容"
-          />
-          <img src="@/assets/images/icon_search.png" @click="searchVideo" />
-        </div>
+          </div>
+        </mx-search-group>
+<!--        <div class="search_btn" style="float: right; overflow: auto">-->
+<!--          <input-->
+<!--            v-model="form.sectionName"-->
+<!--            @keyup.enter="searchVideo"-->
+<!--            placeholder="请输入搜索内容"-->
+<!--          />-->
+<!--          <img src="@/assets/images/icon_search.png" @click="searchVideo" />-->
+<!--        </div>-->
       </div>
       <div class="radio_contianer">
         <div style="margin-bottom: 16px">
@@ -128,9 +130,10 @@ import {
   videoList,
   videoInfo,
 } from "@/api/webApi/webVideo";
+import MxSearchGroup from '@/components/MxSearch/mx-search-group'
 import FormSearch from "@/components/formSearch";
 export default {
-  components: { FormSearch },
+  components: {MxSearchGroup },
   data() {
     return {
       input: "",
@@ -281,16 +284,16 @@ export default {
 .el-card {
   margin-bottom: 32px;
 }
-.header {
-  padding-bottom: 17px;
-}
+
 .video_contianer {
   padding: 20px;
 }
 .spans {
-  display: inline-block;
+  margin-left: 10px;
 }
 .spans > span {
+  height: 100%;
+  display: inline-block;
   padding: 6px 19px;
   border-radius: 16px;
   font-size: 14px;