订舱台账查询区域样式修改

src/views/main/BookingLedger/list/index.vue

@@ -33,15 +33,13 @@
                     :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
                   >
                     <a-button type="primary" @click="tableRefresh">查询</a-button>
-                    <a-button style="margin-left: 8px" @click="tableReset">重置</a-button>
-                    <a-button style="margin-left: 8px" @click="tableMoreRefresh">多提单号查询</a-button>
-                    <span class="tab-btn" @click="formSetting"
-                      ><a-icon type="filter" :style="{ fontSize: '14px' }" />
-                    </span>
-                    <a @click="toggleAdvanced">
-                      {{ advanced ? '收起筛选' : '高级筛选' }}
+                    <a-button class="reset" @click="tableReset">重置</a-button>
+                    <a-button class="more-search" @click="tableMoreRefresh">多提单号查询<a-icon type="search" /></a-button>
+                    <span class="tab-btn" @click="formSetting">筛选查询<a-icon type="filter" /></span>
+                    <a class="senior-search" @click="toggleAdvanced">
+                      {{ advanced ? '收起查询' : '更多查询' }}
                       <!-- <a-icon :type="advanced ? 'up' : 'down'" /> -->
-                      <i class="iconfont" :class="advanced ? 'icon-shouqi' : 'icon-zhankai'" style="font-size:12px;"></i>
+                      <i class="iconfont" :class="advanced ? 'icon-shouqi' : 'icon-zhankai'"></i>
                     </a>
                   </span>
                 </a-col>
@@ -50,7 +48,7 @@
           </div>
         </x-card>
         <x-card class="content-table">
-          <div slot="content" class="table-page-search-wrapper">
+          <div slot="content" class="table-page-search-wrapper" :style="{marginTop:'-8px'}"> 
             <vxe-toolbar style="padding-top:0px;">
               <template #tools>
                 <div class="right BookTopButton">
@@ -644,20 +642,68 @@ export default {
   }
 }
 .table-page-search-submitButtons {
-  .tab-btn{
+  text-align: right;
+  .reset{
+    margin-left:8px;
+    margin-right:50px;
+  }
+  .more-search{
+    margin-left:8px;
+    margin-right: 20px;
+    padding-right: 20px;
+    border: none;
+    position: relative;
+  }
+  /*.tab-btn{
     margin-left:8px;
     margin-right: 10px;
     padding:6px 9px;
     padding-top:5px;
     border: 1px solid #c7c7c9;
-    background: #f9fafe;
     border-radius: 3px;
     cursor: pointer;
+  }*/
+  .tab-btn{
+    cursor: pointer;
+    position: relative;
+    i{
+      font-size: 14px;
+      margin-left:8px;
+    }
+  }
+  .tab-btn::before{
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 17px;
+    background: #ccc;
+    top: 2px;
+    left: -20px;
+  }
+  .senior-search{
+    margin-left: 36px;
+    color: rgba(0, 0, 0, 0.65);
+    position: relative;
+    i{
+      margin-left: 3px;
+      font-size: 15px;
+    }
+  }
+  .senior-search::before{
+    content: "";
+      position: absolute;
+      width: 1px;
+      height: 17px;
+      background: #ccc;
+      top: 2px;
+      left: -16px;
+  }
+  .senior-search:hover{
+    color: @primary-color;
+    i{
+      color: @primary-color;
+    }
   }
-
-}
-.table-page-search-submitButtons {
-  text-align: right;
 }
 .ant-btn {
   margin-right: 8px;