diff --git a/fuintAdmin/src/views/handover/HandoverDetails.vue b/fuintAdmin/src/views/handover/HandoverDetails.vue
index b9bc2c978..8383194a0 100644
--- a/fuintAdmin/src/views/handover/HandoverDetails.vue
+++ b/fuintAdmin/src/views/handover/HandoverDetails.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="app-containers">
-    <div class="tab-box">
-      <div class="box_" v-for="(item,index) in tablist" :key="index">
-        {{item}}
+
+      <div class="tab-box">
+        <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"  :key="index">
+          {{item}}
+        </div>
       </div>
-    </div>
-    <el-card >
+
+    <el-card class="card-box" >
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
         <el-form-item label="" prop="status">
           <el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable>
@@ -23,27 +25,8 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="">
-          <el-select v-model="queryParams.type" style="width: 150px" placeholder="交班状态" clearable>
-            <el-option  label="交班" value="0">交班</el-option>
-            <el-option  label="未交班" value="1">未交班</el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="">
-          <el-date-picker
-            v-model="beginTime"
-            style="width: 160px"
-            type="date"
-            placeholder="交班开始日期">
-          </el-date-picker>
-          至
-          <el-date-picker
-            v-model="endTime"
-            style="width: 160px"
-            type="date"
-            placeholder="交班结束日期">
-          </el-date-picker>
-        </el-form-item>
+
+
 
         <el-form-item class="flex-container" style="float: right">
           <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
@@ -54,48 +37,69 @@
 
     <el-card style="margin-top: 20px;  height: 100vh
 "   class="box-card">
-<!--      <el-table-->
-<!--        ref="tables"-->
-<!--                v-loading="loading"-->
-<!--                :data="dataList"-->
-<!--                :default-sort="defaultSort">-->
-<!--        <el-table-column label="班次员工" align="center" prop="staffName"/>-->
-<!--        <el-table-column label="开始时间" align="center" prop="startTime"/>-->
-<!--        <el-table-column label="结束时间" align="center" prop="endTime" />-->
-<!--        <el-table-column label="交班状态" align="center" prop="status" width="">-->
-<!--          <template slot-scope="scope">-->
-<!--            <el-tag  effect="plain" v-if="scope.row.type =='0'"> 已交班</el-tag>-->
-<!--            <el-tag type="success" effect="plain" v-else-if="scope.row.type =='1'">未交班</el-tag>-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-
-<!--&lt;!&ndash;        <el-table-column label="创建时间" align="center" prop="createTime" width=""/>&ndash;&gt;-->
-<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-<!--          <template slot-scope="scope">-->
-<!--            <el-button-->
-<!--              size="mini"-->
-<!--              type="text"-->
-<!--              @click="handleDetail(scope.row)"-->
-<!--            >交班数据</el-button>-->
-<!--&lt;!&ndash;            <el-button&ndash;&gt;-->
-<!--&lt;!&ndash;              size="mini"&ndash;&gt;-->
-<!--&lt;!&ndash;              type="text"&ndash;&gt;-->
-<!--&lt;!&ndash;              @click="printLocally(scope.row.recordData)"&ndash;&gt;-->
-<!--&lt;!&ndash;            >补打交班单</el-button>&ndash;&gt;-->
-<!--          </template>-->
-<!--        </el-table-column>-->
-<!--      </el-table>-->
-
-
-
-
-      <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.page"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-      />
+     <div class="title_">门店交接单</div>
+      <div class="d-s-b">
+        <div>油站名称</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>油站站长</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>交班方式</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>开始时间</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>结束时间</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>订单金额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>优惠金额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>退款金额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>挂账金额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>会员消费</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>实收金额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>充值金额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>充值赠送</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>会员总余额</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="d-s-b">
+        <div>会员总积分</div>
+        <div>中建锦绣二期站</div>
+      </div>
+      <div class="xxing"></div>
+      <div class=""></div>
     </el-card>
     <el-dialog title="订单详情" :visible.sync="openDetail" width="600px" append-to-body :close-on-click-modal="false">
 <!--      <detail :dataForm = "recordData"></detail>-->
@@ -121,10 +125,11 @@ export default {
 
   data() {
     return {
-      tablist:[
+      tabs:[
         "交接班",
         "交班记录"
       ],
+      tabindex:0,
       openDetail:false,
       dataForm:{},
       dataList:[],
@@ -162,6 +167,9 @@ export default {
     this.getStaffList();
   },
   methods: {
+    getindex(index){
+      this.tabindex = index
+    },
     getList(){
       this.dateRange = []
       if (this.beginTime && this.endTime) {
@@ -248,6 +256,7 @@ export default {
 .app-containers {
   width: 100%;
   background: #f6f8f9;
+
 }
 .tab-box{
   width: 100%;
@@ -276,8 +285,10 @@ export default {
   text-align: left;
 }
 .box-card{
-  width: 100%;
+  width: 640px;
+  margin: 0 auto;
   margin-bottom: 15px;
+
 }
 .font-chinese {
   font-size: 15px;
@@ -305,4 +316,50 @@ export default {
 .el-form--inline .el-form-item {
   margin-right: 44px;
 }
+.tab-box{
+  width: 100%;
+  height: 40px;
+  background: #fff;
+  display: flex;
+  box-sizing: border-box;
+  margin-bottom: 25px;
+
+}
+.tab_{
+  width: 75px;
+  height: 100%;
+  //border-bottom: 2px solid #FF770F;
+  display: flex;
+  font-weight: 500;
+  font-size: 14px;
+  color: #999999;
+  align-items: center;
+  justify-content: center;
+  margin-left: 50px;
+  cursor: pointer;
+}
+.active{
+  border-bottom: 2px solid #FF770F !important;
+  color: #FF770F !important;
+}
+.title_{
+  text-align: center;
+  font-weight: 600;
+  font-size: 16px;
+  color: #333333;
+}
+.d-s-b{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  margin: 20px auto;
+}
+.xxing{
+  width: 100%;
+  border-bottom:  1px solid #EEEEEE;
+}
 </style>