From 5865b6a3b5e6e84173e4a069c0df228c397d4820 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Mon, 21 Feb 2022 11:19:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=90=9C=E7=B4=A2=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E7=9A=84=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../documentTools/searchCenter/index.vue      | 596 ++++++++++--------
 1 file changed, 326 insertions(+), 270 deletions(-)

diff --git a/jero-web/src/views/documentTools/searchCenter/index.vue b/jero-web/src/views/documentTools/searchCenter/index.vue
index 77056669f..6d107beaf 100644
--- a/jero-web/src/views/documentTools/searchCenter/index.vue
+++ b/jero-web/src/views/documentTools/searchCenter/index.vue
@@ -4,12 +4,12 @@
       <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>-->
+            <!--            <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" :style="{width:'500px',marginBottom:'15px'}">
+            <a-input-group compact v-if="showList">
               <a-select default-value="Option1">
                 <a-select-option value="Option1">
                   标题
@@ -18,7 +18,6 @@
                   Option2
                 </a-select-option>
               </a-select>
-<!--              <a-input style="width: 70%" allowClear default-value="input content" />-->
               <a-input-search
                 allowClear
                 style="width: 70%"
@@ -29,40 +28,25 @@
             <a-input-search
               v-else
               allowClear
-              :style="{width:'500px',marginBottom:'15px'}"
               placeholder="请输入搜索内容"
               @search="onSearch"
             ></a-input-search>
-<!--            <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>-->
-<!--            <a href="javascript:;">结果中检索</a>-->
+            <!--            <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">
-<!--              <span>搜索模块</span>-->
-              <a-tabs style="width:1276px" default-active-key="1" @change="callback">
+              <a-tabs default-active-key="全部" @change="callback">
                 <a-tab-pane key="全部" tab="全部"></a-tab-pane>
                 <a-tab-pane key="文档库" tab="文档库" force-render>
-
                 </a-tab-pane>
                 <a-tab-pane key="知识问题库" tab="知识问题库"></a-tab-pane>
                 <a-tab-pane key="文档对比库" tab="文档对比库"></a-tab-pane>
                 <a-tab-pane key="周报" tab="周报"></a-tab-pane>
               </a-tabs>
-<!--              <span class="search-header-item" v-for="item in options"-->
-<!--                :class="{'search-header-item-active':selectOption.indexOf(item.value) !== -1 }"-->
-<!--                @click="selectModel(item.value)"-->
-<!--              >{{item.value}}</span>-->
             </div>
-
-<!--            <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>
           <div class="search-con-text">
             <div class="search-text-wrap">
@@ -70,7 +54,8 @@
                 <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 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>
@@ -78,11 +63,11 @@
                   </div>
                   <div class="text-left-date">
                     <span class="data-fb">发布日期</span>
-                    <a-date-picker @change="onChange" />
+                    <a-date-picker @change="onChange"/>
                   </div>
                   <div class="text-left-date">
                     <span class="data-fb">标准实施日期</span>
-                    <a-date-picker @change="onChange" />
+                    <a-date-picker @change="onChange"/>
                   </div>
                 </div>
               </div>
@@ -108,32 +93,39 @@
                     :data-source="tableData"
                     :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                     :columns="columns"
-                    >
+                  >
                     <!-- 字符串超长截取省略号显示-->
                     <span slot="templateContent" slot-scope="text">
-                      <j-ellipsis :value="text" :length="25" />
+                      <j-ellipsis :value="text" :length="25"/>
                     </span>
                   </a-table>
 
-                <ul v-if="!searchShow">
-                  <li v-for="item in conList" :key="item.id">
-                    <a-checkbox @change="onChangecheck"  style="margin-top: 20px;">
-                      <div :class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" style="margin-top: -67px;margin-left: 45px;padding: 24px;">
-                        <div class="text-header">
-                          <span>{{item.type}}</span>
-                          <span>{{item.number}}</span>
-                          <span>{{item.title}}</span>
+                  <ul v-if="!searchShow">
+                    <a-checkbox-group v-model="checkboxText" style="margin-top: 20px;">
+                      <li v-for="item in conList" :key="item.id">
+                        <div style="margin-top: -67px;
+                     margin-bottom: 10px;
+                     padding: 24px 24px 24px 0;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>
-                        <div class="text-content">
-                          {{item.content}}
-                        </div>
-                      </div>
-                    </a-checkbox>
-
-                  </li>
-                </ul>
-                <a-pagination size="small" :total="50" class="paginationbox" :show-total="total => `总共 ${total} 条`" show-size-changer show-quick-jumper />
-              </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>
@@ -146,376 +138,411 @@
 <script>
   export default {
     name: 'searchCenter',
-    data(){
-      return{
-        selectedRowKeys:[],
-        isNullInput:false,
+    data() {
+      return {
+        selectedRowKeys: [],
+        isNullInput: false,
         columns: [
           {
             title: '编号',
-            align: "center",
+            align: 'center',
             dataIndex: 'templateCode'
           },
           {
             title: '标题',
-            align: "center",
+            align: 'center',
             dataIndex: 'templateName'
           },
           {
             title: '文件名称',
-            align: "center",
-            dataIndex: 'templateContent',
+            align: 'center',
+            dataIndex: 'templateContent'
           },
           {
             title: '状态',
-            align: "center",
+            align: 'center',
             dataIndex: 'templateContent',
-            sorter: (a, b) => a.age - b.age,
+            sorter: (a, b) => a.age - b.age
           },
           {
             title: '适用地区',
-            align: "center",
+            align: 'center',
             dataIndex: 'templateContent',
-            sorter: (a, b) => a.age - b.age,
+            sorter: (a, b) => a.age - b.age
           },
           {
             title: '功能领域',
-            align: "center",
-            dataIndex: 'templateContent',
+            align: 'center',
+            dataIndex: 'templateContent'
           },
           {
             title: '技术领域',
-            align: "center",
-            dataIndex: 'templateContent',
-          },
+            align: 'center',
+            dataIndex: 'templateContent'
+          }
         ],
-        options:[
+        options: [
           {
-            label:'all',
-            value:'全部'
+            label: 'all',
+            value: '全部'
           },
           {
-            label:'library',
-            value:'文档库'
-          },{
-            label:'questions',
-            value:'知识问题库'
+            label: 'library',
+            value: '文档库'
+          }, {
+            label: 'questions',
+            value: '知识问题库'
           },
           {
-            label:'contract',
-            value:'文档对比库'
-          },{
-            label:'report',
+            label: 'contract',
+            value: '文档对比库'
+          }, {
+            label: 'report',
             value: '法规月报'
           }
         ],
-        selectOption:'全部',
-        showList:false,
-        showbox:false,
-        listOption:[
+        selectOption: '全部',
+        showList: false,
+        showbox: false,
+        listOption: [
           {
-            label:'list',
-            value:'列表',
-            type:'appstore'
+            label: 'list',
+            value: '列表',
+            type: 'appstore'
           },
           {
-            label:'graph',
-            value:'段落',
-            type:'unordered-list'
+            label: 'graph',
+            value: '段落',
+            type: 'unordered-list'
           }
         ],
-        selectList:'列表',
-        conList:[
+        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: 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: 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: 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: 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,  能源种类:汽油,纯电,  起草单位:  起草人:  关键词:  备注:--  责任部门:--  所属专业领域:--  '
+            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:[
+        searchOption: [
           {
-            id:1,
-            label:'categary',
-            value:'适用区域',
-            option:[
+            id: 1,
+            label: 'categary',
+            value: '适用区域',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           },
           {
-            id:2,
-            label:'type',
-            value:'类别',
-            option:[
+            id: 2,
+            label: 'type',
+            value: '类别',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           },
           {
-            id:3,
-            label:'stand',
-            value:'标准体系',
-            option:[
+            id: 3,
+            label: 'stand',
+            value: '标准体系',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           },
           {
-            id:4,
-            label:'state',
-            value:'状态',
-            option:[
+            id: 4,
+            label: 'state',
+            value: '状态',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           },
           {
-            id:5,
-            label:'trial',
-            value:'适用范围',
-            option:[
+            id: 5,
+            label: 'trial',
+            value: '适用范围',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           },
           {
-            id:6,
-            label:'funArea',
-            value:'功能领域',
-            option:[
+            id: 6,
+            label: 'funArea',
+            value: '功能领域',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           },
           {
-            id:7,
-            label:'techArea',
-            value:'技术领域',
-            option:[
+            id: 7,
+            label: 'techArea',
+            value: '技术领域',
+            option: [
               {
-                label:'china',
-                value:'中国',
+                label: 'china',
+                value: '中国'
               },
               {
-                label:'english',
-                value:'英国'
+                label: 'english',
+                value: '英国'
               }
             ]
           }
         ],
-        searchShow:false,
-
+        searchShow: false,
+        checkboxText: []
       }
     },
-    methods:{
-      onChangecheck(value){
-        console.log(value)
-        console.log(`checked = ${value.target.checked}`)
-        if(`checked = ${value.target.checked}` == 'checked = true'){
-          this.isNullInput = true;
-        }else{
-          this.isNullInput = false;
+    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)
+         }
+        console.log(this.checkboxText)
+      },
+      selectModel(value) {
+        this.selectOption = value
+        if (value == '文档库') {
+          this.showList = true
+        } else {
+          this.showList = false
         }
       },
-      selectModel(value){
-        this.selectOption=value
-        if(value=='文档库'){
-          this.showList=true
-        }else{
-          this.showList=false
-        }
-      },
-      callback(key){
+      callback(key) {
         console.log(key)
-        this.selectOption=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.showList = true
+        } else {
+          this.showList = false
         }
-        if(key=='段落'){
-          this.searchShow=true
-        }else{
-          this.searchShow=false
+        if (key == '段落') {
+          this.searchShow = true
+        } else {
+          this.searchShow = false
         }
       },
-      onSearch(){
+      onSearch() {
 
       },
-      selectListModel(value){
-        this.selectList=value
-        if(value=='段落'){
-          this.searchShow=true
-        }else{
-          this.searchShow=false
+      selectListModel(value) {
+        this.selectList = value
+        if (value == '段落') {
+          this.searchShow = true
+        } else {
+          this.searchShow = false
         }
       },
-      handleChange(){
+      handleChange() {
 
       },
-       onChange(date, dateString) {
+      onChange(date, dateString) {
         // console.log(date, dateString);
-      },
+      }
     }
   }
 </script>
 
 <style lang="less" scoped>
-  .search-center{
-    background-color: #ffffff;
-    .null-input{
+  .search-center {
+    /*background-color: #ffffff;*/
+
+    .null-input {
       background-color: #F2F4F8;
     }
 
-    .no-null-input{
-
-      background-color: rgba(255, 255, 255, 0.8);
+    .no-null-input {
+      /*background-color: rgba(255, 255, 255, 0.8);*/
     }
-    .search-center-wrap{
+
+    .search-center-wrap {
       margin: 10px;
-      .search-detail{
+
+      .search-detail {
         display: flex;
         //justify-content: center;
-        .search-detail-wrap{
-          margin-top: 30px;
-          min-width: 800px;
+        .search-detail-wrap {
           display: flex;
           justify-content: space-between;
-          .search-detail-title{
+
+          .search-detail-title {
             width: 120px;
             margin-right: 10px;
             line-height: 32px;
-
           }
-          input{
+
+          input {
             min-width: 300px;
             margin-right: 30px;
           }
-          button{
+
+          button {
             margin-right: 20px;
           }
-          a{
+
+          a {
             width: 140px;
             line-height: 32px;
           }
         }
       }
-      .search-center-content{
-        .search-con-header{
+
+      .search-center-content {
+        .search-con-header {
+          width: 100%;
           padding: 10px 0;
           display: flex;
           justify-content: space-between;
-          .search-header-left{
-            span{
+
+          .search-header-left {
+            width: 100%;
+
+            span {
               margin-right: 10px;
               padding: 4px 20px;
             }
-            .search-header-item:hover{
+
+            .search-header-item:hover {
               color: #1890FF;
               cursor: pointer;
             }
-            .search-header-item-active{
+
+            .search-header-item-active {
               background: #1890FF;
               border-radius: 15px;
-              color:#ffffff;
+              color: #ffffff;
             }
-            .search-header-item-active:hover{
-              color:#ffffff;
+
+            .search-header-item-active:hover {
+              color: #ffffff;
             }
           }
-
         }
-        .search-con-text{
 
-          .search-text-wrap{
+        .search-con-text {
+
+          .search-text-wrap {
             margin-top: -27px;
-            background: #ffffff;
+            /*background: #ffffff;*/
             height: 100%;
             display: flex;
             justify-content: flex-start;
-            .text-left{
-              //border:1px solid #000;
-              min-width: 290px;
-              .text-left-wrap{
+
+            .text-left {
+              border-right: 1px solid #e8e8e8;
+              min-width: 310px;
+              padding: 0 10px;
+              box-sizing: border-box;
+
+              .text-left-wrap {
                 padding: 5px;
-                .text-left-select{
+
+                .text-left-select {
                   display: flex;
                   justify-content: space-between;
                   margin: 23px 0;
                   line-height: 32px;
-                  .text-sel{
+
+                  .text-sel {
                     //span{
                     //  float: right;
                     //}
@@ -523,17 +550,20 @@
                     margin-right: 27px;
                     min-width: 83px;
                   }
-                  .text-select{
+
+                  .text-select {
                     flex: 1;
                     //margin-top: 10px;
                   }
                 }
-                .text-left-date{
+
+                .text-left-date {
                   display: flex;
                   justify-content: space-between;
                   line-height: 32px;
                   margin: 23px 0;
-                  span.data-fb{
+
+                  span.data-fb {
                     text-align: right;
                     margin-right: 26px;
                     min-width: 84px;
@@ -541,58 +571,68 @@
                 }
               }
             }
-            .text-right{
+
+            .text-right {
               width: 100%;
               position: relative;
-              //border: 1px solid #000;
-              margin-left: 10px;
-              .search-text-title{
+              margin-left: 16px;
+
+              .search-text-title {
                 padding: 16px 5px;
-                .search-header-right{
+
+                .search-header-right {
                   float: right;
                   margin-top: -2px;
-                  a-icon{
 
-                    border: 1px solid rgba(0,0,0,0.65);
+                  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) ;
+
+                  a-icon:last-child {
+                    border-right: 1px solid rgba(0, 0, 0, 0.65);
                   }
-                  .header-list{
+
+                  .header-list {
                     font-size: 20px;
                     border: 1px solid gray;
                     border-radius: 3px;
                     padding: 3px;
                   }
-                  .header-list:hover{
-                    color:#00B3BE;
+
+                  .header-list:hover {
+                    color: #00B3BE;
                   }
-                  .header-list-active{
-                    border:1px solid #00B3BE;
-                    color:#00B3BE;
+
+                  .header-list-active {
+                    border: 1px solid #00B3BE;
+                    color: #00B3BE;
                   }
-                  .header-list-active:hover{
+
+                  .header-list-active:hover {
                     color: gray;
                   }
 
                 }
               }
-              .search-text-list{
+
+              .search-text-list {
                 ul {
-                  padding:10px;
+                  padding: 10px;
                   margin: 0;
-                  li{
+
+                  li {
                     list-style: none;
-                    margin-bottom: 20px;
                     //background: #f6f6f6;
                     //border: 1px solid #000000;
                     //border-radius: 10px;
                     padding: 10px;
-                    .text-header{
-                      span{
+
+                    .text-header {
+                      span {
                         margin-right: 20px;
                         font-size: 18px;
                         font-weight: 600;
@@ -600,13 +640,15 @@
                     }
                   }
                 }
-                .paginationbox{
+
+                .paginationbox {
                   position: absolute;
                   bottom: 0;
                   right: 0;
                 }
               }
-              .ant-pagination{
+
+              .ant-pagination {
                 margin-bottom: 10px;
               }
             }
@@ -615,4 +657,18 @@
       }
     }
   }
+
+  .checkbox-left {
+    float: left;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .text-text-right {
+    padding: 12px 20px;
+    box-sizing: border-box;
+    margin-left: 35px;
+  }
 </style>
\ No newline at end of file