出版社优化

src/pages/publication/monograph.vue

@@ -10,14 +10,12 @@
           placeholder="请选择出版时间"
           format="yyyy"
           value-format="yyyy"
+          clearable
           @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <input type="text" placeholder="请输入著作名称/出版社名称/编写人员" v-model="form.monographQueryKeyWord">
+        <input type="text" placeholder="请输入著作名称/出版社名称/编写人员" v-model="form.title" clearable>
-        <i class="icon">
-          <img src="@/assets/images/search-white.png" alt="">
-        </i>
       </div>
     </div>
 
@@ -43,7 +41,7 @@ export default {
       patentClasses: ColumnConst.patentClasses,
       searchTimer: null,
       form: {
-        monographQueryKeyWord: '',
+        title: '',
         publicationTime: ''
       },
       classifications: [],
@@ -57,7 +55,7 @@ export default {
     id() {
       this.id && this.initData()
     },
-    'form.monographQueryKeyWord': function (val) {
+    'form.title': function (val) {
       clearTimeout(this.searchTimer);
       this.searchTimer = setTimeout(() => {
         this.initData();
@@ -96,73 +94,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.forms {
+@import "../../styles/page/publication.scss";
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  margin-bottom: 20px;
-  background-color: #fff;
-  .item {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 30px;
-  }
-  .label {
-    font-size: 16px;
-    color: #333;
-    white-space: nowrap;
-  }
-  /deep/.el-input__inner {
-    width: 100%;
-    height: 48px;
-    line-height: 48px;
-    border: 0;
-    background: #F7F7F7;
-  }
-  .search {
-    display: inline-flex;
-    width: 34%;
-    input {
-      width: 100%;
-      height: 48px;
-      padding: 0 15px;
-      font-size: 14px;
-      color: #333;
-      background: #F7F7F7;
-      border: 0;
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-  .icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 62px;
-    height: 48px;
-    background: #1583FF;
-    border-radius: 0px 6px 6px 0px;
-    cursor: pointer;
-  }
-}
 /deep/.patent-table {
   thead tr, thead th {
     color: #fff;
     background-color: #1583FF;
   }
 }
-@media (max-width: 1200px) {
-  .forms {
-    padding: 1.25rem;
-    flex-direction: column;
-    .item, .search,div {
-      width: 80%;margin: 0 auto;
-      justify-content: center;
-      margin-top: 20px;
-    }
-  } 
-}
 </style>

src/pages/publication/patent.vue

@@ -3,7 +3,7 @@
     <div class="forms">
       <div class="item">
         <span class="label">专利类别：</span>
-        <el-select v-model="form.patentClassId" @change="initData">
+        <el-select v-model="form.patentClassId" clearable @change="initData">
           <el-option
             v-for="item in patentClasses"
             :key="item.id"
@@ -19,16 +19,12 @@
           type="date"
           placeholder="选择日期"
           format="yyyy-MM-dd"
-          :clearable="false"
           value-format="yyyy-MM-dd"
           @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <input type="text" placeholder="请输入专利名称/发明人姓名/申请号员" v-model="form.patentQueryKeyWord">
+        <input type="text" placeholder="请输入专利名称/发明人姓名/申请号员" v-model="form.patentQueryKeyWord" clearable>
-        <i class="icon">
-          <img src="@/assets/images/search-white.png" alt="">
-        </i>
       </div>
     </div>
 
@@ -114,73 +110,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.forms {
+@import "../../styles/page/publication.scss";
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  margin-bottom: 20px;
-  background-color: #fff;
-  .item {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 30px;
-  }
-  .label {
-    font-size: 16px;
-    color: #333;
-    white-space: nowrap;
-  }
-  /deep/.el-input__inner {
-    width: 100%;
-    height: 48px;
-    line-height: 48px;
-    border: 0;
-    background: #F7F7F7;
-  }
-  .search {
-    display: inline-flex;
-    width: 34%;
-    input {
-      width: 100%;
-      height: 48px;
-      padding: 0 15px;
-      font-size: 14px;
-      color: #333;
-      background: #F7F7F7;
-      border: 0;
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-  .icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 62px;
-    height: 48px;
-    background: #1583FF;
-    border-radius: 0px 6px 6px 0px;
-    cursor: pointer;
-  }
-}
 /deep/.patent-table {
   thead tr, thead th {
     color: #fff;
     background-color: #1583FF;
   }
 }
-@media (max-width: 1200px) {
-  .forms {
-    padding: 1.25rem;
-    flex-direction: column;
-    .item, .search,div {
-      width: 80%;margin: 0 auto;
-      justify-content: center;
-      margin-top: 20px;
-    }
-  } 
-}
 </style>

src/pages/publication/thesis.vue

@@ -10,14 +10,12 @@
           placeholder="请选择出版时间"
           format="yyyy"
           value-format="yyyy"
+          clearable
           @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <input type="text" placeholder="请输入论文题目/期刊名称/作者名称" v-model="form.paperQueryKeyWord">
+        <input type="text" placeholder="请输入论文题目/期刊名称/作者名称" v-model="form.paperQueryKeyWord" clearable>
-        <i class="icon">
-          <img src="@/assets/images/search-white.png" alt="">
-        </i>
       </div>
     </div>
 
@@ -89,58 +87,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.forms {
+@import "../../styles/page/publication.scss";
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  margin-bottom: 20px;
-  background-color: #fff;
-  .item {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 30px;
-  }
-  .label {
-    font-size: 16px;
-    color: #333;
-    white-space: nowrap;
-  }
-  /deep/.el-input__inner {
-    width: 100%;
-    height: 48px;
-    line-height: 48px;
-    border: 0;
-    background: #F7F7F7;
-  }
-  .search {
-    display: inline-flex;
-    width: 34%;
-    input {
-      width: 100%;
-      height: 48px;
-      padding: 0 15px;
-      font-size: 14px;
-      color: #333;
-      background: #F7F7F7;
-      border: 0;
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
-      &:focus {
-        outline: none;
-      }
-    }
-  }
-  .icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 62px;
-    height: 48px;
-    background: #1583FF;
-    border-radius: 0px 6px 6px 0px;
-    cursor: pointer;
-  }
-}
 .list {
   li {
     padding: 30px;
@@ -158,15 +105,4 @@ export default {
     line-height: 30px;
   }
 }
-@media (max-width: 1200px) {
-  .forms {
-    padding: 1.25rem;
-    flex-direction: column;
-    .item, .search,div {
-      width: 80%;margin: 0 auto;
-      justify-content: center;
-      margin-top: 20px;
-    }
-  } 
-}
 </style>

src/styles/page/publication.scss

@@ -0,0 +1,64 @@
+.forms {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  margin-bottom: 20px;
+  background-color: #fff;
+  .item {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 30px;
+  }
+  .label {
+    font-size: 16px;
+    color: #333;
+    white-space: nowrap;
+  }
+  /deep/.el-input__inner {
+    width: 100%;
+    height: 38px;
+    line-height: 38px;
+    border: 0;
+    background: #F7F7F7;
+  }
+  .search {
+    display: inline-flex;
+    width: 34%;
+    input {
+      width: 100%;
+      height: 38px;
+      padding: 0 15px;
+      font-size: 14px;
+      color: #333;
+      background: #F7F7F7;
+      border: 0;
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+  .icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 62px;
+    height: 38px;
+    background: #1583FF;
+    border-radius: 0px 6px 6px 0px;
+    cursor: pointer;
+  }
+}
+
+@media (max-width: 1200px) {
+  .forms {
+    padding: 1.25rem;
+    flex-direction: column;
+    .item, .search,div {
+      width: 80%;margin: 0 auto;
+      justify-content: center;
+      margin-top: 20px;
+    }
+  } 
+}