转关运抵页面样式更新

-<template>
-    <el-row>
-        <el-row style="margin-top: 30px">
-            <el-col :span="2">
-                <el-input
-                        v-model="formTrn.customscode"
-                        placeholder="关区"
-                        style="width: 100px"
-                />
-            </el-col>
-            <el-col :span="3">
-                <el-input
-                        v-model="formTrn.username"
-                        placeholder="申报用户"
-                        style="width: 160px"
-                />
-            </el-col>
-            <el-col :span="3">
+<template xmlns:el-col="http://www.w3.org/1999/html">
+    <section>
+<!--        <el-row  class="toolbar">-->
+<!--            <el-col :span="2">-->
 <!--                <el-input-->
-<!--                        v-model="formTrn.trnmode"-->
-<!--                        placeholder="转关方式"-->
-<!--                        style="width: 140px"-->
+<!--                        v-model="formTrn.customscode"-->
+<!--                        placeholder="关区"-->
+<!--                        style="width: 100px"-->
 <!--                />-->
-                <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 160px">
-                    <el-option label="0-非转关运抵模式" value="0"></el-option>
-                    <el-option label="1-南方转关运抵模式" value="1"></el-option>
-                    <el-option label="2-北方转关运抵模式" value="2"></el-option>
-                    <el-option label="3-水运中转运抵模式" value="3"></el-option>
-                </el-select>
-            </el-col>
-            <el-col :span="3">
-                <el-input
-                        v-model="formTrn.unloadcode"
-                        placeholder="卸货地代码"
-                        style="width: 160px"
-                />
-            </el-col>
-            <el-col :span="7">
+<!--            </el-col>-->
+<!--            <el-col :span="3">-->
 <!--                <el-input-->
-<!--                        v-model="formTrn.creattime"-->
-<!--                        placeholder="新增时间段"-->
+<!--                        v-model="formTrn.username"-->
+<!--                        placeholder="申报用户"-->
 <!--                        style="width: 160px"-->
 <!--                />-->
-                <el-date-picker
-                        v-model="formTrn.creattime"
-                        type="daterange"
-                        align="right"
-                        unlink-panels
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        value-format="yyyy-MM-dd"
-                        format="yyyy-MM-dd"
-                        :picker-options="pickerOptions">
-                </el-date-picker>
-            </el-col>
-            <el-col :span="5">
-                <el-button type="primary" icon="el-icon-search" @click="trnList">查询</el-button>
-                <el-button type="success" icon="el-icon-edit" @click="addTrn">新增</el-button>
-                <el-button type="warning" icon="el-icon-edit"  :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>
-            </el-col>
+<!--            </el-col>-->
+<!--            <el-col :span="3">-->
+<!--&lt;!&ndash;                <el-input&ndash;&gt;-->
+<!--&lt;!&ndash;                        v-model="formTrn.trnmode"&ndash;&gt;-->
+<!--&lt;!&ndash;                        placeholder="转关方式"&ndash;&gt;-->
+<!--&lt;!&ndash;                        style="width: 140px"&ndash;&gt;-->
+<!--&lt;!&ndash;                />&ndash;&gt;-->
+<!--                <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 160px">-->
+<!--                    <el-option label="0-非转关运抵模式" value="0"></el-option>-->
+<!--                    <el-option label="1-南方转关运抵模式" value="1"></el-option>-->
+<!--                    <el-option label="2-北方转关运抵模式" value="2"></el-option>-->
+<!--                    <el-option label="3-水运中转运抵模式" value="3"></el-option>-->
+<!--                </el-select>-->
+<!--            </el-col>-->
+<!--            <el-col :span="3">-->
+<!--                <el-input-->
+<!--                        v-model="formTrn.unloadcode"-->
+<!--                        placeholder="卸货地代码"-->
+<!--                        style="width: 160px"-->
+<!--                />-->
+<!--            </el-col>-->
+<!--            <el-col :span="7">-->
+<!--&lt;!&ndash;                <el-input&ndash;&gt;-->
+<!--&lt;!&ndash;                        v-model="formTrn.creattime"&ndash;&gt;-->
+<!--&lt;!&ndash;                        placeholder="新增时间段"&ndash;&gt;-->
+<!--&lt;!&ndash;                        style="width: 160px"&ndash;&gt;-->
+<!--&lt;!&ndash;                />&ndash;&gt;-->
+<!--                <el-date-picker-->
+<!--                        v-model="formTrn.creattime"-->
+<!--                        type="daterange"-->
+<!--                        align="right"-->
+<!--                        unlink-panels-->
+<!--                        range-separator="至"-->
+<!--                        start-placeholder="开始日期"-->
+<!--                        end-placeholder="结束日期"-->
+<!--                        value-format="yyyy-MM-dd"-->
+<!--                        format="yyyy-MM-dd"-->
+<!--                        :picker-options="pickerOptions">-->
+<!--                </el-date-picker>-->
+<!--            </el-col>-->
+<!--            <el-col :span="5">-->
+<!--                <el-button type="primary" icon="el-icon-search" @click="trnList">查询</el-button>-->
+<!--                <el-button type="success" icon="el-icon-edit" @click="addTrn">新增</el-button>-->
+<!--                <el-button type="warning" icon="el-icon-edit"  :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>-->
+<!--            </el-col>-->
+<!--        </el-row>-->
+        <el-row class="toolbar" style="height: 80px">
+            <el-form :inline="true" :model="formTrn">
+                <el-row style="margin-top: -20px">
+                    <el-col :span="6">
+                        <el-form-item>
+                            <el-input
+                                    v-model="formTrn.customscode"
+                                    placeholder="关区" style="width: 210px"
+                            >
+                                <template slot="prepend">关&nbsp;&nbsp;&nbsp;区</template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item>
+                            <el-input
+                                    v-model="formTrn.username"
+                                    placeholder="申报用户" style="width: 210px"
+                            >
+                                <template slot="prepend">申报用户</template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item>
+                            <el-input
+                                    v-model="formTrn.unloadcode"
+                                    placeholder="卸货地代码" style="width: 210px"
+                            >
+                                <template slot="prepend">卸货地代码</template>
+                            </el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6"style="margin-top: -28px">
+                        <el-form-item>
+                            <div style="display: inline-block;background-color: #6F8294;color: white;
+                            border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
+                            border-bottom-left-radius:4px;padding-left: 14px">转关方式</div>
+                            <el-select v-model="formTrn.trnmode" placeholder="请选择转关方式" size="mini" style="width: 136px">
+                                <el-option label="0-非转关运抵模式" value="0"></el-option>
+                                <el-option label="1-南方转关运抵模式" value="1"></el-option>
+                                <el-option label="2-北方转关运抵模式" value="2"></el-option>
+                                <el-option label="3-水运中转运抵模式" value="3"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="10" style="margin-top: -28px">
+                        <el-form-item>
+                            <div style="display: inline-block;background-color: #6F8294;color: white;
+                            border-top-left-radius: 4px;margin-right: -4px;padding-right: 14px;font-size: 12px;
+                            border-bottom-left-radius:4px;padding-left: 14px">新增时间段</div>
+                            <el-date-picker
+                                    v-model="formTrn.creattime"
+                                    type="daterange"
+                                    unlink-panels
+                                    range-separator="-"
+                                    start-placeholder="开始日期"
+                                    end-placeholder="结束日期"
+                                    value-format="yyyy-MM-dd"
+                                    format="yyyy-MM-dd" style="width: 300px"
+                                    :picker-options="pickerOptions">
+                                <template slot="prepend">新增时间段</template>
+                            </el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8" style="margin-top: -28px">
+                        <el-form-item>
+                            <el-button type="primary" icon="el-icon-search" @click="trnList">查&nbsp;&nbsp;询</el-button>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="success" icon="el-icon-edit" @click="addTrn">新&nbsp;&nbsp;增</el-button>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="warning" icon="el-icon-edit"  :loading="batchSendLoading" @click="batchTrn">批量申报</el-button>
+                        </el-form-item>
+                    </el-col>
+<!--                    <el-col :span="6">-->
+<!--                        <el-form-item>-->
+<!--                            <el-date-picker-->
+<!--                                    v-model="formTrn.creattime"-->
+<!--                                    type="daterange"-->
+<!--                                    unlink-panels-->
+<!--                                    range-separator="至"-->
+<!--                                    start-placeholder="开始日期"-->
+<!--                                    end-placeholder="结束日期"-->
+<!--                                    value-format="yyyy-MM-dd"-->
+<!--                                    format="yyyy-MM-dd"-->
+<!--                                    :picker-options="pickerOptions">-->
+<!--                                <template slot="prepend">新增时间段</template>-->
+<!--                            </el-date-picker>-->
+<!--                        </el-form-item>-->
+<!--                    </el-col>-->
+
+                </el-row>
+            </el-form>
         </el-row>
         <el-row>
             <el-table
                     v-loading="listLoading"
                     :data="tableData"
                     border
-                    fit
                     highlight-current-row
-                    style="width: 100%"
                     @selection-change="trnSelectionChange"
+                    height="550px"
+                    tooltip-effect="dark"
+                    style="border-radius: 10px 10px 0px 0px;line-height: 25px"
+                    :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
             >
                 <el-table-column
                         type="selection"
@@ -162,21 +260,21 @@
                 </el-table-column>
                 <el-table-column label="操作" align="center" width="400" fixed="right">
                     <template slot-scope="scope">
-                        <el-button type="warning" size="mini" @click="editTrn(scope.$index,scope.row)">编辑</el-button>
-                        <el-button type="success" size="mini"  @click="declareTrn(scope.row)">
-                            申报
+                        <el-button type="success" size="mini" @click="editTrn(scope.$index,scope.row)">编&nbsp;&nbsp;&nbsp;辑</el-button>
+                        <el-button type="warning" size="mini"  @click="declareTrn(scope.row)">
+                            申&nbsp;&nbsp;&nbsp;报
                         </el-button>
-                        <el-button type="success" size="mini"  @click="statusTrn(scope.row)">
+                        <el-button type="info" size="mini"  @click="statusTrn(scope.row)">
                             修改状态
                         </el-button>
                         <el-button type="danger" size="mini"  :disabled="scope.row.customResponseText && scope.row.customResponseText !== undefined && scope.row.customResponseText.length>0" @click="delTrn(scope.row)">
-                            删除
+                            删&nbsp;&nbsp;&nbsp;除
                         </el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <!--分页区域-->
-            <div style="margin-top: 10px">
+            <div style="margin-top: 10px" class="toolbar">
                 <el-pagination
                         :current-page="formTrn.pageNum"
                         :page-sizes="[10, 50, 100, 500]"
@@ -391,7 +489,7 @@
                 </el-form>
             </el-dialog>
         </el-row>
-    </el-row>
+    </section>
 </template>
 
 <script>
@@ -709,5 +807,13 @@
 </script>
 
 <style >
-
+    .toolbar{
+        height: 60px;
+        background-color: white;
+        line-height: 60px;
+        vertical-align: middle;
+        border-radius: 5px 5px 5px 5px;
+        padding: 15px 0 0 20px;
+        box-shadow: 0px 5px 5px #e5e8eb;
+    }
 </style>