diff --git a/jero-web/src/App.vue b/jero-web/src/App.vue
index 09a999237..7beca0673 100644
--- a/jero-web/src/App.vue
+++ b/jero-web/src/App.vue
@@ -11,6 +11,8 @@
   import enquireScreen from '@/utils/device'
   import moment from 'moment'
   import 'moment/locale/zh-cn'
+  import Vue from 'vue'
+  import { mapGetters } from 'vuex'
 
   moment.locale('zh-cn')
 
@@ -79,13 +81,15 @@
     watch: {
       $route: function(val) {
         this.$nextTick(() => {
-          this.$watermark.set('fanqiangqiang 范强强')
+          this.$watermark.set(this.userInfo().updateBy + ' ' + this.userInfo().username)
         })
       }
     },
     computed: {},
 
-    methods: {}
+    methods: {
+      ...mapGetters(['userInfo'])
+    }
   }
 </script>
 <style>
diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 27ee81e7f..11b683c9c 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -506,5 +506,6 @@ module.exports = {
   Processing:'Processing',
   See:'See',
   labelNameCannotDuplicate:'Label name cannot be duplicate',
-
+  list:'list',
+  paragraph:'paragraph',
 }
\ No newline at end of file
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index 71cf86c35..32607d769 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -510,5 +510,7 @@ module.exports = {
   Processing:'办理',
   See:'查看',
   labelNameCannotDuplicate:'标签名称不能重复',
+  list:'列表',
+  paragraph:'段落',
 
 }
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/searchCenter/components/DocumentLibrary.vue b/jero-web/src/views/documentTools/searchCenter/components/DocumentLibrary.vue
new file mode 100644
index 000000000..759ac6f1a
--- /dev/null
+++ b/jero-web/src/views/documentTools/searchCenter/components/DocumentLibrary.vue
@@ -0,0 +1,501 @@
+<template>
+  <div class="search-con-text">
+    <div class="search-text-wrap">
+      <div class="text-left">
+        <div class="text-left-wrap">
+          <div class="text-left-select" v-for="item in searchOption" :key="item.id">
+            <span class="text-sel">{{item.value}}</span>
+            <a-select class="text-select" :default-value="item.option[0].value" style="width: 120px"
+                      @change="handleChange">
+              <a-select-option v-for="opt in item.option" :value="opt.value">
+                {{opt.value}}
+              </a-select-option>
+            </a-select>
+          </div>
+          <div class="text-left-select">
+            <span class="text-sel">发布日期</span>
+            <a-date-picker class="text-select" @change="onChange"/>
+          </div>
+          <div class="text-left-select">
+            <span class="text-sel">标准实施日期</span>
+            <a-date-picker class="text-select" @change="onChange"/>
+          </div>
+        </div>
+      </div>
+      <div class="text-right">
+        <div class="search-text-list">
+          <div class="search-text-title">
+            <span>检索范围：</span>
+            <span>纯电动</span>
+            <div class="search-header-right">
+              <a-icon type="appstore" class="header-list" :title="$t('list')" :class="{'header-list-active':isTrue }"
+                      @click="selectListModel('list')"></a-icon>
+              <a-icon type="unordered-list" class="header-list" :title="$t('paragraph')"
+                      :class="{'header-list-active':!isTrue }"
+                      @click="selectListModel('unord')"></a-icon>
+            </div>
+          </div>
+          <a-table
+            v-if="isTrue"
+            ref="table"
+            size="middle"
+            bordered
+            rowKey="id"
+            :data-source="tableData"
+            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            :columns="columns"
+          >
+            <!-- 字符串超长截取省略号显示-->
+            <!--            <span slot="templateContent" slot-scope="text">-->
+            <!--              <j-ellipsis :value="text" :length="25"/>-->
+            <!--            </span>-->
+          </a-table>
+          <div v-if="!isTrue" class="box-content">
+            <a-checkbox-group v-model="checkboxText">
+              <li v-for="item in conList" :key="item.id">
+                <div style="margin-bottom: 10px;position: relative">
+                  <a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
+                  <div class="text-text-right"
+                       @click="checkedClick(item)"
+                       :class="{ 'null-input':item.checked }">
+                    <div class="text-header">
+                      <span>{{item.type}}</span>
+                      <span>{{item.number}}</span>
+                      <span>{{item.title}}</span>
+                    </div>
+                    <div class="text-content">
+                      {{item.content}}
+                    </div>
+                  </div>
+                </div>
+              </li>
+            </a-checkbox-group>
+          </div>
+          <div class="page">
+            <a-pagination
+              :show-total="total => $t('total')+` ${total} `+$t('strip')"
+              show-quick-jumper
+              show-size-changer
+              :page-size.sync="pageSize"
+              :total="total"
+              @change="pageOnChange"
+              @showSizeChange="SizeChange"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DocumentLibrary',
+    data() {
+      return {
+        searchOption: [
+          {
+            id: 1,
+            label: 'categary',
+            value: '适用区域',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          },
+          {
+            id: 2,
+            label: 'type',
+            value: '类别',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          },
+          {
+            id: 3,
+            label: 'stand',
+            value: '标准体系',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          },
+          {
+            id: 4,
+            label: 'state',
+            value: '状态',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          },
+          {
+            id: 5,
+            label: 'trial',
+            value: '适用范围',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          },
+          {
+            id: 6,
+            label: 'funArea',
+            value: '功能领域',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          },
+          {
+            id: 7,
+            label: 'techArea',
+            value: '技术领域',
+            option: [
+              {
+                label: 'china',
+                value: '中国'
+              },
+              {
+                label: 'english',
+                value: '英国'
+              }
+            ]
+          }
+        ],
+        tableData: [],
+        columns: [
+          {
+            title: '编号',
+            align: 'center',
+            dataIndex: 'templateCode'
+          },
+          {
+            title: '标题',
+            align: 'center',
+            dataIndex: 'templateName'
+          },
+          {
+            title: '文件名称',
+            align: 'center',
+            dataIndex: 'template'
+          },
+          {
+            title: '状态',
+            align: 'center',
+            dataIndex: 'templateCon',
+            sorter: (a, b) => a.age - b.age
+          },
+          {
+            title: '适用地区',
+            align: 'center',
+            dataIndex: 'templateCont',
+            sorter: (a, b) => a.age - b.age
+          },
+          {
+            title: '功能领域',
+            align: 'center',
+            dataIndex: 'templateContent1'
+          },
+          {
+            title: '技术领域',
+            align: 'center',
+            dataIndex: 'templateContent2'
+          }
+        ],
+        selectedRowKeys: [],
+        isTrue: true,
+        checkboxText: [],
+        conList: [
+          {
+            id: 1,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 2,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 3,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 4,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 5,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          }
+        ],
+        total: 0,
+        pageSize: 10,
+        pageNo: 1
+      }
+    },
+    watch: {
+      checkboxText: function(value) {
+        this.conList.forEach(val => {
+          val.checked = false
+        })
+        if (value.length > 0) {
+          this.conList.forEach(val => {
+            value.forEach(res => {
+              if (res === val.id) {
+                val.checked = true
+              }
+            })
+          })
+        }
+        this.conList = [...this.conList]
+      }
+    },
+    methods: {
+      handleChange() {
+
+      },
+      onChange(date, dateString) {
+        // console.log(date, dateString);
+      },
+      selectListModel(val) {
+        this.isTrue = val == 'list' ? true : false
+      },
+      onSelectChange() {
+
+      },
+      checkedClick(item) {
+        if (item.checked) {
+          this.checkboxText = this.checkboxText.filter(res => {
+            return res !== item.id
+          })
+        } else {
+          this.checkboxText.push(item.id)
+        }
+      },
+      pageOnChange(page, pageSize) {
+        this.pageNo = page
+      },
+      SizeChange(page, pageSize) {
+        this.pageSize = pageSize
+      }
+    }
+  }
+</script>
+<style>
+  .checkbox-left .ant-checkbox-inner {
+    width: 18px !important;
+    height: 18px !important;
+    line-height: 18px !important;
+  }
+</style>
+<style lang="less" scoped>
+
+  .search-con-text {
+
+    .search-text-wrap {
+      margin-top: -27px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+
+      .text-left {
+        width: 358px;
+        padding: 24px 24px 24px 0;
+        box-sizing: border-box;
+
+        .text-left-wrap {
+
+          .text-left-select {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 24px;
+            line-height: 32px;
+
+            .text-sel {
+              font-size: 14px;
+              font-weight: 400;
+              color: #000F16;
+              text-align: right;
+              margin-right: 14px;
+              width: 83px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+
+            .text-select {
+              flex: 1;
+            }
+          }
+        }
+      }
+
+      .text-right {
+        width: 100%;
+        position: relative;
+        padding: 26px 0 22px 24px;
+        box-sizing: border-box;
+        border-left: 2px solid #E6E7EC;
+
+        .search-text-title {
+          padding: 0 0 24px 0;
+
+          span {
+            font-size: 14px;
+            font-weight: 400;
+            color: #040B29;
+          }
+
+          .search-header-right {
+            float: right;
+            margin-top: -7px;
+
+            a-icon {
+
+              border: 1px solid rgba(0, 0, 0, 0.65);
+              cursor: pointer;
+              padding: 2px 5px;
+              border-right: none;
+            }
+
+            a-icon:last-child {
+              border-right: 1px solid rgba(0, 0, 0, 0.65);
+            }
+
+            .header-list {
+              font-size: 20px;
+              border: 1px solid gray;
+              border-radius: 3px;
+              padding: 3px;
+            }
+
+            .header-list:hover {
+              color: #00B3BE;
+              border: 1px solid #00B3BE;
+            }
+
+            .header-list-active {
+              border: 1px solid #00B3BE;
+              color: #00B3BE;
+            }
+          }
+        }
+
+        .search-text-list {
+          ul {
+            padding: 0 0 0 18px;
+            margin: 0;
+
+            li {
+              list-style: none;
+
+              .text-content {
+                font-size: 14px;
+                font-weight: 400;
+                color: #040B29;
+                opacity: 0.8;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .checkbox-left {
+    float: left;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .text-text-right {
+    padding: 19px 28px;
+    box-sizing: border-box;
+    margin-left: 38px;
+  }
+
+  .null-input {
+    background-color: #F2F4F8;
+  }
+
+  .text-header {
+    margin-bottom: 11px;
+
+    span {
+      margin-right: 52px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #040B29;
+    }
+  }
+
+  .text-content {
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    opacity: 0.7;
+  }
+
+  .box-content {
+    padding: 0 0 0 8px;
+    box-sizing: border-box;
+  }
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/searchCenter/components/whole.vue b/jero-web/src/views/documentTools/searchCenter/components/whole.vue
new file mode 100644
index 000000000..5377d723a
--- /dev/null
+++ b/jero-web/src/views/documentTools/searchCenter/components/whole.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="box">
+    <div class="search-text-title">
+      <span>检索范围：</span>
+      <span>纯电动</span>
+      <!--      <div class="search-header-right" v-if="showList">-->
+      <!--        &lt;!&ndash;              <a-icon type="appstore" />&ndash;&gt;-->
+      <!--        <a-icon :type="item.type" v-for="item in listOption" class="header-list"-->
+      <!--                :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"-->
+      <!--                @click="selectListModel(item.value)"-->
+      <!--        ></a-icon>-->
+      <!--      </div>-->
+    </div>
+    <a-checkbox-group v-model="checkboxText">
+      <li v-for="item in conList" :key="item.id">
+        <div style="margin-bottom: 10px;position: relative">
+          <a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
+          <div class="text-text-right"
+               @click="checkedClick(item)"
+               :class="{ 'null-input':item.checked }">
+            <div class="text-header">
+              <span>{{item.type}}</span>
+              <span>{{item.number}}</span>
+              <span>{{item.title}}</span>
+            </div>
+            <div class="text-content">
+              {{item.content}}
+            </div>
+          </div>
+        </div>
+      </li>
+    </a-checkbox-group>
+    <div class="page">
+      <a-pagination
+        :show-total="total => $t('total')+` ${total} `+$t('strip')"
+        show-quick-jumper
+        show-size-changer
+        :page-size.sync="pageSize"
+        :total="total"
+        @change="pageOnChange"
+        @showSizeChange="SizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'whole',
+    data() {
+      return {
+        checkboxText: [],
+        conList: [
+          {
+            id: 1,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 2,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 3,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 4,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          },
+          {
+            id: 5,
+            type: '文档库',
+            number: 'GB20999-2019',
+            title: '内饰件阻燃特性',
+            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+          }
+        ],
+        total: 0,
+        pageSize: 10,
+        pageNo: 1
+      }
+    },
+    watch: {
+      checkboxText: function(value) {
+        this.conList.forEach(val => {
+          val.checked = false
+        })
+        if (value.length > 0) {
+          this.conList.forEach(val => {
+            value.forEach(res => {
+              if (res === val.id) {
+                val.checked = true
+              }
+            })
+          })
+        }
+        this.conList = [...this.conList]
+      }
+    },
+    methods: {
+      checkedClick(item) {
+        if (item.checked) {
+          this.checkboxText = this.checkboxText.filter(res => {
+            return res !== item.id
+          })
+        } else {
+          this.checkboxText.push(item.id)
+        }
+      },
+      pageOnChange(page, pageSize) {
+        this.pageNo = page
+      },
+      SizeChange(page, pageSize) {
+        this.pageSize = pageSize
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .box {
+    padding: 0 0 0 18px;
+    box-sizing: border-box;
+  }
+
+  .checkbox-left {
+    float: left;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .text-text-right {
+    padding: 19px 28px;
+    box-sizing: border-box;
+    margin-left: 38px;
+  }
+
+  .null-input {
+    background-color: #F2F4F8;
+  }
+
+  .search-text-title {
+    margin-bottom: 22px;
+  }
+
+  .text-header {
+    margin-bottom: 11px;
+
+    span {
+      margin-right: 52px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #040B29;
+    }
+  }
+
+  .text-content {
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    opacity: 0.7;
+  }
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/documentTools/searchCenter/index.vue b/jero-web/src/views/documentTools/searchCenter/index.vue
index 34a0e998f..0e0043cbf 100644
--- a/jero-web/src/views/documentTools/searchCenter/index.vue
+++ b/jero-web/src/views/documentTools/searchCenter/index.vue
@@ -4,12 +4,7 @@
       <div class="search-center-wrap">
         <div class="search-detail">
           <div class="search-detail-wrap">
-            <!--            <div class="search-detail-title">搜索内容</div>-->
-            <!--            <a-input placeholder="请输入搜索内容" />-->
-            <!--            <a-button type="primary">搜索</a-button>-->
-            <!--            <a-button>清空</a-button>-->
-
-            <a-input-group compact v-if="showList">
+            <a-input-group class="input-group" compact v-if="active === $t('DocumentLibrary')">
               <a-select default-value="Option1">
                 <a-select-option value="Option1">
                   标题
@@ -26,107 +21,29 @@
               ></a-input-search>
             </a-input-group>
             <a-input-search
-              v-else
-              allowClear
+              v-else-if="active === $t('whole')"
+              class="inputSearch"
+              allow-clear
               placeholder="请输入搜索内容"
               @search="onSearch"
             ></a-input-search>
-            <!--            <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>-->
-            <!--            <a href="javascript:;">结果中检索</a>-->
           </div>
         </div>
         <div class="search-center-content">
           <div class="search-con-header">
             <div class="search-header-left">
-              <a-tabs :default-active-key="$t('whole')" @change="callback">
+              <a-tabs :default-active-key="active" @change="callback">
                 <a-tab-pane :key="$t('whole')" :tab="$t('whole')"></a-tab-pane>
                 <a-tab-pane :key="$t('DocumentLibrary')" :tab="$t('DocumentLibrary')" force-render>
                 </a-tab-pane>
-                <a-tab-pane :key="$t('KnowledgeDatabase')" :tab="$t('KnowledgeDatabase')"></a-tab-pane>
-                <a-tab-pane :key="$t('DocumentComparisonLibrary')" :tab="$t('DocumentComparisonLibrary')"></a-tab-pane>
-                <a-tab-pane :key="$t('weekly')" :tab="$t('weekly')"></a-tab-pane>
+                <!--                <a-tab-pane :key="$t('KnowledgeDatabase')" :tab="$t('KnowledgeDatabase')"></a-tab-pane>-->
+                <!--                <a-tab-pane :key="$t('DocumentComparisonLibrary')" :tab="$t('DocumentComparisonLibrary')"></a-tab-pane>-->
+                <!--                <a-tab-pane :key="$t('weekly')" :tab="$t('weekly')"></a-tab-pane>-->
               </a-tabs>
             </div>
           </div>
-          <div class="search-con-text">
-            <div class="search-text-wrap">
-              <div class="text-left" v-if="searchShow">
-                <div class="text-left-wrap">
-                  <div class="text-left-select" v-for="item in searchOption" :key="item.id">
-                    <span class="text-sel">{{item.value}}</span>
-                    <a-select class="text-select" :default-value="item.option[0].value" style="width: 120px"
-                              @change="handleChange">
-                      <a-select-option v-for="opt in item.option" :value="opt.value">
-                        {{opt.value}}
-                      </a-select-option>
-                    </a-select>
-                  </div>
-                  <div class="text-left-date">
-                    <span class="data-fb">发布日期</span>
-                    <a-date-picker @change="onChange"/>
-                  </div>
-                  <div class="text-left-date">
-                    <span class="data-fb">标准实施日期</span>
-                    <a-date-picker @change="onChange"/>
-                  </div>
-                </div>
-              </div>
-              <div class="text-right" :class="{'text-right-right':searchShow}">
-                <div class="search-text-title">
-                  <span>检索范围：</span>
-                  <span>纯电动</span>
-                  <div class="search-header-right" v-if="showList">
-                    <!--              <a-icon type="appstore" />-->
-                    <a-icon :type="item.type" v-for="item in listOption" class="header-list"
-                            :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"
-                            @click="selectListModel(item.value)"
-                    ></a-icon>
-                  </div>
-                </div>
-                <div class="search-text-list">
-                  <a-table
-                    v-if="searchShow"
-                    ref="table"
-                    size="middle"
-                    bordered
-                    rowKey="id"
-                    :data-source="tableData"
-                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-                    :columns="columns"
-                  >
-                    <!-- 字符串超长截取省略号显示-->
-                    <span slot="templateContent" slot-scope="text">
-                      <j-ellipsis :value="text" :length="25"/>
-                    </span>
-                  </a-table>
-
-                  <ul v-if="!searchShow">
-                    <a-checkbox-group v-model="checkboxText">
-                      <li v-for="item in conList" :key="item.id">
-                        <div style="margin-bottom: 10px;position: relative">
-                          <a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
-                          <div class="text-text-right"
-                               @click="checkedClick(item)"
-                               :class="{ 'null-input':item.checked }">
-                            <div class="text-header">
-                              <span>{{item.type}}</span>
-                              <span>{{item.number}}</span>
-                              <span>{{item.title}}</span>
-                            </div>
-                            <div class="text-content">
-                              {{item.content}}
-                            </div>
-                          </div>
-                        </div>
-                      </li>
-                    </a-checkbox-group>
-                  </ul>
-                  <a-pagination size="small" :total="50" class="paginationbox" :show-total="total => `总共 ${total} 条`"
-                                show-size-changer show-quick-jumper/>
-                </div>
-              </div>
-            </div>
-          </div>
+          <whole v-if="active === $t('whole')"/>
+          <DocumentLibrary v-else-if="active === $t('DocumentLibrary')"/>
         </div>
       </div>
     </div>
@@ -134,307 +51,28 @@
 </template>
 
 <script>
+  import whole from './components/whole'
+  import DocumentLibrary from './components/DocumentLibrary'
+
   export default {
     name: 'searchCenter',
+    components: {
+      whole,
+      DocumentLibrary
+    },
     data() {
       return {
-        selectedRowKeys: [],
-        isNullInput: false,
-        columns: [
-          {
-            title: '编号',
-            align: 'center',
-            dataIndex: 'templateCode'
-          },
-          {
-            title: '标题',
-            align: 'center',
-            dataIndex: 'templateName'
-          },
-          {
-            title: '文件名称',
-            align: 'center',
-            dataIndex: 'templateContent'
-          },
-          {
-            title: '状态',
-            align: 'center',
-            dataIndex: 'templateContent',
-            sorter: (a, b) => a.age - b.age
-          },
-          {
-            title: '适用地区',
-            align: 'center',
-            dataIndex: 'templateContent',
-            sorter: (a, b) => a.age - b.age
-          },
-          {
-            title: '功能领域',
-            align: 'center',
-            dataIndex: 'templateContent'
-          },
-          {
-            title: '技术领域',
-            align: 'center',
-            dataIndex: 'templateContent'
-          }
-        ],
-        options: [
-          {
-            label: 'all',
-            value: '全部'
-          },
-          {
-            label: 'library',
-            value: '文档库'
-          }, {
-            label: 'questions',
-            value: '知识问题库'
-          },
-          {
-            label: 'contract',
-            value: '文档对比库'
-          }, {
-            label: 'report',
-            value: '法规月报'
-          }
-        ],
-        selectOption: '全部',
-        showList: false,
-        showbox: false,
-        listOption: [
-          {
-            label: 'list',
-            value: '列表',
-            type: 'appstore'
-          },
-          {
-            label: 'graph',
-            value: '段落',
-            type: 'unordered-list'
-          }
-        ],
-        selectList: '列表',
-        conList: [
-          {
-            id: 1,
-            type: '文档库',
-            number: 'GB20999-2019',
-            title: '内饰件阻燃特性',
-            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
-          },
-          {
-            id: 2,
-            type: '文档库',
-            number: 'GB20999-2019',
-            title: '内饰件阻燃特性',
-            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
-          },
-          {
-            id: 3,
-            type: '文档库',
-            number: 'GB20999-2019',
-            title: '内饰件阻燃特性',
-            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
-          },
-          {
-            id: 4,
-            type: '文档库',
-            number: 'GB20999-2019',
-            title: '内饰件阻燃特性',
-            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
-          },
-          {
-            id: 5,
-            type: '文档库',
-            number: 'GB20999-2019',
-            title: '内饰件阻燃特性',
-            content: '区域:东亚  国家/地区:中国  标准性质:--  标准状态:现行  内容摘要:  标准文:  标准类别:--  标准号: 1229导入-中国市场11-中国市场11  标准名称:1229导入-中国市场11  标准英文名称:Englist  发布日期:2021-12-26  实施日期:2021-12-30  新定型车实施日期:2021-12-26  新生产车实施日期:--  注册登记车实施日期:--  在产车实施日期:--  适用认证:公告,  发布部门:  代替标准号:1229导入  被代替标准号:1229导入-中国市场11  采用国际标准号:  采标程度:--  适用车型:M1,M2,M3,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
-          }
-        ],
-        searchOption: [
-          {
-            id: 1,
-            label: 'categary',
-            value: '适用区域',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          },
-          {
-            id: 2,
-            label: 'type',
-            value: '类别',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          },
-          {
-            id: 3,
-            label: 'stand',
-            value: '标准体系',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          },
-          {
-            id: 4,
-            label: 'state',
-            value: '状态',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          },
-          {
-            id: 5,
-            label: 'trial',
-            value: '适用范围',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          },
-          {
-            id: 6,
-            label: 'funArea',
-            value: '功能领域',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          },
-          {
-            id: 7,
-            label: 'techArea',
-            value: '技术领域',
-            option: [
-              {
-                label: 'china',
-                value: '中国'
-              },
-              {
-                label: 'english',
-                value: '英国'
-              }
-            ]
-          }
-        ],
-        searchShow: false,
-        checkboxText: []
-      }
-    },
-    watch: {
-      checkboxText: function(value) {
-        this.conList.forEach(val => {
-          val.checked = false
-        })
-        if (value.length > 0) {
-          this.conList.forEach(val => {
-            value.forEach(res => {
-              if (res === val.id) {
-                val.checked = true
-              }
-            })
-          })
-        }
-        this.conList = [...this.conList]
+        active: this.$t('whole'),
+        showList: false
       }
     },
+
     methods: {
-      checkedClick(item) {
-        if (item.checked) {
-          this.checkboxText = this.checkboxText.filter(res => {
-            return res !== item.id
-          })
-        } else {
-          this.checkboxText.push(item.id)
-        }
-        console.log(this.checkboxText)
-      },
-      selectModel(value) {
-        this.selectOption = value
-        if (value == '文档库') {
-          this.showList = true
-        } else {
-          this.showList = false
-        }
-      },
       callback(key) {
-        console.log(key)
-        this.selectOption = key
-        // if(key =='全部' || key =='知识问题库' || key =='文档对比库' || key =='周报') {
-        //   this.showbox = true
-        // }else{
-        //   this.showbox = false
-        //   this.showList=true
-        // }
-        if (key == '文档库') {
-          this.showList = true
-        } else {
-          this.showList = false
-        }
-        if (key == '段落') {
-          this.searchShow = true
-        } else {
-          this.searchShow = false
-        }
+        this.active = key
       },
       onSearch() {
 
-      },
-      selectListModel(value) {
-        this.selectList = value
-        if (value == '段落') {
-          this.searchShow = true
-        } else {
-          this.searchShow = false
-        }
-      },
-      handleChange() {
-
-      },
-      onChange(date, dateString) {
-        // console.log(date, dateString);
       }
     }
   }
@@ -450,14 +88,6 @@
   .search-center {
     /*background-color: #ffffff;*/
 
-    .null-input {
-      background-color: #F2F4F8;
-    }
-
-    .no-null-input {
-      /*background-color: rgba(255, 255, 255, 0.8);*/
-    }
-
     .search-center-wrap {
       margin: 10px;
 
@@ -473,20 +103,6 @@
             margin-right: 10px;
             line-height: 32px;
           }
-
-          input {
-            min-width: 300px;
-            margin-right: 30px;
-          }
-
-          button {
-            margin-right: 20px;
-          }
-
-          a {
-            width: 140px;
-            line-height: 32px;
-          }
         }
       }
 
@@ -504,202 +120,43 @@
               margin-right: 10px;
               padding: 4px 20px;
             }
-
-            .search-header-item:hover {
-              color: #1890FF;
-              cursor: pointer;
-            }
-
-            .search-header-item-active {
-              background: #1890FF;
-              border-radius: 15px;
-              color: #ffffff;
-            }
-
-            .search-header-item-active:hover {
-              color: #ffffff;
-            }
-          }
-        }
-
-        .search-con-text {
-
-          .search-text-wrap {
-            margin-top: -27px;
-            /*background: #ffffff;*/
-            height: 100%;
-            display: flex;
-            justify-content: flex-start;
-
-            .text-left {
-              width: 358px;
-              padding: 24px 24px 24px 0;
-              box-sizing: border-box;
-
-              .text-left-wrap {
-
-                .text-left-select {
-                  display: flex;
-                  justify-content: space-between;
-                  margin-bottom: 24px;
-                  line-height: 32px;
-
-                  .text-sel {
-                    //span{
-                    //  float: right;
-                    //}
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #000F16;
-                    text-align: right;
-                    margin-right: 14px;
-                    min-width: 83px;
-                  }
-
-                  .text-select {
-                    flex: 1;
-                    //margin-top: 10px;
-                  }
-                }
-
-                .text-left-date {
-                  display: flex;
-                  justify-content: space-between;
-                  line-height: 32px;
-                  margin: 23px 0;
-
-                  span.data-fb {
-                    text-align: right;
-                    margin-right: 14px;
-                    min-width: 84px;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #000F16;
-                  }
-                }
-              }
-            }
-
-            .text-right {
-              width: 100%;
-              position: relative;
-              padding: 26px 0 22px 0;
-              box-sizing: border-box;
-
-              .search-text-title {
-                padding: 0 0 22px 0;
-
-                span {
-                  font-size: 14px;
-                  font-weight: 400;
-                  color: #040B29;
-                }
-
-                .search-header-right {
-                  float: right;
-                  margin-top: -2px;
-
-                  a-icon {
-
-                    border: 1px solid rgba(0, 0, 0, 0.65);
-                    cursor: pointer;
-                    padding: 2px 5px;
-                    border-right: none;
-                  }
-
-                  a-icon:last-child {
-                    border-right: 1px solid rgba(0, 0, 0, 0.65);
-                  }
-
-                  .header-list {
-                    font-size: 20px;
-                    border: 1px solid gray;
-                    border-radius: 3px;
-                    padding: 3px;
-                  }
-
-                  .header-list:hover {
-                    color: #00B3BE;
-                  }
-
-                  .header-list-active {
-                    border: 1px solid #00B3BE;
-                    color: #00B3BE;
-                  }
-
-                  .header-list-active:hover {
-                    color: gray;
-                  }
-
-                }
-              }
-
-              .search-text-list {
-                ul {
-                  padding: 0 0 0 18px;
-                  margin: 0;
-
-                  li {
-                    list-style: none;
-                    //background: #f6f6f6;
-                    //border: 1px solid #000000;
-                    //border-radius: 10px;
-                    /*padding: 10px;*/
-
-                    .text-header {
-                      margin-bottom: 11px;
-
-                      span {
-                        margin-right: 52px;
-                        font-size: 16px;
-                        font-weight: bold;
-                        color: #040B29;
-                      }
-                    }
-
-                    .text-content {
-                      font-size: 14px;
-                      font-weight: 400;
-                      color: #040B29;
-                      opacity: 0.8;
-                    }
-                  }
-                }
-
-                .paginationbox {
-                  position: absolute;
-                  bottom: 0;
-                  right: 0;
-                }
-              }
-
-              .ant-pagination {
-                margin-bottom: 10px;
-              }
-            }
           }
         }
       }
     }
   }
 
-  .checkbox-left {
-    float: left;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
+  .inputSearch {
+    width: 400px;
   }
 
-  .text-text-right {
-    padding: 19px 28px;
-    box-sizing: border-box;
-    margin-left: 38px;
+  .input-group {
+    width: 488px;
   }
-
-  .text-right-right {
-    border-left: 2px solid #E6E7EC;
-    padding: 24px 0 24px 24px !important;
-    box-sizing: border-box;
+</style>
+<style>
+  .inputSearch .ant-input {
+    height: 40px;
+    line-height: 40px;
+  }
+  .input-group .ant-select-selection{
+    width: 88px;
+    height: 40px;
+    line-height: 40px;
+    padding: 0 0 0 6px;
+  }
+  .input-group .ant-select-selection__rendered{
+    height: 40px;
+    line-height: 40px;
+  }
+  .input-group .ant-input{
+    height: 40px;
+    line-height: 40px;
+  }
+  .input-group .ant-select-arrow{
+    right: 15px;
+  }
+  .input-group .ant-select{
+    background: #F6F7FA;
   }
 </style>
\ No newline at end of file