新增mx-serach-group组件，用于条件筛选排版，如select，input等

src/assets/styles/variables.scss

@@ -1,44 +1,44 @@
-// base color
-$blue:#324157;
-$light-blue:#3A71A8;
-$red:#C03639;
-$pink: #E65D6E;
-$green: #30B08F;
-$tiffany: #4AB7BD;
-$yellow:#FEC171;
-$panGreen: #30B08F;
-
-// sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
-
-$menuBg:#304156;
-$menuHover:#263445;
-$sidebarTitle: #ffffff;
-
-$menuLightBg:#ffffff;
-$menuLightHover:#f0f1f5;
-$sidebarLightTitle: #001529;
-
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
-
-$sideBarWidth: 250px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  menuLightBg: $menuLightBg;
-  menuLightHover: $menuLightHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-  sidebarTitle: $sidebarTitle;
-  sidebarLightTitle: $sidebarLightTitle
-}
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30b08f;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+
+$menuBg:#304156;
+$menuHover:#263445;
+$sidebarTitle: #ffffff;
+
+$menuLightBg:#ffffff;
+$menuLightHover:#f0f1f5;
+$sidebarLightTitle: #001529;
+
+$subMenuBg:#1f2d3d;
+$subMenuHover:#001528;
+
+$sideBarWidth: 250px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  menuLightBg: $menuLightBg;
+  menuLightHover: $menuLightHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+  sidebarTitle: $sidebarTitle;
+  sidebarLightTitle: $sidebarLightTitle
+}

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

@@ -0,0 +1,96 @@
+<template>
+  <div class="search-group">
+    <el-row :gutter="20" type="flex" :justify="justify" class="search-group-row">
+      <slot />
+      <el-col :span="span" :offset="offset">
+        <div class="keyword-box">
+          <el-input
+            :placeholder="placeholder ? placeholder : '请输入关键字'"
+            class="keyword-ipt"
+            :value="value"
+            @input="updataValue"
+            @keyup.enter.native="onEnter"
+          >
+            <div slot="suffix" class="suffix cursor-pointer" @click="onEnter">
+              <i class="el-icon-search icon-search" />
+            </div>
+          </el-input>
+<!--          <el-button v-if="showReset" plain type="primary" class="search-btn" @click="onReset">{{ '重置' }}</el-button>-->
+<!--          <el-button type="primary" class="search-btn" @click="onEnter">{{ '确定'}}</el-button>-->
+        </div>
+      </el-col>
+      <slot name="last" />
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    justify: {
+      default: 'start'
+    },
+    span: {
+      type: Number,
+      default: 8
+    },
+    offset: {
+      type: Number,
+      default: 0
+    },
+    showReset: {
+      type: Boolean,
+      default: true
+    },
+    value: String,
+    placeholder: String
+  },
+  methods: {
+    updataValue(val) {
+      this.$emit('input', val)
+    },
+    onEnter() {
+      this.$emit('search')
+    },
+    onReset() {
+      this.$emit('reset')
+      const itemList = this.$children[0].$children
+      itemList.forEach(item => {
+        if (Object.hasOwnProperty.call(item, 'resetValue') &&
+          Object.prototype.toString.call(item.resetValue) === '[object Function]') {
+          item.resetValue()
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+.search-group {
+  .keyword-box {
+    display: flex;
+    align-items: center;
+  }
+  .search-btn {
+    //  width: 100%;
+    margin-left: 20px;
+  }
+  .suffix {
+    position: relative;
+    top: 8px;
+  }
+  .icon-search {
+    font-size: 18px;
+    cursor: pointer;
+    color: #42b983;
+  }
+  .el-input__suffix {
+    padding-right: 5px;
+  }
+  .keyword-ipt {
+    flex: 1;
+  }
+  .search-group-row {
+    flex-wrap: wrap;
+  }
+}
+</style>

src/views/career/zhiyuan/gkmc.vue

@@ -1,133 +1,134 @@
-<template>
-  <div class="simulation">
-    <div class="top">
-      <img
-        src="@/assets/images/career/img_bg.png"
-        style="width: 100%; margin: 20px 0"
-        alt=""
-      />
-      <div class="desc">
-        <p>志愿必修——带你快速了解高考的方方面面</p>
-        <p>
-          对于很多刚接触高考志愿填报的家长而言，填报的过程中会遇到各种的名词术语，一时之间找不到合适的专业人士来咨询，了解的志愿填报就更是挑战。下面为大家整理了高考志愿填报过程中常见的专业术语，帮助各位考生和家长加深理解。
-        </p>
-      </div>
-    </div>
-    <div class="container">
-      <div class="item" v-for="(item, index) in list" :key="index">
-        <div class="tag">
-          <div>{{ item.type }}</div>
-          <div class="bg"></div>
-        </div>
-        <div class="data">
-          <div
-            class="data_item"
-            v-for="(item2, index) in item.children"
-            :key="index"
-            @click="toDetail(item2.id)"
-          >
-            {{ item2.name }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { list } from "@/api/webApi/career-other";
-export default {
-  data() {
-    return {
-      list: [],
-    };
-  },
-  created() {
-    list().then((res) => {
-      this.list = res.rows;
-      console.log(res);
-    });
-  },
-  methods:{
-      toDetail(id){
-          this.$router.push({path:'/career/gkmc/detail',query:{id:id}})
-      }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.top {
-  position: relative;
-}
-.top .desc {
-  position: absolute;
-  top: 43px;
-  left: 43px;
-}
-.top .desc p:first-child {
-  font-size: 36px;
-  font-family: PingFangSC-Semibold, PingFang SC;
-  font-weight: 600;
-  color: #ffffff;
-  line-height: 50px;
-  margin-bottom: 32px;
-}
-.top .desc p:last-child {
-  font-size: 16px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  padding-right: 273px;
-  color: #525252;
-  line-height: 22px;
-}
-.item {
-  width: 100%;
-  background: #fcfcfc;
-  border: 1px solid #dcdcdc;
-  margin-bottom: 16px;
-}
-.tag {
-  position: relative;
-}
-.tag div:first-child {
-  width: 164px;
-  height: 56px;
-  position: relative;
-  top: 24px;
-  text-align: center;
-  line-height: 56px;
-  background: #47c6a2;
-  border-radius: 0px 8px 8px 0px;
-  z-index: 30;
-  color: white;
-}
-.tag .bg {
-  position: absolute;
-  left: 0;
-  top: 30px;
-  left: 8px;
-  width: 164px;
-  height: 56px;
-  background: #737373;
-  border-radius: 0px 8px 8px 0px;
-  opacity: 0.14;
-}
-.data {
-  margin-top: 38px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  flex-grow: 0;
-}
-.data .data_item {
-  cursor: pointer;
-  text-align: center;
-  height: 60px;
-  line-height: 60px;
-  flex: 25%;
-}
-.data .data_item:hover {
-  color: #47c6a2;
-}
-</style>
+<template>
+  <div class="simulation">
+    <div class="top">
+      <img
+        src="@/assets/images/career/img_bg.png"
+        style="width: 100%; margin: 20px 0"
+        alt=""
+      />
+      <div class="desc">
+        <p>志愿必修——带你快速了解高考的方方面面</p>
+        <p>
+          对于很多刚接触高考志愿填报的家长而言，填报的过程中会遇到各种的名词术语，一时之间找不到合适的专业人士来咨询，了解的志愿填报就更是挑战。下面为大家整理了高考志愿填报过程中常见的专业术语，帮助各位考生和家长加深理解。
+        </p>
+      </div>
+    </div>
+    <div class="container">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="tag">
+          <div>{{ item.type }}</div>
+          <div class="bg"></div>
+        </div>
+        <div class="data">
+          <div
+            class="data_item"
+            v-for="(item2, index) in item.children"
+            :key="index"
+            @click="toDetail(item2.id)"
+          >
+            {{ item2.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { list } from "@/api/webApi/career-other";
+export default {
+  data() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    list().then((res) => {
+      this.list = res.rows;
+      console.log(res);
+    });
+  },
+  methods:{
+      toDetail(id){
+          this.$router.push({path:'/career/gkmc/detail',query:{id:id}})
+      }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.top {
+  position: relative;
+}
+.top .desc {
+  position: absolute;
+  top: 43px;
+  left: 43px;
+}
+.top .desc p:first-child {
+  font-size: 36px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 50px;
+  margin-bottom: 32px;
+}
+.top .desc p:last-child {
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  padding-right: 273px;
+  color: #525252;
+  line-height: 22px;
+}
+.item {
+  width: 100%;
+  background: #fcfcfc;
+  border: 1px solid #dcdcdc;
+  margin-bottom: 16px;
+}
+.tag {
+  position: relative;
+}
+.tag div:first-child {
+  width: 164px;
+  height: 56px;
+  position: relative;
+  top: 24px;
+  text-align: center;
+  line-height: 56px;
+  background: #47c6a2;
+  border-radius: 0px 8px 8px 0px;
+  z-index: 30;
+  color: white;
+}
+.tag .bg {
+  position: absolute;
+  left: 0;
+  top: 30px;
+  left: 8px;
+  width: 164px;
+  height: 56px;
+  background: #737373;
+  border-radius: 0px 8px 8px 0px;
+  opacity: 0.14;
+}
+.data {
+  margin-top: 38px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  flex-grow: 0;
+}
+.data .data_item {
+  cursor: pointer;
+  text-align: center;
+  height: 60px;
+  line-height: 60px;
+  flex: 25%;
+  flex-grow: 0;
+}
+.data .data_item:hover {
+  color: #47c6a2;
+}
+</style>

src/views/career/zhiyuan/yfyd.vue

@@ -18,14 +18,7 @@
       </div>
     </el-card>
     <el-card>
-      <el-row type="flex" justify="end">
-       <el-col :span="6">
-         <el-input
-         placeholder="请输入分数"
-         v-model="score">
-           <i slot="suffix" class="icon-style el-icon-search" @click="getList"></i>
-       </el-input></el-col>
-      </el-row>
+      <mx-search-group 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>
       <div class="content">
@@ -45,12 +38,14 @@ 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:  {
     MxCondition,
-    Pagination
+    Pagination,
+    MxSearchGroup
   },
   data() {
     return {
@@ -130,10 +125,6 @@ export default {
   background-color: #47c6a2;
   margin-left: 0;
 }
-.icon-style {
-  display: flex;align-items: center;height: 100%;
-  cursor: pointer;
-}
 .back{
   padding: 30px;
   margin: 10px 0;